原生js实现Flappy Bird小游戏
作者:microcosm1994 时间:2024-04-29 13:37:03
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习。
html结构
<div id="game">
<div id="bird"></div>
</div>
css样式
#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);
}
}
注释都写在了了代码里,一个简单小游戏就完成了。
来源:https://blog.csdn.net/qq_39081974/article/details/78134885
标签:js,Flappy,Bird
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python正则表达式匹配数字和小数的方法
2021-07-16 21:29:17
![](https://img.aspxhome.com/file/2023/5/89355_0s.png)
浅谈Python3实现两个矩形的交并比(IoU)
2021-09-06 19:31:56
![](https://img.aspxhome.com/file/2023/7/67247_0s.jpg)
SQL SERVER 的SQL语句优化方式小结
2024-01-25 02:11:12
asp如何自动反馈电子邮件?
2002-01-01 06:54:00
python执行子进程实现进程间通信的方法
2021-04-23 04:29:20
如何将Python字符串转换为JSON的实现方法
2022-07-11 02:58:37
SQL Server管理 这些你懂吗?
2011-07-01 13:40:23
利用SQL Server复制技术实现数据同步更新
2009-10-23 14:11:00
python 创建一个空dataframe 然后添加行数据的实例
2022-05-08 01:51:59
JS生成一维码(条形码)功能示例
2024-04-26 17:12:30
![](https://img.aspxhome.com/file/2023/2/135632_0s.png)
解决Python对齐文本字符串问题
2021-08-20 10:22:26
node.js用fs.rename强制重命名或移动文件夹的方法
2024-05-13 10:05:37
Python 2/3下处理cjk编码的zip文件的方法
2022-08-05 17:53:40
python 包实现 time 时间管理操作
2023-03-13 21:37:52
python 19个值得学习的编程技巧
2021-09-21 22:42:30
Python基于回溯法子集树模板解决选排问题示例
2023-02-15 18:12:37
![](https://img.aspxhome.com/file/2023/7/109427_0s.jpg)
python取数作为临时极大值(极小值)的方法
2021-02-27 10:32:01
Python 元组(Tuple)操作详解
2023-06-28 15:36:39
![](https://img.aspxhome.com/file/2023/3/59133_0s.png)
Django项目中model的数据处理以及页面交互方法
2022-12-26 20:12:25
![](https://img.aspxhome.com/file/2023/5/101655_0s.jpg)
在JS循环中使用async/await的方法
2024-05-02 16:19:14