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

    Alloctaion bottleneck refers to contention in the system pages that store allocation structures. PFS ...

  2. gitignore 使用

    在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如无,则需自己手工建立此文件).这个文件每一行保存了一个匹配的规则例如: # 此为注 ...

  3. 基于docker创建的Jenkins，settings.xml文件放在哪里

    如果运行容器时挂载目录如下 启动容器 docker run -itd -p 8080:8080 -p 50000:50000 --name jenkins --privileged=true  --r ...

  4. 如何在TortoiseGit中使用ssh-keygen生成的key

    再windows 用TortoiseGit 时,git clone 项目时 提示 "Couldn't load this key (OpenSSH SSH-2 private key),如下 ...

  5. c# 调用微信小程序

    //微信也不给个c#调用的例子 只好自己造咯:ps:大佬勿喷 1 public string GetWx(string code, string iv, string encryptedData) { ...

  6. Chrome71版本使用screenfull.js全屏功能时报参数错误

    在生产环境长期使用的一个“全屏”功能突然失效了,查看Console 如下报错: Failed to execute 'requestFullscreen' on 'Element': paramete ...

  7. 【OCP-12c】CUUG 071题库考试原题及答案解析（22）

    5.choose the best answer Evaluate the following CREATE SEQUENCE statement: CREATE SEQUENCE seq1 STAR ...

  8. “全栈2019”Java异常第二十一章：finally不被执行的情况

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  9. 【文文殿下】洛谷P2408 不同子串个数

    题目链接https://www.luogu.org/problemnew/show/P2408 SAM裸题,大力求就行了 #include<cstdio> #include<cstr ...

  10. [HTML] <meta name="viewport" content="width=device-width,initial-scale=1.0">释义

    <meta name="viewport" content="width=device-width,initial-scale=1.0">这是 HT ...