我希望最后通过计算foodCaught和foodWasted来创建一个警报，出于某种原因，我的警报似乎每次都被打入脚本时就会中断。另外，如果我的警报运行并输出foodCaught和foodWasted值，我该如何为它创建一个可视化计时器？请帮忙！
$(document).ready(function(){
var cnv = $("#myCanvas")[0];
var ctx = cnv.getContext("2d");
var catcherX = ctx.canvas.width/2;
var catcherY = ctx.canvas.height - 100; // set the initial location of the catcher's y position
var numFoods = 5;
var catcherSpeed = 30;
var foodCaught = 0;
var foodWasted = 0;
function Food(){ // the name of the constructor usually begins with a captial letter
this.radius = 30;
this.x = Math.floor(Math.random()*ctx.canvas.width);
this.y = 0 - this.radius;
this.speed = 1+ Math.floor(Math.random()*5);
var imageToUse = new Image();
this.width = 50; // default values
this.height = 50; // default values
var randomNum = Math.floor(Math.random()*2); // create a random number to choose the image
if(randomNum == 0){
imageToUse.src = "corn.png";
this.width = 27; // width of corn.png
this.height = 100; // height of corn.png
} else if(randomNum == 1){
imageToUse.src = "straw.png"
this.width = 83; // width of straw.png
this.height = 100; // height of straw.png
}
this.moveFood = function(){
if(this.y > ctx.canvas.height){
this.x = Math.floor(Math.random()*ctx.canvas.width);
this.y = 0;
footWasted += 1;
}
this.y += this.speed; // add speed to location
}
this.drawFood = function() {
ctx.drawImage(imageToUse, this.x, this.y);
}
this.intersectFood = function(targetX, targetY, targetR) {
if(this.x + this.width > targetX && this.x < targetX + targetR && this.y + this.height > targetY && this.y < targetY + targetR){
foodCaught += 1;
return true;
}
/*
var distanceX = this.x - targetX;
var distanceY = this.y - targetY;
var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
if(distance < targetR + this.radius){
return true;
}
*/
}
} //Food function
// create an Array of Foods
var FoodArray = new Array();
for(var i=0; i<numFoods; i++) {
FoodArray[i] = new Food();
}
// get mouse Postion
$(document).keydown(function(e){ // attach the event to the entire document
switch(e.keyCode){
case 37: // left
catcherX-= catcherSpeed;
break;
case 39: // right
catcherX+= catcherSpeed;
break;
}
});
setInterval(gameLoop,10); // call draw every 10 milliseconds
function gameLoop(){
ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height); //clears previous circles
for(var i=0; i < FoodArray.length; i++) {
FoodArray[i].moveFood();
FoodArray[i].drawFood();
if(FoodArray[i].intersectFood(catcherX, catcherY, 15)){
FoodArray.splice(i,1);
console.log(i);
}
}
// draw catcher
ctx.beginPath();
ctx.fillStyle="#119933";
ctx.arc(catcherX,catcherY,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
});
答案 0 :(得分：0)
如果您希望游戏持续1分钟，并且在游戏结束时发出警报，它应该看起来像这样：
$(document).ready(function(){
var cnv = $("#myCanvas")[0];
var ctx = cnv.getContext("2d");
var catcherX = ctx.canvas.width/2;
var catcherY = ctx.canvas.height - 100; // set the initial location of the catcher's y position
var numFoods = 5;
var catcherSpeed = 30;
var foodCaught = 0;
var foodWasted = 0;
var gameInProgress = true; //game state
function Food(){ // the name of the constructor usually begins with a captial letter
this.radius = 30;
this.x = Math.floor(Math.random()*ctx.canvas.width);
this.y = 0 - this.radius;
this.speed = 1+ Math.floor(Math.random()*5);
var imageToUse = new Image();
this.width = 50; // default values
this.height = 50; // default values
var randomNum = Math.floor(Math.random()*2); // create a random number to choose the image
if(randomNum == 0){
imageToUse.src = "corn.png";
this.width = 27; // width of corn.png
this.height = 100; // height of corn.png
} else if(randomNum == 1){
imageToUse.src = "straw.png"
this.width = 83; // width of straw.png
this.height = 100; // height of straw.png
}
this.moveFood = function(){
if(this.y > ctx.canvas.height){
this.x = Math.floor(Math.random()*ctx.canvas.width);
this.y = 0;
footWasted += 1;
}
this.y += this.speed; // add speed to location
}
this.drawFood = function() {
ctx.drawImage(imageToUse, this.x, this.y);
}
this.intersectFood = function(targetX, targetY, targetR) {
if(this.x + this.width > targetX && this.x < targetX + targetR && this.y + this.height > targetY && this.y < targetY + targetR){
foodCaught += 1;
return true;
}
/*
var distanceX = this.x - targetX;
var distanceY = this.y - targetY;
var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
if(distance < targetR + this.radius){
return true;
}
*/
}
} //Food function
// create an Array of Foods
var FoodArray = new Array();
for(var i=0; i<numFoods; i++) {
FoodArray[i] = new Food();
}
// get mouse Postion
$(document).keydown(function(e){ // attach the event to the entire document
switch(e.keyCode){
case 37: // left
catcherX-= catcherSpeed;
break;
case 39: // right
catcherX+= catcherSpeed;
break;
}
});
var gameInterval = setInterval(gameLoop,10); // call draw every 10 milliseconds
function gameLoop(){
if(!gameInProgress)
clearInterval(gameInterval); //end game
ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height); //clears previous circles
for(var i=0; i < FoodArray.length; i++) {
FoodArray[i].moveFood();
FoodArray[i].drawFood();
if(FoodArray[i].intersectFood(catcherX, catcherY, 15)){
FoodArray.splice(i,1);
console.log(i);
}
}
// draw catcher
ctx.beginPath();
ctx.fillStyle="#119933";
ctx.arc(catcherX,catcherY,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
setTimeout(endGame, 60*1000); //end game after 1 minute
function endGame(){
gameInProgress = false;
alert("Food caught: "+foodCaught+"\nFood wasted: "+foodWasted);
}
});
如果你想为游戏展示计时器，你应该这样做：
function timer(time){ //timer definition
var timeLeft = time;
var timerInterval = undefined;
var updateFunction = undefined;
var decrement = function(){ //function that decreses timeLeft value, calls update function and checks if it's over
timeLeft--;
updateFunction(timeLeft);
if(timeLeft == 0)
clearInterval(timerInterval);
}
return { //object returned for the caller to use
start: function(updateFunc){ //start function, that takes update function as a parameter
updateFunction = updateFunc;
updateFunction(timeLeft); //update the value with initial timeLeft value
timerInterval = setInterval(decrement, 1000); //interval that decreses timeLeft by one every second
}
}
}
//document.ready
$(function(){
timer(10).start(function(time){
$("#timer").text(time);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="timer"></div>