其中一个画布背景是一张图片，还有小鸟，两个管子的图片。暂时不知道怎么附上去就不添加了。这里只有源代码，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. sql 存储过程带有模糊查询条件

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

  2. Linq与数据库的连接显示查询(一)

    使用linq查询sql数据库是首先需要创建一个 linq  to  sql 类文件 创建linq  to  sql的步骤: 1在Visual  Studio 2015开发环境中建立一个目标框架 Fra ...

  3. @JoinColumn 详解

    1. 一对一 现假设有Person表和Address表,是一对一的关系,在Person中有一个指向Address表主键的字段addressID,所以主控方一定是Person,所谓主控方就是能改变关联关 ...

  4. django系列2--下载安装、项目创建、配置、启动

    Django下载与安装 一.使用pip: 1.下载: django的官网下载页:https://www.djangoproject.com/download/ 1.使用pip安装, 在cmd命令行中输 ...

  5. LockBox的安装

    LockBox是一套加密解密库,下载地址:http://sourceforge.net/projects/tplockbox/ 我的安装的操作系统:win7 64位 安装步骤如下: 一,安装: 安装时 ...

  6. leecode刷题（22）-- 反转数组

    leecode刷题(22)-- 反转数组 反转数组 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3-> ...

  7. 阿里云ros实例

    模板文件 { "ROSTemplateFormatVersion": "2015-09-01", "Parameters": { " ...

  8. elasticsearch-analysis-pinyin

    来源:https://github.com/medcl/elasticsearch-analysis-pinyin Pinyin Analysis for Elasticsearch This Pin ...

  9. SAE实践——创建简单留言板

    1. 创建数据库 将mysaeapptest的数据库初始化之后,建立新的数据库,在PHPMyAdmin输入下列SQL. CREATE TABLE IF NOT EXISTS `ny_diary` ( ...

  10. open/read/write/close

    open 函数 函数原型 #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int o ...