java代码鸟飞_180行原生js代码实现简易版飞行的小鸟游戏
/**原理简单,(简单碰撞判断,定时器运用)复制代码直接运行即可,如果没有声音文件,则去除几处调用游戏声效的代码即可**/
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
overflow: hidden;
}
#bird{
width: 30px;
height: 30px;
font-size: 11px;
background-color: tomato;
position: absolute;
left: 500px;
top :50px;
}
Enter开始
window.onload = function(){
var bird = document.getElementById("bird");
var sc = document.getElementById("baMusic");
var over = document.getElementById("overMusic");
var ready = document.getElementById("readyMusic");
var startBtn = document.getElementById("startBtn");
var speed = 0;
var visiWidth = document.documentElement.clientWidth;
var visiHeight = document.documentElement.clientHeight;
var die = false; // 默认未死亡
var score = 0;
var birdTimer; //鸟自由落体定时器
var gaming = false; //默认游戏未开始
/*键盘监听按enter开始游戏*/
document.onkeydown = function(event){
event = event||window.event;
if(gaming){
speed = speed - 20;
if(!die){
dump();
}
}else{
if(event.keyCode==13){
bird.innerHTML="正在游戏";
gaming = true;
gameStart();
fly();
var rnadzTimer = setInterval(function(){
getRandomZz();
},1500); // 隔指定时间生成柱子.
}
}
};
function fly(){
clearInterval(birdTimer);
birdTimer = setInterval(function(){
var curTop = parseInt(bird.offsetTop);
if(curTop >= visiHeight-50 || curTop <= 0){
clearInterval(birdTimer);
die = true;
gameOver();
document.onkeydown = null;
return;
}
speed +=1;
bird.style.top = (curTop + speed) + "px";
},50);
}
function getRandomZz(){
var zzTimer ;
var kx = getRandom(250,600); //留多少空隙
var zzTop = document.createElement("div");
var zzBtm = document.createElement("div");
var randHeight = getRandom(50,300);
var randWidthTop = getRandom(50,150);
zzTop.moveData = visiWidth;
zzTop.style.height = randHeight+"px";
zzTop.style.width = randWidthTop+"px";
zzTop.style.backgroundColor = "green";
zzTop.style.position = "absolute";
zzTop.style.left = "100%";
// 设置底部柱子
zzBtm.moveData = visiWidth;
zzBtm.style.height = (visiHeight - randHeight -kx)+"px";
zzBtm.style.width = randWidthTop+"px";
zzBtm.style.backgroundColor = "green";
zzBtm.style.position = "absolute";
zzBtm.style.left = "100%";
zzBtm.style.top = (randHeight+kx)+"px";
document.body.appendChild(zzTop);
document.body.appendChild(zzBtm);
zzTimer = setInterval(function(){
if(die){
clearInterval(zzTimer);
return;
}
zzTop.moveData--;
zzTop.style.left = zzTop.moveData + "px";
zzBtm.style.left = zzTop.moveData + "px";
if(zzTop.moveData<=-150){
score++;
getScore();
clearInterval(zzTimer);
}
// 检测碰撞
if(isKnock(bird,zzTop)||isKnock(bird,zzBtm)){
die = true;
clearInterval(zzTimer);
clearInterval(birdTimer);
gameOver();
alert("得分:" + score * 5);
}
},3);
}
function gameStart(){
ready.src="video/ready.mp3";
ready.play();
}
function getScore(){
sc.src="video/score.mp3";
sc.play();
}
function gameOver(){
over.src="video/gameover.mp3";
over.play();
}
function dump(){
over.src="video/jump.mp3";
over.play();
}
}
/**
*随机返回一个n-m的整数
*/
function getRandom(n,m){
return parseInt(Math.random()*(m-n)) +n;
}
/*
* 碰撞检测方法,如果碰撞则返回true
* obj1 第一个dom 对象
* obj2 第二个dom 对象
* */
function isKnock(obj1,obj2){
if(obj1.offsetLeft + obj1.offsetWidth > obj2.offsetLeft &&
obj2.offsetLeft + obj2.offsetWidth > obj1.offsetLeft &&
obj1.offsetTop + obj1.offsetHeight > obj2.offsetTop &&
obj2.offsetTop + obj2.offsetHeight > obj1.offsetTop){
return true;
}
return false;
}
java代码鸟飞_180行原生js代码实现简易版飞行的小鸟游戏相关推荐
- 用原生JS写一个网页版的2048小游戏(兼容移动端)
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
- 原生js开发web简易版版消灭星星
昨天看视频之后,整理思路,自己完成了简易版消灭星星 思路: 模块1:初始化 初始化总分数.当前分数.背景图.选择的星星分数 初始化星星(生成二维数组,对二维数组的每一个对象设置样式(长.宽.背景图), ...
- 58行html/js代码实现图片裁剪并保存功能
58行html/js代码实现图片裁剪保存功能 <input type="file" id="file-input" accept="image/ ...
- 原生js代码编写钟表
原生js代码编写钟表 利用js中的定时器编写: 直接上代码: <!DOCTYPE html> <html><head><meta charset=" ...
- HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌)
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
- html漂浮广告随页面移动代码,JS漂浮广告代码,慢慢漂移的广告JS代码
JS漂浮广告代码,慢慢漂移的广告js代码,可以漂浮到任何位置,哈哈...直接贴代码,很简单. var xin = true, yin = true var step = 1 var delay = 5 ...
- 飞行的小鸟论文python_80+行python代码实现简单的“飞行的小鸟”游戏
· pygame.init:初始化的一些定义 · pygame.font:使用字体 · pygame.time:管理时间和帧信息 另外因为游戏需要用到很多随机数,所以还需要random模块,也可以通过 ...
- 飞行的小鸟论文python_80+行代码实现简单的“飞行的小鸟”游戏
如果想尝试着用python做一款简单好玩的小游戏"飞行的小鸟",那就得用到pygame这个模块,让我们先简单了解一下pygame吧. pygame是一个利用SDL库(全名Simpl ...
- python贪吃蛇最简单代码_利用python实现简易版的贪吃蛇游戏(面向python小白)
引言 作为python 小白,总是觉得自己要做好百分之二百的准备,才能开始写程序.以至于常常整天在那看各种语法教程,学了几个月还是只会print('hello world'). 这样做效率太低,正确的 ...
最新文章
- 一个简单的因数分解java代码
- 那几个题(没懂的地方留言)
- HashMap的7种遍历方式
- GM9 tile empty issue - ( not figured out )
- java-图像的几何变换
- 实战HPUX 11.31 MC/SG更换锁盘
- boost/container/small_vector.hpp: No such file or directory on Ubuntu 14.04
- java基本数据类型的变量
- js 判断是否为mac电脑 、还是windows操作系统
- CBA公布对北京首钢处罚结果 相关工作人员遭重罚
- python实现规则引擎_几种开源规则引擎(BRE)的比较 转
- photoshop 安装和使用 蓝湖上传设计图
- DHTMLX JS Gantt Library 7.1.13
- Keil编译错误 error: L6050U: The code size of this image (99784 bytes) exceeds the maxim
- 5.19 对学生按姓名进行随机排序 [原创Excel教程]
- php array assoc,PHP array_diff_assoc() 函数用法及示例
- 「Mac」突然没声音,音量键不起作用——解决办法(大部分情况)
- linux gzip 4G,Linux gzip命令
- 第六次网页前端培训(JavaScript)
- [计算机数值分析]埃特金算法加速迭代法求根过程