Question

我正在尝试使用JavaScript创建一个鸭子狩猎游戏。以下代码应将鸭子图像从画布的左侧移动到右侧。似乎没有任何语法错误，但在测试代码时没有任何反应。我将不胜感激任何帮助。

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>

Answer 1

我发现了一个拼写错误：

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

长度拼写错误

Answer 2

第一个问题。你拼错了长度。

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

其次，每次循环运行时都需要确保绘制鸭子。

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);
}

第三，你需要在鸭子到达终点时将其移走（你要检查的是500，但他们的飞行决赛是400）。

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/

编辑：修复鸭子移动

JavaScript Duck Hunt bug

2 个答案: