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

浏览数：31 / 时间：2015年06月11日

 

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

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

技术分享

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

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

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

EaselJS处理图片

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

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

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

技术分享

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

  1. spritesheet =new createjs.SpriteSheet({
  2. "images":[‘http://cdn.gbtags.com/gblibraryassets/libid108/charactor.png‘],
  3. "frames":{"height":96,"count":10,"width":75},
  4. "animations":{ run:[0,9]}
  5. });
  6. character =new createjs.Sprite(spritesheet);

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

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

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

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

  1. function handleKeyDown(e) {
  2. switch (e.keyCode) {
  3. case KEYCODE_LEFT:
  4. case 65: // A
  5. moveLeft = true;
  6. character.play();
  7. break;
  8. case KEYCODE_RIGHT:
  9. case 68: // D
  10. moveRight = true;
  11. character.play();
  12. break;
  13. }
  15. }
  17. function handleKeyUp(e) {
  18. switch (e.keyCode) {
  19. case KEYCODE_LEFT:
  20. case 65: // A
  21. moveLeft = false;
  22. character.gotoAndStop(0);
  23. break;
  24. case KEYCODE_RIGHT:
  25. case 68: // D
  26. moveRight = false;
  27. character.gotoAndStop(0);
  28. break;
  30. }
  31. }
 

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

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

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

  1. function jump(){
  2. if(isJumping ==false){
  3. yVel =-15;
  4. isJumping =true;
  5. }
  6. }
 

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

  1. function tick(event){
  2. ...
  3. //控制跳跃
  4. if(isJumping){
  5. yVel += gravity;
  6. character.y += yVel;
  7. if(character.y > characterGround){
  8. character.y = characterGround;
  9. yVel =0;
  10. isJumping =false;
  11. }
  12. }
  13. stage.update();
  14. }

 

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

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

  1. function handleKeyDown(e){
  2. switch(e.keyCode){
  3. case KEYCODE_UP:
  4. case87:// W
  5. jump();
  6. break;
  7. case KEYCODE_LEFT:
  8. case65:// A
  9. moveLeft =true;
  10. character.play();
  11. break;
  12. case KEYCODE_RIGHT:
  13. case68:// D
  14. moveRight =true;
  15. character.play();
  16. break;
  17. }
  18. }

 

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

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢