Đăng ký
Cộng đồng phát triển game Việt - kết nối đam mê !

Dựa theo hướng dẫn của bạn HUY TRẦN ở đây (http://www.vietgamedev.net/blog/60/làm-game-tic-tac-toe-với-c/). Mình viết bài hướng dẫn viết Game Tic-Tac-Toe dựa trên nền tảng HTML5 xài Engine Gamerize Me.


Trước hết bạn vào trang http://games.1or2.info/  đăng kí 1 tài khoản và vào Game Editor.


Ở góc dưới có phần My Game, là danh sách tất cả các Game của bạn đã tạo, nhập tiêu đề Game và chọn Create để tạo 1 game mới.


 


Sau đó bạn chọn Game vừa mới tạo, để ý ở ngay phía trên là danh sách các resource và các mã nguồn sử dụng trong game.


Một state được dựng lên bao gồm init - update - render - free. Trong đó update - render được gọi liên tục tạo ra vòng lặp game. 


Ta viết các hàm tương tự bạn Huy.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
init: function()
{
  this.endGame = false;
  this.board = new Array(3);
  for (var i = 0; i < 3; i++)
  {
    this.board[i] = new Array(3);
    for (var j = 0; j < 3; j++)
    {
      this.board[i][j] = CELL_BLANK;
    }
  }
   
  this.currentPlayer = 0;
   
},
 
// Port Functions
// Checking if the board is Blank
isBlank: function()
{
  for (var i = 0; i < 3; i++)
  {
    for (var j = 0; j < 3; j++)
    {
      if (this.board[i][j] == CELL_BLANK)
      {
        return true;
      }
    }
  }
  return false;
},
// Check Win
checkWin: function()
{
  var i = 0;
  var key = CELL_BLANK;
  this.winner = 0;
  this.endGame = false;
   
  // Check for row
  for (i = 0; i < 3; i++)
  {
    if (this.board[i][0] & this.board[i][1] & this.board[i][2])
    {
      key = this.board[i][0];
      break;
    }
     
    if (this.board[0][i] & this.board[1][i] & this.board[2][i])
    {
      key = this.board[0][i];
      break;
    }
  }
   
  if (this.board[0][0] & this.board[1][1] & this.board[2][2])
  {
    key = this.board[0][0];
  }
   
  if (this.board[0][2] & this.board[1][1] & this.board[2][0])
  {
    key = this.board[0][0];
  }
   
  if (key != CELL_BLANK)
  {
    this.winner = key;
    this.endGame = true;
  }
   
  if (!this.isBlank())
  {
    this.endGame = true;
  }
       
}


Ở đây mình có tối ưu 1 số chổ cho nó chạy nhanh lên, chổ nào không hiểu các bạn có thể xem code của HUY Trần, dễ hiểu hơn.


- Sau đó là chuẩn bị resource để Render:


Ở mục resource ta chọn và upload các file tương tự như sau:



Ở hàm render - ta dựa vào các biến trạng thái để render - bao gồm board - endGame - winner - currentPlayer. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
render: function()
{
  $g.fillStyle = "#ffffff"; // Fill Màn hình
  $g.fillRect(0, 0, WIDTH, HEIGHT);
  $g.drawImage($res.board, 100, 100); // Vẽ hình nền
   
  for (var i = 0; i < 3; i++) // vẽ bản game ra.
  {
    for (var j = 0; j < 3; j++)
    {
      if (this.board[i][j] == CELL_X)
      {
        $g.drawImage($res.sprite_x, 160 + i * ix + j * jx, 180 + i * iy + j * jy); 
      }
      else if (this.board[i][j] == CELL_O)
      {
        $g.drawImage($res.sprite_o, 160 + i * ix + j * jx, 180 + i * iy + j * jy); 
      }
    }
  }
   
  if (!this.endGame) // nếu game chưa kết thúc
  {
    if (this.currentPlayer) // vẽ người chơi hiện tại
    {
      $g.drawImage($res.sprite_o, 10, 10);
    }
    else
    {
      $g.drawImage($res.sprite_x, 10, 10);
    }
  }
  else
  {
    $g.drawImage($res.gameover, 100, 200); // vẽ Game Over
    if (this.winner) // và vẽ icon của người chơi ra.
    {
      $g.drawImage(this.winner == CELL_X ? $res.sprite_x : $res.sprite_o, 100, 250);
    }
  }
   
},


Bước cuối cùng là sử lý sự kiện người dùng ở trong hàm update


Trong hàm update ta đọc sự kiện chuột - kiểm tra game đã kết thúc hay chưa...



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
update: function()
{
  if (!this.endGame)
  {
    if ($.ms == "down")
    {
      this.checkTouch();
      $.ms = false;
    }
     
    this.checkWin();
  }
  else
  {
    if ($.ms == "down")
    {
      this.init(); // Restart a new game.
      $.ms = false;
    }
  }
},
 
// Check Touch Input.
checkTouch: function()
{
  for (var i = 0; i < 3; i++)
  {
    for (var j = 0; j < 3; j++)
    {
      var x = 170 + i * ix + j * jx;
      var y = 200 + i * iy + j * jy;
      if ($.mouseIn(x, y, 80, 70))
      {
        break;
      }
    }
     
    if (j < 3)
    {
      break;
    }
  }
         
  // Click at i & j
  if (i < 3 && j < 3)
  {
    if (this.board[i][j] == CELL_BLANK)
    {
      this.board[i][j] = this.currentPlayer ? CELL_O : CELL_X;
      this.currentPlayer = !this.currentPlayer;
    }
  }
   
},


Phần Tiếp theo: Port game Tic-Tac-Toe sang iOS và Android. 


Nhưng trước hết mời mọi người thưởng thức.



 

Huy Trần
lúc trước em test canvas trên ipod touch gen 4 thì tốc độ chậm lắm, trên PC là ~300fps thì lên ipod còn ~8fps
  • tháng 4 2, 2012
  • ·
  • Thích
  • ·
Trần Thiện KHiêm
ủa, làm chi có chuyện đó, mình thấy HTML5 chạy nhanh mà, mấy cái game của mình chạy toàn 20-30fps. Nhưng mấy cái test của ie nó chạy toàn 40-60fps.
  • tháng 4 2, 2012
  • ·
  • Thích
  • ·
Trần Phong Phú
Mình nghĩ giờ nó đã cải thiện rồi í
  • tháng 4 2, 2012
  • ·
  • Thích
  • ·
Huy Trần
kết hợp với nodeJS làm game tic-tac-toe online nhỉ 04
  • tháng 4 2, 2012
  • ·
  • Thích
  • ·
Nguyễn Tài Hải
nodeJS đang gặp khó khăn vụ server side. Ai có kinh nghiệm vụ này không share anh em với.
  • tháng 4 2, 2012
  • ·
  • Thích
  • ·
Huy Trần
vấn đề gì vậy anh
  • tháng 4 2, 2012
  • ·
  • Thích
  • ·
Trần Thiện KHiêm
Mình cũng đang có ý định thêm API cho người ta viết game theo lượt vào cái Gamerize nhưng không có thời gian làm.
  • tháng 4 2, 2012
  • ·
  • Thích
  • ·
Nguyễn Quang Vinh
Sẽ có người làm, em yên tâm ;D
  • tháng 4 2, 2012
  • ·
  • Thích
  • ·
Trần Thiện KHiêm
Cập nhật phiên bản mới có AI nha...
  • tháng 4 3, 2012
  • ·
  • Thích
  • ·
Nguyễn Quang Vinh
Cool
  • tháng 4 3, 2012
  • ·
  • Thích
  • ·
Nguyễn Tài Hải
I love you!
  • tháng 4 3, 2012
  • ·
  • Thích
  • ·
Trần Thiện KHiêm
AI cùi mía lắm if (can(win)){ win(); } else if (must(block)) { block(); } else { random_move(); };
  • tháng 4 3, 2012
  • ·
  • Thích
  • ·
Jannie Huynh
Chào các anh chị, em là thành viên mới
  • tháng 4 3, 2012
  • ·
  • Thích
  • ·
Nguyễn Quang Vinh
Chào bạn 04
  • tháng 4 3, 2012
  • ·
  • Thích
  • ·
Nguyễn Quang Vinh
@Khiêm: account bị suspend rồi kìa em, up lên dropbox đi em .
  • tháng 4 21, 2012
  • ·
  • Thích
  • ·
The Hoang
up lại cái link anh ơi !!!!!!!!!
  • tháng 12 16, 2012
  • ·
  • Thích
  • ·
Captcha Challenge