Trong phần này ta sẽ thêm khả năng bắn đạn của tower cũng như HP của các enemy. Như thường lệ tôi sẽ cố gắng viết các comment trong code để người đọc có thể hiểu ngay. Phần bài viết này chỉ có nhiệm vụ dẫn dắt bạn vào những phần chính. Nếu đây là phần đầu tiên bạn đọc, bạn có thể quay lại đọc các phần 1, 2.
HP của EnemyTa sẽ vẽ một thanh màu đỏ phía trên mỗi enemy để người chơi ước lượng được % lượng HP còn lại của chúng. Khi khởi tạo Enemy, ta thêm thuộc tính mới cho lớp này: function Enemy(roadX,roadY){ var maxhp = 1000; this.hp = maxhp; // ...c } Vẽ thanh HP: this.draw = function(context){ // ... context.fillStyle = "red"; context.fillRect(this.left,this.top - 5, UNIT_SIZE * this.hp / maxhp, 3); }; Và bổ sung phương thức để kiểm tra xem enemy có dính đạn hay không (mỗi viên đạn được coi là một điểm): this.contain = function(x, y){ return this.left <= x && this.top <= y && this.right >= x && this.bottom >=y; };
Bullet – ĐạnTrong lớp này, ta sẽ xác định hướng di chuyển của mỗi viên đạn từ góc xoay của tower tạo ra nó. Trong đó, ta cũng cần một phương thức để kiểm tra va chạm của đạn với enemy. Khi va chạm xảy ra, ta sẽ trừ HP của enemy dựa vào chỉ số damage của tower:
this.collide = function(damage, enemies){
for(var i = 0; i < enemies.length; i++)
{
var e = enemies[i];
if(!e.isDisposed && e.contain(this.cx, this.cy))
{
e.hp -= damage;
if(e.hp <= 0)
{
e.hp = 0;
e.isDisposed = true;
}
this.isDisposed = true;
return;
}
}
};
Ngoài ra cần đảm bảo rằng tầm bay của đạn không vượt quá phạm vi bắn của tower. Vì vậy trong phương thức update(), ta sẽ lưu lại khoảng cách mà đã bay. Và khi đã vượt qua giới hạn, ta cần hủy nó: this.update = function(){ this.cx += speedX; this.cy += speedY; distance += speed; if(distance >= range) this.isDisposed = true; };
TowerĐây là lớp thay đổi nhiều nhất vì phải thêm các thuộc tính, biến mới:
this.damage = 100; var bullets = []; var lastFired = 0; var fireDelay = 400; // fire rate var target;
Trong đó, biến target giúp lưu trữ đối tượng enemy mà tower đang nhắm vào. Như vậy ta không cần lặp qua để tìm enemy gần nhất mỗi lần update. Chỉ cần kiểm tra khoảng cách giữa tower vừa target, nếu nó nằm ngoài tầm bắn thì ta mới tìm kiếm một enemy khác: this.update = function(enemies){ var targetAngle; if(target) { if(target.isDisposed) target = null; else { // check if the target is within the shooting range var dx = target.cx - this.cx; var dy = target.cy - this.cy; var distance = Math.sqrt(dx * dx + dy * dy); if(distance <= this.shootingRange) { targetAngle = Math.atan2(dy, dx); if(Math.abs(this.angle - targetAngle) < ANGLE_EPSILON) { // fire the enemy var newtick = (new Date()).getTime(); if(newtick - lastFired >= fireDelay) { this.fire(); lastFired = newtick; } } }else // the target is out of shooting range, // we need to find a new target target = null; } } if(!target){ // find the nearest enemy within range for(var x in enemies) { var e = enemies[x]; var dx = e.cx - this.cx; var dy = e.cy - this.cy; var distance = Math.sqrt(dx * dx + dy * dy); if(distance <= this.shootingRange) { targetAngle = Math.atan2(dy, dx); target = e; break; } } } // ... };
|
Html5-Canvas: Viết game Tower Defense – part 3
YinYangIt’s Blog
Ý kiến bạn đọc
Tin tức khác
Html5 – Làm game Battle City
- 6/8/2012
Html5 – WebSocket và Node.js
- 24/7/2012
Html5-Canvas: Viết game Tower Defense – part 4(end)
- 18/7/2012
Html5-Canvas: Viết game Tower Defense – part 2
- 12/7/2012
Html5-Canvas: Viết game Tower Defense – part 1
- 12/7/2012
Html5-Canvas: Viết game Mario – part 5 (end)
- 12/7/2012
HTML5-Canvas: Viết game Mario – Part 4
- 10/7/2012
HTML5-Canvas: Viết game Mario – Part 3
- 10/7/2012
HTML5-Canvas: Viết game Mario – Part 2
- 6/7/2012
HTML5-Canvas: Viết game Mario – Part 1
- 29/6/2012
Tin tiêu điểm
-
Html5 – Canvas: Viết game bắn đại bác – part1 (15,938)
-
Html5 – WebSocket và Node.js (12,376)
-
Html5-Canvas: Viết game Tower Defense – part 1 (8,074)
-
HTML5 – Canvas: Di chuyển đối tượng bằng bàn phím (7,719)
-
Html5-Canvas: Viết game Tower Defense – part 4(end) (7,557)
-
HTML5 – Canvas: Vẽ đồng hồ kim (analog clock) (7,449)
-
Html5-Canvas: Viết game Rắn Săn Mồi (6,770)
-
Html5 – Làm game Battle City (6,593)
-
HTML5-Canvas: Viết game Mario – Part 3 (6,516)
-
Html5-Canvas: Viết game Mario – part 5 (end) (6,497)
Gallery
Text Links
Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Tags
asp.net
JavaScript
Lập trình
Cơ sở dữ liệu
jquery
Csharp
Ajax
Thủ thuật
JavaScript
menu
Sql Server
Lập trình C#
WebService
stty
Sql
Phân trang
Rewrite
Mã hoá
Backup
Thủ thuật lập trình
Store procedure
Accordion
Validation
Store
Upload
Slide
jQueryPlugin
StoreProcedure
Regular Expression
Regex
android
Quick and snow
HTML5
WPF
WCF
Copyright © 2011 - 2012 vietshare.vn
by
phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.