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

很多人都玩过游戏，当游戏玩多了，又是否会自己制作游戏的想法？不管你们有没有，反正我有。可惜学艺不精没办法玩成一个完整的游戏。就试着去模仿一个游戏，在执行一些事情的时候决又不知道用什么方法去完成我想要的效果。
一个游戏由人物，背景，怪物，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是否相交则是接下来要做的了！

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

Python 写了一个网页版的「P图软件」，惊呆了！
作者 | 小欣来源 | Python爱好者集中营今天是开工第一天,这篇文章可以算作是虎年的第一篇干货技术类文章了,今天小编用Python做了一个网页版的"P图软件",大致的流程 ...
在html中怎么制作友情链接,如何制作一个网页链接，用描文本、友情链接交易方式教你如何制作？...
如何制作一个网页链接,用描文本.友情链接交易方式教你如何制作?作为seo优化人员如何运用外界链接开展百度搜索引擎提升?下面和小编一起看看! 1.锚点链接链接应该是有关的优先,百度搜索引擎提升锚点链接 ...
[html] 如果让你实现一个网页版的办公表格（类似excel），你觉得是否可行？如果可行应该怎么做？
[html] 如果让你实现一个网页版的办公表格(类似excel),你觉得是否可行?如果可行应该怎么做? 尝试过写,底层还是用table,td,tr. 难点在于范围性选择单元格,横纵单元格合并互相不影响 ...
飞机大战HTML5游戏源码，基于Canvas制作的网页版飞机大战游戏+飞机大战手机端
简介: 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏,画质精美的飞机大战手机端游戏源码网盘下载地址: http://kekewangLuo.net/W1S2LQcqAT2 ...
如何制作一个横版格斗过关游戏 2 Cocos2d x 2 0 4
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在第一篇 ...
如何制作一个横版格斗过关游戏(2) Cocos2d-x 2.0.4 .
本文原创版权归 csdn 无幻所有,转载请详细标明原创作者及出处,以示尊重! 作者:无幻原文:http://blog.csdn.net/akof1314/article/details/85725 ...
用Python写了一个网页版的美图秀秀，惊呆了
今天小编用Python做了一个网页版的"P图软件",大致的流程在于我们可以将上传的照片进行黑白处理.铅笔素描处理.模糊化处理等一系列操作,具体如下下面我们来看一下该整个网页是怎么 ...
如何制作一个横版格斗过关游戏(2) Cocos2d-x 2.0.4
在第一篇<如何制作一个横版格斗过关游戏>基础上,增加角色运动.碰撞.敌人.AI和音乐音效,原文<How To Make A Side-Scrolling Beat 'Em Up Ga ...
如何使用javascript制作一个网页端3D贪吃蛇游戏（附源码及链接）
先来看游戏的最终效果: 3D网页版贪吃蛇游戏下面来具体讲一下如何实现. 该游戏使用Hightopo的SDK制作,总共100多行代码,没有WebGL基础的同学们也可很快掌握. 场景初始化首先,我们对 ...

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

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

最新文章

热门文章