JavaScript游戏开发：基于jQuery实现《三国志曹操传》人物行走动画

引言与素材准备

上一讲我们探讨了如何将静态图像转化为动态效果，本讲将继续深入，讲解如何实现人物在屏幕上的移动。由于本内容依赖于上一讲的知识点，为了方便读者回顾，我将上一讲的链接附在下方：

一、图片素材准备

为了展示效果，本次教程更换了图片素材，使视觉效果更加丰富。

上述素材均取材自《三国志曹操传》，据推测为曹操角色的原始素材。接下来，我将结合上一讲的技术，演示如何实现人物的行走动画。本讲的重点在于人物的位移控制，至于帧动画的切换机制，我们在上一讲中已经详细讲解过。

二、代码实现解析

首先展示完整的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库，本教程正是利用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;
} 
}

jQuery animate与callback应用

实现人物行走与停止的核心在于animate函数及其callback参数。其中，animate负责执行位移操作，而callback则用于在动画结束后触发停止逻辑。

通常，animate函数的语法结构为：animate({css属性改变}, 动画持续时间, callback回调函数)。更多详细信息可参考：https://www.jb51.net/w3school/jquery/jquery_effects.htm，该链接还介绍了其他jQuery特效函数，建议读者进一步查阅。

animate函数的使用较为直观，但callback参数往往隐藏在animate的调用中，容易被忽视。

function(){ //用jquery中的animate来控制人物行走
actionST ++;
if(actionST == 100){
standCaocao();
} 
}); //在动画做完时调用callback。callback里可以放函数。

上述代码即为callback的具体实现。由于我们将函数直接嵌入在animate调用中，因此其存在形式不如单独定义的函数那样显眼。

关于callback的更多教程可参考：https://www.jb51.net/w3school/jquery/jquery_callback.htm

此外，还有一段关键代码用于处理停止状态：

function standCaocao()
{ 
pic = 2;
} 

该函数的作用是将动态行走的人物恢复为静态站立状态。当移动停止后，通过重置pic变量，确保人物不再继续播放行走帧动画。

完整源代码下载（包含jquery-1.8.0.js文件）：

演示效果与总结

三、演示效果展示

初始状态如下：

移动过程中：

最终停止状态：

演示位置 四、总结与展望

人物的行走与动作切换是游戏开发中的基础且关键环节，选择合适的算法和函数库是项目成功的关键因素之一。 在下一讲中，我们将研究如何使用JavaScript模拟《三国志曹操传》中的人物剧情对话功能。敬请期待！

感谢大家的支持，我将持续输出更优质的技术文章以回报读者。