当前位置: 代码迷 >> HTML/CSS >> HTML5开发 页逛/手游动画及游戏系列教程(Game Tutorial):(一)物体动起来吧
  详细解决方案

HTML5开发 页逛/手游动画及游戏系列教程(Game Tutorial):(一)物体动起来吧

热度:516   发布时间:2012-10-16 09:57:37.0
HTML5开发 页游/手游动画及游戏系列教程(Game Tutorial):(一)物体动起来吧

前言

所谓高手,也就是熟悉别人制定的游戏规则、并且能在规则内跳舞的人。(随笔,转自王哲的博客)

09年的时候,为了跳槽和兴趣,转型游戏行业,因此去网上找资料学习各种游戏相关的资料。也是缘分吧,看到了深蓝色右手的教程,当时真是如获至宝,相恨见晚,光看电子书还觉得不够,还把网上的教程都打印了出来,封装成一本书看,这样可以空的时候翻翻。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

时间过的真快,一眨眼就到了2012年了。自己转行做游戏也有好几年了。那时候一心想进游戏行业,啥都不管,投简历全投带有“游戏”关键字的公司(和我当初大学报考志愿一样,非计算机专业不填(),使得和家里人意见相左,闹的很不愉快,因为在他们眼里老师和医生才是最好的职业,为了这个事情,我还闹的,在离交志愿只有几小时的紧张剩余时间里,我最后终于还是被逼的爆发了,头痛的要命,泪珠夺眶而出,一气之下狠狠的把所有参考资料猛的甩出窗外,这下家里人都惊呆了,也没有办法了,只好都随了我了。。。。呵呵,好像有点扯远了~~~~~赶紧拉过来)只要是有游戏公司通知要我我就去,也没什么多大要求。

在这期间也换过两家游戏公司,其中的原因很复杂,不再赘述。还是接着上面的说,因为还是受“深蓝色右手“的启发吧,觉得他的教程写的挺不错的,由于各种原因,后来也未曾好好的把SL进行下去(惭愧),我呢,从之前的端游现在又转做页游了,特别是公司的项目,要采用HTML5技术来做,因此也学习了一段时间,对这门新型技术还是挺看好的。因为现在也有时间,所以想整理一下,把自己会的知识用文档的形式记录下来并共享,也是给自己留下点东西以备遗忘,刚好巧合又一次看到了久违的深蓝色右手的教程,所以就想用不一样的方式来模仿一样的游戏制作过程。呵呵。这就是我今天的开始。

关于html5相关的知识就不多介绍了,我也只是个初学者,网上资料很多,可以google 或者baidu。(我选择HTML5的理由, web形式的网游虽然目前性能远不及端游,但是有一点比较好,假如你是某款网游的忠实FANS,如果类型是端游,你电脑系统重装了,或者说刚好去朋友家玩,突然想玩了,那么页游的好处是你只需敲入页游的网址就可以玩了(前提是能上网),无需下载,多方便啊。端游客户端就没有这个优势,我本人是有一台mac,一台winPC,一台iphone,一台ipad 1代,不需要每台都去下载我想玩的游戏,直接打开支持html5safari/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>
<canvas id="view" width="640" height="560" style="background: silver;" onmousedown="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;//计时器ID
       function MouseDown(e){
           e = e || window.event;
          if(1 == e.which){//left button
              clearInterval(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

核武器

本文出自"核武器基地的专栏"博客,转载请务必保留此出处。