Viết Game Rắn Ăn Mồi Với 100 Dòng HTML | 5minuteshack

Có thể bạn quan tâm

Chuyển đến nội dung chính

Viết Game Rắn Ăn Mồi với 100 dòng HTML

tháng 4 16, 2018

Tiếp nối chuỗi bài viết Game bằng HTML, ở bài trước chúng ta đã tìm hiểu cách Viết game flappy bird bằng HTML và JavaScript, hôm nay chúng ta sẽ viết 1 game khác đơn giản hơn, đó là Rắn Ăn Mồi. Nếu các bạn đã xem bài Flappy chắc sẽ dễ hiểu code bài này do bài này ta vẫn dùng HTML Canvas để thiết kế game. Đầu tiên các bạn tạo 1 file HTML và nhập đoạn code sau:

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

  html, body {

    height: 100%;

    margin: 0;

}

  body {

    background: black;

    display: flex;

    align-items: center;

    justify-content: center;

}

  canvas {

    border: 1px solid white;

}

</style>

</head>

<body>

<canvas width="400" height="400" id="game"></canvas>

<script>  //Ở đây ta tạo ra bộ khung chứa game 

var canvas = document.getElementById('game');

var context = canvas.getContext('2d');

var grid = 16; // khởi tạo đối tượng rắn là 1 ô vuông

var snake = {

  x: 160, //vị trí của snake theo hướng x,y

  y: 160,

  dx: grid, //hướng di chuyển theo phương x hoặc y,ở đây khi start game   //snake sẽ di chuyển theo x direction với value = 16 

  dy: 0,      

  cells: [],

  maxCells: 4

};

var count = 0;

var apple = {

  x: 320,

  y: 320

};

function getRandomInt(min, max) {

  return Math.floor(Math.random() * (max - min)) + min;

}

// game loop

function loop() { //hàm này giống như setTimeout, sẽ gọi lại hàm loop khi loop thực thi xong

  requestAnimationFrame(loop);

  // slow game loop to 15 fps instead of 60 - 60/15 = 4

  if (++count < 4) {

    return;

}

  count = 0;

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

  snake.x += snake.dx; // mỗi loop rắn sẽ di chuyển thêm 1dx đơn vị

  snake.y += snake.dy;

  // khi snake đụng tường sẽ chạy lại từ edge đối diện

  if (snake.x < 0) {

    snake.x = canvas.width - grid;

}

  else if (snake.x >= canvas.width) {

    snake.x = 0;

}

  if (snake.y < 0) {

    snake.y = canvas.height - grid;

}

  else if (snake.y >= canvas.height) {

    snake.y = 0;

}

  // Phương thức unshift sẽ thêm một hoặc nhiều phần tử vào đầu mảng

  snake.cells.unshift({x: snake.x, y: snake.y});

  // thêm 1 ô vuông phía trc thì phải remove 1 cái phía sau để snake move dc.

  if (snake.cells.length > snake.maxCells) {

    snake.cells.pop();

}

  // draw apple

  context.fillStyle = 'red';

  context.fillRect(apple.x, apple.y, grid-1, grid-1);

  // draw snake

  context.fillStyle = 'green';

  snake.cells.forEach(function(cell, index) {

    context.fillRect(cell.x, cell.y, grid-1, grid-1);

    // snake ate apple

    if (cell.x === apple.x && cell.y === apple.y) {

      snake.maxCells++;

      apple.x = getRandomInt(0, 25) * grid;

      apple.y = getRandomInt(0, 25) * grid;

}

    // check va chạm khi rắn đụng đuôi

    for (var i = index + 1; i < snake.cells.length; i++) {

      // va chạm thì reset game

      if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {

        snake.x = 160;

        snake.y = 160;

        snake.cells = [];

        snake.maxCells = 4;

        snake.dx = grid;

        snake.dy = 0;

        apple.x = getRandomInt(0, 25) * grid;

        apple.y = getRandomInt(0, 25) * grid;

}

}

});

}

//bắt sự kiện bàn phím ấn xuống

document.addEventListener('keydown', function(e) {

  // lọc sự kiện keydown để rắn không di ngược lại

  if (e.which === 37 && snake.dx === 0) {

    snake.dx = -grid;

    snake.dy = 0;

}

  else if (e.which === 38 && snake.dy === 0) {

    snake.dy = -grid;

    snake.dx = 0;

}

  else if (e.which === 39 && snake.dx === 0) {

    snake.dx = grid;

    snake.dy = 0;

}

  else if (e.which === 40 && snake.dy === 0) {

    snake.dy = grid;

    snake.dx = 0;

}

});

requestAnimationFrame(loop);

</script>

</body>

</html>

Chạy file kết quả ta được:

Viết Game Rắn Ăn Mồi với 100 dòng HTML

Chúc các bạn học tốt.

Một vài thủ thuật nhỏ hữu ích khi làm layout website.

Chia sẻ

Nhãn

HTMLGAME JS snakegame Nhãn: HTMLGAME JS snakegame Chia sẻ

Nhận xét

Nặc danhlúc 21:53 25 tháng 5, 2018
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaTrả lời
Neorgelúc 02:44 4 tháng 4, 2019
Wowo, đoạn code rất hay, ad chia sẽ này thật là khâm phục. mong ad sẽ chia sẽ thêm nhiều mã code khác để làm game nâng cao hơngame trùm bắn cá 3d
Trả lờiXóaTrả lời
Nặc danhlúc 23:14 26 tháng 11, 2021
Sao không thể copy được đoạn code đó vậy bạn
Trả lờiXóaTrả lời

Thêm nhận xétTải thêm...

Đăng nhận xét

Bài đăng phổ biến từ blog này

Xdebug, PhpStorm and Docker - Why it not working?

tháng 8 11, 2022 Lately, i start new job with Magento, and while setup IDE for project i face problem with Xdebug, PhpStorm and Docker. It took me a lot of hours to find out and make it work. So i write this post to save some step for you guys also me some way to solve the stuck when we got. 1. How Xdebug work: Link i founded this article with quite easy understand explanation how xdebug work, so spend some minutes to read it, we need to understans the thing we do to easy to solve it. 2: Define Xdebug is installed on server: With php -v you should see Xdebug showed. And with phpinfo() If you dont see it showed, it mean you have not installed it or it not enable Checking if you have enable extension from your php ini. Or if you have not installed it, consider its document: Link . 3. Now if you make sure xdebug installed but your break point at PhpStorm not break, continue these steps: In phpinfo(), make sure xdebug.remote_enable is On cause you are using docker container, also checking... Chia sẻ Đăng nhận xét Đọc thêm

Tổng hợp danh sách các trang web lấy backlink cực tốt (P.1)

tháng 3 17, 2018 Đi backlink trong SEO là điều mà ai cũng phải biết và đầu tư cho nó nhiều nhất. Dưới đây, mình chia sẻ các trang web có thể đi backlink khá tốt cho mọi người. Mỗi ngày các bạn tạo 1 bài post sau đó post lên 10 trang trong tổng số 40 trang này, hôm sau cũng viết 1 bài khác rồi post lên 10 trang kế, khi hết thì quay vòng lại 10 trang đầu, mình sẽ update thêm các website nên các bạn cứ yên tâm không lo hết. (Các bạn nhớ bookmark lại kẻo quên trang mình nha :) ) Nếu các bạn không rõ về DA PA IN-EXTERNAL Links thì xem ở đây: Các chỉ số quan trọng cần biết khi làm SEO ID URL DA PA Internal Links External Links Alexa Global Rank Alexa Local Rank 1 http://diendan.zing.vn/ 63,17 54,5 168 19 701 9 2 http://vatgia.com/ 62,61 57,34 984 23 8086 71 3 http://forum.ueh.edu.vn/ 49,82 38,88 555 43 92060 774 4 http://www.5giay.vn/ 47,12 55,72 445 ... Chia sẻ 22 nhận xét Đọc thêm

5 minute setup Firebase for .NET C#

tháng 7 08, 2021 Step 1: - Access firebase console and create a project: - At the project you just created, go to Firestore Database and create a collection you want: - Next, go to the project setting: - At tab Service account generate your private key. Step 2: - Create a C# project. - Use Nuget to install following packages: - Create folder to store private key. - Finally, the code to make everything run: using Google.Apis.Auth.OAuth2; using Google.Cloud.Firestore; using Google.Cloud.Firestore.V1; using Google.Cloud.Storage.V1; using Grpc.Auth; using Grpc.Core; using System; using System.Collections.Generic; using System.IO; using System.Threading.Tasks; namespace FireBaseConnect { class Program { static void Main(string[] args) { MyFireStore myfs = new MyFireStore(); myfs.GetLicense().Wait(); }... Chia sẻ 7 nhận xét Đọc thêm

Lưu trữ

tháng 8 20231
tháng 6 20231
tháng 8 20221
tháng 7 20211
tháng 3 20191
tháng 8 20181
tháng 7 20182
tháng 6 20181
tháng 4 201817
tháng 3 201826

Nhãn

C# Firebase
CSS
CSS3
flappybird
game
gamecaro
HTML
HTMLGAME
huong dan chrome extension
JS

lap trinh android
magento
mongodb
PUBG
reactjs
seo
snakegame
tản mạn
thuthuatblogspot
xdebug

Hiện thêm

Báo cáo vi phạm

Từ khóa » Game Rắn Săn Mồi Bằng Javascript

Viết Game Rắn Ăn Mồi Với 100 Dòng HTML | 5minuteshack