无聊的人用JS实现了一个简单的打地鼠游戏 – -渔人码头-

直奔判定,用JS实现东西复杂的打地鼠游戏

由于重大聚会匹敌复杂,因而它运转到JS上。,率先看一眼效果图。,或许 在线玩玩 吧 

倘若你点击较暗的(通常称为坏鼠标),将推理50;倘若你点击更轻的色(俗名好的鼠标),将得分100

这只老鼠留意短工夫难画。,也无意用图片。,只需应用CSS绘制东西复杂的脸来代表老鼠和坑。

html创作

挺复杂,应用9li 制表坑,应用9div 加标签于代表老鼠。

  <div class="container"><h4>无赖的仓鼠h4><div class="game-top"><p><input type="button" value="开端游戏" id="game-start"><p><p>得分:<span id="game-score">0span>p><p>余渣工夫:<span id="game-time">60span> sp>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的实现

东西孩子。

为坑,添加框影 … 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: 0;
        }

让老鼠进展。,处置它的办法是应用活泼。,当老鼠田径运动时,先完全。,把持绝对使就座似乎是调和的。

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

留意 animation: … infinite 的应用,让活泼持续。,当人们应用JS来把持时差时,人们理所当然显示鼠标。,理所当然外观量只老鼠?

另一幅画,活泼将完毕,不再容许持续。

它是一只好老鼠不断地一只坏老鼠?,理所当然给小费。:

  

你可以目前的应用CSS的伪元素:没经验的特赞和W随后,点击时,长度区分的属性设置区分的值和色。

.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;
}

JS的处置

逻辑点击开端游戏。,倒计时开端,同时,好的和坏的老鼠一向在进展。,把持坑内的好鼠和坏鼠此外数的无安排。,点击鼠标。,点击坏鼠标以降低价值分。,游戏完毕工夫。

率先看一眼老鼠的田径运动。

          // 田径运动用双手触摸、举起或握住
            moveUpAndDown: function() {
                var that = this;

                // 跑表随机地明确好的坏老鼠的数。,此外需求显示的数字。
                 = setInterval(function() {

                    for (var i = 0, j = .length; i < j; ++i) {
                        [I] Stand属性点击, ''0'');
                        [I]类名 = 好 使生动的;
                        [i].style.display = 没;
                    }

                    // bad 的数字var badNum = (0, 8);
                    for (var i = 0; i < badNum; i++) {
                        [(0, 8)]类名 = 坏的 使生动的;
                    }

                    // 要显示的数字var showNum = (0, 8);
                    for (var i = 0; i < showNum; i++) {
                        [(0, 8)].style.display = 闭塞;
                    }
                }, 2000);
            },

应用定时曝光控制计,跑表一段时间与CSS击中要害活泼设置分歧。,确保成圈分歧性

设置类为good 你可以明确东西好的鼠标。,同样地bad 关闭坏老鼠

在竞赛开端时,召唤时,设置类为active 你可以让老鼠进展。

鼠标用双手触摸、举起或握住,要紧的是要留意,只进展鼠标才干点击。,每个鼠标最好的单击一次。

              // 地鼠手术
                包装(0)AdvestListNistar(点击), function(e) {
                    e = e || window.event;
                    var elem = e.target || e.srcElement;
                    // 倘若当经历被潜匿,它将不任务。,多个点击只实现第东西分。if ( !== 闭塞 || (点击) === ''1'') {
                        return;
                    }
                    // 扣分if ((坏的'') !== -1) {
                         -= that.badScore;
                    }
                    // 加分else {
                         += that.goodScore;
                    }

                    (点击, ''1'');
                    ([0], );
                }, false);

倒计时完毕后,丢下两个定时曝光控制计,同时,买到鼠标项都设置为显示。none 你可以(不然活泼将一向显示)

// 倒计时,余渣游戏工夫
            countDown: function() {
                var that = this;

                var t = setInterval(function() {
                    ([0], --that.totalTime);

                    if (that.totalTime === 0) {
                        clearInterval(t);
                        clearInterval();

                        for (var i = 0, j = .length; i < j; ++i) {
                            [i].style.display = 没;
                        }

                        alert(''游戏完毕,得分为:'' + );
                    }
                }, 1000);
            },
  1function MouseGame() {
  2this.mousesWrap = this.$(''.game-content'');
  3this.mouses = this.$(''.game-content 迪夫);
  4this.gameStart = this.$(''#game-start'');
  5this游戏工夫 = this.$(''#game-time'');
  6this.gameScore = this.$(''#game-score'');
  7this.goodScore = 100;
  8this.badScore = 50;
  9 10this.bindEvent();
 11        }
 12 13         MouseGame.prototype = {
 14            constructor: MouseGame,
 15 16/**
 17             * 获取元素
 18             * @param  {String} elem 元素的字母串歧视
 19             * @example
 20             * $(''迪夫) | $('''')
 21             * @return {NodeList}      实现的元素集
 22*/ 23             $: function(ELEM) {
 24return document.querySelectorAll(ELEM);
 25            },
 26 27/**
 28             * 获取倘若长度的随机数字。
 29             * @param  {Number} from 出身
 30             * @param  {Number} to   完毕
 31             * @return {Number}      随机数字
 32*/ 33             getRandom: function(从, 到) {
 34return Math.floor(() * (到) - from + 1)) + from;
 35            },
 36 37/**
 38             * 设置元素材料
 39             * @param  {HTMLElement} elem 要设置的元素
 40             * @param  {String} val  设置的材料
 41             * @return {String}      设置材料,材料亲自的材料。
 42*/ 43             text: function(ELEM), 瓦尔) {
 44if () {
 45return val !== undefined ?  = val : ;
 46                 } elseif () {
 47return val !== undefined ?  = val : ;
 48                }
 49            },
 50 51// 田径运动用双手触摸、举起或握住 52             moveUpAndDown: function() {
 53var that = this;
 54 55// 跑表随机地明确好的坏老鼠的数。,此外需求显示的数字。 56                  = setInterval(function() {
 57 58for (var i = 0, j = .length; i < j; ++i) {
 59                         [I] Stand属性点击, ''0'');
 60                         [I]类名 = 好 使生动的;
 61                         [i].style.display = 没;
 62                    }
 63 64// bad 的数字 65var badNum = (0, 8);
 66for (var i = 0; i < badNum; i++) {
 67                         [(0, 8)]类名 = 坏的 使生动的;
 68                    }
 69 70// 要显示的数字 71var showNum = (0, 8);
 72for (var i = 0; i < showNum; i++) {
 73                         [(0, 8)].style.display = 闭塞;
 74                    }
 75                 }, 2000);
 76            },
 77 78// 地鼠手术 79             bindEvent: function() {
 80var that = this;
 81 82// 游戏开端/重启 83                 that.gameStart[0].addEventListener(''click'', function() {
 84                    that.startGame();
 85                 }, false);
 86 87// 地鼠手术 88                 包装(0)AdvestListNistar(点击), function(e) {
 89                     e = e || window.event;
 90var elem = e.target || e.srcElement;
 91// 倘若当经历被潜匿,它将不任务。,多个点击只实现第东西分。 92if ( !== 闭塞 || (点击) === ''1'') {
 93return;
 94                    }
 95// 扣分 96if ((坏的'') !== -1) {
 97                          -= that.badScore;
 98                    }
 99// 加分100else {
101                          += that.goodScore;
102                    }
103104                     (点击, ''1'');
105                     ([0], );
106                 }, false);
107            },
108109// 倒计时,余渣游戏工夫110             countDown: function() {
111var that = this;
112113var t = setInterval(function() {
114                     ([0], --that.totalTime);
115116if (that.totalTime === 0) {
117                        clearInterval(t);
118                        clearInterval();
119120for (var i = 0, j = .length; i < j; ++i) {
121                             [i].style.display = 没;
122                        }
123124                         警报(游戏完毕),得分为:'' + );
125                    }
126                 }, 1000);
127            },
128129// 开端游戏130             startGame: function() {
131this.score = 0;
132this.totalTime = 60;
133this.text(this游戏工夫[0], this.totalTime);
134this.text(this.gameScore[0], this得分)
135136this.countDown();
137this.moveUpAndDown();
138            }
139        };
140141new MouseGame();

丰富的JS

法典正文理所当然容易地懂得。

这么..前进,叉子。..

发表评论

电子邮件地址不会被公开。 必填项已用*标注