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

上一讲我们谈到了如何让静态人物变为动态,今天我们来谈谈如何使人物移动,因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方:

一、图片准备

今天我准备换几张图片,这样更新鲜些。


这些素材照样来自《三国志曹操传》,如果我没记错,应该是曹操的素材。接下来我要结合上一次的技术,来告诉大家如何使人物走动起来。不过今天我们着重在于如何使人物走动,因为我们上一讲已经讲了如何使人物化静态为动态。

二、代码讲解

先看总的javascript代码:


代码如下:

var moveLengthLeft = 0;
var moveLengthTop = 0;

var actionST = 0;

var timeInterval = 150;

var pic = 0;

function action()
{
var pic1 = "./pic2.png";
var pic2 = "./pic3.png";
var pic3 = "./pic1.png";
var actionArray = [pic1, pic2, pic3];

var doc = document.getElementById("ID_IMG_CAOCAO");

if (pic == actionArray.length - 2){
pic = 0;
}else{
pic += 1;
}

if(pic > 2){
pic = 2;
doc.src = "./pic1.png"
}

doc.src = actionArray[pic];
}

function walk()
{
setInterval(action, timeInterval);

for(var i = 0; i < 100; i++){
$("#ID_IMG_CAOCAO").animate({marginLeft: moveLengthLeft}, 10, function(){ //用jquery中的animate来控制人物行走
actionST ++;

if(actionST == 100){
standCaocao();
}
}); //在动画做完时调用callback。callback里可以放函数。

$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);

moveLengthLeft += 2;
moveLengthTop += 1;
}
}

function standCaocao()
{
pic = 2;
}

局部分析如下:


代码如下:

function action()
{
var pic1 = "./pic2.png";
var pic2 = "./pic3.png";
var pic3 = "./pic1.png";
var actionArray = [pic1, pic2, pic3];

var doc = document.getElementById("ID_IMG_CAOCAO");

if (pic == actionArray.length - 2){
pic = 0;
}else{
pic += 1;
}

if(pic > 2){
pic = 2;
doc.src = "./pic1.png"
}

doc.src = actionArray[pic];
}

以上代码我已经在上一讲提到过了,所以今天就不再过问了,直接讲如何移动人物。

首先来说,使物体移动无疑要想到jquery,不错今天我们是要用到它的一个函数:animate。
再看代码:


代码如下:

function walk()
{
setInterval(action, timeInterval);

for(var i = 0; i < 100; i++){
$("#ID_IMG_CAOCAO").animate({marginLeft: moveLengthLeft}, 10, function(){ //用jquery中的animate来控制人物行走
actionST ++;

if(actionST == 100){
standCaocao();
}
}); //在动画做完时调用callback。callback里可以放函数。

$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);

moveLengthLeft += 2;
moveLengthTop += 1;
}
}

这些代码能实现人物走动和停住主要在于callback和animate。callback主要是使人物停下,animate主要是使人物移动。

通常,animate的语法是:animate({css代码的改变}, 完成要用的时间, callback);。详情请看:http://www.jb51.net/w3school/jquery/jquery_effects.htm,这里面还有很多其他jquery函数,可以多了解了解。

当然,animate显而易见,但callback呢???原来它藏在了animate里面。


代码如下:

function(){ //用jquery中的animate来控制人物行走
actionST ++;

if(actionST == 100){
standCaocao();
}
}); //在动画做完时调用callback。callback里可以放函数。

这段代码便是callback。只不过我们把他的位置放上了函数,所以不怎么让人看得见。
callback的一些教程: http://www.jb51.net/w3school/jquery/jquery_callback.htm

另外还有一串代码:


代码如下:

function standCaocao()
{
pic = 2;
}

这段代码主要是用来使动态人物变为静态人物。这样移动停止后,人物动作也没了。

源代码下载:(包括一个jquery-1.8.0.js文件)

三、演示效果

首先是:

然后是:

最后是:

演示位置
四、后记

首先人物行走和动作是游戏制作必不可少的环节,选择良好的算法和函数是成功的关键。
下一次我们将研究如何用js仿《三国志曹操传》人物情节对话。敬请期待!

希望大家多支持,谢谢。我会以更好的文章来回报大家。

(0)

相关推荐

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 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

随机推荐