好久没跟大家一起分享自己的心得了，直到今天吧，才想起来很久没写博客了，真的是对不起啦。
这么久了，仔细的想了下，总感觉对不起自己的未来，其实吧，一个学期了，总感觉自己没有学到很多的有用知识，还一直以为自己能够出人头地，转瞬即空，一切不过是幻想罢了。
星期是四陪同兄弟走了许久，讨论了许多，无非就是自己的梦想啊，未来啊，发现自己过得真的是太颓废了，这次项目做完了过后，反省了自己的许多事情，就是自己的意志力不够坚定，这次
是 真的 没有 时间 了 一年的时光很快就会过去了，我所能做的 就是在剩下的一年中匍匐前进罢了。
感慨了许多 但是 最漆黑的那段路 终要自己走完 不是么?
坚持自己的梦想吧 自己的热血终归未凉吧~
下面给大家分享下 这次的简单小游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠</title>
<link rel="stylesheet" href="index.css">
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<div class="container">
<div class="panel_left">
<div class="panel_left_meum" id="zhuye">
<div class="gameName">疯狂地鼠</div>
<div class="start btn">开始游戏</div>
<div class="intro btn">游戏帮助</div>
<div class="sort btn">排行榜</div>
<div class="subject btn" οnclick="yMode()">难度选择</div>
<div class="exit btn" οnclick="end()">退出</div>
</div>
<div class="panel_left_game">
<div class="stub_top">
<img src="img/mu0.png" alt="">
<img src="img/mu0.png" alt="">
<img src="img/mu0.png" alt="">
<div class="baffle plate1 one"></div>
<div class="baffle plate2 two"></div>
<div class="baffle plate3 three"></div>
</div>
<div class="stub_bottom">
<img src="img/mu0.png" alt="">
<img src="img/mu0.png" alt="">
<img src="img/mu0.png" alt="">
<div class="baffle plate1 four"></div>
<div class="baffle plate2 five"></div>
<div class="baffle plate3 six"></div>
</div>
</div>
<div class="getScore">
<div class="getScore_instru">游戏结束</div>
<div class="getScore_over"></div>
<div class="getScore_btn">回到主菜单</div>
</div>
<div id="sub">
<div class="easy btn" οnclick="Mode(1)">简单</div>
<div class="norml btn" οnclick="Mode(2)">正常</div>
<div class="dif btn" οnclick="Mode(3)">困难</div>
<div class="hell btn" οnclick="Mode(4)">地狱模式</div>
</div>
</div>
<div id="Sort">
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="panel_right">
<div class="gameIntro">狠狠去用你的小锤锤去锤老鼠！消灭一只即得十分</div>
<div class="score">
<div class="score_top">目前得分</div>
<div class="score_bottom"></div>
</div>
<div class="times">
<div class="times_top">剩余时间</div>
<div class="times_bottom"></div>
<br/>
<br/>
<br/>
<div id="over">
<button οnclick="GameOver()" id="End">结束游戏</button>
</div>
</div>
</div>
</div>
<script>
var q = score;//实现记录分数
var i = 1;//图片的编号,在1-3之间变化
var x = 5;//随机数的上限
var y = 0;//随机数的下限
var rand;// 树桩随机数变量,刚开始没有赋值
var times = 30;//计时器的初始时间
var mouseInOut;
var times;
var gameRunning = false;
var score = 0;//分数
var beat = 0;//鼠标点击次数
var knock = 0;//点击中老鼠次数
var succes = 0;//命中率
//老鼠出现函数
function mouseInOutFn()
{
//如果i的值大于3,说明一整套老鼠出来的图片已经走完了
if(i>3)
{
//将该树桩的图片重置
$(".panel_left_game img").eq(rand).attr("src","img/mu0.png");
//i重置为1
i = 1;
//重新开始摇出一个随机树桩
rand = parseInt(Math.random() * (x - y + 1) + y);
return;
}
//图片的完整路径
var imgChange = "img/mouse"+i+".png";
//给摇出来的随机树桩更换图片
$(".panel_left_game img").eq(rand).attr("src",imgChange);
//i自增1,下一次调用的时候图片就会被匹配成下一张图片
i++;
}
//计时器函数
function timeCountFn()
{
//显示当前的时间
$(".times_bottom").html(times);
//如果计时器的时间已经为零
if($(".times_bottom").html()==0)
{
//停止周期调用老鼠出现与计时器函数
clearInterval(mouseInOut);
clearInterval(timeCount);
//隐藏树桩盒子
$(".panel_left_game").css("display","none");
//显示评价盒子
$(".getScore").css("display","block");
$(".getScore_over").html(score);
//鼠标恢复为正常
$(".panel_left").css("cursor","auto");
//游戏运行状态修改为false
gameRunning = false;
//将.panel_left上面的所有事件全部解绑
$(".panel_left").off();
$(".one").off();
$(".two").off();
$(".three").off();
$(".four").off();
$(".five").off();
$(".six").off();
return;
}
times--;
}
var sudu=400;
//游戏初始化函数
function gameInit()
{
//说明文字隐藏
$(".gameIntro").css("display","none");
//菜单栏隐藏
$(".panel_left_meum").css("display","none");
//将计时器的值初始化为初始时间
$(".times_bottom").html(times);
//将计分的值初始化为0
$(".score_bottom").html(score);
//将左边面板的的鼠标修改为锤子
$(".panel_left").css("cursor","url(img/hammerUp.ico),auto");
//树桩,分数和计时器盒子显示出来
$(".panel_left_game,.score,.times").css("display","block");
//调用计时器函数,每个1秒调用一次
timeCount = setInterval("timeCountFn()",1000);
//调用老鼠出现函数,每隔4毫秒就调用一次
mouseInOut = setInterval("mouseInOutFn()",sudu);
}
//游戏开始函数
function gameStart()
{
//调用游戏初始化函数
gameInit();
//如果游戏运行状态为真
if(gameRunning == true)
{
//设置按下鼠标时的图片
$(".panel_left").mousedown(function(){
$(".panel_left").css("cursor","url(img/hammerDown.ico),auto");
})
//鼠标抬起时的图片
$(".panel_left").mouseup(function(){
$(".panel_left").css("cursor","url(img/hammerUp.ico),auto");
})
//6个木桩,上面分别有6个挡板,one,two,three,four,five,six
$(".one").click(function(){
//每个挡板被点击对随机数进行判断,如果是当前木桩,并且地鼠的图片是第2张或者第3张则满足条件
if(rand==0&&(i==3||i==4))
{
//如果被击中,将图片修改为mouse4
$(".panel_left_game img").eq(rand).attr("src","img/mouse4.png");
//将i的值赋值为5,其实只要大于3就行,后续图片就不会再出来了
//直接开始要下一个随机数
i = 5;
//分数增加10分
score += 10;
//将分数写入右边的分数栏
$(".score_bottom").html(score);
}
else{
beat += 1;
success = knock/beat;
$(".score_bottom").html(score);
}
})
$(".two").click(function(){
//每个挡板被点击对随机数进行判断,如果是当前木桩,并且地鼠的图片是第2张或者第3张则满足条件
if(rand==1&&(i==4||i==3))
{
//如果被击中,将图片修改为mouse4
$(".panel_left_game img").eq(rand).attr("src","img/mouse4.png");
//将i的值赋值为4,其实只要大于3就行,后续图片就不会再出来了
//直接开始要下一个随机数
i = 5;
//分数增加10分
score += 10;
//将分数写入右边的分数栏
$(".score_bottom").html(score);
}
else{
beat += 1;
success = knock/beat;
$(".score_bottom").html(score);
}
})
$(".three").click(function(){
//每个挡板被点击对随机数进行判断,如果是当前木桩,并且地鼠的图片是第2张或者第3张则满足条件
if(rand==2&&(i==4||i==3))
{
//如果被击中,将图片修改为mouse4
$(".panel_left_game img").eq(rand).attr("src","img/mouse4.png");
//将i的值赋值为5,其实只要大于3就行,后续图片就不会再出来了
//直接开始要下一个随机数
i = 5;
//分数增加10分
score += 10;
//将分数写入右边的分数栏
$(".score_bottom").html(score);
}
else{
beat += 1;
success = knock/beat;
$(".score_bottom").html(score);
}
})
$(".four").click(function(){
//每个挡板被点击对随机数进行判断,如果是当前木桩,并且地鼠的图片是第2张或者第3张则满足条件
if(rand==3&&(i==4||i==3))
{
//如果被击中,将图片修改为mouse4
$(".panel_left_game img").eq(rand).attr("src","img/mouse4.png");
//将i的值赋值为5,其实只要大于3就行,后续图片就不会再出来了
//直接开始要下一个随机数
i = 5;
//分数增加10分
score += 10;
//将分数写入右边的分数栏
$(".score_bottom").html(score);
}
else{
beat += 1;
success = knock/beat;
$(".score_bottom").html(score);
}
})
$(".five").click(function(){
//每个挡板被点击对随机数进行判断,如果是当前木桩,并且地鼠的图片是第2张或者第3张则满足条件
if(rand==4&&(i==4||i==3))
{
//如果被击中,将图片修改为mouse4
$(".panel_left_game img").eq(rand).attr("src","img/mouse4.png");
//将i的值赋值为5,其实只要大于3就行,后续图片就不会再出来了
//直接开始要下一个随机数
i = 5;
//分数增加10分
score += 10;
//将分数写入右边的分数栏
$(".score_bottom").html(score);
}
else{
beat += 1;
success = knock/beat;
$(".score_bottom").html(score);
}
})
$(".six").click(function(){
//每个挡板被点击对随机数进行判断,如果是当前木桩,并且地鼠的图片是第2张或者第3张则满足条件
if(rand==5&&(i==4||i==3))
{
//如果被击中,将图片修改为mouse4
$(".panel_left_game img").eq(rand).attr("src","img/mouse4.png");
//将i的值赋值为5,其实只要大于3就行,后续图片就不会再出来了
//直接开始要下一个随机数
i = 5;
//分数增加10分
score += 10;
//将分数写入右边的分数栏
$(".score_bottom").html(score);
}
else{
beat += 1;
success = knock/beat;
$(".score_bottom").html(score);
}
})
}
}
//点击说明按钮时的事件
$(".intro").click(function(){
//说明文字显示出来
$(".gameIntro").css("display","block");
});
//点击开始按钮时的事件
$(".start").click(function(){
gameRunning = true;
//调用游戏开始函数
gameStart();
})
//点击回到主菜单时的事件
$(".getScore_btn").click(function(){
//将时间重置
times = 30;
//将分数重置
score = 0;
//将所有图片重置为空树桩
$(".panel_left_game img").attr("src","img/mu0.png");
//显示菜单栏,隐藏获得分数显示,分数和时间盒子
$(".panel_left_meum").css("display","block");
$(".getScore,.score,.times").css("display","none");
})
function end(){
if
(confirm("您确定要关闭该游戏吗？")){
window.opener=null;
window.open('','_self');
window.close();
}
else{}
}
function GameOver(){
alert("游戏结束！\n 你获得的分数为："+score+"\n 命中率为："+success);
clearInterval(mouseInOut);
clearInterval(timeCount);
$(".panel_left_game").css("display","none");
$(".getScore").css("display","block");
$(".getScore_over").html(score);
$(".panel_left").css("cursor","auto");
gameRunning = false;
$(".panel_left").off();
$(".one").off();
$(".two").off();
$(".three").off();
$(".four").off();
$(".five").off();
$(".six").off();
return;
success = 0;
score = 0;
knock = 0;
beat = 0;
}
var zhuye=document.getElementById("zhuye");
function yMode(){
zhuye.style.display="none";
$('#sub').css('display','block');
// score.style.display = "block";
}
function Mode(obj){
//速度初始化
sudu=0;
$('#sub').css('display','none');
if(obj==1){
sudu=400;
}
else if(obj==2){
sudu=300;
}
else if(obj==3){
sudu=200;
}
else if(obj==4){
sudu=100;
}
gameRunning = true;
//调用游戏开始函数
gameStart();
}
</script>
</body>
</html>
这次的代码是利用了JQuery以及原生js的集合使用了自身的代码，实现了 一个简单打地鼠的小游戏 仅供大家参考 谢谢