1
Canvas要素を使用して基本的なHTMLゲームを作成しようとしていますが、問題があります。残念ながら、私は自分のコードにどこにエラーがあるのかわからないので、私は下で作業しているドキュメントの全体を投稿しました。基本的なHTMLキャンバスゲームでキャンバスを表示する際の問題
問題：HTML文書を実行すると、キャンバスが表示されません。
このコードは、で入手可能なキャンバスを使用するためのw3schoolsからのMovementチュートリアルに基づいていますが、変数名を変更するときには何かを壊してしまったに違いありません。私は何が欠けているのか分からない。
<!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>