Как запустить змейку из окон браузера и зачем это нужно

Вы знали, что можно управлять одним окном браузера из другого? Обычно это используют для проверки битых ссылок без iframe, но я пошёл дальше и сделал игру «Змейка», где каждое «яблоко» — это новое окно. В этой статье вы узнаете, как управлять окнами через JavaScript, увидите код и поймёте, как применить это на практике.

Управление окнами браузера: основы

С помощью window.open можно создавать новые окна, задавать их размер и положение, а также ссылаться на них по имени. Главное — получить разрешение пользователя на всплывающие окна. Вот база:

// Открыть новое окно размером 400x300 в позиции (100, 100)
const gameWindow = window.open('', 'game', 'width=400,height=300,left=100,top=100');
// Переместить окно
gameWindow.moveTo(200, 200);
// Изменить размер
gameWindow.resizeTo(500, 400);

Имя окна ('game') позволяет обращаться к нему из любого скрипта. Это ключ к нашей змейке.

Архитектура змейки из окон

Идея проста: каждое «яблоко» — это отдельное окно. Змейка — массив окон, которые двигаются за головой. При съедании яблока создаётся новое окно-голова, а хвост удлиняется. Управление стрелками.

Создание окна-ячейки

function createCell(x, y, isHead = false) {
    const size = 30; // размер окна в пикселях
    const win = window.open('', '', `width=${size},height=${size},left=${x},top=${y}`);
    // Закрашиваем окно: добавляем HTML с цветом
    win.document.write(``);
    win.document.close();
    return win;
}

Движение змейки

Храним массив окон-сегментов. Каждый шаг: создаём новое окно-голову в направлении, удаляем хвост (закрываем окно), сдвигаем массив.

let snake = []; // массив окон
let direction = {x: 1, y: 0}; // начальное направление вправо

function moveSnake() {
    // Получаем позицию головы
    const head = snake[0];
    const headX = head.screenX;
    const headY = head.screenY;
    // Новая голова
    const newHead = createCell(headX + direction.x * 30, headY + direction.y * 30, true);
    snake.unshift(newHead);
    // Если не съели яблоко, удаляем хвост
    if (!ateApple) {
        const tail = snake.pop();
        tail.close();
    }
    ateApple = false;
}

Проверка столкновений и сбор яблок

Яблоки — случайные окна. Если голова совпадает с яблоком, увеличиваем змейку и создаём новое яблоко.

function checkCollision() {
    const head = snake[0];
    const headX = head.screenX;
    const headY = head.screenY;
    // Столкновение со стеной
    if (headX < 0 || headX > window.screen.width || headY < 0 || headY > window.screen.height) {
        return true;
    }
    // Столкновение с собой
    for (let i = 1; i < snake.length; i++) {
        if (snake[i].screenX === headX && snake[i].screenY === headY) {
            return true;
        }
    }
    return false;
}

Полезное применение: проверка ссылок в два окна

Та же техника помогает тестировать сайты с paywall или SPA. Открываем левое окно со списком ссылок, правое — с целевой страницей. Клик в левом — меняем URL в правом. Без iframe, надёжно.

// Левое окно: список ссылок
const listWindow = window.open('list.html', 'list', 'width=300,height=600,left=0,top=0');
// Правое окно: просмотр
const viewWindow = window.open('', 'view', 'width=800,height=600,left=300,top=0');

// Обработчик клика в левом окне
listWindow.document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        viewWindow.location.href = link.href;
    });
});

Что делать прямо сейчас

Откройте консоль браузера и попробуйте создать окно: let w = window.open('', 'test', 'width=200,height=200'); w.document.write('

Привет

');. Затем поэкспериментируйте с перемещением: w.moveTo(100,100). Это первый шаг к вашим мультиоконным приложениям. А если хотите поиграть — запустите змейку (не забудьте разрешить всплывающие окна) и поделитесь рекордом в комментариях!