金庸群侠传
经过一个学期的努力，根据自己所学的知识，模仿了一个使用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;
//页面按钮和跳转页面div
for(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的方式来做，因为静态的话重复的事情太多了。所以为了避免重复的工作，我们采用的是动态的的方法创建标签。
以上的代码可以说是比较好的部分，因为代码的量比较多，所以就讲到这里吧。
完整代码在下方：
传送门
转载请注明原文地址: https://ju.6miu.com/read-450234.html
