count floating object that pass through the height of canvas

StackOverflow https://stackoverflow.com/questions/23583469

  •  19-07-2023
  •  | 
  •  

Question

i have a headache over this code. i trying to search for help but none :(

i want to count object that pass through the height of canvas and if more than 5 it will count as game over.

i'm a newbie so sorry if the coding is so miserable. I try to do this in the animate function:

if (object.y<0){
   gameOver();
}

but it just become 5 score or whatever scores then bring me to game over. This is the full code:

<!doctype html>
<html>
<style type="text/css">
body {
    text-align:center;
    font-family:PeggyFont;
    font-size:20px;
    background-image:url('back.jpg');
}
h1 {
    font-size:50px;
}
canvas {
    border:5px solid #c3c3c3;
    position:absolute;
    top:120px;
    left:70px;
}
#canvas{
    z-index:1;
}
#canvas2{
    z-index:0;
    display:none;
}
#splash{
    z-index:2;
}
#gameover{
    z-index:3;
}
#score {
    display: none;
    position:absolute;
    top:130px;
    left:490px;
    color:#087276;
    z-index:4;
}
#timerDisplay {
    display:none;
    position:absolute;
    top:150px;
    left:490px;
    color:#087276;
    z-index:5;
}
#howto {
    margin-left:700px;
    margin-right:70px;
    font-size:30px;
}
</style>
<title>Bubble Pop</title>
<body>
<div id="back">
<h1>Bubble Pop Game</h1>
<br><br><br><br><br><br><br>
<center>
<canvas id="canvas" height= "500" width="500">
</canvas>
<canvas id="canvas2" height= "500" width="500">
</canvas>
<canvas id="splash" height= "500" width="500">
</canvas>
<canvas id="gameover" height= "500" width="500">
</canvas>
<p id="score" >Score: 0</p>
<p id="timerDisplay"></p>
<div id="howto">
Pop the bubble as many as you can within 1 minute!! The <font   style="color:blue">BLUE</font> one
has scored 2 and the <font style="color:red">RED</font> one has scored 1.<br>
Good Luck!
</div>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<script type="text/javascript" src="jq/jquery-2.1.0.min.js"></script>
</center>
</div>
<script>
$(function(){
    $("#splash").show();
    $("#canvas").hide();
    $("#gameover").hide();
    $("#score").hide();
    var canvas = document.getElementById("canvas");
    var c = canvas.getContext("2d");
    var splash = document.getElementById("splash");
    var s = splash.getContext("2d");
    var gameover = document.getElementById("gameover");
    var gm = gameover.getContext("2d");
    var canvas2 = document.getElementById("canvas2");
    var c2 = canvas2.getContext("2d");
    var splashOffset=$("#splash").offset();
    var gmOffset=$("#gameover").offset();
    var canvasOffset=$("#canvas").offset();
    var offsetX = canvasOffset.left+70;
    var offsetY = canvasOffset.top+120;
    var splashoffsetX = splashOffset.left;
    var splashoffsetY = splashOffset.top;
    var gmoffsetX = gmOffset.left+70;
    var gmoffsetY = gmOffset.top+120;
    var $score = $("#score");
    var $timerDisplay = $("#timerDisplay");
    var j = 0;
    var k = 0;
    //var active = true;
    var active = false;
    var spawnLineY = 500;
    var spawnLineYtop = 0;
    var spawnRate = 900;
    var spawnRateOfDescent = 3;
    var lastSpawn = -1;
    var objects=[];
    var rects=[];
    var rects2=[];
    var startTime = Date.now();
    var g = s.createLinearGradient(0,0,0,500);
    var g2 = gm.createLinearGradient(0,0,0,500);
    var g3 = c2.createLinearGradient(0,0,0,500);
    var image= new Image();
    var image2= new Image();
    var image3= new Image();
    var image4= new Image();
    var image5= new Image();
    var image6= new Image();
    var sound = new Audio();
    var sound2 = new Audio();
    sound.src = "backgame.ogg";
    sound2.src = "collision2.wav";
    //animate();

    function spawnRandomObject(){
        var t;
        if (Math.random()<0.50){
            t = "red";
        } else {
            t = "blue";
        }
        var object={
            type:t,
            x:Math.random()*(canvas.width-40)+20,
            y:spawnLineY,
            radius:20
        }
        objects.push(object);
    }

    function animate(){
        //active=true;
        sound.play();
        var time=Date.now();
        if(time>(lastSpawn+spawnRate)){
            lastSpawn = time;
            spawnRandomObject();
        }
        if (active){
        webkitRequestAnimationFrame(animate);
        }
        c.clearRect(0,0,canvas.width,canvas.height);
        //c.beginPath();
        //c.moveTo(0,spawnLineY);
        //c.lineTo(canvas.width,spawnLineY);
        //c.stroke();
        //c.beginPath();
        //c.moveTo(0,spawnLineYtop);
        //c.lineTo(canvas.width,spawnLineYtop);
        //c.stroke();
        var timeElapsed = startTime - Date.now() + 61000;
        if (timeElapsed < 1000) {
            gameOver();
        }
        var timeElapsed_second = Math.floor(timeElapsed/1000);
        $timerDisplay.text("Time: "+timeElapsed_second);

        for (var i=0;i<objects.length;i++){
            var object = objects[i];
            object.y=object.y-spawnRateOfDescent;
            c.beginPath();
            c.arc(object.x,object.y,object.radius,0,Math.PI*2);
            c.closePath();
            c.fillStyle=object.type;
            c.fill();

            //NOT WORKING
            if (object.y<0){
                                gameOver();
                           }
        }
    }

    function handleButtonClick(e){
        canvasMouseX=parseInt(e.clientX-offsetX);
        canvasMouseY=parseInt(e.clientY-offsetY);
        for(var i=0;i<objects.length;i++){
            var dx = parseInt(canvasMouseX-objects[i].x);
            var dy = parseInt(canvasMouseY-objects[i].y);
            var asd = dx*dx+dy*dy;
            var hit = (dx*dx+dy*dy)<(objects[i].radius*objects[i].radius);
            if (hit){
                if (objects[i].type=="red"){
                    sound2.play();
                    j=j+1;
                    objects[i].x=objects[i].x+1000;
                }
                else {
                    sound2.play();
                    j=j+2;
                    objects[i].x=objects[i].x+1000;
                }
            }
            $score.text("Score: "+j);
        }
    }

    function gameOver(){
        sound.pause();
        active = false;
        $("#gameover").show();
        $("#canvas").hide();
    }
    $("#canvas").mousedown(function(e){handleButtonClick(e);});

    g3.addColorStop(0,"#04a0b7");
    g3.addColorStop(.3,"#04bfdb");
    g3.addColorStop(.7,"#5beaff");
    g3.addColorStop(1,"#cef9ff");

    c2.fillStyle=g3;
    c2.fillRect(0,0,canvas.width,canvas.height);
    c2.beginPath();
    image5.onload = function(){
        c2.drawImage(image5, 0, 0, 125, 82);
        //s.drawImage(image, 200, 0, 125, 82);
        c2.drawImage(image5, 390, 0, 125, 82);
        c2.drawImage(image5, -50, 200, 125, 82);
        //s.drawImage(image, 150, 200, 125, 82);
        //s.drawImage(image, 350, 200, 125, 82);
        c2.drawImage(image5, 0, 400, 125, 82);
        //s.drawImage(image, 200, 400, 125, 82);
        c2.drawImage(image5, 400, 400, 125, 82);
    }
    image6.onload = function(){
        //s.drawImage(image2, -100, 100, 125, 82);
        //s.drawImage(image2, 100, 100, 125, 82);
        //s.drawImage(image2, 300, 100, 125, 82);
        c2.drawImage(image6, 320, 300, 125, 82);
        //s.drawImage(image2, 100, 300, 125, 82);
        //s.drawImage(image2, -100, 300, 125, 82);
    }
    image5.src='awan.png';
    image6.src='awan2.png';

    g.addColorStop(0,"#04a0b7");
    g.addColorStop(.3,"#04bfdb");
    g.addColorStop(.7,"#5beaff");
    g.addColorStop(1,"#cef9ff");

    s.fillStyle=g;
    s.fillRect(0,0,canvas.width,canvas.height);
    s.beginPath();
    image.onload = function(){
        s.drawImage(image, 0, 0, 125, 82);
        //s.drawImage(image, 200, 0, 125, 82);
        s.drawImage(image, 390, 0, 125, 82);
        s.drawImage(image, -50, 200, 125, 82);
        //s.drawImage(image, 150, 200, 125, 82);
        //s.drawImage(image, 350, 200, 125, 82);
        s.drawImage(image, 0, 400, 125, 82);
        //s.drawImage(image, 200, 400, 125, 82);
        s.drawImage(image, 400, 400, 125, 82);
    }
    image2.onload = function(){
        //s.drawImage(image2, -100, 100, 125, 82);
        //s.drawImage(image2, 100, 100, 125, 82);
        //s.drawImage(image2, 300, 100, 125, 82);
        s.drawImage(image2, 320, 300, 125, 82);
        //s.drawImage(image2, 100, 300, 125, 82);
        //s.drawImage(image2, -100, 300, 125, 82);
    }
    image.src='awan.png';
    image2.src='awan2.png';

    s.font="70px PeggyFont";
    s.fillStyle ="#087276";
    s.fillText("Bubble Pop",100,170);

    var rect={
        x:200,
        y:300,
    }
    rects.push(rect);

    for (var i=0;i<rects.length;i++){
        var rect = rects[i];
        s.beginPath();
        s.fillRect(rect.x,rect.y,100,50);
        s.fillStyle="#087276";
        s.font = '25pt PeggyFont';
        s.fillStyle ="#20d7b7";
        s.fillText ('Play', 220, 338);
    }

    function Play(e){
        splashMouseX=parseInt(e.clientX-splashoffsetX);
        splashMouseY=parseInt(e.clientY-splashoffsetY);
        for(var i=0;i<rects.length;i++){
            var dx = parseInt(splashMouseX-rects[i].x);
            var dy = parseInt(splashMouseY-rects[i].y);
            if (dx>0&&dx<100&&dy>0&&dy<50){
                $("#splash").hide();
                $("#canvas").show();
                $("#canvas2").show();
                active = true;
                $("#timerDisplay").show();
                $("#score").show();
                $("#miss").show();
                animate();
            }
        }
    }
    $("#splash").mousedown(function(e){Play(e);});

    g2.addColorStop(0,"#04a0b7");
    g2.addColorStop(.3,"#04bfdb");
    g2.addColorStop(.7,"#5beaff");
    g2.addColorStop(1,"#cef9ff");

    gm.fillStyle=g2;
    gm.fillRect(0,0,canvas.width,canvas.height);
    gm.beginPath();
    image3.onload = function(){
        gm.drawImage(image3, 0, 0, 125, 82);
        //s.drawImage(image, 200, 0, 125, 82);
        gm.drawImage(image3, 390, 0, 125, 82);
        gm.drawImage(image3, -50, 200, 125, 82);
        //s.drawImage(image, 150, 200, 125, 82);
        //s.drawImage(image, 350, 200, 125, 82);
        gm.drawImage(image3, 0, 400, 125, 82);
        //s.drawImage(image, 200, 400, 125, 82);
        gm.drawImage(image3, 400, 400, 125, 82);
    }
    image4.onload = function(){
        //s.drawImage(image2, -100, 100, 125, 82);
        //s.drawImage(image2, 100, 100, 125, 82);
        //s.drawImage(image2, 300, 100, 125, 82);
        gm.drawImage(image4, 320, 300, 125, 82);
        //s.drawImage(image2, 100, 300, 125, 82);
        //s.drawImage(image2, -100, 300, 125, 82);
    }
    image3.src='awan.png';
    image4.src='awan2.png';

    gm.font="70px PeggyFont";
    gm.fillStyle ="#087276";
    gm.fillText("Game Over",90,170);

    var rect2={
        x:190,
        y:350,
    }
    rects2.push(rect2);

    for (var i=0;i<rects2.length;i++){
        gm.beginPath();
        gm.fillRect(rect2.x,rect2.y,120,50);
        gm.fillStyle="#087276";
        gm.font = '25pt PeggyFont';
        gm.fillStyle ="#20d7b7";
        gm.fillText ('Restart', 195, 388);
    }

    function Restart(e){
        gmMouseX=parseInt(e.clientX-gmoffsetX);
        gmMouseY=parseInt(e.clientY-gmoffsetY);
        for(var i=0;i<rects2.length;i++){
            var dx = parseInt(gmMouseX-rects2[i].x);
            var dy = parseInt(gmMouseY-rects2[i].y);
            if (dx>0&&dx<120&&dy>0&&dy<50){
                location.reload();
            }
        }
    }
    $("#gameover").click(function(e){Restart(e);});
});
</script>
</body>

JS Fiddle Link: http://jsfiddle.net/yt7Zn/

Was it helpful?

Solution

You're close!

Adjust like this: http://jsfiddle.net/m1erickson/5zp4M/

  • Add a failCounter that starts at 0 and increments to 5 with each new object failure (object.y<=0)

  • When the failCounter is at 5 then declare gameOver();

  • When a bubble floats above the canvas (object.y<0), turn it off so it won't continue to count as another failure in the next animation frame. This is why you immediately get gameOver when any 1 bubble floats above the canvas--you're repeatedly failing the same bubble!

  • Reset the failCounter if you restart a new game.

Example code using failCounter:

// set the failure counter to zero at the beginning of the game (or when restarting)

var failCounter=0;

// add a property to object that indicates if this object is still in play

var object={
    type:t,
    x:Math.random()*(canvas.width-40)+20,
    y:spawnLineY,
    radius:20,
    isInPlay:true,
}

// in the animation loop
// If the object is still in play (hasn't previously failed) and the object now fails
// then increment the failCounter and take this bubble out of play.
// If the failCounter reaches 5 then gameOver

if (object.isInPlay && object.y<0){
    object.isInPlay=false;
    if(++failCounter>=5){
        gameOver();
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top