Question

我正在创建一个互动游戏，我对编程很新。我想知道如何增加变量然后将其放入警报框中。我想找到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();

Answer 1

更新了答案

游戏结束后，请执行以下操作：

  alert("foodCaught = " + foodCaught + "<br>foodWasted = "  + foodWasted);

请确保此alert符合foodCaught和foodWasted变量的范围。

修改

你的游戏实际上永无止境。你每隔10毫秒不停地调用setInterval的{{1}}！

要跟踪gameLoop()和foodCaught个变量，请在foodWasted函数末尾添加console.log()语句，如下面的代码所示：

gameLoop()

有了这个，每次调用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(); console.log("foodCaught = " + foodCaught + "\nfoodWasted = " + foodWasted); }函数时，您都会得到foodCaught和foodWasted变量的值。

如果您不知道如何使用控制台，请结帐this post。

<强> EDIT2：

我对结束这场比赛有所了解。在下面的更新代码中，我使用gameLoop将游戏设置为运行10秒（仅作为示例，以便您可以快速更改）。您已将其更改为您想要的任何持续时间。在setTimeout()中，我也会提醒您需要的值。

这是更新的Javascript / jQuery代码：

setTimeout()

如何在警报中创建计算？

1 个答案: