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

时间：2022-09-12 14:55:29
其中一个画布背景是一张图片，还有小鸟，两个管子的图片。暂时不知道怎么附上去就不添加了。这里只有源代码，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 写分页

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

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

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

  4. 原生js写Ajax

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

  5. 原生JS写的ajax函数

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

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

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

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

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

  8. 【C语言探索之旅】 第一部分第八课：第一个C语言小游戏

    ​ 内容简介 1.课程大纲 2.第一部分第八课:第一个C语言小游戏 3.第一部分第九课预告: 函数 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写 ...

  9. python小练习：使用循环和函数实现一个摇骰子小游戏。游戏规则如下：游戏开始，首先玩家选择Big or Small（押大小），选择完成后开始摇三个骰子，计算总值，11&lt&semi;&equals;总值&lt&semi;&equals;18为&OpenCurlyDoubleQuote;大”，3&lt&semi;&equals;总值&lt&semi;&equals;10为&OpenCurlyDoubleQuote;小”。然后告诉玩家猜对或者是猜错的结果。

    python小练习:使用循环和函数实现一个摇骰子小游戏.游戏规则如下:游戏开始,首先玩家选择Big or Small(押大小),选择完成后开始摇三个骰子,计算总值,11<=总值<=18为“ ...

随机推荐

  1. 一般处理程序上传文件（html表单上传、aspx页面上传）

    html 表单上传文件        一般处理程序由于没有 apsx 页面的整个模型和控件的创建周期,而比较有效率.这里写一个用 html 表单进行文件上传的示例.        1. 表单元素选用 ...

  2. Memory Allocation in the MySQL Server

    https://dev.mysql.com/doc/internals/en/memory-allocation-mysql-server.html MySQL Internals Manual  / ...

  3. Unity3D研究院之LZMA压缩文件与解压文件

    原地址:http://www.xuanyusong.com/archives/3095 前两天有朋友告诉我Unity的Assetbundle是LZMA压缩的,刚好今天有时间那么就研究研究LZMA.它是 ...

  4. WebDriver&lpar;Selenium2&rpar; 判断页面是否刷新的方法

    http://uniquepig.iteye.com/blog/1568208 public static boolean waitPageRefresh(WebElement trigger) { ...

  5. PHP 合并数组 追加数组例子

    PHP合并数组我们可以使用array_merge()函数,array_merge()函数返回一个联合的数组.所得到的数组以第一个输入数组参数开始,按后面数组参数出现的顺序依次追加.其形式为: arra ...

  6. Dynamics CRM The difference between UserId and InitiatingUserId in Plugin

    对于这两者的不同,MSDN的解释如下 • IExecutionContext.UserId Property: Gets the global unique identifier of the sys ...

  7. 题解 P3246 【&lbrack;HNOI2016&rsqb;序列】

    很久之前做过这道题,但是跑得贼慢,现在用了可以被卡成 n m 的笛卡尔树做法,发现跑得贼快[雾 noteskey 介绍一种复杂度错误然鹅在随机数据下跑得贼快的算法: 笛卡尔树 方法就是 \(O~ n\ ...

  8. &lbrack;再寄小读者之数学篇&rsqb;&lpar;2014-06-23 二阶导数估计 &lbrack;中国科学技术大学2013年高等数学B 考研试题&rsqb;&rpar;

    设 $f(x)$ 二阶连续可导, $f(0)=f(1)=0$, $\dps{\max_{0\leq x\leq 1}f(x)=2}$. 证明: $$\bex \min_{0\leq x\leq 1}f ...

  9. P359 usestock2&period;cpp

    IDE Qt Creator 4.0.3 stock.h #ifndef STOCK_H #define STOCK_H #include <string> class Stock //类 ...

  10. Codeforces Round &num;212 &lpar;Div&period; 2&rpar; C&period; Insertion Sort

    C. Insertion Sort Petya is a beginner programmer. He has already mastered the basics of the C++ lang ...

相关文章