Html5 – Làm game Battle City

Battle City NamcotBattle City là một game mặc dù có cách chơi đơn giản nhưng lại rất được ưa chuộng và phổ biến trên hệ máy “4 nút” ngày xưa. Đây cũng là một trong những game đơn giản mà bạn nên thực hiện khi bắt đầu học lập trình game.


Dựa vào những nền tảng đả làm trước đó, phiên bản hiện tại chỉ mất một buổi chiều để xây dựng. Nhưng để nó hấp dẫn và cuốn hút được người chơi. Bạn có thể phát triển thêm các tính năng cần thiết. Chúng có thể khiến bạn mất một quãng thời gian dài nhưng kết quả đạt được sẽ làm bạn hài lòng.

Xem Demo.

Vì cách thực hiện game này “kế thừa” từ các game tôi từng giới thiệu nên bạn có thể đọc lại các bài hướng dẫn đó nếu chưa hiểu:

Ebook – HTML5 Canvas – Lập Trình Game 2D (Free)

Html5-Canvas: Viết game Mario – part 5 (end)

Html5-Canvas: Viết game Tower Defense – part 4+ (end)

Các tập tin javascript được tôi sử dụng trong game này:

<script src="js/core/AnimatedSprite.js"></script>
<script src="js/core/StaticSprite.js"></script>
<script src="js/core/ImgLoader.js"></script>
<script src="js/map.js"></script>
<script src="js/Tank.js"></script>
<script src="js/Bullet.js"></script>
<script src="js/Player.js"></script>
<script src="js/Enemy.js"></script>

Trong đó lớp Tank là lớp quan trọng nhất. Bạn có thể thấy, mọi nhân vật (tank) trong game này gần như giống nhau: di chuyển và bắn. Điểm khác nhau duy nhất là nó tự động hay được người chơi điều khiển. Vì vậy tôi tạo lớp Tank để làm lớp cha cho hai lớp là Enemy và Player.

Domain Model:

Domain Model - Battle City - Html5 game

Một phương thức để Tank tự động di chuyển khi gặp vật cản mà bạn có thể thắc mắc:

Tank.prototype.automove = function(){
	this.speedX = 0;
	this.speedY = 0;
	var a = Math.random()<0.5;
	if(a)
	{
		this.speedX = (Math.random()<0.5? -this.speed: this.speed);
		if(this.speedX != 0)
			this.direction = this.speedX < 0 ? DIRECTIONS.LEFT : DIRECTIONS.RIGHT;
	}
	else
	{
		this.speedY = (Math.random()<0.5? -this.speed: this.speed);
		if(this.speedY != 0)
			this.direction = this.speedY < 0 ? DIRECTIONS.TOP : DIRECTIONS.DOWN;
	}
}

YinYangIt’s Blog

17 thoughts on “Html5 – Làm game Battle City

  1. Những chủ đề thật tuyệt, liệu anh có thể tổng hợp thành tất cả phần dev game thành một quyển Ebook mà chỉ đề cập đến thuật toán được không? Như vậy việc áp dụng sang những ngôn ngữ khác như Java, C#, VB sẽ thuận lợi hơn. Em rất quan tâm đến lĩnh vực này nhưng mà trên đây là JavaScript lên cũng hơi bất tiện trong việc nghiên cứu thuật toán. 😐

    Trả lời
  2. YY có hứng thú phát triển game này to lên chút cho vui ko? Làm hobby thôi, mỗi ngày 1 2 tiếng chẳng hạn. Mình có nhiều exp về software, đang muốn thử làm game một chút cho vui 😀

    Rất cảm ơn tài liệu của bạn.

    Trả lời

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s