was ist hier falsch gelaufen?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rocket vs Aliens</title>
<style>
canvas {
background-color: gray;
}
</style>
<script>
let KEY_SPACE = false;
let KEY_UP = false;
let KEY_DOWN = false;
let canvas;
let ctx;
let backgroundImage = new Image();
let rocket = {
x: 100,
y: 200,
width: 200,
height: 80,
src: 'img/rocket.png'
};
let spaceship = {
x: 500,
y: 200,
width: 100,
height: 40,
src: 'img/spaceship.png'
};
document.onkeydown = function(e) {
if (e.keyCode ==32) { // Leertaste gedrückt
KEY_SPACE = true;
}
if (e.keyCode ==32) { // unten gedrückt
KEY_SPACE = true;
}
if (e.keyCode ==38) { // Oben gedrückt
KEY_UP = true;
}
}
document.onkeyup = function(e) {
if (e.keyCode ==32) { // Leertaste losgelassen
KEY_SPACE = false;
}
if (e.keyCode ==38) { // oben losgelassen
KEY_UP = false;
}
if (e.keyCode ==40) { // unten losgelassen
KEY_DOWN = false;
}
}
function startGame () {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
loadImages();
draw();
// calculate
}
function loadImages() {
backgroundImage.src = 'img/background.png';
rocket.img = new Image();
rocket.img.src = rocket.src;
spaceship.img = new Image();
spaceship.img.src = spaceship.src;
}
function draw() {
ctx.drawImage(backgroundImage, 0, 0);
ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
requestAnimationFrame(draw);
}
</script>
</head>
<body onload="startGame()">
<canvas id="canvas" width="720" height="480"></canvas>
</body>
</html>
HTML,
Webseite,
CSS,
JavaScript,
HTML5,
Programmiersprache,
Webentwicklung
