1
我正在嘗試使用畫布元素創建基本HTML遊戲，但我遇到了問題。不幸的是，我不知道錯誤在我的代碼中，所以我已經發布了我正在處理的整個文檔。無法在基本HTML畫布遊戲中顯示畫布
我的問題：當我運行HTML文檔時畫布不顯示。
這段代碼基於w3schools的移動教程（基本上是使用Canvas），可在處獲得，但是在查找變量名時，我必須破壞某些東西，因爲看了幾個小時後我無法弄清楚我錯過了什麼。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload = "initial()">
<script>
var playerOne;
function initial() {
playerOne = new canvasObject(30, 30, "red", 225, 225);
gameArea.start();
}
var gameArea = {
canvas : document.createElement("canvas");
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
e.preventDefault();
gameArea.keys = (gameArea.keys || []);
gameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
gameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
stop : function() {
clearInterval(this.interval);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function canvasObject(width, height, color, x, y, type)
{
\t this.type = type;
this.width = width;
this.height = height;
this.speed = 0;
this.angle = 0;
this.moveAngle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = gameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width/-2, this.height/-2, this.width, this.height);
ctx.restore();
}
this.newPos = function() {
\t this.angle += this.moveAngle * Math.PI/180;
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}
function updateGameArea() {
gameArea.clear();
playerOne.moveAngle = 0;
playerOne.speed = 0;
if (gameArea.keys && gameArea.keys[37]) {
\t playerOne.moveAngle = -1;
}
if (gameArea.keys && gameArea.keys[39]) {
\t playerOne.moveAngle = 1;
\t
}
if (gameArea.keys && gameArea.keys[38]) {
\t playerOne.speed= 1;
\t
}
if (gameArea.keys && gameArea.keys[40]) {
\t playerOne.speed= -1;
\t
}
playerOne.newPos();
playerOne.update();
}
</script>
</body>
</html>