Canvas 使用键盘输入移动但图像不

Question

所以我从添加 canavs 的基础开始，css，javascript。图像应该在 html 还是 javascript 中？接下来我为 canvas 添加了背景色。然后我在 javascript 中添加 canvas 属性以及 keyCodes。我用 window.onload 得到了图像。之后我注意到 canvas 在移动，但图像没有移动。

var canvas = document.getElementById("app");
canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

var keys = [];

window.addEventListener("keydown", function(e){
 keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
 delete keys[e.keyCode];
}, false);

function game(){
 window.onload;
 update();
 render();
}

function update(){
 if(keys[38]) img.y--;
 if(keys[40]) img.y++;
 if(keys[37]) img.x--;
 if(keys[39]) img.x++;
}
function render(){
 ctx.fillRect(img.x, img.y);
}

window.onload = function() {
    var c=document.getElementById("app");
    var ctx=c.getContext("2d");
    var img=document.getElementById("chio");
    ctx.drawImage(img,10,10);
};

setInterval(function(){
    game();
}, 1000/30)


// > note: window.onload shows the images

#app{
background-color:#33ff00
}

<html>
<head>
<link href="app.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<canvas id="app" width=300 height=640></canvas>
<img id="chio" src="chio.png"/>
<script src="app.js"></script>
</body>
</html>

我现在迷路了，请帮助我

Answer 1

您提供的代码存在许多问题，最有问题的是您可能在文档加载之前试图访问不同位置的 DOM 元素。这些都应该附加到您已经在使用的 window.onload 事件。

另一个问题是您在本地声明变量并初始化它们，但在代码的其他地方您将它们视为全局变量并尝试访问它们 - 产生更多错误。这些变量应移至全局范围。

您还试图修改原始 <img> 元素上的某些 x/y 属性以跟踪其在 canvas 上的位置 - 这不会起作用。我会将位置跟踪移动到具有 x/y 属性的 JavaScript 对象中。

最后，您没有调用正确的代码将图像绘制到 render() 函数中的 canvas。我建议清除 canvas 并使用 drawImage().

重新绘制图像

将所有这些建议付诸实践，您的 JavaScript 会变成：

// Global variables for later use
var keys = [];
var canvas;
var ctx;
var img;

// Object to track image position on canvas
var imgPos = {
    x: 0,
    y: 0
}

window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

function game(){
    window.onload;
    update();
    render();
}

function update(){
    if(keys[38]) imgPos.y--;
    if(keys[40]) imgPos.y++;
    if(keys[37]) imgPos.x--;
    if(keys[39]) imgPos.x++;
}
function render(){
    // Clear canvas and redraw image at new location
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img,imgPos.x,imgPos.y);
}

window.onload = function() {
    // Initialize canvas
    canvas = document.getElementById("app");
    canvas.width  = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    canvas.style.width = canvas.width + "px";
    canvas.style.height = canvas.height + "px";

    // Draw image to canvas
    ctx=canvas.getContext("2d");
    img=document.getElementById("chio");
    ctx.drawImage(img,imgPos.x,imgPos.y);

    // Start game loop
    setInterval(function(){
        game();
    }, 1000/30);
};

这里有一个JSFiddle来演示。在我做出重大更改的任何地方，我都对代码进行了注释，以帮助您更好地理解它。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 2

我在 "app.js" 中做了一些更正，但我不知道你到底想要什么。如果你想移动图像，这是一种方法。

var canvas = document.getElementById("app");
canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

var keys = [];
var ctx;
var img;
var position = {x:0,y:0};
window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function(e){
    keys[e.keyCode] = false;
}, false);

function game(){
    update();
    render();
}

function update(){
    if(keys[38]) position.y--;
    if(keys[40]) position.y++;
    if(keys[37]) position.x--;
    if(keys[39]) position.x++;
}
function render(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img,position.x,position.y);
}

window.onload = function() {
    var c=document.getElementById("app");
    ctx=c.getContext("2d");
    img=document.getElementById("chio");
};

setInterval(function(){
    game();
}, 1000/30);


// > note: window.onload shows the images

Canvas 使用键盘输入移动但图像不

Canvas moves using keyboard input but image does not

html

javascript

css

html5-canvas