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 相关文章推荐
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
js中null与空字符串""的区别讲解
Jan 17 Javascript
详解TypeScript中的类型保护
Apr 29 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的宝库目录--PEAR
2006/10/09 PHP
php使用正则验证中文
2016/04/06 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
javscript 数组扁平化的实现
2020/02/03 Javascript
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
C语言编程练习
2012/04/02 面试题
摄影助理岗位职责
2014/02/07 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
高一学生评语大全
2014/04/25 职场文书
小学班级特色活动方案
2014/08/31 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
年度考核表个人总结
2015/03/06 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
win7配置本地ftp服务器的图文教程
2022/08/05 Servers