Javascript 如何在警报中创建计算？_Javascript_Jquery

Javascript 如何在警报中创建计算？

javascript jquery

Javascript 如何在警报中创建计算？,javascript,jquery,Javascript,Jquery,我正在创建一个互动游戏，对编程非常陌生。我想知道如何精确地增加一个变量，然后将其放入一个警报框中。我想找到foodCaught和foodWasted的计算结果，并在游戏结束时将其显示在警报框中。另外，我如何使其位于计时器上，并在计时器结束时显示带有foodCaught和foodWasted的警报框 $(document).ready(function(){ var cnv = $("#myCanvas")[0]; var ctx = cnv.getContext("2d");

我正在创建一个互动游戏，对编程非常陌生。我想知道如何精确地增加一个变量，然后将其放入一个警报框中。我想找到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;
            }
             */
        }
    }
    // 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 interval = setInterval(gameLoop,10); // call draw every 10 milliseconds
    var counter = 0;

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

$（文档）.ready（函数（）{
var cnv=$（“#我的画布”）[0]；
var ctx=cnv.getContext（“2d”）；
var catcherX=ctx.canvas.width/2；
var catcherY=ctx.canvas.height-100；//设置捕捉器y位置的初始位置
var numFoods=5；
var-catcherSpeed=30；
var foodCaught=0；
var foodWasted=0；
函数Food（）{//构造函数的名称通常以大写字母开头
这个半径=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=新图像（）；
this.width=50；//默认值
this.height=50；//默认值
var randomNum=Math.floor（Math.random（）*2）；//创建一个随机数来选择图像
if（randomNum==0）{
imageToUse.src=“corn.png”；
this.width=27；//corn.png的宽度
this.height=100；//corn.png的高度
}else if（randomNum==1）{
imageToUse.src=“straw.png”
this.width=83；//straw.png的宽度
this.height=100；//straw.png的高度
}
this.moveFood=函数（）{
if（this.y>ctx.canvas.height）{
this.x=Math.floor（Math.random（）*ctx.canvas.width）；
这个。y=0；
平均值+=1；
}
this.y+=this.speed；//将速度添加到位置
}
this.drawFood=函数（）{
ctx.drawImage（imageToUse，this.x，this.y）；
}
this.intersectFood=函数（targetX、targetY、targetR）{
if（this.x+this.width>targetX和this.xtargetY和this.y对于（var i=0；i更新的答案
游戏结束后，请执行以下操作：
  alert("foodCaught = " + foodCaught + "<br>foodWasted = "  + foodWasted);

这样，每次调用gameLoop
函数时，您都会得到foodCaught
和foodWasted
变量的值
如果您不知道如何使用控制台，请签出
EDIT2:
我有一个结束游戏的想法。在下面更新的代码中，我使用setTimeout（）
将游戏设置为运行10秒（作为示例，以便您可以快速更改）。您可以将其更改为您想要的任何持续时间。在setTimeout（）
中，我还提醒您需要的值
以下是更新的Javascript/jQuery代码：
$(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;
                foodWasted += 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;
             }
             */

        }


    }

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

        // draw catcher
        ctx.beginPath();
        ctx.fillStyle="#119933";
        ctx.arc(catcherX,catcherY,15,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();

    }

    $(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;
        }

    });


    // create an Array of Foods
    var FoodArray = new Array();
    for(var i=0; i<numFoods; i++) {
        FoodArray[i] = new Food();
    }    

    var interval = setInterval(gameLoop,10); // call draw every 10 milliseconds

    setTimeout(function(){
        clearInterval(interval);        
        alert("Time UP!\n\nfoodCaught = " + foodCaught + "\nfoodWasted = " + foodWasted);
    }, 10000);

});

$（文档）.ready（函数（）{
var cnv=$（“#我的画布”）[0]；
var ctx=cnv.getContext（“2d”）；
var catcherX=ctx.canvas.width/2；
var catcherY=ctx.canvas.height-100；//设置捕捉器y位置的初始位置
var numFoods=5；
var-catcherSpeed=30；
var foodCaught=0；
var foodWasted=0；
函数Food（）{//构造函数的名称通常以大写字母开头
这个半径=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=新图像（）；
this.width=50；//默认值
this.height=50；//默认值
var randomNum=Math.floor（Math.random（）*2）；//创建一个随机数来选择图像
if（randomNum==0）{
imageToUse.src=“corn.png”；
this.width=27；//corn.png的宽度
this.height=100；//corn.png的高度
}else if（randomNum==1）{
imageToUse.src=“straw.png”
this.width=83；//straw.png的宽度
this.height=100；//straw.png的高度
}
this.moveFood=函数（）{
if（this.y>ctx.canvas.height）{
this.x=Math.floor（Math.random（）*ctx.canvas.width）；
这个。y=0；
食物浪费+=1；
}
this.y+=this.speed；//将速度添加到位置
}
this.drawFood=函数（）{
ctx.drawImage（imageToUse，this.x，this.y）；
}
this.intersectFood=函数（targetX、targetY、targetR）{
if（this.x+this.width>targetX和this.xtargetY和this.y$(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;
                foodWasted += 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;
             }
             */

        }


    }

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

        // draw catcher
        ctx.beginPath();
        ctx.fillStyle="#119933";
        ctx.arc(catcherX,catcherY,15,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();

    }

    $(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;
        }

    });


    // create an Array of Foods
    var FoodArray = new Array();
    for(var i=0; i<numFoods; i++) {
        FoodArray[i] = new Food();
    }    

    var interval = setInterval(gameLoop,10); // call draw every 10 milliseconds

    setTimeout(function(){
        clearInterval(interval);        
        alert("Time UP!\n\nfoodCaught = " + foodCaught + "\nfoodWasted = " + foodWasted);
    }, 10000);

});