我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
前言
兔在江湖漂，不爽就发飙!
祝大家兔年红红火火，生猛生猛!
吃嘛嘛好，睡嘛嘛香
等等！！！
过年除了要吃的好，睡的香，是不是还要玩的开心呢？
因此小编化身为兔斯基▪柴可夫斯基程序员开发了一款 H5版打兔兔游戏
有人问我：本是同兔生，相煎何太急？
兔斯基▪柴可夫斯基回答道：牺牲小我，娱乐大家又何妨~
在线体验
链接：打兔兔游戏
切记在网页端打开时，F12调出控制面板，切换成移动端设备体验
游戏介绍
- 设有游戏背景、打击效果、游戏通过、游戏失败多种背景乐和音效增加游戏的体验性
- 含有多种兔子游戏角色，丰富游戏的趣味性
- css 采用 rem 单位，自适应各种手机端屏幕
- 整个项目采用 html + css + jquery 技术
游戏规则
在30秒内打中出洞的小兔子计分,不同的小兔子代表不同的分数,最终得分达到60分以上的，即可获得礼品
兔角色：
| 兔角色 | 得分 |
|---|---|
| 农民兔 | +1 |
| 拳击兔 | +2 |
| 隐士兔 | +3 |
| 太空兔 | +4 |
| 阔佬兔 | +5 |
| 小丑兔 | -10 |
注意：打中小丑兔是要扣10分的，所以考验大家手速和反应的时候到了！
礼品：
| 奖品等级 | 内容 | 总得分 |
|---|---|---|
| 一等奖 | 与老板共餐 | >=100 |
| 二等奖 | 与老板合照一张 | 80~100 |
| 三等奖 | 董事长签名一张 | 60~80 |
| 其他 | 谢谢参与 | < 60 |
看到规则下方的奖品，是否十分心动？心动不如行动，赶紧开几局吧~
游戏核心代码
开启游戏
//开启游戏
function payGame() {
document.getElementById("gameMusic").play();
var timeRun = $(".timeRun");
var ulList = $(".theMouseDiv");
var index = 0;
var mouseTimer = setInterval(function () {
var idx = parseInt(Math.random() * ulList.length);
if (idx === index) {
if (idx < 8)
idx++;
else
idx--;
}
var select = randomNum(1, 6);
var code = +new Date();
switch (select) {
case 1:
if (ulList[idx].children.length == 0)
ulList[idx].innerHTML = '<img class="theMouse" src="Img/rabbit1.png" name="rabbit1" data-id="' +
code + '" />';
break;
case 2:
if (ulList[idx].children.length == 0)
ulList[idx].innerHTML = '<img class="theMouse" src="Img/rabbit2.png" name="rabbit2" data-id="' +
code + '" />';
break;
case 3:
if (ulList[idx].children.length == 0)
ulList[idx].innerHTML = '<img class="theMouse" src="Img/rabbit3.png" name="rabbit3" data-id="' +
code + '" />';
break;
case 4:
if (ulList[idx].children.length == 0)
ulList[idx].innerHTML = '<img class="theMouse" src="Img/rabbit4.png" name="rabbit4" data-id="' +
code + '" />';
break;
case 5:
if (ulList[idx].children.length == 0)
ulList[idx].innerHTML = '<img class="theMouse" src="Img/rabbit5.png" name="rabbit5" data-id="' +
code + '" />';
break;
case 6:
if (ulList[idx].children.length == 0)
ulList[idx].innerHTML = '<img class="theMouse" src="Img/rabbit6.png" name="rabbit6" data-id="' +
code + '" />';
break;
}
$(".theMouse").animate({
top: '0px'
}, 1000).animate({
top: '60px'
}, 1000);
index = idx;
setTimeout(function () {
$('.theMouse[data-id="' + code + '"]').remove();
}, 1700);
}, 500);
var runTimer = setInterval(function () {
time--;
timeRun.text(time);
if (time === 0) {
clearInterval(runTimer);
clearInterval(mouseTimer);
$('.theMouse').remove();
$(".gameHideBg,.overShow").show();
document.getElementById("gameMusic").pause();
setTimeout(function () {
$(".gameResult").show();
$(".reslutScore").text(score);
if (score < 40) {
document.getElementById("gameOver").play();
$(".resultTitle").text("挑战失败");
$(".reslutText,.failBtn").show();
} else {
document.getElementById("gameSuccess").play();
$(".resultTitle").text("挑战成功");
$(".reslutText").hide();
$(".successBtn").show();
}
}, 500);
}
}, 1000);
}
代码实现路：
- 获取九个兔子坑元素
- 随机获取一个兔子坑，并且在该坑中随机生成一个兔子实例
- 添加兔子上蹿下跳的移动动画
- 开启倒计时
打击兔子
//打击兔子
var _that = 0;
// 兔子列表
ulList.click(function () {
if (this.children.length != 0 && _that != this) {
$("#fight").remove();
var who = $(this.children[0]).attr("name");
var that = this;
this.children[0].src = 'Img/rabbit0.png';
switch (who) {
case 'rabbit1':
$("#musicDiv").append(
'<audio src="mp3/fight.mp3" autoplay="autoplay" id="fight"></audio>');
score += 1;
$(that).next().next().text('+1');
$(that).next().next().show();
break;
case 'rabbit2':
score += 2;
$("#musicDiv").append(
'<audio src="mp3/fight.mp3" autoplay="autoplay" id="fight"></audio>');
$(that).next().next().text('+2');
$(that).next().next().show();
break;
case 'rabbit3':
score += 3;
$("#musicDiv").append(
'<audio src="mp3/fight.mp3" autoplay="autoplay" id="fight"></audio>');
$(that).next().next().text('+3');
$(that).next().next().show();
break;
case 'rabbit4':
score += 4;
$("#musicDiv").append(
'<audio src="mp3/fight.mp3" autoplay="autoplay" id="fight"></audio>');
$(that).next().next().text('+4');
$(that).next().next().show();
break;
case 'rabbit5':
score += 5;
$("#musicDiv").append(
'<audio src="mp3/fight.mp3" autoplay="autoplay" id="fight"></audio>');
$(that).next().next().text('+5');
break;
case 'rabbit6':
score -= 10;
$("#musicDiv").append(
'<audio src="mp3/fight_error.mp3" autoplay="autoplay" id="fightError"></audio>');
$(that).next().next().text('-10');
break;
}
$(this).next().show();
$(this).next().next().show();
setTimeout(function () {
$(that).next().hide();
$(that).next().next().hide();
}, 200)
textScore.text(score);
}
_that = this;
});
代码实现路：
- 获取所有兔子实例，并且监听点击事件
- 获取当前打击的兔子实例，并且替换兔子图片路径（被打击后变成伤残的兔子）
- 添加打击兔子的音效，展示得扣分情况
- 根据兔子角色来增减总得分
源码
注意：掘金代码的图片、音效、第三方库资源均为第三方链接，故我还做了个本地资源的 仓库
千羊在望,不如一兔在手
羊上狼不上,马跳猴不跳
兔年吉祥!
