用原生js写小游戏--Flappy Bird
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/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;
}
</style> </head> <body> <div id="game">
<div id="bird"></div>
</div>
</body>
<script type="text/javascript">
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,
start: birdElement
};
var sky = {
x: 0
}; game.onclick=function(){ 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(sky.x);
}
//小鸟的y轴坐标小于0，说明碰到顶部边框，所以游戏结束
if (bird.y < 0) {
bird.y = 0;
stop(sky.x);
}
//设置游戏开始时小鸟出现的位置
bird.start.style.top = bird.y + "px";
// console.log(bird.x)
}
}, 30); //添加键盘事件，实现键盘上下键控制小鸟
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 = random(100,275);
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 () {
//这里1控制的是管子移动的速度 数字越大 难度越高
that.x = that.x - 5;
//简单实现管子无缝滚动，视觉差
if (that.x < -52) {
that.x = 800;
}
if (!gameover) {
divUp.style.left = that.x + "px";
divDown.style.left = that.x + "px";
}
// 设置变量，进行游戏碰撞检测，并停止游戏
var downBoom = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y + 25 > that.downPipeY);
var upBoom = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y < that.upPipeH);
if (downBoom || upBoom) {
//gameover = true;
stop(sky.x);
}
}, 30);
}
//执行上面的函数方法
var arr=[];
for (var i = 0; i < 4; i++) {
arr[i]=new Pipe(i * 200 + 400);
}
//封装一个用来停止游戏的方法，
function stop(Sky){
var a;
gameover=true;
clearInterval(timer);
for(var i=0;i<arr.length;i++){
clearInterval(arr[i].timer);
}
if(Math.abs(Sky)<=352){
a=0;
alert("成绩："+a)
}else{
a=Math.floor((Math.abs(Sky)-300)/200+1);
// a=Math.ceil(((Math.abs(Sky)-300))/200);
alert("成绩："+a)
}
// console.log(Sky)
}
} function random(a,b){
return Math.round(Math.random()*(a-b)+b)
} </script>
效果如下
用原生js写小游戏--Flappy Bird的更多相关文章
- JS写小游戏（一）：游戏框架
前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...
- canvas小游戏——flappy bird
前言 如果说学编程就是学逻辑的话,那锻炼逻辑能力的最好方法就莫过于写游戏了.最近看了一位大神的fly bird小游戏,感觉很有帮助.于是为了寻求进一步的提高,我花了两天时间自己写了一个canvas版本 ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- 用Phaser来制作一个html5游戏——flappy bird （二）
在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...
- pixi.js 微信小游戏 入手
pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...
- 用Phaser来制作一个html5游戏——flappy bird （一）
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- 原生 js 写分页
欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...
- 用原生JS写移动动画案例及实际应用
js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
随机推荐
- Redis数据库-基础篇
Redis Redis是一个开源的,先进的key-value存储. 它通常被称为数据结构服务器,因为键可以包含字符串,哈希,链表,集合和有序集合. Redis 简介 Redis 是完全开源免费的,遵守 ...
- hdu1423 最长公共上升子序列
题目传送门 Greatest Common Increasing Subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: ...
- [转]云计算：SaaS、PaaS、IaaS、CaaS
http://blog.csdn.net/it_man/article/details/8441902 近两年来,随着云计算技术的飞速发展,越来越多的厂商意识到了它巨大的潜在价值.随着微软.IBM.G ...
- 【知识强化】第四章 指令系统 4.3 CISC和RISC的基本概念
那么我们进入本章的最后一节,CISC和RISC. 我们先来回顾一下,我们这一章的一个概览.我们之前已经把指令格式和指令的寻址方式都讲完了,这两部分呢是本章的一个重点.而本章的这一部分,CISC和RIS ...
- go语言从例子开始之Example31.定时器
我们常常需要在后面一个时刻运行 Go 代码,或者在某段时间间隔内重复运行. Go 的内置 定时器 和 打点器 特性让这些很容易实现.我们将先学习定时器,然后再学习打点器. Example: packa ...
- Djano中static和media文件路径的设置
对于常用的css.js.image和常用的工具类在django项目中要设置一个全局的路径,对所有的app都可以访问到这个路径下的文件 1在django项目的setting文件中设置对应的static和 ...
- LOJ3119. 「CTS2019 | CTSC2019」随机立方体 二项式反演
题目传送门 https://loj.ac/problem/3119 现在 BZOJ 的管理员已经不干活了吗,CTS(C)2019 和 NOI2019 的题目到现在还没与传上去. 果然还是 LOJ 好. ...
- ubuntu 自带截图工具快捷键盘
PrtSc – 获取整个屏幕的截图并保存到 Pictures 目录. Shift + PrtSc – 获取屏幕的某个区域截图并保存到 Pictures 目录. Alt + PrtSc –获取当前窗口的 ...
- matlab中求解线性方程组的rref函数
摘自:http://www.maybe520.net/blog/987/ matlab中怎么求解线性方程组呢? matlab中求解线性方程组可应用克拉默法则(Cramer's Rule)即通过det( ...
- String、StringBuffer、StringBuilder详解
String类 字符串广泛应用在java编程中,String类在java.lang包中,String类是final修饰的,不能被继承,String类对象创建后不能修改,由0或多个字符组成,包含在一对双 ...