html做的小游戏,用Html做一个“快乐鸟”小游戏
入门学习前端的时候做了这么一个简单的小游戏,为了将自己所学到的知识运用起来。
这里可以看出还是有BUG的,死亡动画不是在死亡的瞬间触发
做这个小游戏用到了:
html
css
jQuery
然后这个小游戏的图片素材用到了:
其实用原生的js也是可以完成的,但是为什么要用jQuery?因为我直接跳过了原生JS的学习...只有等空余的时候,好好的找本书研究一下原生的js。
下面是这个小游戏的大致流程:
其中鸟和管道应该用面向对象来做,但是我原生JS只学习了最基础的部分,而且JS在ES5的时候还没有类的概念,只能使用构造函数来模拟一个类,在ES6的时候才加入了class这个关键字,但是我知道ES6的时候,已经是在完成这个小游戏之后了。
从上面的素材图片只有4张可以看得出来,html和CSS的搭建是没有太大难度的。所以本文着重讲解JS的部分。
这里值得一说的是,我CSS上面是用的子绝父相的定律,来摆放鸟和管道,其中管道的代码如下所示:
/* 上边的管道 */
.tubeTop {
width: 90px;
height: 420px;
background: url(../image/bird/ColumnSprite.png) no-repeat 0 0;
background-size: cover;
transform: rotate(180deg);
}
/* 下边的管道 */
.tubebotton {
width: 90px;
height: 420px;
background: url(../image/bird/ColumnSprite.png) no-repeat 0 0;
background-size: cover;
margin-top: 100px;
}
.tube {
position: absolute;
top: 0;
}
可以看得出来,其实上下管道用的是一张图片,只是将它旋转了180度,然后包含在一个div中,这样只要设置父盒子的位置,上下的两根管道的位置就不需要再去设置。
模型控制:
其实整个游戏,鸟是没有动的,我是让背景向前移动,这里有一点需要注意背景我并不是拼接了很多张图,而是仅仅用了两张图,一张在可视范围内,一张在可视范围外,当前面的那张移出可视范围的时候,再用JS将它放置到后面那张背景的后面,这样反复,就可以变成一个无限背景。
当管道移除可视范围外的时候,我并没有将它进行销毁,而是用JS重新设置它的位置,因为产生和销毁一个物体的时候,是非常的耗费性能的,如果一个物件能够复用,就需要想办法进行复用。
控制管道和背景的代码,管道的位置控制都是通过css设置它们position:
//控制管道
function tubeControl() {
var tube = $(".tube");
//背景1
var bgImg1 = $(".bgImage")
.css("left")
.split("p")[0];
bgImg1 = bgImg1 - 1 + "px";
$(".bgImage").css("left", bgImg1);
if (parseInt(bgImg1) < -1490) {
bgImg1 = 1500 + "px";
$(".bgImage").css("left", bgImg1);
}
//背景2
var bgImg2 = $(".bgImage2")
.css("left")
.split("p")[0];
bgImg2 = bgImg2 - 1 + "px";
$(".bgImage2").css("left", bgImg2);
if (parseInt(bgImg2) < -1490) {
bgImg2 = 1500 + "px";
$(".bgImage2").css("left", bgImg2);
}
//草
var Green = $(".bootonGreen")
.css("left")
.split("p")[0];
Green = Green - 1 + "px";
$(".bootonGreen").css("left", Green);
if (parseInt(Green) < -1490) {
Green = 1500 + "px";
$(".bootonGreen").css("left", Green);
}
var Green2 = $(".bootonGreen2")
.css("left")
.split("p")[0];
Green2 = Green2 - 1 + "px";
$(".bootonGreen2").css("left", Green2);
if (parseInt(Green2) < -1490) {
Green2 = 1500 + "px";
$(".bootonGreen2").css("left", Green2);
}
for (var i = 0; i < tube.length; i++) {
var left = tube
.eq(i)
.css("left")
.split("p")[0];
if (left < -250) {
left = 1550 + "px";
var top = -myRondom(210) + "px";
tube.eq(i).css("left", left);
tube.eq(i).css("top", top);
} else {
left -= 1;
tube.eq(i).css("left", left);
}
}
}
当管道已经移出可视范围的时候,给它一个随机数重新设置它的位置:
// 随机数
function myRondom(muth) {
return Math.floor(Math.random() * muth);
}
//Math.random()是随机生成0~1之间的小数
for (var i = 0; i < tube.length; i++) {
var left = tube
.eq(i)
.css("left")
.split("p")[0];
if (left < -250) {
left = 1550 + "px";
var top = -myRondom(210) + "px";
tube.eq(i).css("left", left);
tube.eq(i).css("top", top);
} else {
left -= 1;
tube.eq(i).css("left", left);
}
}
控制鸟的方式我是一直让它向下走:
function birdDown() {
var bird = $(".bird")
.css("top")
.split("p")[0];
bird = parseInt(bird) + 1 + "px";
$(".bird").css("top", bird);
}
然后鸟的动画部分就是让图片来回切换就可以达到动起来的效果,但是开篇的BUG也是在这里产生的,因为这个切换图片设置了延迟,所以在鸟死亡的时候,可能这个图片还没有进行切换:
//让鸟动起来
function birdAnima() {
var bird = $(".bird");
setInterval(function() {
if (window.die) {
$(".bird").css(
"background-position",
"-128px 0px"
);
return;
}
bird.css("background-position", "-64px 0px");
setTimeout(function() {
bird.css(
"background-position",
"0px 0px"
);
}, 250);
}, 500);
}
我在怎么判断鸟是否撞到管道然后触发死亡状态的地方卡了一会,最后我是通过鸟的盒子的上下左右的坐标因为他们都是绝对定位,而我给了整个可视窗口相对定位,所以当它们的坐标相同时,它们之间就会重叠,然后和管道的坐标进行一个判断:
//判断鸟的位置
function gameControl() {
// 地面为bottom 100px
var birdBottom = $(".bird")
.css("bottom")
.split("p")[0];
if (parseInt(birdBottom) <= 80) {
death();
}
var tube = $(".tube");
var birdTop = parseInt(
$(".bird")
.css("top")
.split("p")[0]
);
var birdLeft = parseInt(
$(".bird")
.css("left")
.split("p")[0]
);
for (var i = 0; i < tube.length; i++) {
var top =
parseInt(
tube
.eq(i)
.css("top")
.split("p")[0]
) + 420;
var left = parseInt(
tube
.eq(i)
.css("left")
.split("p")[0]
);
if (birdTop < top || birdTop + 34 > top + 100) {
if (
birdLeft + 64 > left + 10 &&
birdLeft < left + 90
) {
death();
}
}
if (left < 300) {
console.log(birdLeft, left + 90);
}
if (
birdLeft > left + 90 &&
birdLeft < left + 101
) {
addScroe();
}
}
}
得分的判断也在这个函数中,当小鸟飞过管道的某一位置,就调用addScroe()这个方法
为了保证分数和死亡只有一个,所以我将他们设置为全局变量window.die和window.playScroe,如果撞到地板和管道,就调用death()函数,同时将die设置为true:
//死亡状态
function death() {
window.die = true;
$(".gameEnd span").text("您的得分:" + window.playScroe);
$(".gameEnd").fadeToggle(200);
}
注:声明变量时不加window也是全局变量,但是加上的话更明显,一眼就可以知道它是全局变量。
最后是重新开始函数,将管道背景鸟的位置复位:
//重新开始
function Recovery() {
window.die = false;
window.playScroe = 0;
$("#scroe").text(window.playScroe);
var tube = $(".tube");
var wid = 400;
for (var i = 0; i < tube.length; i++) {
var left = wid + "px";
var top = -myRondom(210) + "px";
tube.eq(i).css("top", top);
tube.eq(i).css("left", left);
wid += 300;
} //背景1
var bgImg1 = $(".bgImage").css("left", "0px");
//背景2
var bgImg2 = $(".bgImage2").css("left", "1500px");
//草
var Green = $(".bootonGreen").css("left", "0px");
var Green2 = $(".bootonGreen2").css("left", "1500px");
Green2 = Green2 - 1 + "px";
var bird = $(".bird").css({
left: "200px",
top: "400px"
});
}
整个小游戏大致的思路就是这样了,如果有什么疑问或者有什么错误的地方欢迎在评论指出~
html做的小游戏,用Html做一个“快乐鸟”小游戏相关推荐
- HTML5 canvas 游戏设计:创建一个经典的魔塔游戏
整个项目都已经开源,项目地址:https://github.com/m8705/MAGIC-TOWER-JS 注:这是我高中时候的作品,BUG 很多,已经不再更新了.下载项目到本地就能玩. 前言 魔塔 ...
- python 编写实用小工具-使用Python制作一个打字训练小工具
一.写在前面 说道程序员,你会想到什么呢?有人认为程序员象征着高薪,有人认为程序员都是死肥宅,还有人想到的则是996和 ICU. 别人眼中的程序员:飞快的敲击键盘.酷炫的切换屏幕.各种看不懂的字符代码 ...
- 【Python游戏】Python实现一个植物大战僵尸小游戏,非常简单,可以用于做毕业设计哟 | 附源码
前言 halo,包子们上午好 今天给打击整一个植物大战僵尸 无广告版本 哈哈 说实话,现在的小游戏很多都是有广告,多少有点难受 今天给大家直接安排 相关文件 关注小编,私信小编领取哟! 当然别忘了一件 ...
- 怎样架设游戏服务器 怎样搭建一个属于自己的游戏服 5分钟学会游戏架设 3D手游搭建视频教程 自己做游戏GM
直接视频教程-对照操作 [天使圣域 linux 架设教程] 大家都知道游戏外网联机需要服务器,这里给大家推荐一款很便宜的阿里云服务器,如果你手里己经有服务器,可以忽略! 其实服务器和电脑一样,内存越大 ...
- 【Python游戏】Python实现一个星球大战的小游戏 | 附带源码
相关文件 想学Python的小伙伴可以关注小编的公众号[Python日志] 有很多的资源可以白嫖的哈,不定时会更新一下Python的小知识的哈!! 需要源码的小伙伴可以在公众号回复星球大战 Pytho ...
- 微信上的小程序店铺怎么做?
微信上的小程序店铺怎么做?不断优化和开发的小程序已经成为未来移动电子商务的流行发展趋势.许多商家开始被诱惑,想要建立自己的小程序店铺.那么,微信上的小程序店铺怎么做?下面将给您生成一个快速形成小程序店 ...
- 如何做一个基于微信小程序的打卡签到
要做一个基于微信小程序的打卡签到系统,可以按照以下步骤进行: 创建小程序:在微信公众平台上注册小程序账号,创建一个新的小程序. 设计打卡签到功能:根据需求,设计打卡签到的功能模块,包括签到按钮.签到时 ...
- 用turtle库制作一个简单的小游戏《鸡子大战篮球》
刚上大学,学习python不到两月半,连简单的字典.元组数据类型都还没有捂熟.这不刚好python小组作业是用turtle库画自己喜欢的图案吗,在我们小组的努力下我们画好了5只小只因,于是我就大胆的进 ...
- 根据一个火影忍者手游游戏写的一个推算
背景介绍: 火影忍者手游有一个游戏是山中井野的心转身训练,游戏本质上还是一个猜数字的游戏.给定一个数,由用户猜,然后给出提示过大还是过小.可以采用取中方式,逐渐逼近目标数.有搜索一下类似的,但是都是先 ...
最新文章
- Linux文件目录结构2
- oracle 合并重复数据_三天三夜整理出来的数据库常见的面试题,让你直接拿走...
- epoll和select的区别
- (贪心)区间问题大致思路
- CCF202009-1 称检测点查询
- 电脑桌面上怎么找计算机,xp桌面上我的电脑图标不见了怎么找回来
- JVM内存模型和java内存模型
- R语言使用aov函数执行单因素方差分析、使用TukeyHSD函数分析单因素方差分析的结果并解读TukeyHSD函数的输出结果
- CTEX 各种命令、符号
- shell 编程大全
- 【uni-app】uni-app基础知识
- 实验三+161+张丽霞
- 对抗样本论文阅读Intriguing properties of neural networks
- Android Wear 开发 (一),移动应用开发技术
- vue通过v-for取出的一个字段是时间戳格式转换成年月日
- 双语矩阵论课程笔记(2)—— 【chapter 1】 Vector Spaces (Linear Spaces)
- flink jdbc connector支持clickhouse
- 项目十大管理之成本管理
- halcon中怎么降低图像亮度_图像亮度调整
- 小程序毕设作品之微信疫苗预约小程序毕业设计(7)中期检查报告