个人中心
gpt4 book ai didi

javascript - HTML DOM id 数组属性和添加到舞台 JavaScript(数组)

转载 作者：行者123 更新时间：2023-12-05 04:35:36 26 4
gpt4 key购买 nike

我正在尝试使用 JavaScript 中的 for 循环创建一个值数组，其中包含多个 div id，连续数字(即它们的值)表示深度。我遇到的问题是我无法将 DOM 元素(即“此处发送的文本”)成功添加到舞台上。我添加了 // 来显示我被卡住的不同部分。特别是，我相信我被困在下面代码的 for 循环部分 //Trying to create a div array here with id's q0, q1, q2, ..., q3 并且使用了不同的诸如 div[0].setAttribute("id", "q0") 之类的函数能够将它与 create.jsDOMElement 连接起来，以将此文本添加到舞台上。任何帮助将不胜感激!如果代码太长，我提前道歉。我尽量简洁地表达出来。

<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>

我已经能够在这方面取得一些进展。我现在遇到了数字需要相对于 Canvas /屏幕上的像素 0、0 出现的问题，即看到单词 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>

最佳答案

这对你有用吗？

<html>
    <script type="text/javascript" src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body { margin: 0; }
        #gameCanvas { background-color: lightblue; }
        .canvasHolder1 { position: relative; }
        .ui { position: absolute; top: 0; left: 0;  pointer-events: none;}
        .ui-element { position: relative; display: inline-block; margin-left: 4px; }
    </style>
    <body onload="startGame();">
        <div class="canvasHolder1">
            <div id="ship">⛵ </div>
            <div class="ui"></div>
            <canvas id="gameCanvas" width="300" height="300">Not supported</canvas>
        </div>

        <script type="text/javascript">
            const stage = new createjs.Stage("gameCanvas");
            const ship = document.getElementById("ship");
            const ui = document.querySelector(".ui");
            const canvas = document.getElementById("gameCanvas");
            const canvasHolder = document.querySelector('.canvasHolder1');

            var divs = [];
            const texts = [ 'My Ship', 'Pos X', 'Pos Y', 'Other' ];

            for (i = 0; i <= 3; i++) {
                const newDiv = document.createElement("type");
                newDiv.id = `q${i}`;
                newDiv.className = `ui-element`;
                newDiv.innerHTML = texts[i];
                ui.appendChild(newDiv);
                divs.push(newDiv);
            }


            const textXPosition = divs[1];
            const textYPosition = divs[2];
            const textProgress = divs[3];

            canvas.addEventListener('mousemove', (evt) => {
                textXPosition.innerHTML = evt.pageX;
                textYPosition.innerHTML = evt.pageY;
            });


            var objectArray = [];
            objectArray.push(new createjs.DOMElement(divs[0]));
            const myFirstText = objectArray[0];
            const myFirstTextWidth = parseInt(myFirstText.htmlElement.offsetWidth);

            var shipJS = new createjs.DOMElement(ship);

            function applyPosition(posObject) {
                shipJS.x = posObject.x;
                shipJS.y = posObject.y;

                myFirstText.x = posObject.x - (myFirstTextWidth / 2);
                myFirstText.y = posObject.y - 15;
            }

            const shipPosition = {
                x: canvas.width / 3,
                y: 50
            };
            applyPosition(shipPosition);


            let looperCount = -1;
            const step = 0.02;
            const distance = canvas.width / 3;

            function handleTick(event) {
                if (looperCount >= 1) { looperCount = -1; }
                looperCount += step;
                const progress = Math.PI * looperCount;
                textProgress.innerHTML = parseInt(((looperCount + 1) / 2) * 100 )+'%';

                applyPosition({
                    x: (Math.cos(progress) * distance) + (distance * 1.5),
                    y: (Math.sin(progress) * distance) + (distance * 1.5)
                });
                stage.update();
            }


            function startGame() {
                stage.addChild(shipJS);
                stage.addChild(myFirstText);

                createjs.Ticker.addEventListener("tick", handleTick);

            }
        </script>
    </body>
</html>

关于javascript - HTML DOM id 数组属性和添加到舞台 JavaScript(数组)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71010771/

26 4 0
文章推荐： javascript - 如何在 React 中查找数组中的项目
文章推荐： css - 如何根据 rshiny 中的用户输入切换外部 css 文件？
文章推荐： git - git-checkout 是否会在发生 fatal error 时保留 'half-done' 工作树更改？
文章推荐： c++ - 如何在 C++ 中完成行后删除间距？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com