HTML代碼：
<body>
<div class="container">
<div class="containerLeft" id="containerLeft">
<div class="gameMenu" id="gameMenu">
<div class="startGame menuBtn" id="startGame">開始游戲</div>
<div class="gameIntro menuBtn" id="gameIntro">游戲介紹</div>
<div class="exitGame menuBtn" id="exitGame">退出游戲</div>
</div>
<div class="gamepanel" id="gamepanel">
<div class="img_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="img_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>
<div class="containerRight">
<div class="gameIntroContent" id="gameIntroContent">
這是一個用錘子打老鼠的游戲，特別簡單。只要用錘子敲打老鼠，打中了得10分,沒打中不得分。
</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>
</div>
</div>
<div id="anniu">
<div id="mansu">慢速</div>
<div id="kuaisu">快速</div>
</div>
</div>
帶入<script src="js/jquery-1.12.2.min.js"></script>
css代碼：
<style>
.container{
width: 800px;
height: 577px;
border: 1px solid;
margin: 0 auto;
}
.containerLeft{
width: 649px;
height: 100%;
background-image: url("img/bg.png");
float: left;
position: relative;
}
.containerRight{
width: 151px;
height: 100%;
background-color: pink;
float: left;
}
.gameMenu{
width: 200px;
height: 300px;
margin: 0 auto;
margin-top: 250px;
}
.menuBtn{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
margin-top: 30px;
border-radius: 10px;
color: black;
border: 1px solid;
cursor: pointer;
}
.menuBtn:hover{
background-color: goldenrod;
}
.gameIntroContent{
margin-top: 250px;
display: none;
}
.gamepanel{
position: absolute;
left: 100px;
top: 230px;
display: none;
}
.times{
width: 110px;
height: 60px;
margin: 0 auto;
margin-top: 50px;
text-align: center;
border-radius: 10px;
border: 1px solid;
}
.times_top{
width: 100%;
height: 50%;
}
.gamepanel{
position: absolute;
top: 250px;
left: 80px;
display: none;
}
.img_top,.img_bottom{
position: relative;
}
.gamepanel .baffle{
width: 100px;
height: 60px;
/* 去除擋板的背景顏色*/
/*background-color: pink;*/
opacity: 0.5;
/* 去除擋板的邊框*/
/*border: 1px solid;*/
}
.gamepanel .plate1{
position: absolute;
left: 30px;
top: -30px;
}
.gamepanel .plate2{
position: absolute;
left: 195px;
top: -30px;
}
.gamepanel .plate3{
position: absolute;
left: 365px;
top: -30px;
}
.score{
border: 1px solid black;
width: 110px;
height: 60px;
border-radius: 10px;
margin: 0 auto;
margin-top: 150px;
text-align: center;
}
.getScore{
width: 300px;
height: 200px;
position: absolute;
top: 225px;
left: 175px;
text-align: center;
display: none;
}
.getScore_instru,.getScore_over{
width: 100%;
height: 25%;
line-height: 50px;
font-size: 32px;
color: black;
}
.getScore_btn{
width: 200px;
height: 50px;
background-color: rgb(233,233,233);
margin: 0 auto;
margin-top: 20px;
border: 1px solid;
border-radius: 4px;
text-align: center;
line-height: 50px;
color: black;
cursor: pointer;
}
.getScore_btn:hover{
background-color: yellowgreen;
}
#anniu{
width: 200px;
height: 200px;
position: absolute;
top: 250px;
left: 200px;
display: none;
}
#mansu{
width: 100px;
height: 30px;
margin: 0 auto;
cursor: pointer;
border-radius: 10px;
border: 1px solid black;
text-align: center;
line-height: 30px;
}
#kuaisu{
width: 100px;
height: 30px;
margin: 0 auto;
margin-top: 100px;
cursor: pointer;
border-radius: 10px;
border: 1px solid black;
text-align: center;
line-height: 30px;
}
</style>
JS代碼:
<script>
var i = 1;//圖片的編號,在1-3之間變化
var x = 5;//隨機數的上限
var y = 0;//隨機數的下限
var rand;// 樹樁隨機數變量,剛開始沒有賦值
var times = 30;//計時器的初始時間
var mouseInOut;
var gameRunning = false;
var score = 0;
var zidong;
//老鼠出現函數
function mouseInOutFn()
{
//如果i的值大於3,說明一整套老鼠出來的圖片已經走完了
if(i>3)
{
//將該樹樁的圖片重置
$("img").eq(rand).attr("src","img/mu0.png");
//i重置為1
i = 1;
//重新開始搖出一個隨機樹樁,產生0-5之間的隨機數
rand = parseInt(Math.random() * (x - y + 1) + y);
return;
}
//圖片的完整路徑
var imgChange = "img/mouse"+ i +".png";
//給搖出來的隨機樹樁更換圖片
$("img").eq(rand).attr("src",imgChange);
//i自增1,下一次調用的時候圖片就會被匹配成下一張圖片
i++;
}
startGame.addEventListener("click",function(){
$("#gameMenu").css("display","none");
$("#anniu").css("display","block");
});
//給游戲介紹綁定時間
gameIntro.addEventListener("click",function(){
if(gameIntroContent.style.display == "none")
{
gameIntroContent.style.display = "block"; //將游戲介紹顯示
$(".times").css("display","none"); //將時間隱藏
$(".score").css("display","none"); //將分數隱藏
}
else
{
gameIntroContent.style.display = "none"; //將游戲介紹設置為隱藏
$(".times").css("display","block"); //將時間顯示
$(".score").css("display","block"); //將分數顯示
}
});
//
//給開始游戲按鈕綁定點擊事件
// 慢速
mansu.addEventListener("click",function(){
gameRunning = true;
$("#anniu").css("display","none");
gamepanel.style.display = "block";
gameInit(); //調用游戲初始化慢速函數
startGames(); //調用游戲開始函數
timeCountFn(); //調用時間函數
});
// 快速
kuaisu.addEventListener("click",function(){
gameRunning = true;
$("#anniu").css("display","none");
gamepanel.style.display = "block";
gameInit1(); //調用游戲初始化快速函數
startGames(); //調用游戲開始函數
timeCountFn(); //調用時間函數
});
//顯示時間的事件
function timeCountFn()
{
//顯示當前的時間
$(".times_bottom").html(times);
//如果計時器的時間已經為零
if($(".times_bottom").html() == 0)
{
//停止周期調用老鼠出現與計時器函數
clearInterval(mouseInOut);
clearInterval(timeCount);
//隱藏樹樁盒子
$(".gamepanel").css("display","none");
//顯示評價盒子
$(".getScore").css("display","block");
$(".getScore_over").html(score);
//鼠標恢復為正常
$(".containerLeft").css("cursor","auto");
//游戲運行狀態修改為false
gameRunning = false;
//將.panel_left上面的所有事件全部解綁
$(".containerLeft").off();
$(".one").off();
$(".two").off();
$(".three").off();
$(".four").off();
$(".five").off();
$(".six").off();
return;
}
times--;
}
//游戲快速初始化函數
function gameInit()
{
//將計時器的值初始化為初始時間
$(".times_bottom").html(times);
//將計分的值初始化為0
$(".score_bottom").html(score);
//調用計時器函數,每個1秒調用一次
timeCount = setInterval("timeCountFn()",1000);
//調用老鼠出現函數,每隔400毫秒就調用一次
mouseInOut = setInterval("mouseInOutFn()",400);
}
//游戲慢速初始化函數
function gameInit1()
{
//將計時器的值初始化為初始時間
$(".times_bottom").html(times);
//將計分的值初始化為0
$(".score_bottom").html(score);
//調用計時器函數,每個1秒調用一次
timeCount = setInterval("timeCountFn()",1000);
//調用老鼠出現函數,每隔400毫秒就調用一次
mouseInOut = setInterval("mouseInOutFn()",200);
}
//游戲開始函數
function startGames() {
if (gameRunning == true)
{
//錘子立着
$(".containerLeft").mousedown(function () {
$(".containerLeft").css("cursor", "url(img/hammerDown.ico),auto");
});
//錘子倒下
$(".containerLeft").mouseup(function () {
$(".containerLeft").css("cursor", "url(img/hammerUp.ico),auto");
});
$(".one").click(function () {
//每個擋板被點擊對隨機數進行判斷,如果是當前木樁,則滿足條件
if (rand == 0&&(i == 3||i == 4)) {
//如果被擊中,將圖片修改為mouse4
$("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
//將i的值賦值為4,其實只要大於3就行,后續圖片就不會再出來了
//直接開始要下一個隨機數
i = 4;
//分數增加10分
score += 10;
//將分數寫入右邊的分數欄
$(".score_bottom").html(score);
}
});
$(".two").click(function(){
if (rand == 1&&(i == 3||i == 4)) {
//如果被擊中,將圖片修改為mouse4
$("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
//將i的值賦值為4,其實只要大於3就行,后續圖片就不會再出來了
//直接開始要下一個隨機數
i = 4;
//分數增加10分
score += 10;
//將分數寫入右邊的分數欄
$(".score_bottom").html(score);
}
});
$(".three").click(function () {
if (rand == 2&&(i == 3||i == 4)) {
//如果被擊中,將圖片修改為mouse4
$("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
//將i的值賦值為5,其實只要大於3就行,后續圖片就不會再出來了
//直接開始要下一個隨機數
i = 4;
//分數增加10分
score += 10;
//將分數寫入右邊的分數欄
$(".score_bottom").html(score);
}
});
$(".four").click(function () {
if (rand == 3&&(i == 3||i == 4)) {
//如果被擊中,將圖片修改為mouse4
$("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
//將i的值賦值為5,其實只要大於3就行,后續圖片就不會再出來了
//直接開始要下一個隨機數
i = 4;
//分數增加10分
score += 10;
//將分數寫入右邊的分數欄
$(".score_bottom").html(score);
}
});
$(".five").click(function () {
if (rand == 4&&(i == 3||i == 4)) {
//如果被擊中,將圖片修改為mouse4
$("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
//將i的值賦值為5,其實只要大於3就行,后續圖片就不會再出來了
//直接開始要下一個隨機數
i = 4;
//分數增加10分
score += 10;
//將分數寫入右邊的分數欄
$(".score_bottom").html(score);
}
});
$(".six").click(function () {
if (rand == 5&&(i == 3||i == 4)) {
//如果被擊中,將圖片修改為mouse4
$("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
//將i的值賦值為5,其實只要大於3就行,后續圖片就不會再出來了
//直接開始要下一個隨機數
i = 4;
//分數增加10分
score += 10;
//將分數寫入右邊的分數欄
$(".score_bottom").html(score);
}
});
}
}
//點擊回到主菜單時的事件
$(".getScore_btn").click(function(){
//將頁面全部刷新
location.reload();
});
exitGame.addEventListener("click",function(){
alert("請點擊右上角的小紅叉");
});
</script>