其中一个画布背景是一张图片，还有小鸟，两个管子的图片。暂时不知道怎么附上去就不添加了。这里只有源代码，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. docker-compose 部署 Redis

    信息: Docker版本($ docker --version):Docker版本18.06.1-ce,版本e68fc7a 系统信息($ cat /etc/centos-release):CentOS ...

  2. ubuntu emacs的安装

    在终端依次输入这三条命令即可 sudo add-apt-repository ppa:ubuntu-elisp/ppa sudo apt-get update sudo apt-get install ...

  3. 查域名对应的ip的命令：Nslookup

    使用Nslookup命令可查询域名对应的ip,如下所示

  4. win10开始菜单任务栏点击无反应

    win+r,输入powershell,确定,输入Stop-Process -Name explorer,回车(这行代码是结束explorer进程,结束后它会自动重启)

  5. C# Winform 小技巧(Datagridview某一列按状态显示不同图片)

    步骤: 一.导入状态图片到项目中: 二.在窗体中声明一个图片数组,并在窗体的OnLoad事件中加入图片资源: /// <summary> /// 存储状态图片序列,避免同一状态对图片重复读 ...

  6. LCS - Longest Common Substring(spoj1811) (sam(后缀自动机)+LCS)

    A string is finite sequence of characters over a non-empty finite set \(\sum\). In this problem, \(\ ...

  7. 洛谷P4069 [SDOI2016]游戏（李超线段树）

    题面 传送门 题解 如果我们把路径拆成两段,那么这个路径加可以看成是一个一次函数 具体来说,设\(dis_u\)表示节点\(u\)到根节点的距离,那么\((x,lca)\)这条路径上每个节点的权值就会 ...

  8. 【FAQ】tomcat启动jdk版本不一致

    一.tomcat7.exe与startup.bat的区别: 1.这两个都可以启动tomcat,但tomcat7.exe必须安装了服务才能启动,而startup.bat不需要 2.另外一个区别是它们启动 ...

  9. 把一个集合自定转成json字符串

    List<CityData> listData =new List<CityData>(); //把一个集合自定转成json字符串. foreach (var city in ...

  10. opencv 将视频分解成图片和使用本地图片合成视频

    代码如下: // cvTest.cpp : Defines the entry point for the console application. #include "stdafx.h&q ...