JavaScript实现打地鼠小游戏
发布在JavaScript2015年2月6日view:7973前端开发BrettBat
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

小编心语:说起打地鼠,就感觉满满的童年回忆扑面而来,不管是街边的游戏机还是手机上的游戏,相信大家一定都玩过或者见识过~现在就来教大家编写出这个游戏,当然不要忘了最后要打开浏览器才能看到最终的效果~做完这个项目课后就赶紧分享给你的小伙伴们炫耀一下吧!

一、实验说明

1. 环境介绍

本实验环境采用Ubuntu Linux桌面环境,实验中会用到的程序:

  1. Xfce终端: Linux命令行终端,打开后会进入Bash环境,可以使用Linux命令
  2. Firefox及Opera:浏览器,可以用在需要前端界面的课程里,只需要打开环境里写的HTML/JS页面即可
  3. gvim:非常好用的Vim编辑器,最简单的用法可以参考课程Vim编辑器
  4. 其他编辑器:如果Vim不熟悉可以使用gedit或brackets,其中brackets比较适合开发前端代码。

2.代码下载

本课程中的所有源码可以通过以下方式下载:

https://github.com/shiyanlou/Whac-A-Mole.git

二、项目简介


本项目名为打地鼠,是大家耳熟能详的一款经典的小游戏。游戏最终将会以html文件形式完成,需要使用Firefox等浏览器打开才能看到游戏的最终效果。此外,游戏将会采用JavaScript实现整个逻辑流程,所以建议没有JavaScript基础的同学首先学习javaScript教程

游戏最终效果截图如下:

三、核心方法介绍


在打地鼠小游戏中将会多次用到JavaScript中的计时函数: - setTimeout() - setInterval()

这两个函数的作用很大,不仅仅在本次的小游戏中,在很多的JavaScript程序中都会有“他们”的身影。接下来将会详细的剖析这两个函数。

1. setTimeout()

用于在指定的毫秒数后调用函数或计算表达式(只执行一次,可通过创建一个函数循环重复调用setTimeout,来实现重复操作)

用法示例

  • setTimeout("functionName()",1000);
  • setTimeout(functionName,1000);

调用一个无参的方法很简单,但当我们需要调用一个带有参数的函数时,问题就来了。

解决的方法就是再写一个函数,该函数返回一个不带参数的函数。 示例如下:

function show(name){
    alert(name + " ,你好!");
}

function returnFun(name){
    return function(){
        show(name);
    };
}

setTimeout(returnFun("小明"),1000); 

clearTimeout()

立即终止setTimeout()方法。 示例:

var timeId = setTimeout(...);
clearTimeout(timeId);

2. setInterval()

可按照指定的周期(毫秒)来调用函数或计算表达式。

setTimeout()不同,不论调用的函数或计算表达式需要多长时间才能执行完,它都只是简单的每隔一定时间就重复执行一次那个函数或计算表达式。

用法示例

  • setInterval("functionName()",1000);
  • setInterval(functionName,1000);

clearInterval()

立即终止setInterval()方法。 示例:

var interId = setInterval(...);
clearInterval(interId);

下一节课将会具体介绍这两个方法的运用场景,以及如何完整的实现打地鼠小游戏。

三、游戏制作


1. 功能逻辑设计

功能包括: - 得分统计 - 计算成功率 - 老鼠图片的隐藏、显示 - 判断是否点中老鼠 - 最终结果显示 - 错误提示

流程设计: - 点击“开始游戏”按钮游戏开始,否则将提示“请点击开始游戏”字样 - 分数、命中率显示重置为“0”,倒计时开始(默认为30秒) - 老鼠图片不断显示、隐藏,玩家可点击鼠标左键进行游戏 - 当30秒倒计时结束或者玩家主动点击“结束按钮”时,游戏结束并显示游戏结果

游戏设计简单,并未添加其他丰富的游戏设计,也没有添加动画、声音等特殊效果,其目的是想带领大家从简洁的游戏逻辑设计中清楚地体会到从设计到开发、完善的乐趣,能通过简单的几行代码也能轻松实现一个属于自己制作的小游戏。

2. 框架设计

游戏通过html文件实现,自然离不开html标签,常见的打地鼠游戏都是规则的几个固定位置随机出现老鼠,因此本次游戏设计将会采用<table>标签来布局,得分、命中率等结果显示将使用<input>标签。html代码(包括css)如下:

<!DOCTYPE html>
<html>
    <head>
        <title>打地鼠</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            #content {
                width: 960px;
                margin: 0 auto;
                text-align: center;
            }
            table {
                margin: 0 auto;
            }
            table:hover {
                cursor: url('img/chuizi.png'),auto;//此处图片路径要依据自己的路径来修改
            }
            td {
                width: 95px;
                height: 95px;
                background-color: #00ff33;
            }
        </style>
        <script>
            ......
            //下一节将会详细讲解
        </script>
    </head>
    <body>
        <div id="content">
            <input type="button" value="开始游戏" onclick="GameStart()">
            <input type="button" value="结束游戏" onclick="GameOver()">
           <form name="form1">
                <label>分数:</label>
                <input type="text" name="score" size="5">
                <label>命中率:</label>
                <input type="text" name="success" size="10">
                <label>倒计时:</label>
                <input type="text" name="remtime" size="5">
            </form>
            <table>
                <tr>
                    <td id="td[0]" onclick="hit(0)"></td>
                    <td id="td[1]" onclick="hit(1)"></td>
                    <td id="td[2]" onclick="hit(2)"></td>
                    <td id="td[3]" onclick="hit(3)"></td>
                    <td id="td[4]" onclick="hit(4)"></td>
                </tr>
                <tr>
                    <td id="td[5]" onclick="hit(5)"></td>
                    <td id="td[6]" onclick="hit(6)"></td>
                    <td id="td[7]" onclick="hit(7)"></td>
                    <td id="td[8]" onclick="hit(8)"></td>
                    <td id="td[9]" onclick="hit(9)"></td>
                </tr>
                <tr>
                    <td id="td[10]" onclick="hit(10)"></td>
                    <td id="td[11]" onclick="hit(11)"></td>
                    <td id="td[12]" onclick="hit(12)"></td>
                    <td id="td[13]" onclick="hit(13)"></td>
                    <td id="td[14]" onclick="hit(14)"></td>
                </tr>
                <tr>
                    <td id="td[15]" onclick="hit(15)"></td>
                    <td id="td[16]" onclick="hit(16)"></td>
                    <td id="td[17]" onclick="hit(17)"></td>
                    <td id="td[18]" onclick="hit(18)"></td>
                    <td id="td[19]" onclick="hit(19)"></td>
                </tr>
                <tr>
                    <td id="td[20]" onclick="hit(20)"></td>
                    <td id="td[21]" onclick="hit(21)"></td>
                    <td id="td[22]" onclick="hit(22)"></td>
                    <td id="td[23]" onclick="hit(23)"></td>
                    <td id="td[24]" onclick="hit(24)"></td>
                </tr>
            </table>
        </div>
    </body>
</html>

这样打地鼠小游戏的结构设计就完成了,可以保存后通过Firefox浏览器查看当前效果。

3. 功能逻辑实现

代码配上详细注解:

var td = new Array(),      //保存每个格子的地鼠
    playing = false,       //游戏是否开始
    score = 0,             //分数
    beat = 0,              //鼠标点击次数
    success = 0,           //命中率
    knock = 0,             //鼠标点中老鼠图片次数
    countDown = 30,        //倒计时
    interId = null,        //指定setInterval()的变量
    timeId = null;         //指定setTimeout()的变量

//游戏结束
function GameOver(){
    timeStop();
    playing = false;
    clearMouse();
    alert("游戏结束!\n你获得的分数为:"+score+"\n命中率为:"+success);
    success = 0;
    score = 0;
    knock = 0;
    beat = 0;
    countDown = 30;
}

//显示当前倒计时所剩时间
function timeShow(){
    document.form1.remtime.value = countDown;
    if(countDown == 0){
        GameOver();
        return;
    }else{
        countDown = countDown-1;
        timeId = setTimeout("timeShow()",1000);
    }
}

//主动停止所有计时
function timeStop(){
    clearInterval(interId);//clearInterval()方法返回setInterval()方法的id
    clearTimeout(timeId);//clearTime()方法返回setTimeout()的id
}

//随机循环显示老鼠图片
function show(){
    if(playing)
    {
        var current = Math.floor(Math.random()*25);
        //这里的路径也需要根据自己的实际文件路径来修改
        document.getElementById("td["+current+"]").innerHTML = '<img src="img/mouse.png">';
        //使用setTimeout()实现3秒后隐藏老鼠图片
        setTimeout("document.getElementById('td["+current+"]').innerHTML=''",3000);
    }
}

//清除所有老鼠图片
function clearMouse(){
    for(var i=0;i<=24;i++)
    {
        document.getElementById("td["+i+"]").innerHTML="";
    }
}

//点击事件函数,判断是否点中老鼠
function hit(id){
    if(playing==false)
    {
        alert("请点击开始游戏");
        return;
    }
    else
    {   
         beat +=1;
        if(document.getElementById("td["+id+"]").innerHTML!="")
        {
            score += 1;
            knock +=1;
            success = knock/beat;
            document.form1.success.value = success;
            document.form1.score.value = score;
            document.getElementById("td["+id+"]").innerHTML="";
        }
        else
        {
            score += -1;
            success = knock/beat;
            document.form1.success.value = success;
            document.form1.score.value = score;
        }
    }
}

//游戏开始
function GameStart(){
    playing = true;
    interId = setInterval("show()",1000);
    document.form1.score.value = score;
    document.form1.success.value = success;
    timeShow();
}

现在就可以让老鼠动起来了。

4. 总结

到此,整个游戏从设计到制作就完全介绍完了。运行一下自己制作的小游戏,虽然简单,但是其中的乐趣是不言而喻的。

再看看代码,也没有很多晦涩难懂的复杂算法或逻辑,这也是JavaScript容易入门的原因。但是JavaScript是一门弱类型语言,语法很灵活,所有要真真掌握JavaScript还是需要花一点功夫。

最后,游戏虽然完成了,但是代码的优化也是每一个项目所必须的。例如:在html代码中每个<td>标签都绑定了onclick事件对象,这样繁琐的代码显然不是我们想要的,但当我们使用js库,比如最受人欢迎的jQuery,我们的代码会更加简洁。像这样需要优化的代码还有很多,希望大家能有自己的创新,不断的完善、优化这个小游戏!

想要赶紧试一下嘛,点击这里为你免费搭建好了在线编程环境哦~用浏览器就可轻松编程~然后把你的作品分享给你的小伙伴们炫耀一下吧!!

看了来自Leetao同学的细心测评,在最后留给大家几个思考题:

思考题1: 界面的美观优化,大开你的脑洞,把打地鼠的游戏界面能设计得更美观得体。

思考题2: 在命中率结果显示处,未做精确控制,显得数据不好看,希望大家能思考一下,能把结果控制在两位小数。

思考题3: 修改最后的结果提示,去掉alert( ),自己尝试写一个结果提示的弹出特效吧。

思考题4: 游戏不过瘾,试试添加更多的关卡限制,丰富你的打地鼠小游戏吧,做完这题,相信你能收获很多。

再次感谢Leetao同学的细心评测,正是你们细心的评测付出,才能让我们的文档越来越丰富、实用,让大家学到想学的东西。因为不浪费大家的学习时间是我们的的宗旨,所以我们每一次都在努力进步,你们的声音就是支持我们进步的动力,由衷感谢各位。

评论
发表评论
2年前
赞了此文章!
WRITTEN BY
实验楼官方微博
“实验楼——www.shiyanlou.com",一个致力于通过动手实践方式提升IT人群(包括拟就业的大学生和从业者)在求职和职业规划中所必备的职业技能的网站!
TA的新浪微博
PUBLISHED IN
JavaScript

关于JavaScript的一些项目课

我的收藏