学习使用easelJS类库控制HTML5游戏角色的移动和跳跃

第一步：生成游戏场景中的地面

首先，需要使用Bitmap类来生成游戏中人物所处的地面效果，使用如下游戏图片：

将以上图片宽度为75px，如果将游戏区宽度设置为350px（画布宽度），克隆五个即可填满屏幕，代码如下：

//克隆5个地面图片生成游戏区域的地面效果for(i=0;i<5;i++){vartempBlockGround=ground.clone();tempBlockGround.x=i*70;tempBlockGround.y=stageHeight-blockHeight;stage.addChild(tempBlockGround);}

如果大家对于Bitmap类不是很熟悉，请参考如下系列教程：

EaselJS处理图片

以上代码将使用一个图片，并且克隆5次，生成游戏场景中的地面效果

第二步：生成游戏中人物的跑步效果

使用SpriteSheet类，可以生成人物动画效果，使用图片如下：

通过如下代码，可以设置动画效果：

spritesheet=newcreatejs.SpriteSheet({"images":['http://cdn.gbtags.com/gblibraryassets/libid108/charactor.png'],"frames":{"height":96,"count":10,"width":75},"animations":{run:[0,9]}});character=newcreatejs.Sprite(spritesheet);

以上代码中使用了spritesheet生成动画人物相关sprite，并且设置相关游戏人物的x，y轴位置

使用play()方法播放动画效果，使用ticker来控制动画帧

第三步：添加游戏人物的键盘方向控制

这节学习添加键盘控制人物效果，相关代码如下：

functionhandleKeyDown(e){switch(e.keyCode){caseKEYCODE_LEFT:case65://AmoveLeft=true;character.play();break;caseKEYCODE_RIGHT:case68://DmoveRight=true;character.play();break;}}functionhandleKeyUp(e){switch(e.keyCode){caseKEYCODE_LEFT:case65://AmoveLeft=false;character.gotoAndStop(0);break;caseKEYCODE_RIGHT:case68://DmoveRight=false;character.gotoAndStop(0);break;}}

以上两个方法定义了键盘keydown和keyup的相关处理， 当用户按下指定键，例如，a，d或者是左右方向键，则调用人物的播放方法，而当用户松开指定键，则调用了终止动画方法gotoAndStop(0)

第四步：控制游戏人物的跳跃

控制人物跳跃，需要添加如下一个方法：

functionjump(){if(isJumping==false){yVel=-15;isJumping=true;}}

这个方法将控制游戏人物在y轴的移动速度，同时在tick方法中添加如下处理：

functiontick(event){...//控制跳跃if(isJumping){yVel+=gravity;character.y+=yVel;if(character.y>characterGround){character.y=characterGround;yVel=0;isJumping=false;}}stage.update();}

以上方法控制人物的重力效果，并且控制人物最后落地的位置

最后需要将键盘的w键和向上箭头绑定到跳跃动作，如下：

functionhandleKeyDown(e){switch(e.keyCode){caseKEYCODE_UP:case87://Wjump();break;caseKEYCODE_LEFT:case65://AmoveLeft=true;character.play();break;caseKEYCODE_RIGHT:case68://DmoveRight=true;character.play();break;}}

详细的代码讲解和互动在线演示，请阅读如下课程：

学习使用easelJS类库控制游戏角色的移动和跳跃：http://www.gbtags.com/gb/gbliblist/108.htm