Vous ?tes en avoir marre avec les jeux JavaScript et essayer de trouver comment construire des jeux bas?s sur le Web JavaScript ?
Cadre de jeu JavaScript - Crafty - de cr?er un simple JavaScript RPG .

• Demo
• Agrandir
• Recharger
• 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
• Imprimer

• Commentaire (0)
• �crire

par Avant-premi�re

Annuler r�ponse

�crivez votre commentaire

Comment's Titre

J'assure � 100% je suis humain r�el
Je le r�p�te, je ne suis pas bot

• Sent (0)
• Nouveau