无聊的人用JS实现了一个简单的打地鼠游戏

直入正题，用JS实现一个简单的打地鼠游戏

因为功能比较简单就直接裸奔JS了，先看看效果图，或者 在线玩玩 吧

如果点击颜色比较深的那个（俗称坏老鼠），将扣分50；如果点击颜色比较浅的那个（俗称好老鼠），将得分100

实现

老鼠好像有点难画，又不想用图片，就直接用CSS画个简单的图代表老鼠和坑吧

html结构

挺简单，用9个 li 标签代表坑，用9个 div 标签代表老鼠

　　<div class="container">
        <h4>无聊打打地鼠</h4>

        <div class="game-top">
            <p><input type="button" value="开始游戏" id="game-start"><p>
            <p>得分：<span id="game-score">0</span></p>
            <p>剩余时间：<span id="game-time">60</span> s</p>
        </div>
        <div class="game-content">
            <ul>
                <li><div></div></li>
                <li><div></div></li>
                <li><div></div></li>
                <li><div></div></li>
                <li><div></div></li>
                <li><div></div></li>
                <li><div></div></li>
                <li><div></div></li>
                <li><div></div></li>
            </ul>
        </div>
    </div>

CSS的实现

有点小技巧

对于坑，加个box-shadow: ... inset 美化一下样式

        .game-content li {
            float: left;
            margin-top: 50px;
            margin-left: 30px;
            width: 100px;
            height: 50px;
            border-radius: 50%;
            background-color: #67d0b4;
            box-shadow: 0 0 50px #706565 inset;
        }

对于老鼠，用 border-radius：50%/40% 绘制，第二个参数还是有点使用价值的

        .game-content div {
            position: relative;
            margin-top: -15px;
            margin-left: 25px;
            width: 50px;
            height: 70px;
            border-radius: 50%/40%;
            background-color: #dfb25d;
            opacity:;
        }

而要让老鼠动起来，这里的处理方式就是用动画了，老鼠运动的时候，先往上再往下即可，控制好相对位置看起来和谐一点就行

        @keyframes mouse-move {
            50% {
                margin-top: -40px;
                opacity:;
            }
            100% {
                margin-top: -15px;
                opacity:;
            }
        }
        .game-content div.active {
            animation: mouse-move 2s ease-in-out infinite;
        }

注意 animation: ... infinite 的使用，让动画能一直进行下去，我们使用JS控制好时间差判断应该显示那个老鼠，应该显示多少只老鼠即可

不然的画，会发现动画完成了再也无法让它继续进行了

点击的是好老鼠还是坏老鼠，应该给出提示如：

  

可以直接用CSS的伪元素::after置入对错，在点击的时候，根据不同的性质设置不同的值及颜色

.game-content div.good {
    background-color: #dfb25d;
}
.game-content div.good[clicked="1"]::after {
    content: "✓";
    line-height: 70px;
    font-size: 40px;
    color: #0ad845;
}

.game-content div.bad {
    background-color: #a48f5c;
}
.game-content div.bad[clicked="1"]::after {
    content: "✕";
    line-height: 70px;
    font-size: 40px;
    color: #db1536;
}

 .container {
     width: 500px;
     height: 300px;
     margin: 50px auto;
     border: 1px solid #ddd;
     text-align: center;
 }

 .game-top {
     padding-top: 10px;
     width: 100%;
     height: 90px;
 }
 .game-top p {
     margin: 5px;
 }

 .game-content {
     overflow: auto;
     width: 100%;
     border-top: 1px solid #ddd;
     background-color: #ddf;
 }

 .game-content ul {
     list-style: none;
 }
 .game-content li {
     float: left;
     margin-top: 50px;
     margin-left: 30px;
     width: 100px;
     height: 50px;
     border-radius: 50%;
     background-color: #67d0b4;
     box-shadow: 0 0 50px #706565 inset;
 }
 .game-content li:last-child {
     margin-bottom: 50px;
 }

 .game-content div {
     position: relative;
     margin-top: -15px;
     margin-left: 25px;
     width: 50px;
     height: 70px;
     border-radius: 50%/40%;
     background-color: #dfb25d;
     opacity:;
 }

 .game-content div.good {
     background-color: #dfb25d;
 }
 .game-content div.good[clicked="1"]::after {
     content: "✓";
     line-height: 70px;
     font-size: 40px;
     color: #0ad845;
 }

 .game-content div.bad {
     background-color: #a48f5c;
 }
 .game-content div.bad[clicked="1"]::after {
     content: "✕";
     line-height: 70px;
     font-size: 40px;
     color: #db1536;
 }

 @media screen and (max-width: 500px) {
     .container {
         width: 290px;
     }
     .game-content ul {
         padding:;
     }
     .game-content li {
         margin-left: 5px;
         width: 90px;
     }
     .game-content div {
         margin-left: 20px;
     }
 }

 @-webkit-keyframes mouse-move {
     50% {
         margin-top: -40px;
         opacity:;
     }
     100% {
         margin-top: -15px;
         opacity:;
     }
 }
 @keyframes mouse-move {
     50% {
         margin-top: -40px;
         opacity:;
     }
     100% {
         margin-top: -15px;
         opacity:;
     }
 }

 .game-content div.active {
     -webkit-animation: mouse-move 2s ease-in-out infinite;
         animation: mouse-move 2s ease-in-out infinite;
 }

完整CSS

JS的处理

逻辑是点击开始游戏，倒计时开始，同时好坏老鼠不断运动，控制好坑中好坏老鼠及其数量的随机性，点击好老鼠加分，点击坏老鼠减分，时间到结束游戏。

先看看老鼠的运动

        　　// 运动操作
            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);
            },

     function MouseGame() {
             this.mousesWrap = this.$('.game-content');
             this.mouses = this.$('.game-content div');
             this.gameStart = this.$('#game-start');
             this.gameTime = this.$('#game-time');
             this.gameScore = this.$('#game-score');
             this.goodScore = 100;
             this.badScore = 50;

             this.bindEvent();
         }

         MouseGame.prototype = {
             constructor: MouseGame,

             /**
              * 获取元素
              * @param  {String} elem 元素的字符串标识
              * @example
              * $('div') | $('p.active')
              * @return {NodeList}      获取的元素集
              */
             $: function(elem) {
                 return document.querySelectorAll(elem);
             },

             /**
              * 获取给定范围的随机数
              * @param  {Number} from 起始
              * @param  {Number} to   结束
              * @return {Number}      随机数
              */
             getRandom: function(from, to) {
                 return Math.floor(Math.random() * (to - from + 1)) + from;
             },

             /**
              * 设置元素内容
              * @param  {HTMLElement} elem 要设置的元素
              * @param  {String} val  设置的内容
              * @return {String}      设置好的内容|元素本身的内容
              */
             text: function(elem, val) {
                 if (elem.textContent) {
                     return val !== undefined ? elem.textContent = val : elem.textContent;
                 } else if (elem.innerText) {
                     return val !== undefined ? elem.innerText = val : elem.innerText;
                 }
             },

             // 运动操作
             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);
             },

             // 打地鼠操作
             bindEvent: function() {
                 var that = this;

                 // 监听游戏开始/重新开始
                 that.gameStart[0].addEventListener('click', function() {
                     that.startGame();
                 }, false);

                 // 打地鼠操作
                 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);
             },

             // 倒计时，当前剩余游戏时间
             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);
             },

             // 开始游戏
             startGame: function() {
                 this.score = 0;
                 this.totalTime = 60;
                 this.text(this.gameTime[0], this.totalTime);
                 this.text(this.gameScore[0], this.score);

                 this.countDown();
                 this.moveUpAndDown();
             }
         };

         new MouseGame();

完整JS

代码有注释应该不难看懂了

那么..快来fork吧..