机器学习：让机器学会打游戏之陨石坠落

这是一个系列课程，我们将会用不同的机器学习算法，让机器学会玩不同的游戏。

今天要让机器玩的游戏是：陨石坠落(点击试玩)。

课程概述

课程中，我们将围绕陨石坠落点预测问题，建立机器学习模型。

我们将会用到线性回归、梯度下降、Z-Score数据标准化等机器学习算法。

课程中，我们将使用Javascript作为开发语言，游戏构建在我自己写的一个简单的H5游戏引擎上。

你可以直接登陆我的网站，进行开发，无需安装开发软件和配置开发环境。

打开地址 http://www.insideai.cn/lesson_game1.html 就可以开发了。

 课程会分成两个部分：

1. 游戏制作  这部分你将用H5亲手制作一款简单的游戏

2.机器学习建模  这部分你将从零开始，构建一个机器学习模型，并动手实践出来

下面我们就先说下，如何用H5制作一款简单的游戏。

游戏制作

游戏故事背景

公元4096年,狮子座M1024星发生爆炸，大量陨石向地球飞来。如果陨石撞上地球，将会对地球造成毁灭性的冲击。所幸神盾局已经研制出能抵抗陨石冲击的神盾，但神盾没有办法自动锁定陨石。

因此神盾局找到了你，你是个计算机高手，能为神盾注入灵魂。可以让神盾具有预测能力。 为了配合你的工作，神盾局会实时检测陨石的位置，并将陨石数据告知给你。 

你需要利用这些数据，给神盾建立机器学习模型，在陨石坠落到安全线之前，预测出陨石的坠落点，并移动至陨石的坠落。

注：陨石坠落的位置、速度和方向都是随机的，每一颗陨石都不一样。

游戏镜头制作

游戏主要包含三个分镜头：

1. 游戏引导镜头 主要介绍故事背景和引导玩家开始游戏。

 
2. 游戏主体镜头 为游戏的主体部分，完成游戏的交互逻辑。

 
3. 游戏结束镜头 游戏的结束画面和引导玩家重新开始游戏。 

创建游戏场景

在制作镜头之前，我们需要先把游戏场景制作出来。游戏场景类似于游戏舞台，有了游戏场景后，游戏镜头才能播放出来。游戏场景的创建和初始化代码如下：

var scene = new DMScene("gameContainer");
scene.init();

注：上述代码是基于我写的H5游戏开发引擎编写的，因此需要登陆我的网站上进行开发，打开开发页面

下面我们就逐一把这些分镜头制作出来。

游戏引导镜头制作

游戏引导镜头中，包含背景图片和引导文字，因此文字会开启逐字打印效果，因此我们还需要播放打字音效。

//DMImage为图片对象，参数分别是：游戏场景、图片地址、横坐标、纵坐标、图片宽度和图片高度
var guideImg = new DMImage(scene, "fall.jpg", 0, 0, scene.gwidth, scene.gheight);
var guideStr = "公元4096年,狮子座M1024星发生爆炸，大量陨石向地球飞来。如果陨石撞上地球，将会对地球造成毁灭性的冲击。" + 
  "所幸神盾局已经研制出能抵抗陨石冲击的神盾，但神盾没有办法自动锁定陨石。" + 
  "因此需要为神盾注入灵魂，让它自己锁定陨石，并移至降落点。"+
  "经过千挑万选，最终发现只有你能胜任这个任务。" + 
  "点击任意区域，开始拯救地球吧！！！";
//DMTxt为文本对象，参数分别为：游戏场景、文本内容、横坐标、纵坐标、字体样式、
//字体颜色、行间距，是否开启逐字打印
var guideTxt = new DMTxt(scene, guideStr, 60, 80, "bold 36px '微软雅黑','宋体'"
                         ,"white", 64, true);

//DMAudio为音频对象，参选分别为：音频地址，加载完成回调函数，是否循环播放
var writeMic = new DMAudio("write.mp3", null, "loop");

//游戏引导镜头
function guideGame(){
    //将镜头中的元素添加到场景中
	guideImg.addToScene();
  	guideTxt.addToScene();
    //播放打字音效
  	writeMic.play();
    //15秒后，暂停打字音效
  	setTimeout(function(){writeMic.pause();}, 15000);
}

游戏引导镜头制作完成后，调用函数guideGame，游戏场景中，就会播放引导镜头画面啦。

注：游戏中的图片和音频资源均来自于搜索引擎，如有侵权，请告知。游戏中，用到的图片和音频，我已放到我的网站上了。打开开发页面

游戏主体镜头制作

游戏主体镜头中，包含陨石、神盾、得分文本和背景图片，此外我们还会循环播放游戏背景音乐。

var yunshi = new DMBox(scene,100,100, 10,10,"white");
//安全线位置，在屏幕的3/4处
var safeHeight = scene.gheight*0.75;
var shendun = new DMBox(scene, 0, safeHeight, 100, 30, "gray");
var earthImg = new DMImage(scene,"earth.jpg", 0, safeHeight-30, scene.gwidth, 
                           scene.gwidth/4);
var score = 0;
var scoreTxt = new DMTxt(scene, "得分: " + score + "  ", scene.gwidth - 120, 60,
                        "bold 24px '微软雅黑','宋体'", "red");

var bgMic = new DMAudio("bg.mp3", null, "loop");

function startGame(){
    //清空游戏场景，清除上一个镜头中的元素
	scene.clear();
    //暂停上一个镜头中的音效
  	writeMic.pause();
  	earthImg.addToScene();
  	yunshi.addToScene();
  	shendun.addToScene();
  	scoreTxt.addToScene();
  	bgMic.play();
}

游戏主体镜头制作完成后，调用startGame就可以在游戏场景中，播放主体镜头了。

游戏结束镜头制作

游戏结束镜头中，包括重玩引导文本和背景图片，其中重玩文本会开启逐字打印效果，因此需要播放打字音效。

var overImg = new DMImage(scene,"over.jpg",0,0,scene.gwidth,scene.gheight);
var overStr = "很遗憾，因为您的算法不当，陨石撞上了地球，地球发生了爆炸。不服！"
		+ "点击任意区域，让时光倒退，重新开始！！！";
var overTxt = new DMTxt(scene, overStr, 60, 80, "bold 36px '微软雅黑','宋体'",
                       "white", 64, true);
function gameOver(){
	scene.clear();
  	bgMic.pause();
  	overImg.addToScene();
    //设置逐字打印的起始字符
  	overTxt.charAt = 0;
    //设置逐字打印速度
  	overTxt.writeSpeed=10;
  	overTxt.addToScene();
  	writeMic.play();
  	setTimeout(function(){writeMic.pause();}, 10000);
}

gameOver();

好了，三个游戏镜头制作完成了，接下来，我们要已经玩家的交互行为，实现交互效果了。

游戏交互开发

陨石坠落特效

目前为止，所有的元素都是静止的，下面我们就陨石动起来。这一节，我们实现陨石坠落特效。

陨石坠落的位置、速度和方向都是随机的，因此陨石的初始坐标和速度都要随机产生。

此外，为了提升游戏体验，陨石需要拖着尾巴，逐渐变亮，形成燃烧的效果，并播放坠落音效。

//使用线性过渡颜色，模拟陨石逐渐变亮
yunshi.useGrad("black","white",100, scene.gheight*0.6);
//陨石坠落音效
var fallMic = new DMAudio("fall.mp3");
function fall(){
    //在游戏场景的中间80%区域随机产生横坐标
	yunshi.x = Math.random()*scene.gwidth*0.8 + scene.gwidth*0.1;
  	yunshi.y = 0;
    //水平方向的速度随机产生，可正可负，与场景宽度相关
	yunshi.xSpeed = (Math.random() - 0.5)*scene.gwidth/80;
    //竖直方向的速度随机产生，为正数，与场景高度相关
  	yunshi.ySpeed = Math.random()*scene.gheight/160 + scene.gheight/160;
    //在陨石运动的反方向加上音频，模拟尾巴
  	yunshi.useShadow(20, "yellow", -1*yunshi.xSpeed, -1*yunshi.ySpeed);
  	fallMic.play();
}

这么复杂的效果，使用游戏引擎后，几句代码就完成了。打开开发页面

串联各个分镜头，处理用户点击行为

下面我们就把各个镜头串联起来，依据游戏逻辑，进行镜头切换。

在游戏引导镜头，用户点击时，进入游戏主体镜头，在游戏主体镜头，用户点击时，依据游戏状态，播放或暂停游戏。

在主体镜头中，如果陨石坠落到安全线以下，则认为游戏撞上了地球，游戏结束。

//定义游戏镜头索引，1引导镜头，2主体镜头，3结束镜头
var gameStatus = 1;

//添加鼠标点击监听事件
scene.setClickListener(function(){
  	if(gameStatus == 1){
    	startGame();
  		fall();
      	gameStatus = 2;
    }else if(gameStatus == 2){
        //如果有些正在进行，则暂停有些，否则播放游戏
    	if(scene.isPlay){
        	scene.pause();
        }else{
        	scene.play();
        }
    }else if(gameStatus == 3){
    	scene.clear();
      	startGame();
      	fall();
      	gameStatus = 2;
    }
});

//游戏场景回调函数，绘制每一帧之前都会调用该函数
function onDraw(){
  if(gameStatus != 2){
  	return;
  }
  
  //判断陨石的纵坐标是否在安全线以下
  if(yunshi.y > safeHeight + shendun.height){
  		gameOver();
    	gameStatus = 3;
  }
}

//设置游戏场景的回调函数
scene.onDraw = onDraw;

好了，现在游戏可以在各个镜头之间切换了，但是神盾还没有办法移动，因此陨石总是撞上地球。

用键盘控制神盾移动、砰撞检测和各种特效

我们先用键盘控制神盾移动，后面我们再说如何让机器预测陨石坠落点，让神盾自主移动。

可以移动神盾后，我们就需要检测神盾与陨石是否发生了砰撞，如果发生了砰撞，我们需要播放陨石爆炸特效，并让神盾发出保护光环，播放撞击音效，此外我们还需对玩家进行计分。

//定义神盾移动速度
var shendunSpeed = scene.gwidth/100;
function goLeft(){
	shendun.moveTo(shendun.x - shendunSpeed, shendun.y);
}
function goRight(){
	shendun.moveTo(shendun.x + shendunSpeed, shendun.y);
}

//监听用户按键事件，如果是左箭头，则向左移动，如果是右箭头，则向右移动
window.addEventListener("keydown",function(e){
	var keycode = scene.getKeyCode(e);
  	if(keycode == 37){
    	goLeft();
    }else if(keycode == 39){
    	goRight();
    }
}, false);

//重写场景回调函数，增加砰撞检测和陨石爆炸特效
function onDraw(){
  if(gameStatus != 2){
  	return;
  }
  
  if(explordeTime > 0){
    explode();
  }else if(!yunshi.isInScene()){
    fall();
  }else if(yunshi.hitOnSprite(shendun)){
    hitOn();
  }else if(yunshi.y > safeHeight + shendun.height){
    gameOver();
    gameStatus = 3;
  }
}

//陨石爆炸持续时长
var explordeTime = 0;
//陨石爆炸函数
function explode(){
	explordeTime--;
  	yunshi.width = explordeTime;
  	yunshi.height = explordeTime;
  	if(explordeTime == 0){
      yunshi.width = 10;
      yunshi.height = 10; 
      shendun.useShadow(0,"blue",0,0);
      fall();
    }
}

//陨石击中神盾音效
var hitMic = new DMAudio("hit.mp3");

//陨石击中神盾处理函数
function hitOn(){
	score++;
  	scoreTxt.txt = "得分: " + score;
  	shendun.useShadow(20, "blue", 0, -5);
	hitMic.play();
    explordeTime = 20;
    yunshi.xSpeed = 0;
    yunshi.ySpeed = 0;
}

//更新场景回调函数
scene.onDraw = onDraw;

好了，现在有些已经制作完成了，写了这么长事件代码，也有点小累了，玩会游戏吧。

下篇文章，我们将介绍如何针对游戏，进行机器学习建模，并利用机器学习模型，让神盾具有预测能力，自主移动到坠落点。