fillRect（）導致我的腳本失敗

我是使用畫布創建HTML 5動畫的新手，我只是想知道這段代碼有什麼問題。我正在使用最新版本的Google Chrome。提前致謝。fillRect（）導致我的腳本失敗

請注意，這是我第一次使用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，並且腳本無法工作。

任何人都可以解釋這一點嗎？

來源

2014-02-11 user2921024

我會在未來看看d3。這是最好的JavaScript圖形引擎（IMO）。 – royhowie

*「我只是想知道這段代碼有什麼問題」*這就是*你*應該告訴我們*。你期望它做什麼以及它做了什麼？瀏覽器的JavaScript錯誤控制檯中是否有錯誤消息？ – Philipp

它應該顯示一個矩形，只要按下其中一個箭頭鍵就會移動，而只是顯示一個空白屏幕。我不確定如何檢查錯誤消息。 – user2921024

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

來源

2014-02-11 03:46:54 XurajB

這有幫助，但代碼仍然無法運行。 – user2921024

你基本上是通過使用1毫秒的間隔阻塞瀏覽器。（推薦）

setInterval(main, 16);

或考慮使用替代：

嘗試一些更切合實際。

來源

2014-02-11 04:13:38 K3N

好的。我改變了這一點，但在瀏覽器中仍然看不到任何東西。 – user2921024

@ user2921024請提供一個小提琴，所以我們可以深入探討這一點，因爲它有點不清楚究竟是什麼（可能在代碼的其他部分） – K3N

代碼應該是一個框，當箭頭鍵移動被按下。 A代碼的其他部分，這是我除了HTML以外的**代碼**。 – user2921024

fillRect（）導致我的腳本失敗

回答

相關問題