You are being fed up with the JavaScript games and trying to find out how to build Web-based JavaScript games? This JavaScript article tutorial may be a valuable reference source for you in this case.

This JavaScript game making tutorial guides us use a JavaScript game framework - Crafty - to create a simple JavaScript RPG game. This JavaScript RPG game is quite simple but it's so awesome with beautiful graphics, and its gameplay is not too easy to make us feel boredom. Basically, we need to do some necessary tasks such as define the characters, build JavaScript game scenes, create gameplay, making game's animations and combine them into a unified result.

The inner post page will show you all detailed instructions and comments, as well as demo to play with full JavaScript source code for downloading.

• Demo
• Enlarge
• Reload
• New window

Animation

view the demo | download demo

Now that the player can move, we want to play the animation we setup earlier.

// Create our player entity with some premade components
var player = Crafty.e("2D, DOM, player, controls, CustomControls, animate, collision")

  .attr({x: 160, y: 144, z: 1})

  .CustomControls(1)
  .animate("walk_left", 6, 3, 8)

  .animate("walk_right", 9, 3, 11)
  .animate("walk_up", 3, 3, 5)

  .animate("walk_down", 0, 3, 2)
  .bind("enterframe", function(e) {

    if (this.__move.left) {
      if (!this.isPlaying("walk_left"))

        this.stop().animate("walk_left", 10);
    }
    if (this.__move.right) {

      if (!this.isPlaying("walk_right"))
        this.stop().animate("walk_right", 10);

    }
    if (this.__move.up) {
      if (!this.isPlaying("walk_up"))

        this.stop().animate("walk_up", 10);
    }
    if (this.__move.down) {

      if (!this.isPlaying("walk_down"))
        this.stop().animate("walk_down", 10);

    }
  }).bind("keyup", function(e) {

    this.stop();
  });

On the enterframe event we want to know the direction the player is moving (using the movement booleans created in our component) and play the appropriate animation. We don’t want to play it if it is already playing however, so we use the .isPlaying() function. If it isn’t playing, stop whatever animation is playing with the .stop() function and play the correct one. Playing an animation is a matter of calling .animate() with the name of the animation and a duration in frames. Because we only have 3 frames for the animation, we want it to be fairly quick. We also want to stop any animation if a key is up.

Collision

Crafty provides collision detection between any two convex polygons. A collision exists when two entities intersect each other. We use the pre-made collision component to detect collisions with the boundary so the player can’t leave the stage.

// Create our player entity with some premade components
var player = Crafty.e("2D, DOM, player, controls, CustomControls, animate, collision")

  .attr({x: 160, y: 144, z: 1})

  .CustomControls(1)
  .animate("walk_left", 6, 3, 8)

  .animate("walk_right", 9, 3, 11)
  .animate("walk_up", 3, 3, 5)

  .animate("walk_down", 0, 3, 2)
  .bind("enterframe", function(e) {

    if (this.__move.left) {
      if (!this.isPlaying("walk_left"))

        this.stop().animate("walk_left", 10);
    }
    if (this.__move.right) {

      if (!this.isPlaying("walk_right"))
        this.stop().animate("walk_right", 10);

    }
    if (this.__move.up) {
      if (!this.isPlaying("walk_up"))

        this.stop().animate("walk_up", 10);
    }
    if (this.__move.down) {

      if (!this.isPlaying("walk_down"))
        this.stop().animate("walk_down", 10);

    }
  }).bind("keyup", function(e) {

    this.stop();
  }).collision()
  .onhit("wall_left", function() {

    this.x += this._speed;
    this.stop();

  }).onhit("wall_right", function() {
    this.x -= this._speed;

    this.stop();
  }).onhit("wall_bottom", function() {

    this.y -= this._speed;
    this.stop();

  }).onhit("wall_top", function() {
    this.y += this._speed;

    this.stop();
  });

Remember those labels we put on the bushes earlier? Now is when they become useful. The function .collision() is the constructor and accepts a polygon object (see Crafty.polygon) or if empty will create one based on the entity’s x, y, w and h values.

.onhit() takes two arguments, the first is the component to watch for collisions and the second is the function called if a collision occurs. If the player collides with any entity with the component wall_left, we need to move the player away from the wall at the same speed it is moving towards it. We need to do this for all other walls so depending on the direction, move the player in the opposite direction at the same speed. I also added the .stop() function so that it doesn’t keep animating when it isn’t moving.

Final Code

Putting together everything we learnt, we should have the following: crafty.js.

Now you should have the basics of an RPG!

If you need any support using Crafty, please visit the Crafty forums and Crafty documentation.

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New