I am trying to create a duck hunting game using JavaScript. The following code should move duck images from the left side to the right side of the canvas. There doesn't seem to be any syntax error but nothing happens when I test the code. I would appreciate any help.
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 () {
bgReady = true;
};
bgImage.src = "images/DHbackground.jpg";
// Duck image
var duckReady = false;
var duckImage = new Image();
duckImage.onload = function () {
duckReady = true;
};
duckImage.src = "images/duck.png";
// Handle mouse and keyboard controls
var mouseDown = {
x: 0,
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 () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
time = time-1;
if (time < 0){
var duck = {
cur_X: 0,
cur_Y: Math.round(Math.random()*500),
final_X: 500,
final_Y: Math.round(Math.random()*500),
};
time = Math.round(Math.random()*100);
ducs.push(duck);
for (var i = 0; i < ducs.Lenght; i++){
ctx.drawImage(duckImage, ducs[i].cur_X, ducs[i].cur_Y);
console.log(ducs[i].cur_X);
}
}
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Ducks killed: " + 3, 10, 10);
};
var update = function (modifier) {
for (var i = 0; i < ducs.Lenght; i++){
ducs[i].cur_X = ducs[i].cur_X + Math.floor(((ducs[i].final_X - ducs[i].cur_X)/500)+1);
ducs[i].cur_Y = ducs[i].cur_Y + Math.floor(((ducs[i].final_Y - ducs[i].cur_Y)/500)+1);
if (ducs[i].cur_X > 500){
ducs.splice(i, 1);
}
}
};
// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
render();
update(delta / 1000);
then = now;
// Request to do this again ASAP
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>
<head>
<meta charset="utf-8" />
<title>Duck Hunt Pandy</title>
</head>
<body>
<script src="js/game.js"> </script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire