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

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

电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训

如果点击颜色比较深的那个(俗称坏老鼠),将扣分50;如果点击颜色比较浅的那个(俗称好老鼠),将得分100

 

实现

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

html结构

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

电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训

  <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>剩余时间