JavaScript Duck Hunt Bug

-2

Ich versuche, ein Entenjagdspiel mit JavaScript zu erstellen. Der folgende Code sollte Entenbilder von der linken Seite auf die rechte Seite der Zeichenfläche verschieben. Es scheint keinen Syntaxfehler zu geben, aber nichts passiert, wenn ich den Code teste. Ich würde jede Hilfe schätzen.JavaScript Duck Hunt Bug

var canvas = document.createElement("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var time = Math.round(Math.random()*100); 
 
var ducs = []; 
 
canvas.width = 500; 
 
canvas.height = 500; 
 
document.body.appendChild(canvas); 
 

 

 
// Background image 
 
var bgReady = false; 
 
var bgImage = new Image(); 
 
bgImage.onload = function() { 
 
\t bgReady = true; 
 
}; 
 
bgImage.src = "images/DHbackground.jpg"; 
 

 
// Duck image 
 
var duckReady = false; 
 
var duckImage = new Image(); 
 
duckImage.onload = function() { 
 
\t duckReady = true; 
 
}; 
 
duckImage.src = "images/duck.png"; 
 

 
// Handle mouse and keyboard controls 
 
var mouseDown = { 
 
\t x: 0, 
 
\t y: 0, 
 
}; 
 

 
function getClickPosition(e) { 
 
    mouseDown.x = e.clientX; 
 
    mouseDown.y = e.clientY; 
 
}; 
 

 
canvas.addEventListener("click", getClickPosition, false); 
 

 
var reset = function(){ 
 
// To do: resets the game 
 
    }; 
 

 
// Draw everything 
 
var render = function() { 
 
\t if (bgReady) { 
 
\t \t ctx.drawImage(bgImage, 0, 0); 
 
\t } 
 
\t time = time-1; 
 
\t if (time < 0){ 
 
\t \t var duck = { 
 
    \t \t cur_X: 0, 
 
    \t \t cur_Y: Math.round(Math.random()*500), 
 
    \t \t final_X: 500, 
 
    \t \t final_Y: Math.round(Math.random()*500), 
 
\t \t }; 
 
\t \t time = Math.round(Math.random()*100); 
 
\t \t ducs.push(duck); 
 
\t \t for (var i = 0; i < ducs.Lenght; i++){ 
 
\t \t \t ctx.drawImage(duckImage, ducs[i].cur_X, ducs[i].cur_Y); 
 
\t \t \t console.log(ducs[i].cur_X); 
 
\t \t } 
 
\t } 
 

 
\t // Score 
 
\t ctx.fillStyle = "rgb(250, 250, 250)"; 
 
\t ctx.font = "24px Helvetica"; 
 
\t ctx.textAlign = "left"; 
 
\t ctx.textBaseline = "top"; 
 
\t ctx.fillText("Ducks killed: " + 3, 10, 10); 
 
}; 
 

 
var update = function (modifier) { 
 
\t for (var i = 0; i < ducs.Lenght; i++){ 
 
\t \t ducs[i].cur_X = ducs[i].cur_X + Math.floor(((ducs[i].final_X - ducs[i].cur_X)/500)+1); 
 
\t \t ducs[i].cur_Y = ducs[i].cur_Y + Math.floor(((ducs[i].final_Y - ducs[i].cur_Y)/500)+1); 
 
\t \t if (ducs[i].cur_X > 500){ 
 
\t \t \t ducs.splice(i, 1); 
 
\t \t } 
 
\t } 
 
}; 
 
\t 
 

 

 
// The main game loop 
 
var main = function() { 
 
\t var now = Date.now(); 
 
\t var delta = now - then; 
 

 
\t render(); 
 
\t update(delta/1000); 
 

 
\t then = now; 
 

 
\t // Request to do this again ASAP 
 
\t requestAnimationFrame(main); 
 
}; 
 

 
// Cross-browser support for requestAnimationFrame 
 
var w = window; 
 
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame; 
 

 
var then = Date.now(); 
 
reset(); 
 
main();

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
    \t <meta charset="utf-8" /> 
 
    \t <title>Duck Hunt Pandy</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <script src="js/game.js"> </script> 
 
\t </body> 
 
</html>

Quelle

2016-12-28 Michal Pándy

Sie Ihre Rückrufe richtig als wesentliche Polling, sondern entwerfen sollten. – alex

Kannst du es ein wenig eingrenzen? Lesen Sie über das Erstellen eines [MCVE]. –

fand ich einen Tippfehler:

var update = function (modifier) { for (var i = 0; i < ducs.Lenght; i++){

Länge falsch

Quelle

2016-12-28 19:52:31

Erstes Problem geschrieben ist. Sie haben eine falsche Länge.

for (var i = 0; i < ducs.length; i++){

Zweitens müssen Sie sicherstellen, dass die Enten bei jedem Durchlauf der Schleife gezeichnet werden.

if (time < 0){ 
    var duck = { 
     cur_X: 0, 
     cur_Y: Math.round(Math.random()*500), 
     final_X: 500, 
     final_Y: Math.round(Math.random()*400), 
    }; 
    time = Math.round(Math.random()*100); 
    ducs.push(duck);   
} 

for (var i = 0; i < ducs.length; i++){ 
    ctx.drawImage(duckImage, ducs[i].cur_X, ducs[i].cur_Y); 
    console.log(ducs[i].cur_X); 
}

dritte ist, dass Sie die Enten entfernen müssen, wenn sie das Ende (Sie prüften für 500, aber ihr Flug Finale war 400) erreichen.

var duck = { 
    cur_X: 0, 
    cur_Y: Math.round(Math.random()*500), 
    final_X: 500, 
    final_Y: Math.round(Math.random()*400), 
}; 

if (ducs[i].cur_X > 500){ 
    ducs.splice(i, 1); 
}

https://jsfiddle.net/ygh6mfpw/6/

Edit: für ihre Zustandsänderungen am Anfang Fix für Ente Bewegung

Quelle

2016-12-28 19:56:49 Jonneh

Hast du eine Idee, wie du es verlangsamen kannst? Ich habe versucht mit: setTimeout (main(), 4000); aber es funktioniert nicht. –

@ MichalPándy Ein genauerer Blick und das Problem ist eigentlich, dass du nur die Enten zeichnest, wenn sie zuerst hinzugefügt werden. https://jsfiddle.net/ygh6mfpw/5/ – Jonneh

JavaScript Duck Hunt Bug

Antwort

Verwandte Themen