Question

我想用表格形式标记Rock和Ironman的位置。我该怎么办？

我试图写有关“ document.getElementById（” p_x“）。value = x;”的文章但是如果我写的话那是行不通的。

这是JavaScript代码...

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 100;
var y = 100;
//stone location
var img1 = new Image();
img1.src = "stone.jpg";
var img1len = 10;
//img1
var dx = 2;
var dy = -2;

var px = 200;
var py = 200;
var img2 = new Image();
img2.src = "ironman.jpg";
var img2len = 30;

var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e){
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37){
        leftPressed = true;
    }
    else if(e.keyCode == 38){
        upPressed = true;
    }
    else if(e.keyCode == 40){
        downPressed = true;
    }
}

function keyUpHandler(e){
    if(e.keyCode == 39){
        rightPressed = false;
    }
    else if(e.keyCode == 37){
        leftPressed = false;
    }
    else if(e.keyCode == 38){
        upPressed = false;
    }
    else if(e.keyCode == 40){
        downPressed = false;
    }
}

function drawpic() {
    ctx.beginPath();
    ctx.drawImage(img1, x, y, img1len*2, img1len*2);
    ctx.closePath();
} //stone
function drawplayer(){
    ctx.beginPath();
    ctx.drawImage(img2, px, py, img2len*2, img2len*2);
    ctx.closePath();
}//player

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawpic();
    drawplayer();
    if(y + dy < 0 || y + dy > canvas.height-img1len){
        dy = -dy;
    } 
    if(x + dx <0 || x + dx >canvas.width-img1len){
        dx = -dx;
    }
    if(rightPressed && px < canvas.width-img2len){
        px += 7;
    }
    else if(leftPressed && px > 0){
        px -= 7;
    }
    else if(upPressed && py > 0){
        py -= 7;
    }
    else if(downPressed && py < canvas.height-img2len){
        py += 7;
    }
    x += dx;
    y += dy; 

    if(x > px && x < px+img2len && y > py && y < py+img2len){
        alert("Game Over!");
        doucment.location.reload();
    }        
}
setInterval(draw, 10);

这是表格的一部分，

<form>
    You can move ironman with arrow keys

    Rock : (x, y) = (input id = "p_x" 
    ironman : (x, y) = (input id = "p_px" 
</form>

Answer 1

值属性（或DOM对象属性）用于输入标签。

通过将value属性设置为非输入标签，您将无法在元素中显示任何内容。

要使用JavaScript在DOM中显示文本，请使用innerText。我会告诉你如何。

您需要在某个位置写位置，在HTML中必须有一个要在其中输出结果的元素。

您可以尝试在画布后添加它：

<canvas id="myCanvas"></canvas>
<div id="debug"></div><!-- Debug div where positions will be shown -->

然后您需要做的是在draw()函数上调用一个函数，因为它将在每次位置更改时执行：

function draw(){
   debugElementsPosition();
   ...otherCode
}

最好的方法是传递一个对象数组，其中包含要调试的每个元素的信息：

debugElementsPosition({
    name: "Stone",
    x: x,
    y: y
}, {
    name: "Ironman",
    x: px,
    y: py
});

您的debugElementsPosition()函数如下所示：

function debugElementsPosition(elements) {
    let debug = document.getElementById("debug"),
        output = "";
    elements.forEach(e => {
        output += `${e.name} position: x:${e.x} & y:${e.y}\n`;
    });
    debug.innerText = output;
}

这应该解决您的问题。这是您的代码的样子：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 100;
var y = 100;
//stone location
var img1 = new Image();
img1.src = "http://www.placehold.it/20x20";
var img1len = 10;
//img1
var dx = 2;
var dy = -2;

var px = 200;
var py = 200;
var img2 = new Image();
img2.src = "http://www.placehold.it/60x60";
var img2len = 30;

var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = true;
  } else if (e.keyCode == 37) {
    leftPressed = true;
  } else if (e.keyCode == 38) {
    upPressed = true;
  } else if (e.keyCode == 40) {
    downPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = false;
  } else if (e.keyCode == 37) {
    leftPressed = false;
  } else if (e.keyCode == 38) {
    upPressed = false;
  } else if (e.keyCode == 40) {
    downPressed = false;
  }
}

function drawpic() {
  ctx.beginPath();
  ctx.drawImage(img1, x, y, img1len * 2, img1len * 2);
  ctx.closePath();
} //stone
function drawplayer() {
  ctx.beginPath();
  ctx.drawImage(img2, px, py, img2len * 2, img2len * 2);
  ctx.closePath();
} //player

function debugElementsPosition(elements) {
  let debug = document.getElementById("debug"),
    output = "";

  elements.forEach(e => {
    output += `${e.name} position: x:${e.x} & y:${e.y}\n`;
  });
  debug.innerText = output;
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  debugElementsPosition([{
      name: "Stone",
      x: x,
      y: y
    },
    {
      name: "Ironman",
      x: px,
      y: py
    }
  ]);
  drawpic();
  drawplayer();
  if (y + dy < 0 || y + dy > canvas.height - img1len) {
    dy = -dy;
  }
  if (x + dx < 0 || x + dx > canvas.width - img1len) {
    dx = -dx;
  }
  if (rightPressed && px < canvas.width - img2len) {
    px += 7;
  } else if (leftPressed && px > 0) {
    px -= 7;
  } else if (upPressed && py > 0) {
    py -= 7;
  } else if (downPressed && py < canvas.height - img2len) {
    py += 7;
  }
  x += dx;
  y += dy;

  if (x > px && x < px + img2len && y > py && y < py + img2len) {
    alert("Game Over!");
    doucment.location.reload();
  }
}
setInterval(draw, 10);

<canvas id="myCanvas"></canvas>
<div id="debug"></div>

注意： 我用占位符替换了您的图片，以正确模拟行为。无需保留这些图像即可使代码正常工作。

如何打印图像位置？

1 个答案:

值属性（或DOM对象属性）用于输入标签。