вторник, 19 ноября 2013 г.

Уклонение от препятствий на JavaScript Игра в мяч

Усовершенствуем игру, в которой реализовано уклонение от препятствий на JavaScript.
Сделаем игру в мяч.



Файл index.html

<canvas id="canvas" style="background:#CCC"></canvas>


Файл index.js

    (function(elid, width, height, speed, strength){
        var canvas = document.querySelector(elid),
                ctx = canvas.getContext("2d"),
                pos = 0, blocks = [], curHeight = 0, mousePos, newHeight = -1;
        canvas.width = width; canvas.height = height;ctx.fillStyle = "black";
        var game = setInterval(function(){
            strength+= 0.001;
            var tetha = (strength > 0.6)? 0.6: strength;
            if( Math.random() < tetha ) blocks.push([Math.random()*(width-10),height + 10, 10 + Math.random()*40]);
            ctx.clearRect(0,0,width,height);
            ctx.beginPath(); ctx.arc(pos+5,curHeight+5,5,0,2*Math.PI); ctx.fill();
            for(var i = 0; i < blocks.length; i++){
                ctx.fillRect(blocks[i][0],blocks[i][1],blocks[i][2], 10);
                if( blocks[i][0] - 5 < pos && (blocks[i][0] + blocks[i][2] - 5 > pos) &&  (curHeight - blocks[i][1] < 0 && curHeight - blocks[i][1] > -15) && curHeight == newHeight)
                newHeight = blocks[i][1]-15;
                if( blocks[i][1] < 0 )
                    blocks.splice( i--, 1);
                else 
                    blocks[i][1] -= 5;
            }
            if (curHeight == newHeight)
                newHeight = curHeight +=10 * ((strength > 0.6)? 0.6: strength) ;
            if((!(curHeight = newHeight) || curHeight < -1 || curHeight > height) && clearInterval(game) == undefined )
                alert("Game over. You have " + Math.floor(1000 * strength) + " points.");
            pos += (Math.abs(pos - mousePos ) > 10)? (mousePos > pos) ? ((mousePos < width)? 10 : 0) : ((mousePos > 0)? -10:0) : 0;
        }, speed);
        document.addEventListener('mousemove', function (e) { mousePos = e.pageX; }, false);

    })("#canvas",400,300,33,0.05);


Комментариев нет:

Отправить комментарий