这是一个特别简单的用原生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. 无分类编址 CIDR (构成超网)

    划分子网在一定程度上缓解了因特网在发展中遇 到的困难.然而在 1992 年因特网仍然面临三个必 须尽早解决的问题,这就是: B 类地址在 1992 年已分配了近一半,眼看就要在 1994 年 3 月全 ...

  2. c#配置文件的简单操作

    // 配置文件 <?xml version="1.0" encoding="utf-8" ?> <configuration> < ...

  3. shell监控网卡流量

     #!/bin/bashRx=`ifconfig  eno16777736 | grep RX | grep packets | awk '{print $5}'`Tx=`ifconfig  eno1 ...

  4. C# 数据类型 数据转换 自己的见解和方式

    数据类型分为:基本数据类和引用类型, 基本数据类型又分为整型,浮点型,字符型,布尔型. 引用类型又分为:字符串型,日期时间,枚举类型,结构类型. int long float = 10.5f; dou ...

  5. make: Nothing to be done for `all'

    最近安装fastdfs,执行make.sh时,出现  Nothing to be done for `all' 在网上搜了一下,大部分是说 用 make clean 清除以前编译产生的目标文件. 我试 ...

  6. JavaScript中国象棋程序（8） - 进一步优化

    在这最后一节,我们的主要工作是使用开局库.对根节点的搜索分离出来.以及引入PVS(Principal Variation Search,)主要变例搜索. 8.1.开局库 这一节我们引入book.js文 ...

  7. mongodb 安装到创建用户,认证auth,httpinterface

    今天花了一天时间来解开这个mongodb的谜团,如果有遇到了其他的问题,可以咨询我. #开始 2.6.10安装方式 不同版本后面设置用户权限方式有所差异#下载这个版本的mongodb mongodb- ...

  8. cin的返回值

    例: int main() { int a,b; while(cin >> a >> b) cout << a+b << endl; } 首先,cin是 ...

  9. PHP学习1 — PHP文件处理

    PHP 中 include 与 require  Php include (或 require)语句会获取指定文件中存在的所有文本/代码/标记,并复制到使用 include 语句的文件中. 这意味着您 ...

  10. C# 的四舍五入

    c#的四舍五入有两种情况: 1.常规四舍五入 (decimal).ToString("f2") 2.四舍六入五取偶 除1里面的其他方式四舍五入都是四舍六入五取偶.