时间戳

首页 > 技术文章 > 用js制作简单的打地鼠游戏

用js制作简单的打地鼠游戏

lxy1023- 2017-04-09 20:30 原文

HTML代码：

<body>
    <div class="container">
        <div class="containerLeft" id="containerLeft">
            <div class="gameMenu" id="gameMenu">
                <div class="startGame menuBtn" id="startGame">开始游戏</div>
                <div class="gameIntro menuBtn" id="gameIntro">游戏介绍</div>
                <div class="exitGame menuBtn" id="exitGame">退出游戏</div>
            </div>
            <div class="gamepanel" id="gamepanel">
                <div class="img_top">
                    <img src="img/mu0.png" alt=""/>
                    <img src="img/mu0.png" alt=""/>
                    <img src="img/mu0.png" alt=""/>
                    <div class="baffle plate1 one"></div>
                    <div class="baffle plate2 two"></div>
                    <div class="baffle plate3 three"></div>
                </div>
                <div class="img_bottom">
                    <img src="img/mu0.png" alt=""/>
                    <img src="img/mu0.png" alt=""/>
                    <img src="img/mu0.png" alt=""/>
                    <div class="baffle plate1 four"></div>
                    <div class="baffle plate2 five"></div>
                    <div class="baffle plate3 six"></div>
                </div>
            </div>
            <div class="getScore">
                <div class="getScore_instru">游戏结束</div>
                <div class="getScore_over"></div>
                <div class="getScore_btn">回到主菜单</div>
            </div>
        </div>
        <div class="containerRight">
            <div class="gameIntroContent" id="gameIntroContent">
                这是一个用锤子打老鼠的游戏，特别简单。只要用锤子敲打老鼠，打中了得10分,没打中不得分。
            </div>
            <div class="score">
                <div class="score_top">得分</div>
                <div class="score_bottom"></div>
            </div>
            <div class="times">
                <div class="times_top">时间</div>
                <div class="times_bottom"></div>
            </div>
        </div>
        <div id="anniu">
            <div id="mansu">慢速</div>
            <div id="kuaisu">快速</div>
        </div>
    </div>

 

带入<script src="js/jquery-1.12.2.min.js"></script>

css代码：

<style>
        .container{
            width: 800px;
            height: 577px;
            border: 1px solid;
            margin: 0 auto;
        }
        .containerLeft{
            width: 649px;
            height: 100%;
            background-image: url("img/bg.png");
            float: left;
            position: relative;
        }
        .containerRight{
            width: 151px;
            height: 100%;
            background-color: pink;
            float: left;
        }
        .gameMenu{
            width: 200px;
            height: 300px;
            margin: 0 auto;
            margin-top: 250px;
        }
        .menuBtn{
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            margin-top: 30px;
            border-radius: 10px;
            color: black;
            border: 1px solid;
            cursor: pointer;
        }
        .menuBtn:hover{
            background-color: goldenrod;
        }
        .gameIntroContent{
            margin-top: 250px;
            display: none;
        }
        .gamepanel{
            position: absolute;
            left: 100px;
            top: 230px;
            display: none;
        }
        .times{
            width: 110px;
            height: 60px;
            margin: 0 auto;
            margin-top: 50px;
            text-align: center;
            border-radius: 10px;
            border: 1px solid;
        }
        .times_top{
            width: 100%;
            height: 50%;
        }
        .gamepanel{
            position: absolute;
            top: 250px;
            left: 80px;
            display: none;
        }
        .img_top,.img_bottom{
            position: relative;
        }
        .gamepanel .baffle{
            width: 100px;
            height: 60px;
            /*    去除挡板的背景颜色*/
            /*background-color: pink;*/
            opacity: 0.5;
            /*    去除挡板的边框*/
            /*border: 1px solid;*/
        }
        .gamepanel .plate1{
            position: absolute;
            left: 30px;
            top: -30px;
        }
        .gamepanel .plate2{
            position: absolute;
            left: 195px;
            top: -30px;
        }
        .gamepanel .plate3{
            position: absolute;
            left: 365px;
            top: -30px;
        }
        .score{
            border: 1px solid black;
            width: 110px;
            height: 60px;
            border-radius: 10px;
            margin: 0 auto;
            margin-top: 150px;
            text-align: center;
        }
        .getScore{
            width: 300px;
            height: 200px;
            position: absolute;
            top: 225px;
            left: 175px;
            text-align: center;
            display: none;
        }
        .getScore_instru,.getScore_over{
            width: 100%;
            height: 25%;
            line-height: 50px;
            font-size: 32px;
            color: black;
        }
        .getScore_btn{
            width: 200px;
            height: 50px;
            background-color: rgb(233,233,233);
            margin: 0 auto;
            margin-top: 20px;
            border: 1px solid;
            border-radius: 4px;
            text-align: center;
            line-height: 50px;
            color: black;
            cursor: pointer;
        }
        .getScore_btn:hover{
            background-color: yellowgreen;
        }
        #anniu{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 250px;
            left: 200px;
            display: none;
        }
        #mansu{
            width: 100px;
            height: 30px;
            margin: 0 auto;
            cursor: pointer;
            border-radius: 10px;
            border: 1px solid black;
            text-align: center;
            line-height: 30px;
        }
        #kuaisu{
            width: 100px;
            height: 30px;
            margin: 0 auto;
            margin-top: 100px;
            cursor: pointer;
            border-radius: 10px;
            border: 1px solid black;
            text-align: center;
            line-height: 30px;
        }
    </style>

 

JS代码:

<script>
    var i = 1;//图片的编号,在1-3之间变化
    var x = 5;//随机数的上限
    var y = 0;//随机数的下限
    var rand;// 树桩随机数变量,刚开始没有赋值
    var times = 30;//计时器的初始时间
    var mouseInOut;
    var gameRunning = false;
    var score = 0;
    var zidong;
    //老鼠出现函数
    function mouseInOutFn()
    {
        //如果i的值大于3,说明一整套老鼠出来的图片已经走完了
        if(i>3)
        {
            //将该树桩的图片重置
            $("img").eq(rand).attr("src","img/mu0.png");
            //i重置为1
            i = 1;
            //重新开始摇出一个随机树桩,产生0-5之间的随机数
            rand = parseInt(Math.random() * (x - y + 1) + y);
            return;
        }
        //图片的完整路径
        var imgChange = "img/mouse"+ i +".png";
        //给摇出来的随机树桩更换图片
        $("img").eq(rand).attr("src",imgChange);
        //i自增1,下一次调用的时候图片就会被匹配成下一张图片
        i++;
    }

    startGame.addEventListener("click",function(){
        $("#gameMenu").css("display","none");
        $("#anniu").css("display","block");
    });
    //给游戏介绍绑定时间
    gameIntro.addEventListener("click",function(){
        if(gameIntroContent.style.display == "none")
        {
            gameIntroContent.style.display = "block";  //将游戏介绍显示
            $(".times").css("display","none"); //将时间隐藏
            $(".score").css("display","none"); //将分数隐藏
        }
        else
        {
            gameIntroContent.style.display = "none"; //将游戏介绍设置为隐藏
            $(".times").css("display","block");  //将时间显示
            $(".score").css("display","block");  //将分数显示
        }
    });
//

    //给开始游戏按钮绑定点击事件
    //      慢速
    mansu.addEventListener("click",function(){
        gameRunning = true;
       $("#anniu").css("display","none");
        gamepanel.style.display = "block";
        gameInit();  //调用游戏初始化慢速函数
        startGames();  //调用游戏开始函数
        timeCountFn();  //调用时间函数
    });
     //        快速
    kuaisu.addEventListener("click",function(){
        gameRunning = true;
        $("#anniu").css("display","none");
        gamepanel.style.display = "block";
        gameInit1();  //调用游戏初始化快速函数
        startGames();  //调用游戏开始函数
        timeCountFn();  //调用时间函数
    });
    //显示时间的事件
    function timeCountFn()
    {
        //显示当前的时间
        $(".times_bottom").html(times);
        //如果计时器的时间已经为零
        if($(".times_bottom").html() == 0)
        {
            //停止周期调用老鼠出现与计时器函数
            clearInterval(mouseInOut);
            clearInterval(timeCount);
            //隐藏树桩盒子
            $(".gamepanel").css("display","none");
            //显示评价盒子
            $(".getScore").css("display","block");
            $(".getScore_over").html(score);
            //鼠标恢复为正常
            $(".containerLeft").css("cursor","auto");
            //游戏运行状态修改为false
            gameRunning = false;
            //将.panel_left上面的所有事件全部解绑
            $(".containerLeft").off();
            $(".one").off();
            $(".two").off();
            $(".three").off();
            $(".four").off();
            $(".five").off();
            $(".six").off();
            return;
        }
        times--;
    }
    //游戏快速初始化函数
    function gameInit()
    {
        //将计时器的值初始化为初始时间
        $(".times_bottom").html(times);
        //将计分的值初始化为0
        $(".score_bottom").html(score);
        //调用计时器函数,每个1秒调用一次
        timeCount = setInterval("timeCountFn()",1000);
        //调用老鼠出现函数,每隔400毫秒就调用一次
        mouseInOut = setInterval("mouseInOutFn()",400);
    }
    //游戏慢速初始化函数
    function gameInit1()
    {
        //将计时器的值初始化为初始时间
        $(".times_bottom").html(times);
        //将计分的值初始化为0
        $(".score_bottom").html(score);
        //调用计时器函数,每个1秒调用一次
        timeCount = setInterval("timeCountFn()",1000);
        //调用老鼠出现函数,每隔400毫秒就调用一次
        mouseInOut = setInterval("mouseInOutFn()",200);
    }
    //游戏开始函数
    function startGames() {
        if (gameRunning == true)
        {
            //锤子立着
            $(".containerLeft").mousedown(function () {
                $(".containerLeft").css("cursor", "url(img/hammerDown.ico),auto");
            });
            //锤子倒下
            $(".containerLeft").mouseup(function () {
                $(".containerLeft").css("cursor", "url(img/hammerUp.ico),auto");
            });
            $(".one").click(function () {
                //每个挡板被点击对随机数进行判断,如果是当前木桩,则满足条件
                if (rand == 0&&(i == 3||i == 4)) {
                    //如果被击中,将图片修改为mouse4
                    $("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
                    //将i的值赋值为4,其实只要大于3就行,后续图片就不会再出来了
                    //直接开始要下一个随机数
                    i = 4;
                    //分数增加10分
                    score += 10;
                    //将分数写入右边的分数栏
                    $(".score_bottom").html(score);
                }
            });
            $(".two").click(function(){
                if (rand == 1&&(i == 3||i == 4)) {
                    //如果被击中,将图片修改为mouse4
                    $("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
                    //将i的值赋值为4,其实只要大于3就行,后续图片就不会再出来了
                    //直接开始要下一个随机数
                    i = 4;
                    //分数增加10分
                    score += 10;
                    //将分数写入右边的分数栏
                    $(".score_bottom").html(score);
                }
            });
            $(".three").click(function () {
                if (rand == 2&&(i == 3||i == 4)) {
                    //如果被击中,将图片修改为mouse4
                    $("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
                    //将i的值赋值为5,其实只要大于3就行,后续图片就不会再出来了
                    //直接开始要下一个随机数
                    i = 4;
                    //分数增加10分
                    score += 10;
                    //将分数写入右边的分数栏
                    $(".score_bottom").html(score);
                }
            });
            $(".four").click(function () {
                if (rand == 3&&(i == 3||i == 4)) {
                    //如果被击中,将图片修改为mouse4
                    $("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
                    //将i的值赋值为5,其实只要大于3就行,后续图片就不会再出来了
                    //直接开始要下一个随机数
                    i = 4;
                    //分数增加10分
                    score += 10;
                    //将分数写入右边的分数栏
                    $(".score_bottom").html(score);
                }
            });
            $(".five").click(function () {
                if (rand == 4&&(i == 3||i == 4)) {
                    //如果被击中,将图片修改为mouse4
                    $("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
                    //将i的值赋值为5,其实只要大于3就行,后续图片就不会再出来了
                    //直接开始要下一个随机数
                    i = 4;
                    //分数增加10分
                    score += 10;
                    //将分数写入右边的分数栏
                    $(".score_bottom").html(score);
                }
            });
            $(".six").click(function () {
                if (rand == 5&&(i == 3||i == 4)) {
                    //如果被击中,将图片修改为mouse4
                    $("#gamepanel img").eq(rand).attr("src", "img/mouse4.png");
                    //将i的值赋值为5,其实只要大于3就行,后续图片就不会再出来了
                    //直接开始要下一个随机数
                    i = 4;
                    //分数增加10分
                    score += 10;
                    //将分数写入右边的分数栏
                    $(".score_bottom").html(score);
                }
            });
        }
    }
    //点击回到主菜单时的事件
    $(".getScore_btn").click(function(){
        //将页面全部刷新
        location.reload();
    });
    exitGame.addEventListener("click",function(){
        alert("请点击右上角的小红叉");
    });
</script>

推荐阅读