Question

我是使用画布的HTML 5动画的新手，我只是想知道这段代码有什么问题。我使用的是最新版本的Google Chrome。提前谢谢。

请注意，这是我第一次使用JavaScript和HTML5进行游戏制作，所以我们非常感谢任何提示。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d"); 
canvas.width = 1000;
canvas.height = 600;
document.body.appendChild(canvas);

var player = {
    speed: 256,
    x: canvas.width/2,
    y: canvas.height/2,
};



var keysDown = {};
var move;

addEventListener("keydown",function (e) {keysDown[e.keyCode] = true;}, false);
addEventListener("keyup",function (e) {delete keysDown[e.keyDown];},false);

var update = function(modifier) {
    move = player.speed*modifier;
    if (38 in keysDown) player.y -= move;
    if (40 in keysDown) player.y += move;
    if (37 in keysDown) player.x -= move;
    if (39 in keysDown) player.x += move;
};

var render = function () {
    ctx.fillRect(player.x,player.y,20,20);
};

var main = function(){
    var now = Date.now();
    var delta = now - then;

    update(delta / 1000);
    then = now;
};

var then = Date.now();
setInterval(main,16);

修改
改变了

player = {
    speed: 256,
    x: canvas.width/2
    y: canvas.height/2
};

并添加了逗号。

修改
已将setInterval(main,1)更改为setInterval(main,16)。

修改
发现错误但我不确定为什么这是一个错误。

在我使用图像而不是fillRect()的另一个画布实验中，我将图像的所有渲染都更改为fillRect，并且脚本无效。

任何人都能解释一下吗？

Answer 1

var player = {
    speed: 256,
    x: canvas.width/2,
    y: canvas.height/2
};

Answer 2

您基本上使用1 ms的间隔来阻止浏览器。

尝试更现实的事情：

setInterval(main, 16);

或者考虑使用requestAnimationFrame代替（推荐）。

fillRect（）导致我的脚本失败

2 个答案: