Estoy tratando de crear una matriz de valores usando un bucle for en JavaScript con múltiples identificadores de división con números sucesivos (es decir, sus valores) que indican profundidad. El problema con el que me encuentro es que no puedo agregar el elemento DOM, es decir, 'text by ship here' con éxito al escenario. Agregué // para mostrar diferentes secciones donde estoy atascado. En particular, creo que estoy atascado en la parte del ciclo for del siguiente código //Trying to create a div array here with id's q0, q1, q2, ..., q3 y he usado diferentes funciones como para div [0 ].setAttribute("id", "q0") para poder conectarlo con el elemento create.jsDOME para agregar este texto al escenario. ¡Cualquier ayuda sería extremadamente apreciada! Mis disculpas de antemano si el código es demasiado largo. He tratado de expresarlo sucintamente.
<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> He sido capaz de hacer algunos progresos en esto. Ahora me encuentro con el problema de que los números deben aparecer en relación con el píxel 0, 0 en el lienzo/pantalla ahora, es decir, ver la palabra 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>