文档章节

用canvas和原生JS写的一个flappy bird游戏

詹真琦
 詹真琦
发布于 2014/12/19 16:40
字数 1002
阅读 79
收藏 0
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" charset="utf-8" content="width=device-width,user-scalable=no,initial-scale=1"/>
    <style type="text/css">
        body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, big, em, font, img, strong, tt, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
            margin: 0;
            padding: 0;
            outline: none;
            border: none;
            resize: none;
            word-break: break-all;
            word-wrap: break-word;
        }
        html, body {
            height: 100%;
            margin: 0;
        }
        .body{width: 100%;height: 100%;background-color: #77c68b;}
        #canvas{position: absolute;left:50%;margin-left: -400px;background-color: #fff;}
    </style>


</head>
<body>
<div class="body">
<canvas id="canvas" width="800" height="800"></canvas>


</div>
<script type="text/javascript">
    var canvas=document.getElementById('canvas');
    var context=canvas.getContext('2d');
    var birdCooed={
            bodyro:0,
            bodyY:400,
            wingro:0,
            wingX:130,
            wingY:400,
            eyero:1.2,
            eyeX:165,
            eyeY:395,
            eyeballX:167,
            eyeballY:390,
            eyeballtoY:397,
            mouthro:0,
            mouthX:165,
            mouthY:415
    },pillarCooed;


    var mark=true,flyup,flydown,num= 0,grade= 0,grademark=1;
    var flappybird={
        init:function(){
            that=this;
            pillarCooed=that.pillar(800,1090,1380);   //构建柱子
            that.begin();                              //开始页面
            document.addEventListener("keydown",function (e) {
                var e = e || window.event || arguments.callee.caller.arguments[0];
                if(e.keyCode==32){
                    if(mark){          //判断游戏是否为开始状态
                       num=0;
                       clearInterval(flydown);
                       clearInterval(flyup);
                       //点击往上飞
                       flyup=setInterval(function(){
                           if(pillarCooed.one.move+80){pillarCooed.one.move-=1}else{pillarCooed.one.move=800;pillarCooed.one.th=50+Math.random()*500;pillarCooed.one.bh=600-pillarCooed.one.th;grademark=1;}
                           if(pillarCooed.two.move+80){pillarCooed.two.move-=1}else{pillarCooed.two.move=800;pillarCooed.two.th=50+Math.random()*500;pillarCooed.two.bh=600-pillarCooed.two.th;grademark=1;}
                           if(pillarCooed.three.move+80){pillarCooed.three.move-=1}else{pillarCooed.three.move=800;pillarCooed.three.th=50+Math.random()*500;pillarCooed.three.bh=600-pillarCooed.three.th;grademark=1;}
                           birdCooed.bodyY-=3;
                           birdCooed.wingY-=3;
                           birdCooed.eyeY-=3;
                           birdCooed.eyeballY-=3;
                           birdCooed.eyeballtoY-=3;
                           birdCooed.mouthY-=3;
                           num+=3;
                           that.Scene(birdCooed,pillarCooed);
                           if(pillarCooed.one.move<=185&&pillarCooed.one.move>=60&&(pillarCooed.one.th+20>=birdCooed.bodyY||775-pillarCooed.one.bh<=birdCooed.bodyY)){
                                    that.end();
                           }else if(pillarCooed.two.move<=185&&pillarCooed.two.move>=60&&(pillarCooed.two.th+20>=birdCooed.bodyY||775-pillarCooed.two.bh<=birdCooed.bodyY)){
                               that.end();


                           }else if(pillarCooed.three.move<=185&&pillarCooed.three.move>=60&&(pillarCooed.three.th+20>=birdCooed.bodyY||775-pillarCooed.three.bh<=birdCooed.bodyY)){
                               that.end();


                           }else if(birdCooed.bodyY>=777){
                               that.end();
                           }else{
                               if((pillarCooed.one.move<=55||pillarCooed.two.move<=55||pillarCooed.three.move<=55)&&grademark){
                                   grade++;
                                   grademark=0;
                               }
                           }
                           //落下来
                        if(num>=90||birdCooed.bodyY<=23){


                            clearInterval(flyup);
                            flydown=setInterval(function(){
                                if(pillarCooed.one.move+80){pillarCooed.one.move-=1}else{pillarCooed.one.move=800;pillarCooed.one.th=50+Math.random()*500;pillarCooed.one.bh=600-pillarCooed.one.th;grademark=1;}
                                if(pillarCooed.two.move+80){pillarCooed.two.move-=1}else{pillarCooed.two.move=800;pillarCooed.two.th=50+Math.random()*500;pillarCooed.two.bh=600-pillarCooed.two.th;grademark=1;}
                                if(pillarCooed.three.move+80){pillarCooed.three.move-=1}else{pillarCooed.three.move=800;pillarCooed.three.th=50+Math.random()*500;pillarCooed.three.bh=600-pillarCooed.three.th;grademark=1;}
                                num=0;
                                birdCooed.bodyY+=3;
                                birdCooed.wingY+=3;
                                birdCooed.eyeY+=3;
                                birdCooed.eyeballY+=3;
                                birdCooed.eyeballtoY+=3;
                                birdCooed.mouthY+=3;
                                that.Scene(birdCooed,pillarCooed);
                                if(pillarCooed.one.move<=185&&pillarCooed.one.move>=60&&(pillarCooed.one.th+20>=birdCooed.bodyY||775-pillarCooed.one.bh<=birdCooed.bodyY)){
                                   that.end();
                                }else if(pillarCooed.two.move<=185&&pillarCooed.two.move>=60&&(pillarCooed.two.th+20>=birdCooed.bodyY||775-pillarCooed.two.bh<=birdCooed.bodyY)){
                                    that.end();


                                }else if(pillarCooed.three.move<=185&&pillarCooed.three.move>=60&&(pillarCooed.three.th+20>=birdCooed.bodyY||775-pillarCooed.three.bh<=birdCooed.bodyY)){
                                    that.end();


                                }else if(birdCooed.bodyY>=777){
                                    that.end();
                                 }else{
                                    if((pillarCooed.one.move<=55||pillarCooed.two.move<=55||pillarCooed.three.move<=55)&&grademark){
                                        grade++;
                                        grademark=0;
                                    }
                                }
                            },1);
                        }


                   },1);




                    }
                }
            });
        },
        begin:function(){


            context.beginPath();
            context.fillStyle = '#ee6a39';
            context.font = '50px Calibri';
            context.fillText("开始游戏", 290,365);
            context.font = '40px Calibri';
            context.fillText("按space开始游戏",250,465);
            context.rect(100,300,600,100);
            context.fillStyle ="transparent";
            context.fill();
            context.lineWidth = 5;
            context.strokeStyle = 'black';
            context.lineJoin = 'miter';
            context.stroke();
        },
         end:function(){
             clearInterval(flydown);
             clearInterval(flyup);
             mark=false;
             setTimeout(function(){
                 context.beginPath();
                 context.clearRect(0,0,canvas.width,canvas.height);
                 canvas.width=canvas.width;
                 context.fillStyle = '#ee6a39';
                 context.font = '50px Calibri';
                 context.fillText("游戏结束,得分:"+grade+"",220,375);
                 context.lineJoin = 'miter';
                 context.stroke();
             },1000)




         },


        //鸟
        Scene:function(x,y){
            context.beginPath();
            context.clearRect(0,0,canvas.width,canvas.height);
            canvas.width=canvas.width;
            //柱子
            context.beginPath();
            context.rect(y.one.move,0,80, y.one.th);
            context.fillStyle = "green";
            context.fill();
            context.lineWidth = 0;
            context.strokeStyle = 'green';
            context.lineJoin = 'miter';
            context.stroke();
            context.beginPath();
            context.rect(y.one.move,800- y.one.bh,80, y.one.bh);
            context.fillStyle = "green";
            context.fill();
            context.lineWidth = 0;
            context.strokeStyle = 'green';
            context.lineJoin = 'miter';
            context.stroke();


            context.beginPath();
            context.rect(y.two.move,0,80, y.two.th);
            context.fillStyle = "green";
            context.fill();
            context.lineWidth = 0;
            context.strokeStyle = 'green';
            context.lineJoin = 'miter';
            context.stroke();
            context.beginPath();
            context.rect(y.two.move,800-y.two.bh,80, y.two.bh);
            context.fillStyle = "green";
            context.fill();
            context.lineWidth = 0;
            context.strokeStyle = 'green';
            context.lineJoin = 'miter';
            context.stroke();


            context.beginPath();
            context.rect(y.three.move,0,80, y.three.th);
            context.fillStyle = "green";
            context.fill();
            context.lineWidth = 0;
            context.strokeStyle = 'green';
            context.lineJoin = 'miter';
            context.stroke();
            context.beginPath();
            context.rect(y.three.move,800-y.three.bh,80, y.three.bh);
            context.fillStyle = "green";
            context.fill();
            context.lineWidth = 0;
            context.strokeStyle = 'green';
            context.lineJoin = 'miter';
            context.stroke();


            //分数
            context.beginPath();
            context.fillStyle = '#ee6a39';
            context.font = '50px Calibri';
            context.fillText('得分:'+grade+'',50,50);
            context.lineJoin = 'miter';
            context.stroke();
            //身体
            context.save();
            context.translate(150,x.bodyY);
            context.rotate(Math.PI * x.bodyro);
            context.scale(1.5, 1);
            context.beginPath();
            context.arc(0, 0, 20, 0, 2 * Math.PI, false);
            context.restore();
            context.fillStyle = "gold";
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = "black";
            context.stroke();
            //翅膀
            context.save();
            context.translate(x.wingX, x.wingY);
            context.rotate(Math.PI * x.wingro);
            context.scale(1.4, 1);
            context.beginPath();
            context.arc(0, 0,10, 0, 2 * Math.PI, false);
            context.restore();
            context.fillStyle = "gold";
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = "black";
            context.stroke();
            //眼睛
            context.save();
            context.translate(x.eyeX, x.eyeY);
            context.rotate(Math.PI * x.eyero);
            context.scale(1.2, 1);
            context.beginPath();
            context.arc(0, 0,10, 0, 2 * Math.PI, false);
            context.restore();
            context.fillStyle = "#fff";
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = "black";
            context.stroke();
            //眼珠
            context.beginPath();
            context.moveTo(x.eyeballX, x.eyeballY);
            context.lineTo(x.eyeballX, x.eyeballtoY);
            context.lineWidth = 5;
            context.strokeStyle = '#000';
            context.stroke();
            //嘴
            context.translate(x.mouthX, x.mouthY);
            context.rotate(Math.PI * x.mouthro);
            context.scale(2.5, 1);
            context.beginPath();
            context.arc(0, 0,7, 0, 2 * Math.PI, false);
            context.restore();
            context.fillStyle = "#ee6a39";
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = "black";
            context.stroke();
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(7,0);
            context.lineWidth = 1;
            context.strokeStyle = '#000';
            context.stroke();
            context.stroke();
        },
        //柱子高度
        pillar:function(x,y,z){


            _pth=50+Math.random()*500;
            _pbh=600-_pth;
            _pth1=50+Math.random()*500;
            _pbh1=600-_pth1;
            _pth2=50+Math.random()*500;
            _pbh2=600-_pth2;
            return {
                one:{th:_pth,bh:_pbh,move:x},
                two:{th:_pth1,bh:_pbh1,move:y},
                three:{th:_pth2,bh:_pbh2,move:z}
                };
            }


        };


     flappybird.init();
</script>
</body>
</html>

© 著作权归作者所有

詹真琦
粉丝 18
博文 13
码字总数 4589
作品 0
成都
程序员
私信 提问
Cocos2d-js连续播放音频卡顿问题

最近在用Cocos2d-js在做一个小游戏,类似flappy bird那种。 演示地址: http://flyblock-d0b2f.coding.io/ 代码地址:https://coding.net/u/elevenchen/p/FlyBlock/git 每次点击屏幕会播放一个...

Nov_Eleven
2014/12/19
481
0
8月,推荐给程序员们的书

八月,好书来袭,在Swift刚刚发布不久之后,即将出版《Swift权威指南》一书,预计8月下旬上市,敬请关注,据说是国内第一本含金量超过Swift官方文档的原创图书,到时等你们来评分。 本期特别...

生气的散人
2014/08/07
3.4K
0
libgdx 如何实现微信分享

最近在研究libgdx,改了一版flappybird,现在想实现微信朋友圈分享功能。研究了微信开放平台提供的基于android平台接口说明,但是苦于flappybird的代码都是写在libgdx的基准工程里的,andro...

yukaiehome
2014/07/28
591
1
超级精简的flappy Bird.

package testPackage; import java.awt.BorderLayout; import java.awt.Color; import java.awt.FlowLayout; import java.awt.Graphics; import java.awt.GridBagConstraints; import java.a......

守护_玉
2014/02/26
76
0
我想找一份cocos2d-x游戏开发初级程序员的工作

本人学的是Java,但对游戏开发有浓厚的兴趣,目前正在学习cocos2d-x,想找一份关于游戏开发的工作,不知道这个想法可不可行。本人有一定的C/C++基础,正在尝试写类似Flappy Bird的游戏。...

droideep
2014/02/17
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

golang-字符串-地址分析

demo package mainimport "fmt"func main() {str := "map.baidu.com"fmt.Println(&str, str)str = str[0:5]fmt.Println(&str, str)str = "abc"fmt.Println(&s......

李琼涛
今天
4
0
Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
今天
6
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
今天
8
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
今天
6
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部