SNAKE

by Alexander Shpak

HTML

<canvas id="snake"></canvas>

CSS

#snake {
    border: 1px solid #666;
    background: #696;
}

JavaScript

function update(direction, snake, apple) {
    var eaten = false,
        gameover = false,
        prev = snake[0],
        current = {'x': snake[0].x + direction.x, 'y': snake[0].y + direction.y};

    // Обработка выхода за границы поля
    if (current.x === 15) current.x = 0;
    if (current.x === -1) current.x = 14;
    if (current.y === 10) current.y = 0;
    if (current.y === -1) current.y = 9;

    // Проверка на столкновение с собой
    for (var i = 1, len = snake.length; i < len; i++) {
        if (current.x === snake[i].x && current.y === snake[i].y) {
            gameover = true;
            break;
        }
    }

    // Обновление позиции головы змейки
    snake.unshift(current);

    // Проверка на съедание яблока
    if (current.x === apple.x && current.y === apple.y) {
        eaten = true;
        apple.x = Math.floor(Math.random() * 15);
        apple.y = Math.floor(Math.random() * 9);
    } else {
        // Удаление хвоста, если яблоко не съедено
        snake.pop();
    }

    // Обработка конца игры
    if (gameover) {
        alert('GAME OVER!');
        location.reload();
    }
}

function draw(context, snake, apple) {
    // Очистка canvas
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);

    // Отрисовка змейки
    for (var i = 0, len = snake.length; i < len; i++) {
        context.fillStyle = (i === 0) ? '#000' : '#666';
        context.fillRect(snake[i].x * 32, snake[i].y * 32, 32, 32);
    }

    // Отрисовка яблока
    context.fillStyle = '#933';
    context.fillRect(apple.x * 32, apple.y * 32, 32, 32);
}

function main() {
    var canvas = document.getElementById('snake'),
        context = canvas.getContext('2d'),
        snake = [{'x': 5, 'y': 3}, {'x': 4, 'y': 3}, {'x': 3, 'y': 3}],
        direction = {'x': 1, 'y': 0},
        apple = {'x': Math.floor(Math.random() * 15), 'y': Math.floor(Math.random() * 9)};

    canvas.width = 480;
    canvas.height = 320;

    alert('GET READY!');

   ...