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

Chúng ta tiếp tục với chuỗi bài viết game bằng HTML và JS, qua các bài trước chúng ta đã tạo được các thành phần cần thiết cho game rồi, giờ sẽ đến lúc điều khiển các thành phần này.

Game Controllers

Giờ chúng ta sẽ tìm cách điều khiển con chim màu đỏ cho nó di chuyển chứ không auto move nữa.

Chúng ta sẽ thêm vào 4 button Up Right Bottom Left và viết hàm để điển khiển con chim đi theo hướng mà các button được nhấn.

Chúng ta thêm 2 properties mới vào trong component constructor, đặt là speedX và speedY, hai properties này sẽ là giá trị position cộng vào của con chim khi nhấn button.

Thêm 1 function nữa vào component, newPos() được sử dụng để thay đổi giá trị x,y hiện tại của con chim thành giá tri mới.

Sau cùng bỏ funtion newPos() vào trong hàm updateGameArea.

Thực hành trong code:

Trong component ta thay đổi như sau:

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;        

    }    

}

Trong updateGameArea:

function updateGameArea() {

    myGameArea.clear();

    myGamePiece.newPos();    

    myGamePiece.update();

}

Thêm các function khi nhấn nút:

function moveup() {

    myGamePiece.speedY -= 1; 

}

function movedown() {

    myGamePiece.speedY += 1; 

}

function moveleft() {

    myGamePiece.speedX -= 1; 

}

function moveright() {

    myGamePiece.speedX += 1; 

}

Trong  phần html ta thêm 4 button:

<div style="text-align:center;width:480px;">

  <button onclick="moveup()">UP</button><br><br>

  <button onclick="moveleft()">LEFT</button>

  <button onclick="moveright()">RIGHT</button><br><br>

  <button onclick="movedown()">DOWN</button>

</div>

<p>If you click a button the red square will start moving. Click the same button many times, and it will move faster and faster.</p>

Khi xong các bạn refresh lại trang và test kết quả, khi nhấn button con chim sẽ bay hoài hướng đó là do ta thay đổi:speedX hay speedY nên mỗi lần game update  this.x += this.speedX; this.y += this.speedY; thì nó cứ chạy hoài. Chúng ta sẽ cải tiến nó trong phần kế.

Stop Moving

Để dừng con chim khi bỏ press button, chúng ta cần thiết lập 1 hàm để set speedX, speedY lại 0 khi thả chuột ra.

Ta thêm hàm này vào script:

function clearmove() {

    myGamePiece.speedX = 0; 

    myGamePiece.speedY = 0; 

}

Sửa 4 button lại 1 tí:

<div style="text-align:center;width:480px;">

  <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>

  <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>

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

  <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>

</div>

ontouchstart để sử dụng trên các màn hình cảm ứng.

Các bạn refresh lại trang và test lại kết quả, giờ ngon hơn rồi phải không :))

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