1
Ich versuche, ein einfaches HTML-Spiel mit dem Canvas-Element zu erstellen, aber ich habe Probleme damit. Leider weiß ich nicht, wo der Fehler in meinem Code ist, also habe ich das gesamte Dokument, an dem ich gerade arbeite, gepostet.Probleme beim Anzeigen von Canvas in Basic HTML Canvas-Spiel
Mein Problem: Die Zeichenfläche wird nicht angezeigt, wenn ich das HTML-Dokument ausführen.
des Dieser Code basiert weg von (wie in es ist so ziemlich) die Bewegung Tutorial von w3schools für die Leinwand mit, erhältlich bei https://www.w3schools.com/graphics/tryit.asp?filename=trygame_movement_keyboard, aber als Variablennamen chaing must've ich etwas gebrochen, denn nach stundenlang Blick auf diese Ich kann nicht herausfinden, was ich vermisse.
<!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>