基于Jquery实现海底掘金版打豆豆

游戏玩法

游戏倒计时60秒，点击屏幕上的开始游戏后，倒计时开始，一次性会出现7个带有字符的豆豆，玩家需要正确敲击豆豆上对应的字母进行消除，消除一个记1分，如果乱敲不存在的字母则扣除1生命值，倒计时结束或生命值清零，游戏结束。

游戏实现

背景背景很简单，宽度500 高度100%居中的div即可，背景图采用海底掘金的背景图

<div class="bg">
</div>
.bg{width: 500px;height: 100%;margin: 0 auto;background: #2a5fbd;position: relative;}

计分板计分板主要记录倒计时、生命值、得分，绝对定位在屏幕顶部居中即可，倒计时，生命值、得分、都是变量

<div class="score"></div>
.score{width: 500px;height: 40px;margin: 0 auto;color: #fff;position: absolute;left: 0;right: 0;top: 0;text-align: center;z-index: 2;}
let score = 0
let time = 60
let hp = 3
$('.score').html(`倒计时: ${time} 秒, 生命值: ${hp} 得分： ${score}`)

开始游戏按钮开始游戏按钮需要完成开始游戏与重新开始两项功能，因与游戏核心实现重合，在下面讲实现，这里仅仅讲样式的实现，样式采用了透明背景+内阴影的方式实现，模拟卡通按钮效果

<div class="btn">开始游戏</div>
.btn{width: 120px;height: 40px;background: transparent;box-shadow: inset 0 0 15px 3px #fff;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;color: #fff;font-size: 16px;line-height: 40px;text-align: center;cursor: pointer;border-radius: 8px;}

豆豆的实现，豆豆采用随机的方式进行生成，为了避免重复，通过KEY_MAP变量来记录是否重复，并绑定对应的jquery对象，方便进行操作，这里采用的原理是chatCode与String.fromCharCode , 通过随机生成ascii码来对应不同的字母，ascii码65是A，26个字母，所以区间就是Math.floor(Math.random() * 26) + 65,通过对document添加点击事件，判断事件对象的key是否存在于KEY_MAP内，存在则加分并消除生成新的字符，不存在则扣除生命值。

// 随机字符算法
function randomLetter () {let div = $('<div>')let randomNum, randomLetter;do {randomNum=Math.floor(Math.random() * 26) + 65;randomLetter=String.fromCharCode(randomNum);} while (KEY_MAP[randomLetter]);div.html(randomLetter);KEY_MAP[randomLetter]=div;div.addClass('pao')$('.bg').prepend(div)
}
// 初始化
function init () {document.onkeydown = nullif(t) {clearInterval(t)t = null}time = 60score = 0KEY_MAP = {}$('.bg').empty()$('.score').html(`倒计时: ${time} 秒, 生命值: ${hp}得分： ${score}`)
}
// 按钮的play方法
function play () {init()document.onkeydown=function (e) {let key=e.key.toUpperCase();if (KEY_MAP[key]) {score++// 添加命中样式，延迟500毫秒消除KEY_MAP[key].addClass('shine')let tt = setTimeout(function () {clearTimeout(tt)KEY_MAP[key].remove()delete KEY_MAP[key]randomLetter()}, 500)} else {hp--if (hp <=0) {document.onkeydown = nullclearInterval(t)t = nullKEY_MAP = {}$('.bg').empty()$('.btn').show()$('.score').html(`倒计时截止, 游戏结束, 生命值: ${hp} 得分： ${score}`)}}}$('.btn').hide()for (let i=0;i<7;i++) {randomLetter()}t = setInterval(function () {if (time<=0) {document.onkeydown = nullclearInterval(t)t = nullKEY_MAP = {}$('.bg').empty()$('.btn').show()$('.score').html(`倒计时截止, 游戏结束, 生命值: ${hp} 得分： ${score}`)return false}time--$('.score').html(`倒计时: ${time} 秒, 生命值: ${hp} 得分： ${score}`) }, 1000)}$('.btn').click(play)

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

基于Jquery实现海底掘金版打豆豆相关推荐

jquery字体颜色_基于jquery实现的web版excel
基于jquery实现的web版excel.包含excel的基本功能支持合并单元格,拆分单元格支持插入单元格,删除单元格支持整行整列选择单元格自定义右键菜单,可以设置单元格数量支持鼠标左键拖动 ...
基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
php 在线选座,基于jQuery实现在线选座之高铁版_jquery
效果图展示: 除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选 ...
座位选座的java代码_基于jQuery实现在线选座之高铁版
效果图展示: 除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选 ...
html css 圆形按钮仿uc,10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
php实现跑马灯闪亮,JavaScript_基于jquery实现的文字向上跑动类似跑马灯的效果，想实现一个类似跑马灯的效果, - phpStudy...
基于jquery实现的文字向上跑动类似跑马灯的效果想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个页面代码恭喜187****5204获得1000RBM 恭喜1 ...
基于SSM汽车维修管理系统-连锁店版
基于SSM汽车维修管理系统-连锁店版本系是针对汽车修理厂行业开发的管理系统.可以适配单店使用,也可以适配连锁店使用.整个系统的框架是基于ssm搭建,使用MySQL作为数据库,使用idea作为开发工具 ...
基于 jQuery 与 Bootstrap 简单封装一个表格分页的组件
最近遇到一个需求:页面上的数据可能会有很多条,需要将数据分页展示在表格中.项目用的是 jQuery 和 Bootstrap,本来想直接用 bootstrapTable 插件,但是需要额外引入 js 文 ...
基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

基于Jquery实现海底掘金版打豆豆

游戏玩法

游戏实现

最后

基于Jquery实现海底掘金版打豆豆相关推荐

最新文章

热门文章