一个简单用原生js实现的小游戏----FlappyBird
这是一个特别简单的用原生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的更多相关文章
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- JQuery&原生js ——实现剪刀石头布小游戏
前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write L ...
- 原生js做h5小游戏之打砖块
前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...
- 原生js完成打地鼠小游戏
:这是首页,有简单模式和地狱模式两种模式进行选择 这是选择完模式之后的游戏界面:30秒一局游戏倒计时,每打中一只老鼠加一分,没砸中减一分,没砸不加不减 首先准备几张图片 html代码: <!-- ...
- 原生js完成拼图小游戏
废话不说,看代码,图片可以自己找,我这直接引用了百度的了 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...
- 【转】利用 three.js 开发微信小游戏的尝试
前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...
- 用js实现2048小游戏
用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...
- 使用JS实现2048小游戏
JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...
- 学习记录----简单的原生js路由
在以前的web程序中,路由字眼只出现在后台中.但是随着SPA单页面程序的发展,便出现了前端路由一说.单页面顾名思义就是一个网站只有一个html页面,但是点击不同的导航显示不同的内容,对应的url也会发 ...
随机推荐
- C++_运算符重载
什么是运算符的重载? 运算符与类结合,产生新的含义. 为什么要引入运算符重载? 作用:为了实现类的多态性(多态是指一个函数名有多种含义) 怎么实现运算符的重载? 方式:类的成员函数 或 友元函数(类外 ...
- Linux系统安全需要注意的一些问题
写在前面:当你部署一台服务器,第一步不应该是部署应用,安全是才是首要任务 如果某一天当你登录服务器发现 /bin/bash –i,python -c 'import pty; pty.spawn(&q ...
- Pin学习笔记--安装及一些基本知识
具体请见用户手册Pin 3.2 User Guide https://software.intel.com/sites/landingpage/pintool/docs/81205/Pin/html/ ...
- java.lang.ClassNotFoundException: org.apache.commons.logging.Log
严重: A child container failed during startjava.util.concurrent.ExecutionException: org.apache.catalin ...
- 每天一个linux命令(54)--watch命令
watch是一个非常实用的命,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果,省的你一遍遍的手动运行,在Linux下,watch是周期性的执行下个程 ...
- 【java基础之jdk源码】集合类
最近在整理JAVA 基础知识,从jdk源码入手,今天就jdk中 java.util包下集合类进行理解 先看图 从类图结构可以了解 java.util包下的2个大类: 1.Collecton:可以理解为 ...
- C#中运算符的应用
c#中的运算符(只说我自己熟悉和常用的)一.算数运算:加 +减 -乘 *除 / (整型的除法是不算小数点的,也就是说结果是整数,余数舍去了,求余数看下面)求余数 % 加减乘好理解,整型的除法和求余数因 ...
- solr笔记之solr下载及安装
在学习solr过程中,磕磕碰碰,遇到过许多问题,所以特写下笔记,以供需要的时候时常翻阅,也给能看到该博文的博友提供一个不全面的参考. 一.solr简介: Solr是一个独立的企业及搜索应用服务器,它对 ...
- asp.net 后台任务作业框架收集
收集几个可以用于 asp.net 的后台任务工具库并简单介绍. hangfire.io 支持 单次任务(Fire-and-forget),延时任务(Delayed),重复任务(Recurring ), ...
- linux命令分块总结---多操作才是真理
ps:其实学习linux系统,多多联系我们现在使用的Windows系统,这样就可以事半功倍的学习: 一. 启动,关机,登入,登出相关命令 [login]: 登录 [logout] :登出 [shutd ...