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 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
javascript实现标签切换代码示例
May 22 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
zepto.js 实时监听输入框的方法
Dec 04 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 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 5.0对象模型深度探索之对象复制
2008/03/27 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
php记录日志的实现代码
2011/08/08 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
vue 子组件修改data或调用操作
2020/08/07 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
详解python程序中的多任务
2020/09/16 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
警察思想汇报
2014/01/04 职场文书
和睦家庭事迹
2014/05/14 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
春节晚会开场白
2015/05/29 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android