09.06.2022, 07:29
Hi, kann mir jemand helfen? Habe nach einem Tutorial mein erstes Game angefangen und irgendwas stimmt nicht mit den verknüpften Bildern. Im Untersuchen-Feld werden mir keine Fehler mehr angezeigt. Weiß jemand der Erfahreneren hier, woran das liegen kann?
Danke schonmal
Danke schonmal
Code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Galaxy War</title>
<style>
canvas {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
<script>
let KEY_SPACE = false;// 32
let KEY_UP = false;// 38
let KEY_DOWN = false;// 40
let canvas;
let ctx;
let backgroundImage = new Image();
let rocket = {
x: 100,
y: 200,
width: 200,
height: 80,
src: 'img/rocket.png'
}
let ufo = {
x: 500,
y: 200,
width: 100,
height: 40,
src: 'img/ufo.png'
}
document.onkeydown = function(e) {
if (e.keyCode == 32) // Leertaste gedrückt
KEY_SPACE = true;
if (e.keyCode == 38) // Nach oben gedrückt
KEY_UP = true;
if (e.keyCode == 40) // Nach unten gedrückt
KEY_DOWN = true;
}
document.onkeyup = function(e) {
console.log(e.keycode);
if (e.keycode == 32) // Leertaste losgelassen
KEY_SPACE = false;
if (e.keycode == 38) // Nach oben losgelassen
KEY_UP = false;
if (e.keycode == 40) // Nach unten losgelassen
KEY_DOWN = false;
}
function startGame(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
loadImages();
update();
draw();
//.calculate
}
function loadImages(){
backgroundImage.src = 'img/background.png';
rocket.img = new Image();
rocket.img.scr = rocket.scr;
ufo.img = new Image();
ufo.img.scr = ufo.scr;
}
function draw(){
ctx.drawImage(backgroundImage, 0, 0);
ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.width, rocket.height);
requestAnimationFrame(draw);
}
</script>
</head>
<body onload='startGame'()>
<canvas id='canvas' width='720' height='480'></canvas>
</body>
</html>