我正在尝试使用 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/