I am trying to create an array of values using a for loop in JavaScript with multiple div id's with successive numbers (i.e. their values) denoting depth. The issue that I am running into is that I can't add the DOM element, i.e. 'text by ship here' successfully to the stage. I added // to show different sections where I am stuck. In particular, I believe I am stuck on the for loop part of the code below //Trying to create a div array here with id's q0, q1, q2, ..., q3 and have used different functions such as for div[0].setAttribute("id", "q0") to be able to connect it with the create.jsDOMElement to add this text to the stage. Any help would be extremely appreciated! My apologies in advance if the code is too long. I have tried to express it succinctly.
<html>
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#gameCanvas {
background-color: lightblue;
}
</style>
<div class="canvasHolder1">
<div id="ship">⛵ </div>
<script>
</script>
<canvas id="gameCanvas" width="300" height="300">Not supported</canvas>
<script type="text/javascript">
var stage = new createjs.Stage("gameCanvas");
//Trying to create a div array here with id's q0, q1, q2, ..., q3
var div = [];
for(i=0; i<=3; i++){
div[i] = document.createElement("type");
div[i].id = `q${i}`;
div[i].innerHTML = 'text by ship here';
document.body.appendChild(div[i]);
}
//Creating an object array of div elements to add to the stage
var objectArray = [];
objectArray[0] = new createjs.DOMElement(document.getElementById("q0"));
var object = new createjs.DOMElement(document.getElementById("ship"));
can = document.getElementById("gameCanvas");
object.x = can.width/3;
object.y = 50;
//Adding First Value to the Stage
objectArray[0].x= can.width/3;
objectArray[0].y = 55;
function startGame() {
stage.addChild(object);
stage.addChild(objectArray[0]);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
drop();
stage.update();
}
}
function drop(){
if ( object.y>=can.height){
object.x += 0;
object.y +=5;
}
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
</html>I have been able to make some progress on this. I am now running into the issue with the numbers needing to appear relative to the pixel 0, 0 on the Canvas/screen now, i.e. see the word relative.
<h1> I have some text here, and I need the numbers to appear relative to the Canvas/screen. </h1>
</br> </br>
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#gameCanvas {
background-color: LightCyan;
}
</style>
<div class="canvasHolder1">
<div id="alien"> |- - - - -| (1.5 mph)</div>
<div id="alien1"> 🎐</div>
<div id="alien2"> 🦑 </div>
<div id="alien3">🦈</div>
<div id="alien4"> 🐬 </div>
<script>
</script>
<canvas id="gameCanvas" width="300" height="300">Not supported</canvas>
<script type="text/javascript">
var stage = new createjs.Stage("gameCanvas");
//Trying to create a div array here with id's q0, q1, q2, ..., q3 k is number of numbers
var k=10;
var div = [];
for(i=0; i<=k; i++){
div[i] = document.createElement('div');
div[i].id = `q${i}`;
div[i].style.position = "relative";
div[i].innerHTML = i;
div[i].style.top = 0;
div[i].style.left = 0;
document.body.appendChild(div[i]);
}
//Creating an object array of div elements to add to the stage
var objectArray = [];
for(j=0; j<=k; j++){
objectArray[j] = new createjs.DOMElement(document.getElementById(`q${j}`));
}
var object = new createjs.DOMElement(document.getElementById("alien"));
var object1 = new createjs.DOMElement(document.getElementById("alien1"));
var object2 = new createjs.DOMElement(document.getElementById("alien2"));
var object3 = new createjs.DOMElement(document.getElementById("alien3"));
var object4 = new createjs.DOMElement(document.getElementById("alien4"));
can = document.getElementById("gameCanvas");
for(l=0; l<=k; l++){
objectArray[l].x= 50;
objectArray[l].y = can.height/10*l;
}
object1.x = can.width/3;
object1.y = 1;
object2.x = can.width/5;
object2.y = 1;
object3.x = can.width/10;
object3.y = 1;
object4.x = can.width/2.5;
object4.y = 1;
object.x = can.width/2;
object.y = 1;
var speedY=5;
var speedX=5;
var speedY1=5;
var speedX1=5;
var speedY2=5;
var speedX2=5;
var speedY3=5;
var speedX3=5;
var speedY4=5;
var speedX4=5;
var line = new createjs.Shape();
stage.addChild(line);
line.graphics.setStrokeStyle(3).beginStroke("rgba(0,0,0,9)");
line.graphics.moveTo(30, 0);
line.graphics.lineTo(35, 0);
line.graphics.lineTo(30, 0);
for( let n=0; n<=k; n++){
var j=5;
line.graphics.lineTo(30, can.height/10*n);
line.graphics.lineTo(30+j, can.height/10*n);
line.graphics.lineTo(30, can.height/10*n);
}
line.graphics.endStroke();
function startGame() {
stage.addChild(object);
stage.addChild(object1);
stage.addChild(object2);
stage.addChild(object3);
stage.addChild(object4);
for(i=0; i<=k; i++){
stage.addChild(objectArray[i]);
}
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
drop();
bottom();
right();
left();
drop1();
bottom1();
right1();
left1();
drop2();
bottom2();
right2();
left2();
drop3();
bottom3();
right3();
left3();
drop4();
bottom4();
right4();
left4();
stage.update();
}
}
function drop(){
if ( object.y>=can.height|| speedY==5|| object.y<=0){
object.x += 0;
object.y +=1;
speedY=5;
}
}
function bottom(){
if (object.y>=can.height|| speedY==-5){ // <----- here
speedY=5;
object.y =0.5;
object.x +=0.5;
document.getElementById("object").textContent = "3k";
}
}
function right(){
if (object.x>=can.width ||speedY==10 ){ // <----- here
speedY=10;
object.y -=1;
object.x -=1;
}
}
function left(){
if (0>=object.x ||speedY==30 ){ // <----- here
speedY=30;
object.y -=0.5;
object.x +=0.5;
}
}
function drop1(){
if ( object1.y>=can.height|| speedY1==5|| object1.y<=0){
object1.x -= 0.5;
object1.y +=2;
speedY1=5;
}
}
function bottom1(){
if (object1.y>=can.height|| speedY1==-5){ // <----- here
speedY1=-5;
object1.y -=2;
object1.x -=0.5;
}
}
function right1(){
if (object1.x>=can.width ||speedY1==10 ){ // <----- here
speedY1=10;
object1.y -=1;
object1.x -=1.5;
}
}
function left1(){
if (0>=object1.x ||speedY1==30 ){ // <----- here
speedY1=30;
object1.y -=1.5;
object1.x +=1;
}
}
function drop2(){
if ( object2.y>=can.height|| speedY2==5|| object2.y<=0){
object2.x += 0;
object2.y +=1;
speedY2=5;
}
}
function bottom2(){
if (object2.y>=can.height|| speedY2==-5){ // <----- here
speedY2=-5;
object2.y -=1;
object2.x +=5;
}
}
function right2(){
if (object2.x>=can.width ||speedY2==10 ){ // <----- here
speedY2=10;
object2.y -=6;
object2.x -=5;
}
}
function left2(){
if (0>=object2.x ||speedY2==30 ){ // <----- here
speedY2=30;
object2.y -=6;
object2.x +=5;
}
}
function drop3(){
if ( object3.y>=can.height|| speedY3==5|| object3.y<=0){
object3.x += 0.5;
object3.y +=0.2;
speedY3=5;
}
}
function bottom3(){
if (object3.y>=can.height|| speedY3==-5){ // <----- here
speedY3=-5;
object3.y -=4;
object3.x -=2;
}
}
function right3(){
if (object3.x>=can.width ||speedY3==10 ){ // <----- here
speedY3=10;
object3.y -=0.5;
object3.x -=0.5;
}
}
function left3(){
if (0>=object3.x ||speedY3==30 ){ // <----- here
speedY3=30;
object3.y -=0.5;
object3.x +=0.5;
}
}
function drop4(){
if ( object4.y>=can.height|| speedY4==5|| object4.y<=0){
object4.x += 0;
object4.y +=0.25;
speedY4=5;
}
}
function bottom4(){
if (object4.y>=can.height|| speedY4==-5){ // <----- here
speedY4=-5;
object4.y -=0.3;
object4.x +=1;
}
}
function right4(){
if (object4.x>=can.width ||speedY4==10 ){ // <----- here
speedY4=10;
object4.y -=0.5;
object4.x -=1;
}
}
function left4(){
if (0>=object4.x ||speedY4==30 ){ // <----- here
speedY4=30;
object4.y -=0.5;
object4.x +=1;
}
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>