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

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" />
                    <img src="img/mu0.png" />
                    <img src="img/mu0.png" />
                    <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" />
                    <img src="img/mu0.png" />
                    <img src="img/mu0.png" />
                    <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>

时间： 2024-10-29 19:10:15

用js制作简单的打地鼠游戏的相关文章

使用HTML5制作简单的RPG游戏

很久以前就想着做一个游戏,但什么都不会又不知道从哪里开始,胡乱找来一些书籍和资料结果太深奥看不懂,无奈只能放弃.这一弃就是十多年,倥偬半生,眼看垂垂老矣,还是没能有什么成果. 近年来游戏引擎越来越多,相关资料也愈加丰富,使得游戏开发的门槛不再那么高了.特别是HTML5游戏,只需要一个支持HTML5的浏览器就能运行,特别适合我这样的初学者.一个偶然的机会,在某著名视频网站上发现很多关于Enchant.js 这个游戏引擎的教学视频,还有一本教程叫做<HTML5 Game Programming wi

js制作简单的趋势图

一.加载js文件 1 ZC={AG:function(l,e){if(l.indexOf){return l.indexOf(e)}else{for(var h=0,a=l.length;h<a;h++){if(l[h]==e){return h}}return -1}},VERSION:"0.130812",CHARTS:["null","null3d","line","line3d","

js制作简单的计算器

学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">   input{width:10

js制作贪吃蛇小游戏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #map{ width: 800px; height: 800px; background-color: black; position: relative; } </style> <

JS实现一个基本的打地鼠游戏

直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠),将得分100 实现 老鼠好像有点难画,又不想用图片,就直接用CSS画个简单的图代表老鼠和坑吧 html结构 挺简单,用9个 li 标签代表坑,用9个 div 标签代表老鼠 <div class="container"> <h4>无聊打打地鼠</h4>

利用css+原生js制作简易钟表

利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet' h

制作简单钟表

利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel='st

用Egret制作功能简单的打地鼠类游戏《冰桶挑战》

今天教大家使用Egret制作一款功能简单的游戏--<冰桶挑战>,这是一款大家熟悉的打地鼠类游戏,点击屏幕使用冰桶浇灭地洞里钻出来的明星,结算得到分数.游戏页面布局使用EUI封装了大量的常用UI组件,满足大部分的交互界面需求,开发者仅用1天时间即可独立完成这款小游戏的开发. 游戏效果图如下: 游戏比较简单,分为以下几个场景: · 开始场景 · 游戏场景 · 结束场景 · 游戏类 开始场景 这里使用Eui来搭建UI,舞台大小选择640 x 960,填充模式选择fixedWidth: 新建Eui组件

原生js简单打地鼠游戏

js部分内容 ------------------------------------------------------ var start = document.getElementById("start"); /*游戏开始按钮*/var diglettLocation = document.getElementsByClassName("anmint");var gameImg = ['img/ds01.png', 'img/ds03.png', 'img/d