这是一个特别简单的用原生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. Java程序测试之线程的使用

    package thread_test; class A implements Runnable { public void run() { while(true) { System.out.prin ...

  2. 在java中的Try Catch块-------------异常处理(2)

    1. Try块是什么? Try块是一块可能产生异常的代码块,一个Try块可能跟着Catch块或者Finally块,或者两者. Try块的语义: try{ //statements that may c ...

  3. 4G最快网速相当于30M宽带

    [导读]据北京移动方面介绍,目前其4G网络的覆盖范围包括:东西北三环.南至两广路以内的地区:清华北大.国贸CBD及园博会等地区. 在4G年内发牌已成定局的背景下,各运营商都在加快布局,北京移动近期就推 ...

  4. GDKOI2015滚粗记

    又是愉悦的滚粗了hahaha（特别不甘心啊啊啊） 其实去比赛每次都一样啦，就是每次吃饭睡觉补番考试评讲互黑跪烂什么的，这次就不用说了啦，先把老师要求写的东西贴出来再写点别的啦 这次暴露了很多问题，首先 ...

  5. windows管道

    匿名管道的使用 匿名管道主要用于本地父进程和子进程之间的通信, 在父进程中的话,首先是要创建一个匿名管道, 在创建匿名管道成功后,可以获取到对这个匿名管道的读写句柄, 然后父进程就可以向这个匿名管道中 ...

  6. 2017-3-2 C#基础 结构体

    1. 结构体:用户自定义类型定义位置:定义在Main函数的外面,类的里面 定义格式:struct 自定义名字{ public 数据类型 名字; public 数据类型 名字; ... ...} 声明实 ...

  7. loadrunner入门篇-Vuser发生器

    Vuser 发生器(Visual User Generator,VuGen),主要通过捕获客户端向服务器发送的HTTP请求,将这些请求录制成脚本,在回放时将捕获的HTTP请求再次发送,以达到模拟客户行 ...

  8. Overlay网络技术之vxvlan

    了解云计算数据中心网络架构的过程中,看到这么一篇不错的关于大二层技术overlay的文章,转载分享给大家! 一. 传统网络面临的问题 随着企业业务的快速扩展需求,IT做为基础设施,快速部署和减少投入成 ...

  9. UI设计需具备的几大素质

    近年来,IT产业对于高端技术人才需求加大,特别是北上广和知名企业对人才需求更为迫切,UI设计人员的正在接受UI培训的学员都赢认识到UI设计在未来要求将越来越高,交互设计越来越新颖也将对用户更加友好,兄 ...

  10. [Bnuz OJ]1176 小秋与正方形

    传送门 问题描述 某天,acm的小秋拿到了一张很大很大的纸.他现在打算把它撕成正方 形.但是他没有任何工具,没有尺子,所以他尝试一种有趣的方法切分矩形.假设这是一个a*b的矩形(a>b),那么小 ...