基于JS和jQuery写的打地鼠小游戏

最新推荐文章于 2021-12-05 23:50:39 发布

VIP文章白鹿原的白

最新推荐文章于 2021-12-05 23:50:39 发布

阅读量441

点赞数 1

分类专栏：笔记 javascrip

本文链接：https://blog.csdn.net/weixin_45759287/article/details/104379740

版权

今年的假期额外的长,无聊之际,给家里的小盆友写个小游戏吧!于是有了以下的打地鼠…
代码如下,具体实现看注释吧.
游戏效果如下

打地鼠

需求功能

默认计时为1min,地鼠数量3只,分数为0;
点击时图片消失,并在随机位置生成新图,分数+1
计时结束,取消所有图片的单击事件

具体的参数设置如下:

    // 显示相关变量
    // 分数变量
    var score = 0;
    // 初始地鼠变量
    var count = 3;
    // 记录实时地鼠数量
    var count_now = count;
    /*随机显示count个图*/
    var img = $("#img");

    // 时间倒计时相关
    // 每次累加的
    var countDown;
    // 默认时间1min
    var min = 1;
    var second = 0;
    // 默认3s后消失
    var time = 3000;
    // 设置每一个的消失时间
    var timeout = time;

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打地鼠</title>
    <style>
        .container {
   
            position: absolute;
            margin: auto;
            width: 100%;
            height: 70%;
            border-top-style: solid;
            border-color: #f9fff9;
        }

        #img {
   
            width: 50px;
        }

        .message {
   
            font-size: 20px;
            color: rgb(249, 255, 253);
        }

        .title {
   
            margin-left: 50%;
        }

    <