其中一个画布背景是一张图片，还有小鸟，两个管子的图片。暂时不知道怎么附上去就不添加了。这里只有源代码，css和js都是在html写着的，感觉比他们的容易吧,hah 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>笨鸟先生</title>

    <style>

        *{margin: ;padding:;}

        body,html{

            width:%;

            height:%;

        }

        canvas{

            background: url("images/background.png");

            background-repeat: repeat-x;

            background-size: % %;

            position: fixed;

        }

        #score{

            position: absolute;

            font-family:Times New Roman;

            font-size: 80px;

            font-weight: bold;

            top:30px;

            left:200px;

            color:black;

        }

        .wraper{

            width: %;

            height:%;

            position: absolute;

            top:;

            left:;

            z-index: ;

            background-color: ghostwhite;

            opacity: 0.5;

            display: none;

        }

        .scoreban{

            position: absolute;

            top:200px;

            left:550px;

            z-index: ;

            font-family:Times New Roman;

            font-size: 80px;

            font-weight: bold;

            display: none;

        }

    </style>

</head>

<body>

<canvas style=" display:block;width:100%;height:100%;" id="canvas">

</canvas>

<div class="wraper">

</div>

<div class="scoreban">

    <p id="scoreban0"></p>

</div>

<p></p>

<div id="score">

    <i id="scoreI"></i>

</div>

<video src="music/zbj.mp3" autoplay loop width="" height="" id="bgMusic"></video>

<script>

    var score = document.getElementById('scoreI');

    var scoreban0 = document.getElementById('scoreban0');

    var wraper = document.getElementsByClassName('wraper')[];//背景色

    var scoreban = document.getElementsByClassName('scoreban')[];

    var oCanvas = document.getElementById("canvas");

    var ctx = oCanvas.getContext("2d");

    var birdPic = new Image();

    var imgtop=; //小鸟默认高度

    var i = ;     //小鸟下落速度

    var j = ;

    var time;

    function flyBird(){

        birdPic.src = "images/avatar.png";

        ctx.clearRect(,,,);

        birdPic.onload = function (){

            ctx.drawImage(birdPic,,imgtop,,);

        }

        imgtop+=i;

        i=i+0.5;

    }

    document.onkeydown = function (event){//空格按键触发

        if(event.keyCode == ){

            j=j+;

            imgtop-=j;

        }

        i=;

        j=;

    };

    time = setInterval(flystop,);

    //过柱子的数目

    var q = ;

    score.innerHTML = q;  //默认为0

    var stop = new Image();//上下两个柱子

    var stop0 = new Image();

    var stopsite = ;//默认柱子的开始位置

    var toparr = [,,,,,,,,,];

    function flystop(){

        flyBird();

        stop.src = "images/ob_bottom.png";

        stop0.src = 'images/ob_top.png';

        for(var t = ;t<;t++){

            ctx.clearRect(stopsite+*t+,,,);

            ctx.drawImage(stop0,stopsite+*t,,,toparr[t]);

            ctx.drawImage(stop,stopsite+*t,toparr[t]+,,);

            if(stopsite+*t <=  && stopsite+*t > ){ //

                if(imgtop<=toparr[t] || imgtop>=toparr[t]+){

                    clearInterval(time);

                    wraper.style.display = 'block';

                    scoreban.style.display = 'block';

                    scoreban0.innerHTML = 'GG,您的分数为：'+ (q-);

                }

            }

            if(stopsite+*t ==){

                score.innerHTML = q;

                q++;

            }

        }

        if(imgtop <=  || imgtop>= ctx.canvas.height){//判断是否过界

            clearInterval(time);

            wraper.style.display = 'block';

            scoreban.style.display = 'block';

            scoreban0.innerHTML = 'GG,您的分数为：'+ q;

        }

        stopsite-=;

        if(stopsite == -){

            clearInterval(time);

            wraper.style.display = 'block';

            scoreban.style.display = 'block';

            scoreban0.innerHTML = '恭喜你,你赢了0.0';

        }

    }

</script>

</body>

</html>

用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）的更多相关文章

  1. 原生js写的贪吃蛇网页版游戏特效

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

  2. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  3. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  4. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  5. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  6. 原生JS写的ajax函数

    参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...

  7. 用原生javascript做的一个打地鼠的小游戏

    学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...

  8. html5面向对象做一个贪吃蛇小游戏

    canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说 ...

  9. 自定义View4-塔防小游戏第一篇:一个防御塔+多个野怪（简易版）*

    塔防小游戏 第一篇:一个防御塔+多个野怪(简易版)    1.canvas画防御塔,妖怪大道,妖怪行走路线    2.防御塔攻击范围是按照妖怪与防御塔中心距离计算的,大于防御塔半径则不攻击,小于则攻击 ...

随机推荐

  1. tar.gz 解压

    tar -xzvf .tar.gz tar [-cxtzjvfpPN] 文件与目录 .... 参数: -c :建立一个压缩文件的参数指令(create 的意思): -x :解开一个压缩文件的参数指令! ...

  2. sql 存储过程带有模糊查询条件

    一个简单的存储过程: Create procedure [dbo].[Proc_SeachJob] (@startRecordIndex int, @endRecordIndex int, @seac ...

  3. 纸壳CMS的插件加载机制

    纸壳CMS是一个开源的可视化设计CMS,通过拖拽,在线编辑的方式来创建网站. GitHub https://github.com/SeriaWei/ZKEACMS.Core 欢迎Star,Fork,发 ...

  4. NOIP2012BLOCKADE贪心思想证明

    NOIP2012BLOCKADE贪心思想证明 这道题的做法是二分时间并检验这个时间是否可行.检验的方法要用到贪心思想. 对于不能到根结点的军队应该尽量向根结点走. 如果军队A能走到根结点但到根结点后剩 ...

  5. 【OCP-12c】2019年CUUG OCP 071考试题库（79题）

    79.Which statement is true about transactions? A. A set of Data Manipulation Language (DML) statemen ...

  6. 封装继承多态-java面向对象三大特征

    第七章  封装和继承 一.面向对象的三大特征 封装.继承.多态 二.封装 将类的属性(字段)设置为私有的(private),并添加getter/setter方法操作属性. 注意:get|set方法的固 ...

  7. 0基础浅谈反射型xss (1)

    0X1:在学习xss之前,先快速学习相关的HTML代码 1.  <input>标签 文本域用法: <input  type="text" /> Type的作 ...

  8. 字符串模式匹配算法2 - AC算法

    上篇文章(http://www.cnblogs.com/zzqcn/p/3508442.html)里提到的BF和KMP算法都是单模式串匹配算法,也就是说,模式串只有一个.当需要在字符串中搜索多个关键字 ...

  9. 如何检查 IP是否冲突了

     [root@TEST_192_168_1_252 ~]# ifconfig eth0      Link encap:Ethernet  HWaddr 44:A8:42:00:1A:B5       ...

  10. 安装openssl-devel

    安装openssl-devel 0.操作系统为 RHEL6.7 1.描述:当开发人员需要调用openssl的库文件时,需要安装openssl-devel包 2.当根目录(即挂载点为  )的利用率为10 ...