shtange 17 сен 2015 в 23:36

Игра знакомая с детства в реализации на JavaScript

1 мин

47K

JavaScript * Open source * Веб-разработка * Разработка игр *

+39

Комментарии 48

knitevision1 18 сен 2015 в 00:16

Вау. Дизайн красивый, цвета и всё такое. Круто. А почему не захотели рассказать о том, как реализовывали и все такое? Какие-нибудь интересные места в решениях и прочее?

shtange 18 сен 2015 в 08:17

Умение сделать и умение рассказать/объяснить другому, к сожалению не всегда идут в одной связке. У меня с последним «не очень»…

ZoomLS 18 сен 2015 в 00:19

Жаль, что звука нет :)

shtange 18 сен 2015 в 08:23

Согласен, без звука немного «пресно» получается. Озвучивание — первый номер в списке доработок.

НЛО прилетело и опубликовало эту надпись здесь

orcy 18 сен 2015 в 08:07

multik is a lie

chernish2 18 сен 2015 в 03:40

Это, скорее, не «Игра детства», а вариации на тему, посколько:
— без звука
— до счета 4 яйца в оригинале высыпаются по одному, а у Вас — сразу параллельно
— после 10 небольшое увеличение скорости в оригинале
— максимальное количество очков в оригинальной игре — не 1000, а 999
Ну и ссылку на Nintendo не помешало бы.
Но все равно конечно плюс в карму Вам!

chernish2 18 сен 2015 в 05:35

И самое ключевое — ИГРА А / ИГРА Б обязательно должны присутствовать! Бог с ним, с будильником, но это святое!

medvoodoo 18 сен 2015 в 11:09

установка времени обязательно должна быть, когда все элементы показываются.

priv8v 18 сен 2015 в 07:00

Цыпленок из разбитого яйца не убегает и при этом (когда одно яйцо «разбивается») остальные яйца продолжают катится и падать, хотя после разбития яйца должен происходить «рестарт» для них.

Ocelot 18 сен 2015 в 10:17

Там немного хитрее логика была. Заяц наверху — он не просто так, во время игры этот заяц то появляется, то исчезает. Если уронить яйцо без зайца, оно просто разбивается, и получаешь штрафное очко. А если разбить с зайцем — вылупляется (и убегает) цыпленок, и дается всего 1/2 штрафного очка (мигающий символ).

dj_raphael 18 сен 2015 в 20:05

поэтому ставился будильник на +15 минут, как раз к 800 подбираешся и почти минуту все яйца сыпались только половинками

tyderh 18 сен 2015 в 04:45

«Замечательная» типографика: Catch the Ecc

vc54 18 сен 2015 в 04:51

Лайк, если мысленно воспроизводил звуки :-)

gkozlenko 18 сен 2015 в 05:04

Было бы не плохо добавить кнопки для игры на планшете/телефоне. Ещё бы больше походило на оригинал.

beaverBox 18 сен 2015 в 05:24

А для хардварных клав нужно забиндить управление на «1 Q Num* Num9» )) (для стандартных настольных клавиатур).

НЛО прилетело и опубликовало эту надпись здесь

shtange 18 сен 2015 в 08:54

В ближайших планах, добавление модификации для мобильных устройств, где управление будет осуществляться четырьмя навигационными кнопками как в оригинальной игре.

chernish2 18 сен 2015 в 05:33

Подумал, что можно придумать экшен из игр нашего детства, например, собрал 200 яиц — и вместо обнуления потерь на экран вылазит осьминог (с красивой графикой, конечно), и дальше уже водолаз собирает золото, убегая от щупалец. Ну а после 500 — Автослалом-mode.

rafuck 18 сен 2015 в 05:45

Если нужно переместиться по диагонали, приходится жать две кнопки, а не одну, как в оригинале.

shtange 22 сен 2015 в 15:05

Добавлен альтернативный блок управления, подробнее в списке обновлений.

uglock 18 сен 2015 в 05:52

Cool. Nice and clean code.

savostin 18 сен 2015 в 06:26

Чето сложность не увеличивается…

shtange 18 сен 2015 в 08:42

Увеличивается, но достаточно плавно. Ближе к заветной 1000 баллов будет ощутимо сложнее успевать ловить яйца

savostin 18 сен 2015 в 08:44

Мне нужно больше усидчивости…

НЛО прилетело и опубликовало эту надпись здесь

Lopar 18 сен 2015 в 06:32

Волк настолько хорошо прорисован, что не верится, что это та игра. :)

yatagarasu 18 сен 2015 в 07:05

Управление не каноничное.

shtange 18 сен 2015 в 09:02

Реализация «каноничного» управления, с четырьмя навигационными кнопками, запланирована в модификации для мобильных устройств.

Dmitry_Zhariy 18 сен 2015 в 07:10

Очень классно сделано!

Скрипт для прохождения (или тестирования): gist.github.com/dzharii/1fce1ef335d0073c0ded

Откройся!

// https://gist.github.com/ejoubaud/7d7c57cda1c10a4fae8c
Podium = {};

Podium.keypress = function(k) {
    var oEvent = document.createEvent('KeyboardEvent');

    // Chromium Hack
    Object.defineProperty(oEvent, 'keyCode', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     
    Object.defineProperty(oEvent, 'which', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     

    if (oEvent.initKeyboardEvent) {
        oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, k, k, "", "", false, "");
    } else {
        oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, k, 0);
    }

    oEvent.keyCodeVal = k;

    if (oEvent.keyCode !== k) {
        alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
    }

    document.body.dispatchEvent(oEvent);
};


var keyb = {
    up:38, // Up
    right:39, // Right
    down:40, // Down
    left:37 // Left
};



function Play() { 
    var gameWrap = document.getElementById("game-wrap");
    var ds = gameWrap.dataset;

    var eggs = {
        downLeft:   ds["egg-0"], 
        topLeft:  ds["egg-1"], 
        topRight:  ds["egg-2"], 
        downRight: ds["egg-3"]
    };
    console.log(eggs);

    if (eggs.topLeft == 5) {
        Podium.keypress(keyb.left);
        Podium.keypress(keyb.up);
        console.log("topLeft");
    } else if (eggs.downLeft == 5) {
        Podium.keypress(keyb.left);
        Podium.keypress(keyb.down);
        console.log("downLeft");
    } else if (eggs.downRight == 5) {
        Podium.keypress(keyb.right);
        Podium.keypress(keyb.down);
        console.log("downRight");
    } else if (eggs.topRight == 5) {
        Podium.keypress(keyb.right);
        Podium.keypress(keyb.up);
        console.log("topRight");
    }

}
setInterval(Play, 10);

Геймплей:

shtange 18 сен 2015 в 09:24

Спасибо, возьму на заметку.

imbeat 18 сен 2015 в 08:49

Большое спасибо, подняли настроение! Игра — класс!
Позволю себе лишь одно замечание — управление неудобное… чтобы переместить корзину по диагонали, нужно две клавиши нажать. Для меня бы идеальным решением было управление на клавишах типа: [q, a, e, d] или [Num7, Num4, Num9, Num6].
Еще раз большое спасибо! Отправил жене, она тоже в восторге!

shtange 18 сен 2015 в 09:36

Спасибо на добром слове. Отличная идея насчет добавления дополнительного блока управления, чтобы нивелировать проблему с перемещением по диагонали. Постараюсь в ближайшее время интегрировать дополнительный навигационный блок, скорее всего с привязкой к клавишам [Num7, Num4, Num9, Num6].

n43jl 18 сен 2015 в 09:58

На некоторых ноутбуках num-keypad может быть проблемой)

Pulik 18 сен 2015 в 10:07

В оригинале управление было двумя руками, для более полного погружения было бы хорошо если бы управление можно было повесить на разные края клавиатуры, например: [q, a, Num9, Num6]. Тогда можно взять клавиатуру в руки (кроме ноутбуков конечно) и представлять, что держишь настоящую портативку тех времен)

shtange 18 сен 2015 в 12:50

Идея интересная, но не уверен что такая реализация будет востребована. Мне ближе вариант реализации модификации с четырьмя навигационными кнопками для мобильных устройств (по примеру оригинальной игры). Тогда, взяв в руки условный планшет, будет возникать гораздо более близкая аналогия с оригинальным устройством.

RolexStrider 18 сен 2015 в 19:19

Да, например как вариант — QAPL.

shtange 22 сен 2015 в 15:00

Добавлен дополнительный блок управления клавишами [Q, A, E, D].

chernish2 18 сен 2015 в 10:28

Игра «Ну, погоди!» — это, конечно, символ эпохи. Но это далеко не самая крутая игра из всей серии.
А самая крутая — это конечно «Тайны океана», потому что в ней, в отличие от всех остальных, вместо того, чтобы в нужный момент нажимать заданную кнопку, можно самому выбирать стратегию игры: хочешь — набирай золото из сундука (по одному очку), хочешь — таскай его из сундука в лодку (1 + 3 очка), хочешь — бегай под осьминогом на время, хочешь — вообще в лодке сиди (только когда тебя насильно в море сбрасывают уворачивайся от щупалец, и назад, в лодку).
Даже в «Автослаломе» (который, насколько я помню, едиснтвенная оригинальная отечественная игра) нет такой свободы действий!
Хотя, конечно, и эмуляторов Octopus хватает.

shtange 18 сен 2015 в 11:42

Присматриваюсь к игре «Тайны океана». Она несколько более сложная в реализации, но в том что интереснее — согласен полностью. Желание реализовать все три игры из этой серии в наличии, но все упирается в свободное время… его не так много.

chernish2 18 сен 2015 в 12:16

О, игр там не три, а десятки!
Только советских клонов можно десяток вспомнить, а уж оригинальных Nintendo куда больше, взять хотя бы серию про Donkey Kong (особенно вариант-раскладушку с двумя экранами).
Вот тут далеко не все что было: www.emulator3000.org/hq.htm

shtange 18 сен 2015 в 13:01

Перешел по вашей ссылке и вспомнил еще одну замечательную игру в которую доводилось играть — «Весёлый повар». Единственное, с точки зрения реализации она не сильно отличается от «Ну, погоди!». В этом смысле разработка игры по мотивам «Тайны океана» более сложная и соответственно более интересная задача.

zxcabs 18 сен 2015 в 11:59

habrahabr.ru/post/131419

berman 18 сен 2015 в 18:17

Код у вас читабельный и чистенький, вы молодец. Кстати, последнее время избегаю case/switch и вместо него пользуюсь вот таким паттерном

var strategies = {
  one:    breakHead,
  two:    destroyEnemy,
  three:  forgetFriends
}, strategyNotFound = function() { 
  throw new Error("Strategy not found");
}

var proceedWith = strategies[value] || strategyNotFound;

proceedWith();

shtange 18 сен 2015 в 18:52

Какие мотивы побудили вас избегать использования case/switch? И если это возможно, подскажите источник, где можно прочесть обоснование. Спасибо

berman 18 сен 2015 в 20:32

У кейсов есть тенденция «проваливаться», об еще этом говорил Крокфорд в Good parts, да и вообще более функциональный подход — приятнее. Почитать еще статейку от инженера гугла можно тут

maxatwork 20 сен 2015 в 00:16

О, наконец-то мультик в конце игры!

Eltaron 22 сен 2015 в 08:34

Для нетерпеливых: F12 — консоль — «new GameManager().gameWin()». А то меня хватило лишь на 724, но я и в детстве всю не проходил.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий