这是一个特别简单的用原生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. 谈谈JavaScript代码混淆

    概述: 案例:Cesium打包流程,相关技术点和大概流程 原理:代码优化的意义:压缩 优化 混淆 优化:如何完善Cesium打包流程 关键字:Cesium gulp uglifyjs 字数:2330 ...

  2. BZOJ 1606: [Usaco2008 Dec]Hay For Sale 购买干草(动态规划)

    裸的背包= =，没什么好说的= = CODE： #include<cstdio>#include<iostream>#include<algorithm>#incl ...

  3. 使用SigbalR发送通知

    微信商城使用支付宝支付的时候,需要有个过度页面提示用户用浏览器打开页面去支付,等用户在浏览器支付完之后再打开微信(微信此时依旧显示的是过度页面),过度页面需要跳转到订单详情页面.那么这个过度页面怎么知 ...

  4. Ancient Cipher UVa1339

    这题就真的想刘汝佳说的那样,真的需要想象力,一开始还不明白一一映射是什么意思,到底是有顺序的映射?还是没顺序的映射? 答案是没顺序的映射,只要与26个字母一一映射就行 下面给出代码 //Uva1339 ...

  5. TCP详解

    1. 数据进入协议栈的封装过程 2. TCP连接的三次握手 3. TCP连接的三次握手和关闭时的四次握手 各个状态的意义如下: LISTEN - 侦听来自远方TCP端口的连接请求: SYN-SENT ...

  6. 一个不错的windows编程网址

    http://www.zklmc.com/ 含有MFC,C#,web开发资料

  7. 存储过程与SQL语句如何选择

    58到家数据库30条军规,有一条是“禁止使用存储过程.视图.触发器.Event”, 高并发大数据的互联网业务,架构设计思路是“解放数据库CPU,将计算转移到服务层”, 并发量大的情况下,这些功能很可能 ...

  8. 每天一个Linux命令（19）--find命令

    linux 下 find 命令在目录结构中搜索文件,并执行指定的操作.Linux 下 find 命令提供了相当多的查找条件,功能很强大.由于 find 具有强大的功能,所以它的选项也很多,其中大部分选 ...

  9. apicloud下拉刷新

    //下拉 apiready = function () { var param = {}; toDoRequest(); param.loadingImgae = 'widget://image/re ...

  10. synchronized和lock比对

    前言:在上面的博客说了synchronized的一些用法,下面我们再来看看lock,这个出现频率也是非常高的一个. 1:获取Lock锁的几种方式 前面说了synchronized有锁对象和锁类对象,当 ...