Thứ hai, ngày 5 tháng 12 năm 2016

Html5 – Làm game Battle City

Ngày đăng: 6/8/2012, 10:37:16AM | Lượt xem: 4,907
Hot!

 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)
 
 
 
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;
	}
}
 
YinYangIt’s Blog
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.