用JS写小鸟飞行的游戏

为了方便审阅，我直接将css与js部分代码块写在了HTML中。
游戏开始界面：

游戏过程：

游戏玩法：点击游戏界面，小鸟会上浮，如果不点击小鸟会坠落死亡，同时也不能撞击柱子，二者其一都会 game over！
游戏思路：运动的物品：小鸟（上升与坠落），柱子（移动），草坪（无缝滚动），分数（小鸟每过一个柱子分数加一）
小鸟其实只做了上升与下降的运动，柱子与草坪的向左移动。
代码如下：

Document

<div id="wrap"><!-- logo --><div id="head"><img src="img/head.jpg" /><span></span></div><!-- 按钮 --><div id="start"><img src="img/start.jpg" /></div><!-- 分数 --><div id="score"><img src="img/0.jpg" /></div><!-- 底部的草坪 --><div id="slider"><div id="slider_img"><img src="img/banner.jpg" /><img src="img/banner.jpg" /></div></div><!-- 游戏界面 --><!-- 游戏界面的小鸟 --><img src="img/down_bird0.png" id="bird" /><!-- 游戏界面的柱子容器 --><div id="zz"></div>
</div><script>function $(id){return document.getElementById(id);}function randomNum(min,max){// 生成随机数return Math.floor(Math.random()*(max-min+1)+min);//Math.floor(Math.random()*10);    //可均衡获取0到9的随机整数。//Math.random();    //0.0 ~ 1.0 之间的一个伪随机数。[0,1)  包含0，不包含1。//Math.floor();    //向下取整。}//分数var score = 0;//让草坪无缝滚动var sliderTimer = setInterval(function(){//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式//当草坪的一半在屏幕左边了，就把草坪的left设置为0if($("slider_img").offsetLeft <= -$("slider").offsetWidth){$("slider_img").style.left = "0";}else{$("slider_img").style.left = $("slider_img").offsetLeft - 1 +"px"}},30)//开始按钮$("start").onclick = function(){//开始按钮隐藏this.style.display = "none";// logo隐藏$("head").style.display = "none";//此元素不会被显示//游戏界面的鸟显示$("bird").style.display = "block";//此元素将显示为块级元素，此元素前后会带有换行符//鸟要下落birdMove();//创建柱子并且让柱子移动zzMove();}//封装创建柱子的函数function zzMove(){var timer = setInterval(function(){// 创建一个容器，用来存放柱子var zzDiv = document.createElement("div");zzDiv.className = "zz";createZzChild(zzDiv);$("zz").appendChild(zzDiv);//给柱子添加一个属性，目的是为了让分数只加一次zzDiv.add = true;//让柱子移动起来//给柱子容器添加一个自定义的扩展属性，保存它移动的定时器。主要是为了定时不相互影响。// 给柱子定义一个初始位置zzDiv.style.left = "350px";zzDiv.timer = setInterval(function(){// 让柱子做匀速向左运动// 当柱子移动到游戏界面外，让柱子消失if(zzDiv.offsetLeft <= -zzDiv.offsetWidth){clearInterval(zzDiv.timer);zzDiv.remove();}else if(zzDiv.offsetLeft <= $("bird").offsetLeft - zzDiv.offsetWidth){if(zzDiv.add == true){changeScore()zzDiv.add = false;}}zzDiv.style.left = zzDiv.offsetLeft - 2 + "px"},30)},3000)}//改变分数，并且以图片的方式显示function changeScore(){score ++;// 1-9$("score").innerHTML = "";// 10// 把分数变成字符串var scoreStr = "" + score;for(var i=0;i<scoreStr.length;i++){var img = document.createElement("img");img.src = "img/" + scoreStr[i] + ".jpg";$("score").appendChild(img)}}//创建柱子的上下两个部分,有个参数，表示给哪个柱子来创建上下部分function createZzChild(zz){// 随机上面管子的高度var upH = randomNum(60,213);//创建一个上面管子的divvar upDiv = document.createElement("div");upDiv.className = "up";upDiv.style.height = upH + "px";//创建一个图片，var upImg = document.createElement("img");upImg.src = "img/up_pipe.png";upDiv.appendChild(upImg);//创建下面的管子var downDiv = document.createElement("div");downDiv.className = "down";downDiv.style.height = (423 - upH - 150) + "px"var downImg = document.createElement("img");downImg.src = "img/down_pipe.png";downDiv.appendChild(downImg);zz.appendChild(upDiv)zz.appendChild(downDiv)}//小鸟运动function birdMove(){//鸟的初始速度$("bird").speed = 0;var birdTimer = setInterval(function(){//鸟下落越来越快$("bird").speed += 0.5;//根据小鸟的速度来改变小鸟的图片，向下和向上的if($("bird").speed < 0){$("bird").src = "img/up_bird0.png"}else{$("bird").src = "img/down_bird0.png"}//鸟和游戏界面上下碰撞的检测if($("bird").offsetTop <= 0){clearTimer();alert("gg");}else if($("bird").offsetTop >= (423 - $("bird").offsetHeight)){clearTimer();alert("gg")}else{$("bird").style.top = $("bird").offsetTop + $("bird").speed + "px";}//鸟与柱子的碰撞var zzDiv = $("zz").children;for(var i=0;i<zzDiv.length; i++){var zzDivChildren = zzDiv[i].children;for(var j=0;j<zzDivChildren.length;j++){var ispeng = peng($("bird"),zzDivChildren[j])if(ispeng){clearTimer();alert("碰到柱子了")}}}},30)// //小鸟方向朝下// bird.style.top = bird.offsetTop + 10 + "px";// //小鸟方向朝上// bird.style.top = bird.offsetTop - 10 + "px";}//给游戏绑定鼠标点击事件document.onclick = function(){$("bird").speed = -6;}//清除页面中所有定时器function clearTimer(){var allTimer = setTimeout(function(){for(var i=0;i<allTimer;i++){clearInterval(i)}},0)}// 延时执行// setTimeout(function(){//     window.close();// },3000)////碰撞检测函数//鸟和柱子的碰撞检测//固定的div  fixedDiv//移动的div  moveDivfunction peng(fixedDiv,moveDiv){//获取moveDiv的宽高和位置var moveW = moveDiv.offsetWidth;var moveH = moveDiv.offsetHeight;var moveL = moveDiv.parentNode.offsetLeft;var moveT = moveDiv.offsetTop;//获取fixedDiv的宽高和位置var fixedW = fixedDiv.offsetWidth;var fixedH = fixedDiv.offsetHeight;var fixedL = fixedDiv.offsetLeft;var fixedT = fixedDiv.offsetTop;var isLeft = fixedL + fixedW >= moveL;var isRight = moveW + moveL >= fixedL;var isTop = fixedH + fixedT >= moveT;var isBottom = moveH + moveT >= fixedT;return isLeft && isRight && isTop && isBottom;}
</script>

用JS写小鸟飞行的游戏相关推荐

利用js写的见缝插针小游戏
利用js写的见缝插针小游戏今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 游戏截图失败时代码如下 js代码 index.js 测试游 ...
教你前端如何用js写一个跑酷小游戏
在线体验地址:http://summer.pkec.net/ 源码地址:https://gitee.com/ihope_top/juejin-summer 前言不知不觉夏天又到了,提到夏天你们能想到 ...
利用js写的见缝插针小游戏（推荐给新手)
标题之所以写推荐给新手,是因为我也是个刚学js一周的新人,想练练手,于是就花了一下午写了这个游戏,所以我写的可能更适合新手,大神勿喷. 这个游戏是利用原生的js以及html5的canvas技术做的一个 ...
前端三小时用html和js写一个贪吃蛇游戏，非常简单带讲解，代码可直接用，功能完整
目录游戏主体部分--普通模式游戏主体部分--地狱模式游戏主页入口预览图游戏入口代码 1.html 2.css 3.js 注册页面代码游戏实现很简单,只写游戏主体的话只要三小时就够了. 话不 ...
js写的一个html游戏向导模块
依旧是最近的一个游戏项目,其中的一个需求是要设计一个游戏向导模块,第一次登陆后用箭头,对话框,音频介绍游戏界面上的各个功能.因为介绍的步数较多,就不能纯粹写一些杂乱的代码去触发事件.我的基本思想是,用 ...
JS写的一个猜拳游戏
const readline = require("readline-sync"); console.log("欢迎来到猜拳游戏:"); console.log ...
利用js写一个飞翔的小鸟
html部分 <!DOCTYPE html> <html><head><meta charset="utf-8" /><tit ...
用Three.js写h5小游戏-3d飞机大战
用Three.js写h5小游戏-飞机大战博主的话运行图片目录路径![在这里插入图片描述](https://img-blog.csdnimg.cn/20190829103702978.jpg?x- ...
小鸟飞行游戏【附源码】
小鸟飞行游戏,java精品项目,毕业设计,计算机系,计算机毕业设计,程序设计,设计与实现,源码, 小鸟飞行游戏[附源码] 我的网站已经上线了 http://javapub.net.cn/ 博主介绍:

用JS写小鸟飞行的游戏

用JS写小鸟飞行的游戏相关推荐

最新文章

热门文章