无聊的人用JS实现了一个简单的打地鼠游戏
发布时间：2016-11-20 23:31:35 所属栏目：教程 来源：站长网
导读：副标题#e# 直入正题，用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了，先看看效果图，或者在线玩玩吧 如果点击颜色比较深的那个（俗称坏老鼠），将扣分50；如果点击颜色比较浅的那个（俗称好老鼠），将得分100 老鼠好像有点难画，又不想用图
|
先看看老鼠的运动 // 运动操作
moveUpAndDown: function() {
var that = this;
// 定时器随机定义good|bad老鼠个数，以及需要显示的个数
that.moveTime = setInterval(function() {
for (var i = 0, j = that.mouses.length; i < j; ++i) {
that.mouses[i].setAttribute('clicked', '0');
that.mouses[i].className = 'good active';
that.mouses[i].style.display = 'none';
}
// bad 的个数
var badNum = that.getRandom(0, 8);
for (var i = 0; i < badNum; i++) {
that.mouses[that.getRandom(0, 8)].className = 'bad active';
}
// 要显示的个数
var showNum = that.getRandom(0, 8);
for (var i = 0; i < showNum; i++) {
that.mouses[that.getRandom(0, 8)].style.display = 'block';
}
}, 2000);
},
使用定时器，定时器的循环与CSS中的动画设置一致，保证循环连贯性 设置class为good 即可定义出一只好老鼠，同理bad 为坏老鼠 在开始游戏，进行调用时，设置class为active 即可让老鼠运动起来 对于打老鼠的操作，要注意到只有运动的老鼠才能点击，每只老鼠只能点击一次 // 打地鼠操作
that.mousesWrap[0].addEventListener('click', function(e) {
e = e || window.event;
var elem = e.target || e.srcElement;
// 如果当前项被隐藏则不操作，多次点击只取第一次分数
if (elem.style.display !== 'block' || elem.getAttribute('clicked') === '1') {
return;
}
// 扣分
if (elem.className.indexOf('bad') !== -1) {
that.score -= that.badScore;
}
// 加分
else {
that.score += that.goodScore;
}
elem.setAttribute('clicked', '1');
that.text(that.gameScore[0], that.score);
}, false);
倒计时结束之后，清除两个计时器，同时将所有老鼠项display都设为none 即可（否则动画会一直循环展示出来） // 倒计时，当前剩余游戏时间
countDown: function() {
var that = this;
var t = setInterval(function() {
that.text(that.gameTime[0], --that.totalTime);
if (that.totalTime === 0) {
clearInterval(t);
clearInterval(that.moveTime);
for (var i = 0, j = that.mouses.length; i < j; ++i) {
that.mouses[i].style.display = 'none';
}
alert('游戏结束，得分为：' + that.score);
}
}, 1000);
},
1 function MouseGame() {
2 this.mousesWrap = this.$('.game-content');
3 this.mouses = this.$('.game-content div');
4 this.gameStart = this.$('#game-start');
5 this.gameTime = this.$('#game-time');
6 this.gameScore = this.$('#game-score');
7 this.goodScore = 100;
8 this.badScore = 50;
9
10 this.bindEvent();
11 }
12
13 MouseGame.prototype = {
14 constructor: MouseGame,
15
16 /**
17 * 获取元素
18 * @param {String} elem 元素的字符串标识
19 * @example
20 * $('div') | $('p.active')
21 * @return {NodeList} 获取的元素集
22 */
23 $: function(elem) {
24 return document.querySelectorAll(elem);
25 },
26
27 /**
28 * 获取给定范围的随机数
29 * @param {Number} from 起始
30 * @param {Number} to 结束
31 * @return {Number} 随机数
32 */
33 getRandom: function(from, to) {
34 return Math.floor(Math.random() * (to - from + 1)) + from;
35 },
36
37 /**
38 * 设置元素内容
39 * @param {HTMLElement} elem 要设置的元素
40 * @param {String} val 设置的内容
41 * @return {String} 设置好的内容|元素本身的内容
42 */
43 text: function(elem, val) {
44 if (elem.textContent) {
45 return val !== undefined ? elem.textContent = val : elem.textContent;
46 } else if (elem.innerText) {
47 return val !== undefined ? elem.innerText = val : elem.innerText;
48 }
49 },
50
51 // 运动操作
52 moveUpAndDown: function() {
53 var that = this;
54
55 // 定时器随机定义good|bad老鼠个数，以及需要显示的个数
56 that.moveTime = setInterval(function() {
57
58 for (var i = 0, j = that.mouses.length; i < j; ++i) {
59 that.mouses[i].setAttribute('clicked', '0');
60 that.mouses[i].className = 'good active';
61 that.mouses[i].style.display = 'none';
62 }
63
64 // bad 的个数
65 var badNum = that.getRandom(0, 8);
66 for (var i = 0; i < badNum; i++) {
67 that.mouses[that.getRandom(0, 8)].className = 'bad active';
68 }
69
70 // 要显示的个数
71 var showNum = that.getRandom(0, 8);
72 for (var i = 0; i < showNum; i++) {
73 that.mouses[that.getRandom(0, 8)].style.display = 'block';
74 }
75 }, 2000);
76 },
77
78 // 打地鼠操作
79 bindEvent: function() {
80 var that = this;
81
82 // 监听游戏开始/重新开始
83 that.gameStart[0].addEventListener('click', function() {
84 that.startGame();
85 }, false);
86
87 // 打地鼠操作
88 that.mousesWrap[0].addEventListener('click', function(e) {
89 e = e || window.event;
90 var elem = e.target || e.srcElement;
91 // 如果当前项被隐藏则不操作，多次点击只取第一次分数
92 if (elem.style.display !== 'block' || elem.getAttribute('clicked') === '1') {
93 return;
94 }
95 // 扣分
96 if (elem.className.indexOf('bad') !== -1) {
97 that.score -= that.badScore;
98 }
99 // 加分
100 else {
101 that.score += that.goodScore;
102 }
103
104 elem.setAttribute('clicked', '1');
105 that.text(that.gameScore[0], that.score);
106 }, false);
107 },
108
109 // 倒计时，当前剩余游戏时间
110 countDown: function() {
111 var that = this;
112
113 var t = setInterval(function() {
114 that.text(that.gameTime[0], --that.totalTime);
115
116 if (that.totalTime === 0) {
117 clearInterval(t);
118 clearInterval(that.moveTime);
119
120 for (var i = 0, j = that.mouses.length; i < j; ++i) {
121 that.mouses[i].style.display = 'none';
122 }
123
124 alert('游戏结束，得分为：' + that.score);
125 }
126 }, 1000);
127 },
128
129 // 开始游戏
130 startGame: function() {
131 this.score = 0;
132 this.totalTime = 60;
133 this.text(this.gameTime[0], this.totalTime);
134 this.text(this.gameScore[0], this.score);
135
136 this.countDown();
137 this.moveUpAndDown();
138 }
139 };
140
141 new MouseGame();
完整JS
代码有注释应该不难看懂了 那么..快来fork吧.. （编辑：佛山站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
