Bạn đang chán ngấy các trò chơi JavaScript và muốn thử tìm hiểu cách thức xây dựng các trò chơi trên nền web? Thì bài viết hướng dẫn sử dụng JavaScript này là một nguồn tham khảo đáng giá dành cho bạn.

Bài viết này hướng dẫn chúng ta sử dụng một thư viện JavaScript là Crafty để tạo ra một trò chơi nhập vai RPG đơn giản nhưng đồ họa khá đẹp cùng với cách chơi cũng không quá đơn giản để tạo sự nhàm chán. Cơ bản, chúng ta cần làm những việc cần thiết như: định hình các nhân vật, xây dựng các cảnh chơi, xây dựng lối chơi (gameplay), tạo các hoạt hóa và kết hợp chúng thành một thể thống nhất.

Trang trong sẽ cung cấp cho bạn bài viết chi tiết cùng với hướng dẫn, cũng như là trò chơi mẫu để bạn thử cùng với mã nguồn đầy đủ cho phép bạn tải về.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

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.

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới