считать плавающий объект, который проходит через высоту холста

Question

считать плавающий объект, который проходит через высоту холста

0

У меня болит голова над этим кодом. я пытаюсь найти помощь, но никто :(

Я хочу считать объект, проходящий через высоту холста, и если более 5 он будет считаться игрой.

Я новичок, так жаль, что кодирование настолько жалкое. Я пытаюсь сделать это в анимационной функции:

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

но это всего лишь 5 очков или других результатов, которые приведут меня в игру. Это полный код:

<!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 Ссылка: http://jsfiddle.net/yt7Zn/

nylon 10 май 2014, в 19:01

Источник

0

попробуйте поставить его на jsfiddle.net и опубликовать ссылку, это также поможет людям проверить ваш код. Здесь jsfiddle.net/yt7Zn Мне кажется, что игра окончена, даже когда синий или красный шар не достиг самой вершины.
SSpoke 10 май 2014, в 16:21
0

Я не программист игры, но самая простая идея могла бы состоять в том, чтобы вы могли проверять положение объекта, и каждый раз, когда он становится равным этой конкретной высоте, вы можете увеличивать значение переменной (то есть для этой единственной цели). Когда эта переменная становится 5, ее игра окончена. Вот как бы я это сделал.
Maxzeroedge 10 май 2014, в 16:26

Теги:

javascript

html

css

html5

canvas

1 ответ

Ещё вопросы

попробуйте поставить его на jsfiddle.net и опубликовать ссылку, это также поможет людям проверить ваш код. Здесь jsfiddle.net/yt7Zn Мне кажется, что игра окончена, даже когда синий или красный шар не достиг самой вершины.
Я не программист игры, но самая простая идея могла бы состоять в том, чтобы вы могли проверять положение объекта, и каждый раз, когда он становится равным этой конкретной высоте, вы можете увеличивать значение переменной (то есть для этой единственной цели). Когда эта переменная становится 5, ее игра окончена. Вот как бы я это сделал.

markE · Accepted Answer · 2014-05-10T15-04-00.000Z

Ты рядом!

Настройте следующим образом: http://jsfiddle.net/m1erickson/5zp4M/

Добавьте failCounter, начинающийся с 0 и возрастающий до 5 с каждым новым сбоем объекта (object.y <= 0)
Когда failCounter находится в 5, тогда объявите gameOver();
Когда пузырь плавает над холстом (object.y <0), отключите его, чтобы он не продолжал считать очередной сбой в следующем кадре анимации. Вот почему вы сразу же получаете gameOver, когда каждый пузырь плывет над холстом - вы неоднократно терпите неудачу в том же пузыре!
Сбросьте failCounter, если вы перезапустите новую игру.

Пример кода с использованием 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();
    }
}

я пробовал это, но он всегда считается до 5, когда я играю, хотя это не проходит верх холста :(
Демо в моем ответе работает нормально :) jsfiddle.net/m1erickson/5zp4M
странно, это только у меня так? я пробую это в своем браузере и не работает. Я пытаюсь в скрипке и не могу играть. :(
Я тестировал в IE11, Chrome34 и FF, и игра запускает gameOver после того, как 5 пузырей всплывают за холст. Я не проверял логику вашего игрового процесса - я только добавил код, необходимый для подсчета плавающих пузырьков (как вы задали в своем вопросе).
если он просто считает 5 пузырьков, то это действительно работает. спасибо, кстати.