Как стать автором
Обновить

Гоночка на JavaScript (30 строк кода)

Время на прочтение2 мин
Количество просмотров94K
В продолжение недели ненормального программирования (как заметил phpcmsdev) решил написать игру в 30 строк кода. Так как тетрис, змейка и арканоид уже были сделаны, выбор пал на гоночки, которые входили в стандартный набор портативной игры.



Ссылка на fiddle.

(function(elid, width, height, speed, strength){
    var canvas = document.querySelector(elid),
            ctx = canvas.getContext("2d"),
            pos = 0, blocks = [];
    canvas.width = width; canvas.height = height;
    ctx.fillStyle = "black";
    var game = setInterval(function(){
        if( Math.random() < strength) blocks.push([Math.random()*(width-10),-10]);
        ctx.clearRect(0,0,width,height);
        ctx.fillRect(pos,height-50,10,40);
        for(var i = 0; i < blocks.length; i++){
            ctx.fillRect(blocks[i][0],blocks[i][1],10,10);
            if( blocks[i][1] > height - 60 && blocks[i][1] < height - 10 && Math.abs( pos - blocks[i][0]) < 10 ){
                clearInterval(game);
                alert("Game over. You have " + Math.floor(1000 * strength) + " points.");
            }
            if( blocks[i][1] > height - 5 ){
                blocks.splice( i, 1);
                i--;
            } else {
                blocks[i][1] += 5;
            }
        }
        strength += 0.001;
    },speed);
    document.addEventListener('mousemove', function (e) {
        pos = (e.pageX > 0) ? ((e.pageX < width) ? e.pageX : width-10) : 0;
    }, false);
})("#canvas",400,300,33,0.05);


Особенности



  • По настоящему 30 строк кода: 1 строка HTML, 29 строк JavaScript. Правда без оборачивания в тег <script>, но думаю это допущение не такое страшное :).
  • Canvas. Я люблю Canvas! Рисовать на canvas простые фигуры однозначно проще, чем двигать div-ы. Получается не так красиво, зато не нужно лишний раз беспокоиться о смещениях элементов.
  • Возрастающая сложность и очки. На самом деле это одна переменная, но кому какая разницы как считаются очки? Главное же что бы побольше было!
  • setInterval. Отказаться от requestAnimationFrame было решено не столько из-за лишней строчки, сколько из-за того что логика игры описана вместе с отрисовкой.


Заключение



Спасибо jeston за информацию о Тетрисе, zag2art за перевод о Excel, DjComandos за Змейку и linoleum за Арканоид.

Ребята, занимайтесь нормальным программированием.

UPD


Пользователь MinimaJack в свою очередь прислал вариант игры Ball, но не может запостить сам в силу объективных причин.

Ссылка на fiddle.

Теги:
Хабы:
Всего голосов 107: ↑83 и ↓24+59
Комментарии67

Публикации

Истории

Работа

Ближайшие события

2 – 18 декабря
Yandex DataLens Festival 2024
МоскваОнлайн
11 – 13 декабря
Международная конференция по AI/ML «AI Journey»
МоскваОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань