三国志曹超传开发典籍Javascript编程.docx
- 文档编号:14559095
- 上传时间:2023-06-24
- 格式:DOCX
- 页数:172
- 大小:2.05MB
三国志曹超传开发典籍Javascript编程.docx
《三国志曹超传开发典籍Javascript编程.docx》由会员分享,可在线阅读,更多相关《三国志曹超传开发典籍Javascript编程.docx(172页珍藏版)》请在冰点文库上搜索。
三国志曹超传开发典籍Javascript编程
用Javascript开发《三国志曹操传》-开源讲座
(一)-让静态人物动起来
首先来说,让一个游戏赋有可玩性必须要动静结合。
(哈哈,大家以为我要讲作文了。
。
。
但其实我今天要讲的是Javascript)静态的东西谁不会做呢?
因为东西一生下来就是静态的(除非你是用的gif动画),所以不需要任何处理就能完成静态。
那么我将要在下面告诉大家如何运用Javascript将静态图片变为动态图片。
一、图片准备
fight01.png
fight02.png
fight03.png
fight04.png
03.png
02.png
01.png
首先,我找了一些出自经典游戏《三国志曹操传》里的素材(这些是魏将庞德的图片)。
在下面我要用这些静态图片来演示如何化静为动。
如果自己要演示代码,请把以上的图片下载下来,图片名为图片对应下面那一栏。
二、代码讲解
先看以下javascript代码:
[javascript]viewplaincopyprint?
1.var picSub = 0;
2.
3.var time = 150; //时间间隔(毫秒)
4.
5.var pic1 = "./01.png";
6.var pic2 = "./02.png";
7.var pic3 = "./03.png";
8.var pic4 = "./01.png";
9.var picArr = [pic1, pic2, pic3, pic4]; //定义数组,并将图片的位置所对应的变量放入其中
10.
11.setInterval(changeImg, time); //使图片按一定时间切换
12.
13.function changeImg()
14.{
15. var xElem = document.getElementById("ID_IMG_ROLE");
16.
17. if(picSub == picArr.length-1){
18. picSub = 0;
19. }else{
20. picSub += 1;
21. } //判断是否超出数组长度,若超出,便使数组下标归0,使其不超出
22.
23. xElem.src = picArr[picSub]; //切换图片
24.}
25.
26.function changeFight()
27.{
28. pic1 = "./fight01.png";
29. pic2 = "./fight02.png";
30. pic3 = "./fight03.png";
31. pic4 = "./fight04.png";
32.
33. picArr = [pic1, pic2, pic3, pic4];
34.
35. setTimeout(reduction, 600);
36.}
37.
38.function reduction()
39.{
40. pic1 = "./01.png";
41. pic2 = "./02.png";
42. pic3 = "./03.png";
43. pic4 = "./01.png";
44. picArr = [pic1, pic2, pic3, pic4];
45.}
varpicSub=0;
vartime=150;//时间间隔(毫秒)
varpic1="./01.png";
varpic2="./02.png";
varpic3="./03.png";
varpic4="./01.png";
varpicArr=[pic1,pic2,pic3,pic4];//定义数组,并将图片的位置所对应的变量放入其中
setInterval(changeImg,time);//使图片按一定时间切换
functionchangeImg()
{
varxElem=document.getElementById("ID_IMG_ROLE");
if(picSub==picArr.length-1){
picSub=0;
}else{
picSub+=1;
}//判断是否超出数组长度,若超出,便使数组下标归0,使其不超出
xElem.src=picArr[picSub];//切换图片
}
functionchangeFight()
{
pic1="./fight01.png";
pic2="./fight02.png";
pic3="./fight03.png";
pic4="./fight04.png";
picArr=[pic1,pic2,pic3,pic4];
setTimeout(reduction,600);
}
functionreduction()
{
pic1="./01.png";
pic2="./02.png";
pic3="./03.png";
pic4="./01.png";
picArr=[pic1,pic2,pic3,pic4];
}
这些代码用到了我最爱的数组,当然,这里的数组也是整个程序的核心。
以下是我一字一句的讲解:
[javascript]viewplaincopyprint?
1.var pic1 = "./01.png";
2.var pic2 = "./02.png";
3.var pic3 = "./03.png";
4.var pic4 = "./01.png";
5.var picArr = [pic1, pic2, pic3, pic4]; //定义数组,并将图片的位置所对应的变量放入其中
varpic1="./01.png";
varpic2="./02.png";
varpic3="./03.png";
varpic4="./01.png";
varpicArr=[pic1,pic2,pic3,pic4];//定义数组,并将图片的位置所对应的变量放入其中
首先在数组里我放了几个图片的位置所对应的变量。
以便用于以下操作。
再看代码:
[javascript]viewplaincopyprint?
1.var xElem = document.getElementById("ID_IMG_ROLE");
2.
3.if(picSub == picArr.length-1){
4. picSub = 0;
5.}else{
6. picSub += 1;
7.} //判断是否超出数组长度,若超出,便使数组下标归0,使其不超出
8.
9.xElem.src = picArr[picSub]; //切换图片
varxElem=document.getElementById("ID_IMG_ROLE");
if(picSub==picArr.length-1){
picSub=0;
}else{
picSub+=1;
}//判断是否超出数组长度,若超出,便使数组下标归0,使其不超出
xElem.src=picArr[picSub];//切换图片
这里用if...else语句判断数组下标是否超出数组长度,超出则让下标归0。
然后取出下标在数组里对应的图片位置并赋给带有id属性为ID_IMG_ROLE的img标签里的src属性。
这样就可以让图片不停的变化了。
因此在这时只要给他一个函数调用的地方就能大功告成!
为了让图片显示不是一瞬间的事,我们要给它一个等待秒数,等待完了再显现下一张图。
因此我用了以下代码进行函数调用:
[javascript]viewplaincopyprint?
1.var time = 150; //时间间隔(毫秒)
2.setInterval(changeImg, time); //使图片按一定时间切换
vartime=150;//时间间隔(毫秒)
setInterval(changeImg,time);//使图片按一定时间切换
这样就能使图片动起来了。
我在这里还添了一个功能:
当你在绿色边框里按下鼠标左键时,里面的人物会进行攻击,原理也很简单,大家慢慢研究吧!
为了大家测试方便,我把包括html的所有代码放在下面供大家下载:
我提供下载代码的位置:
三、演示效果
先开始是:
然后是:
演示位置:
四、后记
看完这一篇文章大家一定对Javascript做动态的人物有了初步的了解吧。
以后大家可以尽情发挥自己的想象,运用这种方法作出漂亮的动态游戏。
当然,程序的奥秘不只这些,摸透它也不简单呀!
以后我会给大家讲讲其他的Javascript游戏开发技术。
希望大家喜欢。
----------------------------------------------------------------
欢迎大家转载我的文章。
转载请注明:
转自Yorhom'sGameBox
欢迎继续关注我的博客
上一讲我们谈到了如何让静态人物变为动态,今天我们来谈谈如何使人物移动,因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方:
一、图片准备
今天我准备换几张图片,这样更新鲜些。
pic1.png
pic2.png
pic3.png
这些素材照样来自《三国志曹操传》,如果我没记错,应该是曹操的素材。
接下来我要结合上一次的技术,来告诉大家如何使人物走动起来。
不过今天我们着重在于如何使人物走动,因为我们上一讲已经讲了如何使人物化静态为动态。
二、代码讲解
先看总的javascript代码:
[javascript]viewplaincopyprint?
1.var moveLengthLeft = 0;
2. var moveLengthTop = 0;
3.
4. var actionST = 0;
5.
6. var timeInterval = 150;
7.
8. var pic = 0;
9.
10. function action()
11. {
12. var pic1 = "./pic2.png";
13. var pic2 = "./pic3.png";
14. var pic3 = "./pic1.png";
15. var actionArray = [pic1, pic2, pic3];
16.
17. var doc = document.getElementById("ID_IMG_CAOCAO");
18.
19. if (pic == actionArray.length - 2){
20. pic = 0;
21. }else{
22. pic += 1;
23. }
24.
25. if(pic > 2){
26. pic = 2;
27. doc.src = "./pic1.png"
28. }
29.
30. doc.src = actionArray[pic];
31. }
32.
33. function walk()
34. {
35. setInterval(action, timeInterval);
36.
37. for(var i = 0; i < 100; i++){
38. $("#ID_IMG_CAOCAO").animate({marginLeft:
moveLengthLeft}, 10, function(){ //用jquery中的animate来控制人物行走
39. actionST ++;
40.
41. if(actionST == 100){
42. standCaocao();
43. }
44. }); //在动画做完时调用callback。
callback里可以放函数。
45.
46. $("#ID_IMG_CAOCAO").animate({marginTop:
moveLengthTop}, 10);
47.
48. moveLengthLeft += 2;
49. moveLengthTop += 1;
50. }
51. }
52.
53. function standCaocao()
54. {
55. pic = 2;
56. }
varmoveLengthLeft=0;
varmoveLengthTop=0;
varactionST=0;
vartimeInterval=150;
varpic=0;
functionaction()
{
varpic1="./pic2.png";
varpic2="./pic3.png";
varpic3="./pic1.png";
varactionArray=[pic1,pic2,pic3];
vardoc=document.getElementById("ID_IMG_CAOCAO");
if(pic==actionArray.length-2){
pic=0;
}else{
pic+=1;
}
if(pic>2){
pic=2;
doc.src="./pic1.png"
}
doc.src=actionArray[pic];
}
functionwalk()
{
setInterval(action,timeInterval);
for(vari=0;i<100;i++){
$("#ID_IMG_CAOCAO").animate({marginLeft:
moveLengthLeft},10,function(){//用jquery中的animate来控制人物行走
actionST++;
if(actionST==100){
standCaocao();
}
});//在动画做完时调用callback。
callback里可以放函数。
$("#ID_IMG_CAOCAO").animate({marginTop:
moveLengthTop},10);
moveLengthLeft+=2;
moveLengthTop+=1;
}
}
functionstandCaocao()
{
pic=2;
}
局部分析如下:
[javascript]viewplaincopyprint?
1.function action()
2. {
3. var pic1 = "./pic2.png";
4. var pic2 = "./pic3.png";
5. var pic3 = "./pic1.png";
6. var actionArray = [pic1, pic2, pic3];
7.
8. var doc = document.getElementById("ID_IMG_CAOCAO");
9.
10. if (pic == actionArray.length - 2){
11. pic = 0;
12. }else{
13. pic += 1;
14. }
15.
16. if(pic > 2){
17. pic = 2;
18. doc.src = "./pic1.png"
19. }
20.
21. doc.src = actionArray[pic];
22. }
functionaction()
{
varpic1="./pic2.png";
varpic2="./pic3.png";
varpic3="./pic1.png";
varactionArray=[pic1,pic2,pic3];
vardoc=document.getElementById("ID_IMG_CAOCAO");
if(pic==actionArray.length-2){
pic=0;
}else{
pic+=1;
}
if(pic>2){
pic=2;
doc.src="./pic1.png"
}
doc.src=actionArray[pic];
}
以上代码我已经在上一讲提到过了,所以今天就不再过问了,直接讲如何移动人物。
首先来说,使物体移动无疑要想到jquery,不错今天我们是要用到它的一个函数:
animate。
再看代码:
[javascript]viewplaincopyprint?
1.function walk()
2. {
3. setInterval(action, timeInterval);
4.
5. for(var i = 0; i < 100; i++){
6. $("#ID_IMG_CAOCAO").animate({marginLeft:
moveLengthLeft}, 10, function(){ //用jquery中的animate来控制人物行走
7. actionST ++;
8.
9. if(actionST == 100){
10. standCaocao();
11. }
12. }); //在动画做完时调用callback。
callback里可以放函数。
13.
14. $("#ID_IMG_CAOCAO").animate({marginTop:
moveLengthTop}, 10);
15.
16. moveLengthLeft += 2;
17. moveLengthTop += 1;
18. }
19. }
functionwalk()
{
setInterval(action,timeInterval);
for(vari=0;i<100;i++){
$("#ID_IMG_CAOCAO").animate({marginLeft:
moveLengthLeft},10,function(){//用jquery中的animate来控制人物行走
actionST++;
if(actionST==100){
standCaocao();
}
});//在动画做完时调用callback。
callback里可以放函数。
$("#ID_IMG_CAOCAO").animate({marginTop:
moveLengthTop},10);
moveLengthLeft+=2;
moveLengthTop+=1;
}
}
这些代码能实现人物走动和停住主要在于callback和animate。
callback
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 三国志 传开 典籍 Javascript 编程