HTML5开发 页游/手游动画及游戏系列教程(Game Tutorial):（一）物体动起来吧
前言
所谓高手，也就是熟悉别人制定的游戏规则、并且能在规则内跳舞的人。(随笔，转自王哲的博客)
09年的时候，为了跳槽和兴趣，转型游戏行业，因此去网上找资料学习各种游戏相关的资料。也是缘分吧，看到了深蓝色右手的教程，当时真是如获至宝，相恨见晚，光看电子书还觉得不够，还把网上的教程都打印了出来，封装成一本书看，这样可以空的时候翻翻。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
时间过的真快，一眨眼就到了2012年了。自己转行做游戏也有好几年了。那时候一心想进游戏行业，啥都不管，投简历全投带有“游戏”关键字的公司（和我当初大学报考志愿一样，非计算机专业不填（），使得和家里人意见相左，闹的很不愉快，因为在他们眼里老师和医生才是最好的职业，为了这个事情，我还闹的，在离交志愿只有几小时的紧张剩余时间里，我最后终于还是被逼的爆发了，头痛的要命，泪珠夺眶而出，一气之下狠狠的把所有参考资料猛的甩出窗外，这下家里人都惊呆了，也没有办法了，只好都随了我了。。。。呵呵，好像有点扯远了~~~~~赶紧拉过来）只要是有游戏公司通知要我我就去，也没什么多大要求。
在这期间也换过两家游戏公司，其中的原因很复杂，不再赘述。还是接着上面的说，因为还是受“深蓝色右手“的启发吧，觉得他的教程写的挺不错的，由于各种原因，后来也未曾好好的把SL进行下去（惭愧），我呢，从之前的端游现在又转做页游了，特别是公司的项目，要采用HTML5技术来做，因此也学习了一段时间，对这门新型技术还是挺看好的。因为现在也有时间，所以想整理一下，把自己会的知识用文档的形式记录下来并共享，也是给自己留下点东西以备遗忘，刚好巧合又一次看到了久违的深蓝色右手的教程，所以就想用不一样的方式来模仿一样的游戏制作过程。呵呵。这就是我今天的开始。
关于html5相关的知识就不多介绍了，我也只是个初学者，网上资料很多，可以google 或者baidu。（我选择HTML5的理由， web形式的网游虽然目前性能远不及端游，但是有一点比较好，假如你是某款网游的忠实FANS，如果类型是端游，你电脑系统重装了，或者说刚好去朋友家玩，突然想玩了，那么页游的好处是你只需敲入页游的网址就可以玩了（前提是能上网），无需下载，多方便啊。端游客户端就没有这个优势，我本人是有一台mac,一台winPC,一台iphone,一台ipad 1代，不需要每台都去下载我想玩的游戏，直接打开支持html5的safari/chrome浏览器就可以玩了，你看，多方便呢。）
这里推荐的工具是JetBrains WebStorm ,我用的版本是v4.0.3 浏览器工具推荐Chrome 或者 firefox;
HTML5开发 页游/手游动画及游戏系列教程(Game Tutorial):（一）物体动起来吧①
好了。让我们开始神奇的游戏之旅吧。
首先我们新建一个html项目，一个标准的html5格式的代码：
<!DOCTYPE>
<html>
<head><title></title>
</head>
<body>
</body>
</html>现在什么都没有。接下来是要添加一个神奇的DOM元素了（canvas），我们的游戏都是在这个元素的基础上完成的。好了。添加进去
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="view" width="640" height="560" style="background: silver;"></canvas>
</body>
</html>这里我创建了一个canvas元素，大小为宽640，高560，背景色银色
用chrome浏览器打开后的效果图如下：
因为需要响应鼠标事件，所以还需要注册鼠标点击事件，给id为view的canvas添加onmousedown事件（接下来的教程可能会针对触摸屏的触摸事件进行响应，这里只针对PC上的鼠标操作），代码如下：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title></title><script type="text/javascript">function MouseDown(e){e = e || window.event;if(1 == e.which){//left button }}</script>
</head>
<body οnlοad="DrawRect()">
<canvas id="view" width="640" height="560" style="background: silver;" οnmοusedοwn="MouseDown()"></canvas>
</body>
</html>接下来动态创建一个矩形对象。这时候就用到canvas对象了。
先简单的介绍下canvas画布,HTML5的canvas使用笛卡尔坐标系统, 坐标原点（0,0）在屏幕左上方, x坐标向右, y 坐标向下, 如图所示.
创建矩形代码和鼠标点击后的动画的关键代码：
<script type="text/javascript">var context;var desPos={x:50,y:50};var startMovingPos = {x:50,y:50};var rectWidth = 100,rectHeight = 100;var canvas;var timer = 0;//计时器IDfunction MouseDown(e){e = e || window.event;if(1 == e.which){//left buttonclearInterval(timer);desPos.x = e.clientX - canvas.scrollLeft;desPos.y = e.clientY - canvas.scrollTop;timer = setInterval(draw,0.5);}}function DrawRect(){canvas = document.getElementById("view");context = canvas.getContext("2d");context.fillStyle = "rgb(250,123,45)";context.fillRect(desPos.x,desPos.y,rectWidth,rectHeight);}function draw(){context.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);var delX = desPos.x - startMovingPos.x;var delY = desPos.y - startMovingPos.y;startMovingPos.x += delX/10;startMovingPos.y += delY/10;context.fillRect(startMovingPos.x,startMovingPos.y,rectWidth,rectHeight);}</script>打开浏览器，看下结果，方便的方法是在webstorm里移动到文档的右上角会显示：
前提是要设置好关联项，这个不多说了，自己摸索下吧呵呵。很简单的。
鼠标随便在灰色的区域点击看看，是不是矩形框动起来啦。
小结：本人是第一次写教程，对HTML5也是第一次尝试，希望能帮到像我一样的初学者.
=============================================================================================
QQ:61357455
核武器
本文出自"核武器基地的专栏"博客，转载请务必保留此出处。
HTML5开发 页游/手游动画及游戏系列教程(Game Tutorial):（一）物体动起来吧相关推荐
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：目录
本系列教程的示例代码下载(感谢 银光中国 提供资源分流): 第一部分源码:WPFGameTutorial_PartI(1-20节) 第二部分源码:WPFGameTutorial_PartII(21-2 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(二)让物体动起来②
第二种方法,CompositionTarget动画,官方描述为:CompositionTarget对象可以根据每个帧回调来创建自定义动画.其实直接点,CompositionTarget创建的动画是基于 ...
- html5开发页游（前话）
导师要求模仿某个页游网站开发益智小游戏.老板的要求是要跨平台,IOS,Android.PC.Mac等系统主要通过浏览器打开都能用.那个网站的页游是通过flash实现的,使用这种方法肯定不能满足老板的要 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(一)让物体动起来①
序:自从QXGame(WPF GAME ENGINE)游戏引擎公布以来,受到很多朋友的热切关注,于是乎有了写教程的想法.那么从今天开始,我将带领大家一步一步的学会如何使用纯C#开发WPF/Silver ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(二十六)通用型角色头像面板...
目前游戏的开发进度已经基本实现了精灵对象之间的普通交互,接下来我们需要朝着实现战斗系统的目标前行.而实现它的前提是必须完善精灵控件的基本属性,如添加生命值.魔法值.活力值.经验值等基本属性并通过窗体界 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(三十一) 超酷万变的矢量魔法...
还记得当年的经典网游奇迹(MU)吗?辉煌就如同其名字一般深刻烙印在我的脑海.与朋友们一起通宵奋战的日子已成过去,残留世上那一张张经典不朽的截图让我时刻感受回味.它的成功不仅仅因为其拥有一个极棒的世界观 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(三十一) 超酷万变的矢量魔法
还记得当年的经典网游奇迹(MU)吗?辉煌就如同其名字一般深刻烙印在我的脑海.与朋友们一起通宵奋战的日子已成过去,残留世上那一张张经典不朽的截图让我时刻感受回味.它的成功不仅仅因为其拥有一个极棒的世界观 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(十)斜度α地图的构造及算法...
在当前的网络游戏中,地图基本都是采取一定斜度的拼装地图,这其中存在两种斜度地图的构造方式: 第一种我称之为伪斜度地图:该类型地图表现层图片为斜度的,但地图基底障碍物等的构造则实为正方形,如下图: 其实 ...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(三十三) 锦上添花之魔法特效装饰
上一节,我们实现了6大系魔法的附加属性,并赋予了不同的颜色加以区别:但是在实际的游戏开发中,特别是Q版或追求艺术表现的网络游戏中,为了能够更加突显魔法的绚丽与雍华,设计师们会为魔法增加大量的画面体现: ...
最新文章
- 阿里某员工：发完年终奖后就离职，工作让我心力交瘁
- 深度高能粒子对撞追踪：Kaggle TrackML粒子追踪挑战赛亚军访谈
- Vue 切换路由后页面回到页面顶部
- 甜蜜暴击情人节海报PSD分层模板|让人眼前一亮
- 力扣 两个数组的交集
- ftp主动和被动模式_ftp协议，深入理解ftp协议只需3步
- Head First Java ——我的Java入门书
- UEditor 配置
- JS刷剑指offer（待更新）
- js处理ISO8601时间
- PyQt5中为窗口添加菜单工具栏状态栏
- 在 markdown 中使用表情符号
- mac 下Protege中使用OWL Viz插件
- html5游戏制作入门系列教程（一）
- 3级流水线11位-4位CRC循环冗余校验码生成器Verilog
- Linux 基础实战（二）
- 香港科技大学计算机实验室,香港科技大学机器人实验室科研项目
- 应急响应常用命令（Linux）---读书笔记
- 【链环科技】如何利用“私域流量”——小程序直播做到高转化低退货
- 想要软件外包,企业开发APP和小程序如何才能不吃亏?