Source code và hướng dẫn làm game snake chỉ bằng Javascript

Bài viết hướng dẫn các bạn làm game snake đơn giản bằng HTML + CSS + Javascript, chỉ cần có hiểu biết cơ bản về 3 ngôn ngữ này (chủ yếu là JS) là có thể tạo được game này rồi nhé. Bài viết chủ yếu hướng đến mục đích học tập.

Phần giao diện game

HTML

Để bắt đầu, chúng ta sẽ tạo một canvas với chiều dài, chiều rộng thích hợp. Phần bên trong canvas cho phép con rắn di chuyển ăn mồi

<canvas id="stage" height="400" width="520"></canvas>

CSS

Tiếp theo, thêm một số thuộc tính CSS cho canvas để làm nổi bật vùng giới hạn:

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

Ngoài ra các bạn cũng có thể thêm background cho game trong đẹp mắt hơn nhé.

Phần chuyển động là logic của game

JAVASCRIPT

Để điều khiển sự di chuyển của con rắn, chúng ta sử dụng 4 phím lên, xuống, phải, trái. Gán các phim này với các string cho code dễ viết và đọc:

Keyboard.Keymap = {
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down'
    };

// Keydown Event
document.onkeydown = function(event) {
    self.pressKey = event.which;
};

// Get Key
this.getKey = function() {
  return this.keymap[this.pressKey];
};

Hiển thị mồi, logic rắn ăn mồi sử dụng trục toạ độ x, y:

this.stage.food = {
    x: Math.round(Math.random() * (this.stage.width - this.stage.conf.cw) / this.stage.conf.cw), 
    y: Math.round(Math.random() * (this.stage.height - this.stage.conf.cw) / this.stage.conf.cw), 
};

// Logic of Snake food
if (nx == snake.stage.food.x && ny == snake.stage.food.y) {
  var tail = {x: nx, y: ny};
  snake.stage.score++;
  snake.initFood();
} else {
  var tail = snake.stage.length.pop();
  tail.x   = nx;
  tail.y   = ny;	
}
snake.stage.length.unshift(tail);

// Draw Food
this.drawCell(snake.stage.food.x, snake.stage.food.y);

Lấy vị trí con rắn hiện tại theo trục x, y:

// Snake Position
var nx = snake.stage.length[0].x;
var ny = snake.stage.length[0].y;

Khởi tạo các giá trị cho game khi bắt đầu màn chơi:

/**
* Game Snake
*/
Game.Snake = function(elementId, conf) {

// Sets
var canvas   = document.getElementById(elementId);
var context  = canvas.getContext("2d");
var snake    = new Component.Snake(canvas, conf);
var gameDraw = new Game.Draw(context, snake);

// Game Interval
setInterval(function() {gameDraw.drawStage();}, snake.stage.conf.fps);
};

Trên đây là hướng dẫn cơ bản những phần quan trọng nhất của game. Để xem toàn bộ source code, các bạn có thể tải ở dưới đây. Phần demo kèm theo giúp bài hướng dẫn trở nên thú vị hơn nhé.

Demo và download

Nguồn: https://www.htmlhints.com/article/59/snake-game-build-by-using-only-javascript