Warum ist das so?
Warum ist bei diesem code der Screen weiß?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
</head>
<body>
<canvas id="canvas" width="480" height="480"></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let rows = 20;
let cols = 20;
let snake = [{
x: 19,
y:3
}];
let food = {
x: 4,
y: 5
};
let cellWidht = canvas.width / cols
let cellHeigth = canvas.height / rows
let direction = 'LEFT';
let foodCollected = false;
placeFood();
setInterval(gameLoop, 200);
document.addEventListener('keydown', keyDown);
draw();
function draw() {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white'
snake.forEach(part => add(part.x, part.y));
ctx.fillStyle = 'yellow'
add(food.x, food.y); //food
requestAnimationFrame(draw);
}
function testGameOver() {
//1. Schlange läuft gegen die Wand
if (snake[0].x < 0 ||
snake[0].x > cols - 1 ||
snake[0].y < 0 ||
snake[0].y > rows - 1
) {
placeFood();
snake = [{
x: 19,
y:3
}];
direction = 'LEFT';
}
function placeFood(){
let randomX = Math.floor(Math.random() * cols);
let randomY = Math.floor(Math.random() * rows);
food = {x: randomX, y: randomY};
};
}
function add(x, y) {
ctx.fillRect(x * cellWidht, y * cellHeigth, cellWidht - 1, cellHeigth - 1);
}
function shiftsnake() {
for (let i = snake.length - 1; i > 0; i--) { const part = snake[i];
const lastPart = snake[i - 1];
part.x = lastPart.x;
part.y = lastPart.y;
}
}
function gameLoop() {
testGameOver();
if(foodCollected) {
snake = [{x: snake[0].x, y: snake[0].y}, ...snake];
foodCollected = false;
}
shiftsnake();
if (direction == 'LEFT') {
snake[0].x--;
}
if (direction == 'RIGHT') {
snake[0].x++;
}
if (direction == 'UP') {
snake[0].y--;
}
if (direction == 'DOWN') {
snake[0].y++;
}
if(snake[0].x ==food.x
&& snake[0].y == food.y) {
foodCollected = true;
placeFood();
}
}
function keyDown(e) {
if (e.keyCode == 37) { //Richtung Links
direction = 'LEFT';
}
if (e.keyCode == 38) {
direction = 'UP';
}
if (e.keyCode == 39) {
direction = 'RIGHT';
}
if (e.keyCode == 40) {
direction = 'DOWN';
}
}
</script>
</body>
</html>
2 Antworten
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
programmieren, JavaScript, Programmieren & Softwareentwicklung
Die Funktion placeFood muss außerhalb von testGameOver definiert werden, andernfalls ist sie im äußeren Scope unbekannt.
Der weiße Bildschirm könnte verschiedene Gründe haben. Hier sind einige Dinge, die du überprüfen solltest:
- JavaScript-Fehler: Wenn im JavaScript-Code Fehler vorhanden sind, kann dies dazu führen, dass die Ausführung des Codes fehlschlägt, was zu einem leeren Bildschirm führt. Überprüfe die Browser-Konsole auf etwaige Fehlermeldungen. In deinem Code sind einige Syntaxfehler, die behoben werden müssen. Zum Beispiel ist die Funktion
testGameOver()- nicht richtig geschlossen.
- Fehlende Rendervorgänge: Derzeit fehlt in deinem Code eine explizite Methode zum Zeichnen des Spiels. Du hast die Funktion
draw()- definiert, aber sie wird nicht aufgerufen. Du könntest
draw()- in die
gameLoop()- -Funktion einfügen, um das Spiel zu zeichnen.
- Event-Listener: Stelle sicher, dass der Event-Listener, der auf Tastatureingaben reagiert (
document.addEventListener('keydown', keyDown);- ), ordnungsgemäß funktioniert. Überprüfe, ob die Tastenereignisse erkannt werden und die Richtung entsprechend aktualisiert wird.
- HTML-Struktur: Vergewissere dich, dass die HTML-Struktur korrekt ist. Das HTML-Dokument, das du gepostet hast, sieht in Ordnung aus, aber es ist wichtig sicherzustellen, dass es keine anderen Fehler im HTML-Code gibt, die das Rendering beeinträchtigen könnten.
Sobald du diese Aspekte überprüft und gegebenenfalls korrigiert hast, sollte dein Spiel ordnungsgemäß gerendert werden.
regex9
15.10.2023, 22:53
@Irgendjemand783
Das ist schon klar, aber keine Rechtfertigung für falsche Fakten. 😉
Die ersten beiden Aussagen sind falsch, der Key Event Listener hat nichts mit dem Rendering zu tun und welche anderen HTML-Fehler das Rendering beeinträchtigen können sollten, wäre mal interessant.