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

首先来说，让一个游戏赋有可玩性必须要动静结合。（哈哈，大家以为我要讲作文了。。。但其实我今天要讲的是Javascript）静态的东西谁不会做呢？因为东西一生下来就是静态的（除非你是用的gif动画），所以不需要任何处理就能完成静态。那么我将要在下面告诉大家如何运用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游戏开发技术。希望大家喜欢。

赞 (0)

相关推荐

  • javascript制作游戏开发碰撞检测的封装代码

    javascript制作游戏开发碰撞检测的封装代码

    在JavaScript开发Web游戏时,需要使用到碰撞检测时,为了方便开发,封装了矩形和圆形的两个碰撞检测方式. [附带案例操作捕获一枚] [注意:代码上未做优化处理] 演示图 角色攻击区域碰撞检测.gif 塔防案例.gif 矩形区域碰撞检测 /** * 矩形区域碰撞检测 * Created by Administrator on 14-4-7. * author: marker */ function Rectangle(x, y, _width, _height){ this.x = x;

  • javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现

    javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现

    上一讲我们谈到了如何让静态人物变为动态,今天我们来谈谈如何使人物移动,因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方: 一.图片准备 今天我准备换几张图片,这样更新鲜些. 这些素材照样来自<三国志曹操传>,如果我没记错,应该是曹操的素材.接下来我要结合上一次的技术,来告诉大家如何使人物走动起来.不过今天我们着重在于如何使人物走动,因为我们上一讲已经讲了如何使人物化静态为动态. 二.代码讲解 先看总的javascript代码: 复制代码 代码如下: var moveLengthLeft =

  • javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

    javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

    前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.具体的链接我写在下方. 一.前言 相信大家都还记得吧,在某些新闻里会有一些惨不忍睹的结果是用像打字机一样的方式把文字弄出来.那么今天的主要目的就是要办到这个. 就在9月5日的时候,我在办公室里起了个做这种程序的念头,并且有了点思路.我首先想用调margin的方法,按理说是作出来了,但很不让人满意,毕竟很麻烦,并且技术也差.所以我打算用上数组和循环.9月13日我抽空写出来了,但由于这几天很忙,基本上在工

  • javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现

    javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现

    一.前言 这一讲的内容很简单,大家理解起来会更快.因此我只对重点加以分析,其他的就轮到大家思考哦!首先来说,我对游戏开发可以算是不怎么深入,因为现在的程序员爱用canvas,我却就只会拿几个div凑和.不过没关系,因为做出来的同样是游戏.哈!废话最近有点多,望大家原谅.接下来请看代码解析. 二.代码讲解 今天调一下讲解顺序,先看代码后看图片. 这是slg.js里的内容: 复制代码 代码如下: var subtractedMargin = 0; var subtractedMarginL = 0;

  • javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图

    javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图

    小时候我们玩过拼图游戏,是用自己的手去拼的.今天我们来研究研究用javascript来拼图.同样是拼图,但用js拼图要比用手拼图麻烦多了,因此以后我要把它优化成引擎. 一.前言 以上是一段导语,话不扯远,对<三国志曹操传>熟悉的玩家知道,<三国志曹操传>的地图是由小地图块拼成的,那要实现它就和导语说得一样:很麻烦.不过即使麻烦也是一门技术,因此在此分享给大家,希望大家喜欢. 二.代码讲解 今天我要换换讲解方式,先不给代码,我们先来想想原理.现在,假如你有一幅图片,把它裁开成若干份,

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

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

    首先来说,让一个游戏赋有可玩性必须要动静结合.(哈哈,大家以为我要讲作文了...但其实我今天要讲的是Javascript)静态的东西谁不会做呢?因为东西一生下来就是静态的(除非你是用的gif动画),所以不需要任何处理就能完成静态.那么我将要在下面告诉大家如何运用Javascript将静态图片变为动态图片. 一.图片准备     fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png首先,我找了一些出自经典游戏<三国志曹操传>

  • 浅析Java、C/C++、JavaScript、PHP、Python分别用来开发什么?

    首先,我们先普及一下编程语言的基础知识.用任何编程语言来开发程序,都是为了让计算机干活,比如编写一篇文章,下载一首MP3等,而计算机干活的CPU只认识机器的指令,所以,尽管不同的编程语言差异极大,最后都得"翻译"成CPU可以执行的机器指令.理论上任何语言干任何事情几乎都可以, 但是主要干什么那就不一样了. 01.Java java常常跟"企业"联系在一起, 因为具备一些很好的语言特性, 以及丰富的框架, 在企业应用中最被青睐, 你总可以听到关于J2EE,JSP,Hi

  • 游戏服务器开发的基本体系与服务器端开发的一些建议

    游戏服务器开发的基本体系与服务器端开发的一些建议

    近年来,我身边的朋友有很多都从web转向了游戏开发.他们以前都没有做过游戏服务器开发,更谈不上什么经验,而从网上找的例子或游戏方面的知识,又是那么的少,那么的零散.当他们进入游戏公司时,显得一脸茫然.如果是大公司还好点,起码有人带带,能学点经验,但是有些人是直接进入了小公司,甚至这些小公司只有他一个后台.他们一肩扛起了公司的游戏后端的研发,也扛起了公司的成败.他们也非常尽力,他们也想把游戏的后端做好.可是就是因为没什么经验,刚开始时以为做游戏服务器和做web差不多,但是经过一段时间之后,才发现代

  • 基于javascript html5实现多文件上传

    基于javascript html5实现多文件上传

    本文实例为大家分享了javascript html5实现多文件上传的实现方法,具体内容如下 HTML结构: <div class="container"> <label>请选择一个图像文件:</label> <input type="file" id="file_input" multiple/> </div> 顺便说下这个上传的主要逻辑: 用input标签并选择type=file,记得

  • Vue开发之封装上传文件组件与用法示例

    Vue开发之封装上传文件组件与用法示例

    本文实例讲述了Vue开发之封装上传文件组件与用法.分享给大家供大家参考,具体如下: 使用elementui的 el-upload插件实现图片上传组件 每个项目存在一定的特殊性,所以数据的处理会不同 pictureupload.vue: <template> <div class="pictureupload"> <el-upload :action="baseUrl + '/api/public/image'" list-type=&q

  • python 实现图片上传接口开发 并生成可以访问的图片url

    版本:python3.7 功能,开发一个用户访问的页面,支持图片上传,并将其保存在服务器. 项目结构: app.py文件内容如下: from flask import Flask, Response, request, render_template from werkzeug.utils import secure_filename import os app = Flask(__name__) # 设置图片保存文件夹 UPLOAD_FOLDER = 'photo' app.config['U

随机推荐