经过一个学期的努力，根据自己所学的知识，模仿了一个使用unity3D写的一个游戏金庸群侠传。这里废话就不多说了，现在就讲解一下。（在兼容性问题上要使用chrome，而且版本不能太低，不然会出现一些诡异错误）

开始界面：

开始界面中使用了一个插件，就是游戏作者介绍那里，在这个插件中也是遇到过问题的，js上是没影响的，但是却会在加入整个游戏中造成css的格式上冲突，所以在添加插件代码时，也是费力些时间吧！

在图上有三个按钮分别是，点击后的样子是这样的:

开始游戏：

这里有许多图标，上面也是写有地点名称的，而在左上角是主角信息头像，右下角是系统，物品等按钮。

游戏介绍：

游戏声明：

上面两个界面都是一些文字介绍信息，然后在右下方都存在一个按钮，可以返回游戏的选择界面上。

介绍完游戏的开始界面的主要功能后，我们就来说一下它的玩法有哪一些了。

在按下开始游戏后，就会看到上方的开始游戏的一个界面。在界面上我们可以点击

这个图片来打开游戏主角的数据界面，界面如下：

这里面显示了主角一开始的属性，然后还有一个装备按钮在属性的右面，点一下就会跳转到了装备的界面了，界面如下：

点击上面的武器，防具等坑位还可以出现物品选择的界面来添加物品。而右上方的大红叉是用来将页面关闭的。

然后就是我们的物品界面了，这个界面有一个导航栏，在导航栏里点击不同的物品会帮你筛选出你想要的东西，而且可以直接点击物品而进行装备物品。

然后我们点击下面的图标

然后我们就会去到少林寺了，就是这么神奇。

在这里有许多人物的图片，点击不同的人物图标，我们就可以与其对话了。

然而有一些人物对话还会出现事件的，

我们点击进出看一下战斗场景吧。

这个界面做的确实是挺丑的，但是本人的美工不太好，就将就着看吧。在界面上左上角是敌人，右下角是主角。这里提供了三个按钮给玩家选择，攻击，防御，逃跑。适当运用就能够让你不会轻易挂掉哦！在人物的中间就是我们的攻击介绍了。这里采用的是文字类的攻击方式。但是以为是静态的，那么你太小看作者了，作者可是加了一个攻击动画的哦。

在这里基本的玩法就是这样了。在最后我来讲解一下代码了，这里代码不做详细的讲，毕竟代码有点多。所以挑一些比较好的来说明一下。

游戏音乐：

var audioSrc = [/*0*/"../sound/start.mp3",/*1*/"../sound/main.mp3",/*2*/"../sound/city_1.mp3",/*3*/"../sound/city_2.mp3",/*4*/"../sound/city_3.mp3",/*5*/"../sound/city_4.mp3",/*6*/"../sound/sound_1.mp3",/*7*/"../sound/sound_2.mp3",/*8*/"../sound/sound_3.mp3",/*9*/"../sound/sound_4.mp3",/*10*/"../sound/sound_5.mp3",/*11*/"../sound/sound_6.mp3",/*12*/"../sound/sound_6.mp3",/*13*/"../sound/sound_7.mp3",/*14*/"../sound/sound_8.mp3",/*15*/"../sound/sound_9.mp3",/*16*/"../sound/sound_10.mp3"];
var audioId = [];
var initAudio = function(){var ele;for(var i=0;i<17;++i){ele = document.createElement("audio");ele.src = audioSrc[i];ele.setAttribute("id","audio_"+i);ele.loop = true;ele.preload = true;document.body.appendChild(ele);audioId[i] = ele;}
}
initAudio();
var audioTurn={cur:null,last:null,audioPlay:function(num){this.last = this.cur;this.cur = num;if(this.last!=null)audioId[this.last].pause();audioId[this.cur].currentTime = 0;audioId[this.cur].play();},audioPause:function(){if(this.cur!=null){audioId[this.cur].pause();this.cur=null;}}
}
audioTurn.audioPlay(0);

这里是游戏音乐的一个函数，用来将音乐封装起来用的audioplay函数直接用来放音乐，然后会将原来的音乐停止掉，再放要放的音乐。

//对话信息开启与关闭函数
function nextSpeaking(){if(speakCount<roleBtn[speakNum].length){if(speakCount%2)$("#cover5_2").css({"backgroundImage":"url(../images/roleicon/zhujiao.png)"});else $("#cover5_2").css({"backgroundImage":"url(../images/roleicon/role_"+(speakNum+1)+"_1.png)"});$("#cover5_3").html(roleBtn[speakNum][speakCount++]);}else{closeSpeaking();if(speakNum == 5||speakNum == 11||speakNum == 22||speakNum == 31||speakNum == 32){//结束谈话后出来的选择界面var ele = document.getElementById("cover6_1_1");ele.innerHTML = "是否接受比试？";ele = document.getElementById("cover6_1_2");ele.setAttribute("src","../images/border/jieshoutiaozhan.png");ele.setAttribute("onclick","jieshoutiaozhan()");ele = document.getElementById("cover6_1_3");ele.setAttribute("src","../images/border/jujuetiaozhan.png");ele.setAttribute("onclick","jujuetiaozhan()");//显示弹出选择界面document.getElementById("cover6").style.display = "block";}if(speakNum == 17 ||speakNum ==24 ||speakNum == 27 ||speakNum == 23){//结束谈话后出来的选择界面var ele = document.getElementById("cover6_1_1");ele.innerHTML = "是否接受？";ele = document.getElementById("cover6_1_2");ele.setAttribute("src","../images/border/jieshou.png");ele.setAttribute("onclick","cover6_jieshou()");ele = document.getElementById("cover6_1_3");ele.setAttribute("src","../images/border/jujue.png");ele.setAttribute("onclick","cover6_jujue()");//显示弹出选择界面document.getElementById("cover6").style.display = "block";}}
}

对话信息函数，这个函数封装了对一些特定的人物来触发一些特定的事情，而且这个函数是根据一个js变量上的对话数组来确定究竟说什么话的。

//界面的按钮初始化
function initMain(){//江湖日记，记录所进入过的地方var str = ("江湖"+gameTimeY+"年"+gameTimeM+"月"+gameTimeD+"日,你来到了"+"大地图");var ele2 = document.createElement("p");ele2.appendChild(document.createTextNode(str));document.getElementById("cover_Layer_riji").appendChild(ele2);var i;//页面按钮和跳转页面divfor(i=1;i<=mainIconNum;++i){var ele = document.createElement("input");ele.type = "image";ele.src = "../images/mainicon/m_icon_"+i+".png";ele.setAttribute("onclick",("mainIcon_"+i+"();"));ele.setAttribute("id",("mainIcon_"+i));ele.setAttribute("class","mainIcon");mainDom.appendChild(ele);var ele2 = document.createElement("div");ele2.setAttribute("id",("mainFrame_"+i));ele2.setAttribute("class","mainFrame");ele2.style.display = "none";ele2.style.backgroundImage = ("url(../images/mainFrame/mainFrame_"+i+".jpg)");mainFrameDom.appendChild(ele2);//初始化进入下一级页面的按钮createBtn(('mainFrame_'+i),btn[i-1],btn[i-1].length);}}

界面按钮初始化这个采用动态DOM的方式来做，因为静态的话重复的事情太多了。所以为了避免重复的工作，我们采用的是动态的的方法创建标签。

以上的代码可以说是比较好的部分，因为代码的量比较多，所以就讲到这里吧。完整代码在下方：

传送门