google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






Faire simple RPG avec JavaScript et Crafty 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 .


Étiquette: simple jeu de RPG, JavaScript et Crafty, JavaScript RPG jeu, Cadre de jeu JavaScript, Rus?, gameplay, caract?re

Gratuit iPage hébergement Web pour la première année MOMENT



Si vous êtes toujours à la recherche d'un fournisseur d'hébergement Web fiable avec des tarifs abordables, pourquoi vous ne prenez pas un peu de temps pour essayer iPage, seulement avec $1.89/month, inclus $500+ Crédits supplémentaires gratuites pour le paiement de 24 mois ($45)?

Plus de 1.000.000 de clients + existisng peuvent pas avoir tort, vraiment vous n'êtes pas aussi! Plus important encore, lorsque vous enregistrez l'hébergement web à iPage grâce à notre lien, nous allons être heureux de renvoyer un plein remboursement. C'est génial! Vous devriez essayer iPage hébergement web GRATUITEMENT maintenant! Et contactez-nous pour tout ce que vous devez savoir sur iPage.
Essayez iPage GRATUIT première année MOMENT

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.

JavaScript par jour


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web