js部分内容
——————————————————————————————————————————————————————
var start = document.getElementById("start"); ??/*游戏开始按钮*/
var diglettLocation = document.getElementsByClassName("anmint");
var gameImg = [‘img/ds01.png‘, ‘img/ds03.png‘, ‘img/ds05.png‘, ‘img/tz01.png‘, ‘img/tz03.png‘]; /*会出现的gameImg存入数组*/
var setIn; ?/*清空图片样式定时器*/
var grade = 0; ?/*保存当前得分*/
var gradePanel = document.getElementById("gradePanel");
var gradeMax = document.getElementById("gradeMax");
var imgOnclick = document.getElementsByClassName("img"); ???/*点击切换对应图片*/
var showResult = document.getElementsByClassName("showResult"); /*实时加减数值*/
var timeKeep = document.getElementById("timeKeep"); /*计时设置*/
var setInTime; ?/*倒计时定时器*/
function startGame() {
???ClearTest.clearGameImg();
???var gameImgIndex = ""; ?/*保存src地址*/
???var holeNum = parseInt(Math.random() * 9); ?/*随机执行holeNum次产生目标*/
???if (holeNum < 1) {
???????holeNum = 0;
???}
???for (var i = 0; i < holeNum; i++) {
???????var index = parseInt(Math.random() * 9); ???/*保存随机下标*/
???????gameImgIndex = gameImg[parseInt(Math.random() * gameImg.length)]; ??/*随机取出gameImg图片*/
???????diglettLocation[index].src = gameImgIndex;
???????diglettLocation[index].classList.add("diglett"); ???/*启动动画*/
???}
} ??/*开始游戏*/
start.onclick = function () {
???if (start.innerText === "开始游戏") {
???????grade = 0;
???????setIn = setInterval(startGame, 1500);
???????start.innerText = "结束游戏";
???????timeKeep.innerHTML = 60;
???????setInTime = setInterval(time,1000);
???} else {
???????ClearTest.endTest();
???}
};
for (var i = 0; i < imgOnclick.length; i++) {
???imgOnclick[i].onclick = function () {
???????switch (this.src) {
???????????case ‘http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/ds01.png‘:
???????????????this.src = ‘img/ds02.png‘;
???????????????grade = parseInt(grade * 1.1);
???????????????gradePanel.innerHTML = grade;
???????????????showResult[0].innerHTML = "+10%";
???????????????break;
???????????case ‘http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/ds03.png‘:
???????????????this.src = ‘img/ds04.png‘;
???????????????grade += 100;
???????????????gradePanel.innerHTML = grade;
???????????????showResult[0].innerHTML = "+100";
???????????????break;
???????????case ‘http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/ds05.png‘:
???????????????this.src = ‘img/ds06.png‘;
???????????????grade += 50;
???????????????gradePanel.innerHTML = grade;
???????????????showResult[0].innerHTML = "+50";
???????????????break;
???????????case ‘http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/tz01.png‘:
???????????????this.src = ‘img/tz02.png‘;
???????????????grade = parseInt(grade / 2);
???????????????gradePanel.innerHTML = grade;
???????????????showResult[0].innerHTML = "÷2";
???????????????break;
???????????case ‘http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/tz03.png‘:
???????????????this.src = ‘img/tz04.png‘;
???????????????grade -= 100;
???????????????if (grade < 0) {
???????????????????grade = 0;
???????????????}
???????????????gradePanel.innerHTML = grade;
???????????????showResult[0].innerHTML = "-100";
???????????????break;
???????????default:
???????????????break;
???????}
???}
} ??/*循环绑定图片点击事件*/
function time() {
???timeKeep.innerHTML = parseInt(timeKeep.innerHTML - 1);
???if(parseInt(timeKeep.innerHTML)<0){
???????ClearTest.endTest();
???}
} ??/*计时器*/
var ClearTest = {
???endTest:function () {
???????this.clearGameImg();
???????clearInterval(setIn);
???????clearInterval(setInTime);
???????start.innerText = "开始游戏";
???????if (parseInt(gradePanel.innerHTML) > parseInt(gradeMax.innerHTML)) {
???????????gradeMax.innerHTML = gradePanel.innerHTML;
???????}
???????showResult[0].innerHTML = "";
???????gradePanel.innerHTML = "";
???????timeKeep.innerHTML = 0;
???}, ?/*结束时执行的函数方法*/
???clearGameImg:function () {
???????for (var i = 0; i < diglettLocation.length; i++) {
???????????diglettLocation[i].src = "";
???????????diglettLocation[i].classList.remove("diglett")
???????}
???} ??/*清空图片方法*/
}; ?/*ClearTest对象*/
html部分
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————<!DOCTYPE html>
<html>
<head>
???<meta charset="UTF-8">
???<title>打地鼠游戏</title>
???<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div>
???<marquee>趣味打地鼠</marquee>
???<main>
???????<!--游戏区-->
???????<ul>
???????????<!--i代表坑，div代表地鼠-->
???????????<li><i><img src="" class="anmint img"></i></li>
???????????<li><i><img src="" class="anmint img"></i></li>
???????????<li><i><img src="" class="anmint img"></i></li>
???????????<li><i><img src="" class="anmint img"></i></li>
???????????<li><i><img src="" class="anmint img"></i></li>
???????????<li><i><img src="" class="anmint img"></i></li>
???????????<li><i><img src="" class="anmint img"></i></li>
???????????<li><i><img src="" class="anmint img"></i></li>
???????????<li><i><img src="" class="anmint img"></i></li>
???????</ul>
???????<footer>
???????????<div>
???????????????<span id="start">开始游戏</span>
???????????</div>
???????????<!--计分板-->
???????????<div>
???????????????<!--左侧计分-->
???????????????<div class="scoring">
???????????????????<div>当前分数：<span id="gradePanel">0</span><b class="showResult"></b></div>
???????????????????<div>历史最高分：<span id="gradeMax">0</span></div>
???????????????</div>
???????????????<!--右侧计时-->
???????????????<div class="timekeeping">
???????????????????<div>剩余时间：<span id="timeKeep">60</span>秒</div>
???????????????????<div>图片源自网络。</div>
???????????????</div>
???????????</div>
???????</footer>
???</main>
</div>
<script src="js/index.js"></script>
</body>
</html>
css部分
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————
*{margin: 0;padding: 0}
html{height: 100%}
body{background: linear-gradient(to top left,#f5f7fa, #c3cfe2);}
body>div{padding-top: 50px;}
main{
???width: 550px;
???height: 600px;
???margin: 0 auto;
???padding-top: 20px;
???background: linear-gradient(0,#a1c4fd, #c2e9fb);
???border-radius: 15px;
???cursor: url(‘../img/mous.png‘) 20 30,auto
}
ul{
???overflow: hidden;
???margin-left: 35px;
}
li{
???width: 150px;
???height: 120px;
???list-style: none;
???float: left;
???position: relative;
???margin-right: 10px;
???overflow: hidden;
}
i{
???position: absolute;
???display: block;
???width: 150px;
???height: 50px;
???border: solid #ccc;
???border-radius: 50%;
???bottom: 0;
???box-shadow: 0 0 10px inset;
???background: linear-gradient(to top left,#f6d365,#fda085);
}
.diglett{
???position: absolute;
???margin: 0 auto;
???left: 30px;
???bottom: 5px;
???opacity: 0;
???animation: diglett 1.5s ease-in-out infinite;
}
footer{
???margin-top: 50px;
}
footer>div>span{
???display: block;
???font-family: "微软雅黑 Light","宋体";
???color: #676767;
???font-size: 36px;
???font-weight: 900;
???background: #be9568;
???border-radius: 5px;
???margin: 0 auto;
???width: 160px;
???text-align: center;
???background: linear-gradient(to top left,#fee140,#e2d1c3);
???border: 2px solid burlywood;
???box-shadow: 0 0 5px;
}
/*地鼠动画*/
@keyframes diglett {
???50%{
???????bottom: 20px;
???????opacity: 1;
???}
???100%{
???????bottom: 5px;
???????opacity: 0;
???}
}
#start:hover{
???color: #e8e8e8;
???background: linear-gradient(to top left,#fee140,#fa709a);
???box-shadow: 0 0 25px ?inset;
}
/*计时，计分样式*/
.scoring,.timekeeping{
???width: 250px;
???height: 120px;
???border: 1px solid #be9568;
???float: left;
???margin: 10px 0 0 15px;
???border-radius: 5px;
???background: linear-gradient(to top left,#fbc2eb,#a6c1ee);
???box-shadow: 0 0 3px;
???font-weight: 600;
???font-size: 18px;
???color: #74348f;
???text-indent: 10px;
}
.scoring>div,.timekeeping>div{
???height: 50px;
???line-height: 50px;
}
.scoring>div:first-child{
}
.scoring>div:first-child>b{
???display: block;
???width: 90px;
???height: 50px;
???float: right;
}
marquee{
???position: absolute;
???font-size: 26px;
???top: 5px;
???color: #8f1d32;
???animation: fontBlink 3s linear infinite;
}
@keyframes fontBlink {
???10%{color: #cccccc}
???20%{color: #cc0d25}
???30%{color: #1c11cc}
???40%{color: #20cc19}
???50%{color: #cc0cbe}
???60%{color: #09cacc}
???70%{color: #ccb609}
???80%{color: #807b7f}
???90%{color: #000000}
???100%{color: #7f5d4b}
}原生js简单打地鼠游戏
原文地址：http://www.cnblogs.com/AgilityJin/p/7470654.html