Html5 – Làm game Battle City

9 thg 9, 2013

Battle 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.

Battle 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:

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;

}

}