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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
canvas知识总结
Jan 25 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
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 Error与Logging函数的深入理解
2013/06/03 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python实现完整的事务操作示例
2017/06/20 Python
Python批量更改文件名的实现方法
2017/10/29 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
中职应届生会计求职信
2013/10/23 职场文书
酒店员工检讨书
2014/02/18 职场文书
新闻发布会主持词
2014/03/28 职场文书
放射科岗位职责
2015/02/14 职场文书
培训简讯范文
2015/07/20 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server