javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来


Posted in Javascript onJanuary 23, 2013

首先来说,让一个游戏赋有可玩性必须要动静结合。(哈哈,大家以为我要讲作文了。。。但其实我今天要讲的是Javascript)静态的东西谁不会做呢?因为东西一生下来就是静态的(除非你是用的gif动画),所以不需要任何处理就能完成静态。那么我将要在下面告诉大家如何运用Javascript将静态图片变为动态图片。

一、图片准备

javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来  javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来 javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来 javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png首先,我找了一些出自经典游戏《三国志曹操传》里的素材(这些是魏将庞德的图片)。在下面我要用这些静态图片来演示如何化静为动。如果自己要演示代码,请把以上的图片下载下来,图片名为图片对应下面那一栏。

二、代码讲解

先看以下javascript代码:
var picSub = 0; var time = 150; //时间间隔(毫秒) 
var pic1 = "./01.png"; 
var pic2 = "./02.png"; 
var pic3 = "./03.png"; 
var pic4 = "./01.png"; 
var picArr = [pic1, pic2, pic3, pic4]; //定义数组,并将图片的位置所对应的变量放入其中 
setInterval(changeImg, time); //使图片按一定时间切换 
function changeImg() 
{ 
var xElem = document.getElementById("ID_IMG_ROLE"); 
if(picSub == picArr.length-1){ 
picSub = 0; 
}else{ 
picSub += 1; 
} //判断是否超出数组长度,若超出,便使数组下标归0,使其不超出 
xElem.src = picArr[picSub]; //切换图片 
} 
function changeFight() 
{ 
pic1 = "./fight01.png"; 
pic2 = "./fight02.png"; 
pic3 = "./fight03.png"; 
pic4 = "./fight04.png"; 
picArr = [pic1, pic2, pic3, pic4]; 
setTimeout(reduction, 600); 
} 
function reduction() 
{ 
pic1 = "./01.png"; 
pic2 = "./02.png"; 
pic3 = "./03.png"; 
pic4 = "./01.png"; 
picArr = [pic1, pic2, pic3, pic4]; 
}

这些代码用到了我最爱的数组,当然,这里的数组也是整个程序的核心。以下是我一字一句的讲解:
var pic1 = "./01.png"; 
var pic2 = "./02.png"; 
var pic3 = "./03.png"; 
var pic4 = "./01.png"; 
var picArr = [pic1, pic2, pic3, pic4]; //定义数组,并将图片的位置所对应的变量放入其中

首先在数组里我放了几个图片的位置所对应的变量。以便用于以下操作。
再看代码:
var xElem = 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属性。这样就可以让图片不停的变化了。因此在这时只要给他一个函数调用的地方就能大功告成!为了让图片显示不是一瞬间的事,我们要给它一个等待秒数,等待完了再显现下一张图。因此我用了以下代码进行函数调用:
var time = 150; //时间间隔(毫秒) 
setInterval(changeImg, time); //使图片按一定时间切换

这样就能使图片动起来了。我在这里还添了一个功能:当你在绿色边框里按下鼠标左键时,里面的人物会进行攻击,原理也很简单,大家慢慢研究吧!
为了大家测试方便,我把包括html的所有代码放在下面供大家下载:

我提供下载代码: 
三、演示效果

先开始是:

javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来

然后是:

javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来

演示位置:
四、后记

看完这一篇文章大家一定对Javascript做动态的人物有了初步的了解吧。
以后大家可以尽情发挥自己的想象,运用这种方法作出漂亮的动态游戏。
当然,程序的奥秘不只这些,摸透它也不简单呀!以后我会给大家讲讲其他的Javascript游戏开发技术。希望大家喜欢。

Javascript 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
jquery常用操作小结
Jul 21 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 #Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 #Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 #Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 #Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 #Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 #Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 #Javascript
You might like
php发送邮件的问题详解
2015/06/22 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
js在HTML的三种引用方式详解
2020/08/29 Javascript
Python制作爬虫抓取美女图
2016/01/20 Python
python线程中同步锁详解
2018/04/27 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python pygame实现2048游戏
2018/11/20 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
医药专业推荐信
2013/11/15 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
英语辞职信怎么写
2015/02/28 职场文书
公司文体活动总结
2015/05/07 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
Java设计模式之代理模式
2022/04/22 Java/Android
MySQL的存储过程和相关函数
2022/04/26 MySQL
Python OpenGL基本配置方式
2022/05/20 Python