HTML5实战之100行代码实现《打地鼠》_html打地鼠游戏代码

对于没有接触过html的朋友，要实现一个最简单的html5打地鼠游戏，也是不知道从何下手的。就算是html高手，没有上千行代码，也完不成一个像样的打地鼠游戏。

今天我要介绍的打地鼠游戏，主要逻辑代码，也就60多行，所有的代码加起来也就100多行。大部分的功能也就只是一下午的时间就能完成。

先看一下实际的成果：

PC点击这里

手机下方扫描二维码

开始讲解之前，打个广告，欢迎html5游戏开发爱好者扫描下方二维码或者搜群号223466431，加入开发者QQ群，我们免费提供最快速的开发工具，我们的所有html5游戏都开源。 

整个游戏的开发，基于在线H5游戏开发工具TangIDE，相关开发文档点击这里。

1. 准备工作

浏览器打开TangIDE链接，右上角有登陆按钮，选择QQ登陆。 
浏览器推荐谷歌浏览器或者猎豹浏览器。

2. 创建第一个场景

打开工具后，就有个默认场景，这个场景可以作为我们的第一个场景，把里面的足球和和草地删掉，场景改名为你自己喜欢的名字就可以了，然后更改背景为”加载背景.jpg”。图片资源在公共资源目录下面： 

拖一个音乐控件进来，清除默认背景音乐，选择资源菜单下的”背景音乐.mp3”作为背景音乐，勾选”自动播放”和”循环”两个选项，在通用标签里不勾选”运行时可见选项”。如果不想让用户看见可以在控件的通用上勾上勾或者去掉勾就可以了。

全部做好之后，成果如下 

3. 创建第二个场景

新建一个场景，将场景名字改为你喜欢的名字。 
拖一个图片进来，设置图片为”标题1.png”，放在场景的顶部，按照下图设置位置和大小属性： 

其他几个图片控件类似。

这里最重要的就是地鼠的位置的调整：
先拖一个一般的图标进来，然后在把在拖一个帧动画放在图标中。

然后在和上面一样替换图片就可以得到下图

下面讲解在打中地鼠的时候播放的动画：

先选中帧动画，然后在找到右边的特殊属性中清除不需要的图片，在重新上传你需要的图片，在进行分组管理就可以了如上图：先设置分组名称在选着需要的图片顺序，就可以了，保存确定，就OK了。

5. 代码的编写

其他的游戏界面就不再多说了，可自行编辑和参考，游戏的准备工作都已经做完了，我们还没写一行代码，但是点击预览，就已经能看到大部分界面效果了，只是不能响应事件而已。 
现在我们就来编写主要逻辑代码，其实很多简单代码还可以自动生成的。 
简单的场景我就不讲了来讲主要的游戏场景了

重要代码：选中地鼠的父控件在它的绘制前事件中加入一下程序

<span style="color:#009900;">canvas.beginPath();
//canvas.arc(this.w >> 1, this.h >> 1, this.h >> 1, 0, 2 * Math.PI);
canvas.rect(0,0,this.w,this.h);
canvas.clip();</span>

在定时器中加入倒计时程序：

v<span style="color:#33cc00;">ar me = this;
var win = this.getWindow();
if(win.countDown  < 10){
        win.find("云/计分板/倒计时").setValue("00:0"+win.countDown);
    }else{
        win.find("云/计分板/倒计时").setValue("00:"+win.countDown);
    }
    win.postRedraw();
    if(win.countDown === 0){
        if(win.timeid > 0 ){
            clearInterval(win.timeid);
        }
        var initData = win.score;
        win.gameOver = true;
        
        me.openWindow("结束界面", 
            function (retData) {console.log("window closed.");}, false, initData);
    }
    if(!win.gameOver){
        win.countDown--;
}</span>

主要逻辑程序和点击地鼠事件：在窗口打开前

<span style="color:#33cc00;">var win = this.getWindow();
var me  = this;
win.resetGame();
//变量初始化
win.gameOver = initData;
win.initVar = function(){
    win.score = 0;
    win.countDown = 30;
    win.arrayGopher = Array();//地鼠
    win.find("云/计分板/倒计时").setValue("00:" + win.countDown);
    win.hammer = win.find("锤子");
    win.hammer.setPivot(1,0.5);
    var ground = win.find("底");
    var fences = win.find("栅栏");
    fences.setPosition(fences.x,ground.y - fences.h);
};
//所有的地鼠初始化
win.gopherInit = function(number){
    if(number <= 0){
        return;
    }
    for(var i = 0; i < number; i++){//
        win.arrayGopher[i] = win.find("切图-"+i);
        win.arrayGopher[i].randomFlag = false;//出洞标志
        win.arrayGopher[i].hitFlag = false;//击中标志
        var element = win.arrayGopher[i].children[0];
        element.setPosition(element.x,element.y+element.h + 50);
    }
};
//随机地鼠出洞
var resetState = function(){
    if(win.gameOver || !this.children) {
        return;
    }
    var self = this;
    var element = self.children[0];
    //播出洞动画
    self.hitFlag = false;//清击中标志
    element.play( "chu", 1, function(){
        var animateOut = {duration:250,yEnd:element.y-element.h - 50};
        element.animate(animateOut,function(){//出洞
            me.playSoundEffect("sound 63.wav", function onDone() {console.log("play finished");});
            setTimeout(function() {
                //判断是否被击中
                if(self.hitFlag === false) {
                    self.hitFlag = true;//进洞禁止击打
                    //播进洞动画
                    var animateEnter = {duration:150,yEnd:element.y+element.h + 50};
                    element.animate(animateEnter);//进洞
                } 
                setTimeout(function() {
                    if(self){
                        //出多少地鼠可以在这里做修改
                        /*  //出一只老鼠
                            index = Math.floor(Math.random()*win.arrayGopher.length);
                            win.arrayGopher[index].resetState();
                        */
                        /* 出多只地鼠*/
                        self.resetState();
                    }
                }, 1600+Math.random()*1200);
            }, 1500);
        });
    });
};
//击打地鼠
var handleClick = function(point){
    
    var element = this.children[0];
    
    win.hammer.setPosition(this.x,this.y);
 
    var hammerAnimateHit = { duration:80, rotationStart: 45 / 180 * Math.PI, rotationEnd:2 / 180 * Math.PI};
    var hammerAnimate = { duration:80, rotationStart: 2 / 180 * Math.PI, rotationEnd:45 / 180 * Math.PI};
    win.hammer.animate(hammerAnimateHit,function(){ win.hammer.animate(hammerAnimate) });
    me.playSoundEffect("HitVoles.mp3", function onDone() {console.log("play finished");});
    if(element.animating || win.gameOver) {
        return;
    }
         
    if(this.hitFlag === false){
 
        this.hitFlag  = true;//击中禁止在击打标志
        win.score++;
        win.find("云/计分板/得分").setValue(win.score);
        //先播击中动画，在播进洞动画
        element.play("hit", 1,function(){
            var animateEnter = { duration:250, yEnd:element.y+element.h + 50};
            element.animate(animateEnter);
        });
    }
};
win.initVar();
win.gopherInit(16);
 
for(var i = 0; i < win.arrayGopher.length; i++){
    win.arrayGopher[i].handleClick = handleClick;
    win.arrayGopher[i].resetState  = resetState;
}
var number = 0;
win.gopherStart = function(){
    if(win.gameOver){
        return;
    }
    if(number < win.arrayGopher.length){
        var index = 0;
        do{
            index = Math.floor(Math.random()*win.arrayGopher.length);
        }while(win.arrayGopher[index].randomFlag);
        win.arrayGopher[index].randomFlag = true;
        win.arrayGopher[index].resetState();
        setTimeout(function(){
            win.gopherStart();
        }, 1200+Math.random()*1000);
        number++;
    }
}; 
win.gopherStart();</span>

还有一个比较重要的程序就是：游戏结束切换到对话框中，从对话框中点击继续是的程序：

<span style="color:#33cc00;">var initData = false;
this.openWindow("游戏界面", 
	function (retData) {console.log("window closed.");}, true, initData,{closeOldIfOpened:true});</span>

如果有疑问或者指教，欢迎加群223466431讨论或者发邮件，有些地方可能学的不是很好望谅解，谢谢！