尝试自己制作一个网页版的单机冒险岛！！

admin管理员组

文章数量:1794759

尝试自己制作一个网页版的单机冒险岛！！

很多人都玩过游戏，当游戏玩多了，又是否会自己制作游戏的想法？不管你们有没有，反正我有。可惜学艺不精没办法玩成一个完整的游戏。就试着去模仿一个游戏，在执行一些事情的时候决又不知道用什么方法去完成我想要的效果。 一个游戏由人物，背景，怪物，NPC等组成。我先从人物开始

这四张图片咋一看差不多，仔细一看会发现有点不同。一个角色的站立效果由四张静态的图片组成。看到这四张图片也许你已经知道这是什么游戏，冒险岛(Maple Story)一个2D卷轴游戏。

<img src="~/冒险岛全套素材/Zz/大刀left/stand1_0.png" /> <img src="~/冒险岛全套素材/Zz/大刀left/stand1_1.png" style="margin: 0 0 0 1px;" /> <img src="~/冒险岛全套素材/Zz/大刀left/stand1_2.png" style="margin: 0 0 0 2px;" /> <img src="~/冒险岛全套素材/Zz/大刀left/stand1_3.png" />

如果将每一张放在同一个位置会发现位置有所差距（鞋子的位置）不调位置的话人物会有一个前后移动的问题

Var stop=0 setInterval(function () { if ($("#role").hasClass("inleft-stand1")) { if (stop == 0 || stop == '') { stop = 1 $("#role").html('<img src="/冒险岛全套素材/Zz/大刀left/stand1_1.png" style="margin: 0 0 0 1px;" />'); } else { if (stop == 1) { stop = 2 $("#role").html('<img src="/冒险岛全套素材/Zz/大刀left/stand1_2.png" style="margin: 0 0 0 2px;" />'); } else { if (stop == 2) { stop = 3 $("#role").html('<img src="/冒险岛全套素材/Zz/大刀left/stand1_1.png" style="margin: 0 0 0 1px;" />'); } else { if (stop > 2) { stop = 0 $("#role").html('<img src="/冒险岛全套素材/Zz/大刀left/stand1_0.png" />'); } } } } } }, 500);

利用计时器 每格500毫秒进行一次，使用stop来判断下一张显示第几帧。hasClass判断人物的状态， //键盘 弹起

onkeyup = function (event) { if (event.keyCode == 37) { $("#role").removeClass("inright-walk1 inleft-walk1 inleft-stand1 inright-stand1 ").addClass('inright-stand1'); } if (event.keyCode == 39) { $("#role").removeClass('inright-walk1 inleft-walk1 inleft-stand1 inright-stand1').addClass("inleft-stand1"); } } Onkeup 当左右松开的时候改变人物朝向， removeClass 删除标签下的类，addClass 给予标签类。按键的按下与弹起，来改变人物的状态，判定状而执行下一帧的画面。 onkeydown = function (event) { if (event.keyCode == 37) { $("#role").removeClass(" inleft-stand1 inright-stand1 ").addClass('inright-walk1'); } if (event.keyCode == 39) { $("#role").removeClass('inright-stand1 inleft-stand1').addClass("inleft-walk1"); }}

这样就完成了人物的基本动作，行走与站立。下一步是完成人物的跳跃与降落。 跳跃涉及到了人物的移动，使用animate 让人物有一个上升的动作效果。在上升到顶点后落下，但落下的时候要判断是否落在平台上及 div是否相交 则是接下来要做的了！

本文标签： 冒险岛单机网页