飞翔的小鸟

<!DOCTYPE html>

<html>

<head>

    <title>Flappy Bird</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript">

        // Edit by xingoo

        // Fork on my github:https://github.com/xinghalo/CodeJS/tree/master/HTML5

        var ctx;

        var cwidth = 400;

        var cheight = 600;

        var objects = [];

        var birdIndex = 0;

        var ver1 = 10;

        var ver2;

        var gravity = 2;

        var pipe_height = 200;

        var velocity = 10;

        var tid;

        var score = 0;

        var isScore = false;

        var birds = ["./images/0.gif","./images/1.gif","./images/2.gif"];

        var back = new Background(0,0,400,600,"./images/bg.png");

        var up_pipe = new UpPipe(0,0,100,200,"./images/pipe.png");

        var down_pipe = new DownPipe(0,400,100,200,"./images/pipe.png");

        var ground = new Background(0,550,400,200,"./images/ground.png");

        var bird = new Bird(80,300,40,40,birds);

        objects.push(back);

        objects.push(up_pipe);

        objects.push(down_pipe);

        objects.push(ground);

        objects.push(bird);

        function UpPipe(x,y,width,height,img_src){

            this.px = x;

            this.py = y;

            this.pwidth = width;

            this.pheight = height;

            this.img_src = img_src;

            this.draw = drawUpPipe;

        }

        function DownPipe(x,y,width,height,img_src){

            this.px = x;

            this.py = y;

            this.pwidth = width;

            this.pheight = height;

            this.img_src = img_src;

            this.draw = drawDownPipe;

        }

        function drawUpPipe(){

            var image = new Image();

            image.src = this.img_src;

            ctx.drawImage(image,150,500,150,800,this.px,this.py,this.pwidth,this.pheight);

        }

        function drawDownPipe(){

            var image = new Image();

            image.src = this.img_src;

            ctx.drawImage(image,0,500,150,500,this.px,this.py,this.pwidth,this.pheight);

        }

        function Background(x,y,width,height,img_src){

            this.bgx = x;

            this.bgy = y;

            this.bgwidth = width;

            this.bgheight = height;

            var image = new Image();

            image.src = img_src;

            this.img = image;

            this.draw = drawbg;

        }

        function drawbg(){

            ctx.drawImage(this.img,this.bgx,this.bgy,this.bgwidth,this.bgheight);

        }

        function Bird(x,y,width,height,img_srcs){

            this.bx = x;

            this.by = y;

            this.bwidth = width;

            this.bheight = height;

            this.imgs = img_srcs;

            this.draw = drawbird;

        }

        function drawbird(){

            birdIndex++;

            var image = new Image();

            image.src = this.imgs[birdIndex%3];

            ctx.drawImage(image,this.bx,this.by,this.bwidth,this.bheight);

        }

        function calculator(){

            if(bird.by+bird.bheight>ground.bgy ||

                ((bird.bx+bird.bwidth>up_pipe.px)&&(bird.by>up_pipe.py)&&(bird.bx+bird.bwidth<up_pipe.px+up_pipe.pwidth)&&(    bird.by<up_pipe.py+up_pipe.pheight))||

                ((bird.bx+bird.bwidth>up_pipe.px)&&(bird.by>up_pipe.py)&&(bird.bx+bird.bwidth<up_pipe.px+up_pipe.pwidth)&&(    bird.by<up_pipe.py+up_pipe.pheight))||

                ((bird.bx>down_pipe.px)&&(bird.by>down_pipe.py)&&(bird.bx<down_pipe.px+down_pipe.pwidth)&&(bird.by<down_pipe.py+down_pipe.pheight))||

                ((bird.bx>down_pipe.px)&&(bird.by+bird.bheight>down_pipe.py)&&(bird.bx<down_pipe.px+down_pipe.pwidth)&&(bird.by+bird.bheight<down_pipe.py+down_pipe.pheight))){

                clearInterval(tid);

                ctx.fillStyle = "rgb(255,255,255)";

                ctx.font = "30px Accent";

                ctx.fillText("You got "+score+"!",110,100)

                return;

            }

            ver2 = ver1+gravity;

            bird.by += (ver2+ver1)*0.5;

            if(up_pipe.px+up_pipe.pwidth>0){

                up_pipe.px -= velocity;

                down_pipe.px -= velocity;

            }else{

                up_pipe.px = 400;

                down_pipe.px = 400;

                up_pipe.pheight = 100+Math.random()*200;

                down_pipe.py = up_pipe.pheight+pipe_height;

                down_pipe.pheight = 600-down_pipe.py;

                isScore = true;

            }

            if(isScore && bird.bx>up_pipe.px+up_pipe.pwidth){

                score += 1;

                isScore = false;

                if(score>0 && score%10 === 0){

                    velocity++;

                }

            }

            ctx.fillStyle = "rgb(255,255,255)";

            ctx.font = "30px Accent";

            if(score>0){

                score%10!==0?ctx.fillText(score,180,100):ctx.fillText("Great!"+score,120,100);

            }

        }

        function drawall(){

            ctx.clearRect(0,0,cwidth,cheight);

            var i;

            for(i=0;i<objects.length;i++){

                objects[i].draw();

            }

            calculator();

        }

        function keyup(e){

            var e = e||event;

               var currKey = e.keyCode||e.which||e.charCode;

               switch (currKey){

                case 32:

                    bird.by -= 80;

                    break;

            }

        }    

        function init(){

            ctx = document.getElementById('canvas').getContext('2d');

            document.onkeyup = keyup;

            drawall();

            tid = setInterval(drawall,80);

        }

    </script>

</head>

<body onLoad="init();">

<canvas id="canvas" width="400" height="600" style="margin-left:200px;">

    Your browser is not support canvas! 

</canvas>

</body>

</html>

阅读更多
文章标签: canvas
个人分类: canvas
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭