Viết game flappy bird bằng HTML và JavaScript (P.7)

Cảm ơn các bạn vì đã kiên trì xem đến đây, hôm nay chúng ta sẽ tiếp tục với chuỗi bài Viết game flappy bird bằng HTML và JavaScript, vừa viết game vừa nâng cao kiến thức HTM và JS.
Giờ chúng ta sẽ thử thêm âm thanh vào game.

Game Sound

Chúng ta sẽ sử dụng HTML5<audio> để add sound và music vào trong game. Khi con chim đụng vào vật cản chúng ta sẽ phát ra 1 âm thanh tạch :)). Chúng ta sẽ cần 1 object constructor cho sound:

Đây sẽ là source code cho bài này:

<!DOCTYPE html>

<html>

<head>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

</head>

var myGamePiece;

var myObstacles = [];

var mySound;

function startGame() {

myGamePiece = new component(30, 30, "red", 10, 120);

mySound = new sound("bounce.mp3");

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);

stop : function() {

clearInterval(this.interval);

clear : function() {

this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

}

function component(width, height, color, x, y) {

this.width = width;

this.height = height;

this.speedX = 0;

this.speedY = 0;

this.x = x;

this.y = y;

this.update = function() {

ctx = myGameArea.context;

ctx.fillStyle = color;

ctx.fillRect(this.x, this.y, this.width, this.height);

}

this.newPos = function() {

this.x += this.speedX;

this.y += this.speedY;

}

this.crashWith = function(otherobj) {

var myleft = this.x;

var myright = this.x + (this.width);

var mytop = this.y;

var mybottom = this.y + (this.height);

var otherleft = otherobj.x;

var otherright = otherobj.x + (otherobj.width);

var othertop = otherobj.y;

var otherbottom = otherobj.y + (otherobj.height);

var crash = true;

if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {

crash = false;

}

return crash;

}

function updateGameArea() {

var x, height, gap, minHeight, maxHeight, minGap, maxGap;

for (i = 0; i < myObstacles.length; i += 1) {

if (myGamePiece.crashWith(myObstacles[i])) {

mySound.play();

myGameArea.stop();

return;

}

myGameArea.clear();

myGameArea.frameNo += 1;

if (myGameArea.frameNo == 1 || everyinterval(150)) {

x = myGameArea.canvas.width;

minHeight = 20;

maxHeight = 200;

height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);

minGap = 50;

maxGap = 200;

gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);

myObstacles.push(new component(10, height, "green", x, 0));

myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));

}

for (i = 0; i < myObstacles.length; i += 1) {

myObstacles[i].x -= 1;

myObstacles[i].update();

}

myGamePiece.newPos();

myGamePiece.update();

}

function sound(src) {

this.sound = document.createElement("audio");

this.sound.src = src;

this.sound.setAttribute("preload", "auto");

this.sound.setAttribute("controls", "none");

this.sound.style.display = "none";

document.body.appendChild(this.sound);

this.play = function(){

this.sound.play();

}

this.stop = function(){

this.sound.pause();

}

function everyinterval(n) {

if ((myGameArea.frameNo / n) % 1 == 0) {return true;}

return false;

}

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>

<button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>

</div>

<p>Turn up the volume. Do you hear a "dunk" when the red square hits an obstacle?</p>

</body>

</html>

Các bạn nhớ sửa file mp3 thành của bạn, sau đó refresh lại trang bật loa và test thử.

Background Music

Việc thêm background music đơn giản hơn nhiều, chúng ta chỉ cần khởi tạo 1 sound object nữa và khởi chạy khi game bắt đầu.

var myGamePiece;
var myObstacles = [];
var mySound;
var myMusic;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    mySound = new sound("bounce.mp3");
    myMusic = new sound("gametheme.mp3");
    myMusic.play();
    myGameArea.start();
}

5minuteshack

Tìm kiếm Blog này