这是一个特别简单的用原生js实现的一个小鸟游戏，比较简单，适合新手练习

这是html结构

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div id="game">

<div id="bird"></div>

</div>

<script src="flappybird.js"></script>

<script src="animate.js"></script>

</body>

</html>

　　

　　整个案例结构并不多，下面是css样式

 body {

            margin: 0;

            padding: 0;

        }

        #game {

            width: 800px;

            height: 600px;

            border: 1px solid #000;

            background: url(images/sky.png);

            overflow: hidden;

            position: relative;

        }

        #game .pipeD {

            background: url(images/pipe1.png) top center;

            position: absolute;

        }

        #game .pipeU {

            background: url(images/pipe2.png) bottom center;

            position: absolute;

        }

        #bird {

            width: 34px;

            height: 25px;

            /*border-radius: 10px;*/

            /*background-color: red;*/

            position: absolute;

            top: 100px;

            left: 100px;

            background: url(images/birds.png) -8px -10px no-repeat;

        }

下面就是原生js代码了，这个小案例还运用了自己前期封装的一个小的动画方法

function animate(obj, json, fn) {

    clearInterval(obj.timer);

    obj.timer = setInterval(function () {

        var flag = true;

        for (var k in json) {

            if (k === "opacity") {

                var leader = getStyle(obj, k) * 100;

                var target = json[k] * 100;

                var step = (target - leader) / 10;

                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                leader = leader + step;

                obj.style[k] = leader / 100;

            } else if (k === "zIndex") {

                obj.style.zIndex = json[k];

            } else {

                var leader = parseInt(getStyle(obj, k)) || 0;

                var target = json[k];

                var step = (target - leader) / 10;

                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                leader = leader + step;

                obj.style[k] = leader + "px";

            }

            if (leader !== target) {

                flag = false;

            }

        }

        if (flag) {

            clearInterval(obj.timer);

            if (fn) {

                fn();

            }

        }

    }, 15);

}

function getStyle(obj, attr) {

    if (window.getComputedStyle) {

        return window.getComputedStyle(obj)[attr];

    } else {

        return obj.currentStyle[attr];

    }

}

　　下面就是控制游戏的js代码了

var birdElement = document.getElementById("bird");

var game = document.getElementById("game");

var gameover = false;

var g = 1;

var i = 0;

var timer=null;

var bird = {

    x: birdElement.offsetLeft,

    y: birdElement.offsetTop,

    speedX: 5,

    speedY: 0,

    entity: birdElement

};

var sky = {

    x: 0

};

//var timer=setInterval(function(){

//    birdElement.style.backgroundPositionX=-52*i+"px";

//    i++;

//    if(i===3){

//        i=0;

//    }

//},100);

setInterval(function () {

    //游戏没有结束的时候运行代码

    if (!gameover) {

        //整个游戏背景x轴移动的距离

        sky.x = sky.x - bird.speedX;

        game.style.backgroundPositionX = sky.x + "px";

        //小鸟下落时y轴的坐标

        bird.speedY = bird.speedY + g;

        //设置一个变量用来接收小鸟下落时y轴的坐标，用来设置小鸟下降时的速度

        var step = bird.speedY;

        bird.y = bird.y + step;

        //用一个变量来设定小鸟下落的最低高度，用来 判断游戏是否结束

        var overY = game.offsetHeight - birdElement.offsetHeight;

        //小鸟的y轴坐标大于最低高度，所以游戏停止

        if (bird.y > overY) {

            bird.y = overY;

            stop();

        }

        //小鸟的y轴坐标小于0，说明碰到顶部边框，所以游戏结束

        if (bird.y < 0) {

            bird.y = 0;

            stop();

        }

        //设置游戏开始时小鸟出现的位置

        bird.entity.style.top = bird.y + "px";

    }

}, 25);

//添加键盘事件，实现键盘上下键控制小鸟

document.onkeyup = function (e) {

    if (e.keyCode === 38) {

        bird.speedY = -10;

    }

}

function Pipe(positonX) {

    //管子的坐标

    this.x = positonX;

    this.upPipeY = 0;

    this.width = 52;

    this.upPipeH = parseInt(Math.random() * 175 + 100);

    this.downPipeY = this.upPipeH + 200;

    this.downPipeH = game.offsetHeight - this.downPipeY;

    // 动态添加管子

    var divUp = document.createElement("div");

    divUp.className = "pipeU";

    divUp.style.width = this.width + "px";

    divUp.style.height = this.upPipeH + "px";

    divUp.style.left = this.x + "px";

    divUp.style.top = this.upPipeY + "px";

    game.appendChild(divUp);

    var divDown = document.createElement("div");

    divDown.className = "pipeD";

    divDown.style.width = this.width + "px";

    divDown.style.height = this.downPipeH + "px";

    divDown.style.left = this.x + "px";

    divDown.style.top = this.downPipeY + "px";

    game.appendChild(divDown);

    //因为定时器会混乱this的指向问题，所以提前保存this的指向，这里的this指向调用该方法的实例

    var that = this;

    // 设置定时器让管子向后移动

    this.timer=setInterval(function () {

        that.x = that.x - 1;

        //简单实现管子无缝滚动

        if (that.x < -52) {

            that.x = 800;

        }

        if (!gameover) {

            divUp.style.left = that.x + "px";

            divDown.style.left = that.x + "px";

        }

        // 设置变量，进行游戏碰撞检测，并停止游戏

        var downCrash = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y + 25 > that.downPipeY);

        var upCrash = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y < that.upPipeH);

        if (downCrash || upCrash) {

            //gameover = true;

            stop();

        }

    }, 10);

}

//执行上面的函数方法

var arr=[];

for (var i = 0; i < 4; i++) {

    arr[i]=new Pipe(i * 200 + 400);

}

//封装一个用来停止游戏的方法，

function stop(){

    gameover=true;

    clearInterval(timer);

    for(var i=0;i<arr.length;i++){

        clearInterval(arr[i].timer);

    }

}

　　注释都写在了了代码里，一个简单小游戏就完成了

　　

一个简单用原生js实现的小游戏----FlappyBird的更多相关文章

  1. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  2. JQuery&原生js ——实现剪刀石头布小游戏

    前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write L ...

  3. 原生js做h5小游戏之打砖块

    前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...

  4. 原生js完成打地鼠小游戏

    :这是首页,有简单模式和地狱模式两种模式进行选择 这是选择完模式之后的游戏界面:30秒一局游戏倒计时,每打中一只老鼠加一分,没砸中减一分,没砸不加不减 首先准备几张图片 html代码: <!-- ...

  5. 原生js完成拼图小游戏

    废话不说,看代码,图片可以自己找,我这直接引用了百度的了 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...

  6. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  7. 用js实现2048小游戏

    用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...

  8. 使用JS实现2048小游戏

    JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...

  9. 学习记录----简单的原生js路由

    在以前的web程序中,路由字眼只出现在后台中.但是随着SPA单页面程序的发展,便出现了前端路由一说.单页面顾名思义就是一个网站只有一个html页面,但是点击不同的导航显示不同的内容,对应的url也会发 ...

随机推荐

  1. 浅谈Activiti Modeler 的扩展

    为什么要扩展         最近项目打算用activiti工作流中activiti modeler来做模块的可视化订阅,但是原生的activiti任务节点,有一些不符合业务需要,比如 配置项多,属性 ...

  2. 如何创建DLL文件

    动态链接库(DLL)是从C语言函数库和Pascal库单元的概念发展而来的.所有的C语言标准库函数都存放在某一函数库中.在链接应用程序的过程中,链接器从库文件中拷贝程序调用的函数代码,并把这些函数代码添 ...

  3. 学生管理系统（C语言）

    #include <stdio.h> #include <stdlib.h> #include <string.h> #define N 3 #define LEN ...

  4. 《C++ Primer》读书笔记—第二章 变量和基本类型

    声明: 文中内容收集整理自<C++ Primer 中文版 (第5版)>,版权归原书所有. 学习一门程序设计语言最好的方法就是练习编程. 1.8比特的char类型计算机表示的实际范围是-12 ...

  5. Git建空白分支

    先执行以下命令从当前分支建一个分支,NEWBRANCH为新分支名字. git checkout --orphan NEWBRANCH 执行上面命令后,会切换到新分支.再执行命令下面命令,清空该分支(注 ...

  6. 新手学js的效果图1---（ 淘宝等商城货物查看特效）

    本人结合之前所学一起写了,多个特效,只是新手自己瞎鼓捣的,思路清晰,具体实现的货物放大镜等,替换当中的img地址就可以查看特效 <!DOCTYPE html> <html lang= ...

  7. [故障公告] 13:52-14:03，访问量突增，博客web服务器CPU 100%

    13:52-14:03,由于访问量突增,博客web服务器全线CPU 100%,造成博客站点不正常访问,由此给您带来麻烦,请您谅解. 为了迎接访问量的增长给web服务器CPU带来的巨大压力,上周我们已经 ...

  8. 关注云端搜索技术：elasticsearch，nutch，hadoop，nosql，mongodb，hbase，cassandra 及Hadoop优化

    http://www.searchtech.pro/ Hadoop添加或调整的参数: 一.hadoop-env.sh1.hadoop的heapsize的设置,默认1000 # The maximum ...

  9. Redis实战与 Session缓存

    C#操作Redis的库有很多,比如C# Redis Client就很好用, 在NuGet上搜索 ServiceStack.Redis  安装到项目中,将会添加以下引用 ServiceStack.Red ...

  10. [bzoj1500][NOI2005]维修数列——splay

    题目 题解 这道题可以说是数列问题的大BOSS,也算是这一周来学习splay等数据结构的一个总结. 我们一个一个地看这些操作. 对于操作1,我们首先建一棵子树,直接接上原树即可. 对于操作2,我们找到 ...