Viết game flappy bird bằng HTML và javascript (p6)
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (83.48 KB, 6 trang )
Trong bài này chúng ta sẽ thêm 1 số thành phần để game hoàn thiện hơn.
Count The Score
Đầu tiên là thêm phần tính điểm vào game, chúng ta cũng sẽ dùng canvas để vẽ. Ta
thêm các thành phần sau:
var myScore;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myScore = new component("30px", "Consolas", "black", 280, 40, "text");
myGameArea.start();
}
Thành phần "text" định nghĩa canvas này khác canvas rectangle của chim và vật cản,
do đó ta cũng thay đổi trong function component 1 tí
function component(width, height, color, x, y,type) {
this.type = type;
this.gamearea = myGameArea;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
Cuối cùng ta add thêm vài dòng trong updateGameArea, ta sử dụng frameNo để tính
điểm.
Thêm 2 dòng này vào cuối updateGameArea:
myScore.text="SCORE: " + myGameArea.frameNo;
myScore.update();
Refresh lại trang và xem kết quả:
Phần game đến đây cơ bản là hoàn thành rồi đấy chúc mừng các bạn :))))
Trong các phần tiếp theo chúng ta sẽ tìm hiểu thêm các thành phần bổ sung để các bạn
có thể cải tiện game hoàn hảo hơn cũng như dùng để viết các game khác hay hơn.
Chèn hình vào component
Bài này dùng source khác bài trên bạn có thể copy ra file mới để tiện làm thử:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
function moveup() {
myGamePiece.speedY = -1;
}
function movedown() {
myGamePiece.speedY = 1;
}
function moveleft() {
myGamePiece.speedX = -1;
}
function moveright() {
myGamePiece.speedX = 1;
}
function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<div style="text-align:center;width:480px;">
ontouchstart="moveup()">UP</button>
ontouchstart="moveleft()">LEFT</button>
ontouchstart="moveright()">RIGHT</button>
ontouchstart="movedown()">DOWN</button>
</div>
The component constructor uses the built-in image object to draw images onto the
canvas.
</body>
</html>
Để chèn hình vào component, ta thay đổi type của component như ta làm với "text" và
chuẩn bị 1 tấm hình để chèn vào.
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
Trong component ta thêm type image vào:
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
} this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
}
Các bạn nhớ đổi lại src hình thành của bạn.
Kết quả:
Tạm ngưng tại đây nha, mai mình viết tiếp.
