网页游戏课设-金庸群侠传

2017-01-08 08:26:32来源:CSDN作者:zsc2014030403015人点击

金庸群侠传

经过一个学期的努力,根据自己所学的知识,模仿了一个使用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的方式来做,因为静态的话重复的事情太多了。所以为了避免重复的工作,我们采用的是动态的的方法创建标签。以上的代码可以说是比较好的部分,因为代码的量比较多,所以就讲到这里吧。完整代码在下方:传送门


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台