Страницы

Поиск по вопросам

среда, 12 июня 2019 г.

Игра на javascript

Суть игры: произвольная фигура (circle, square, triangle, rhombus) движется слево направо в игровом поле 80% от ширины браузера. Когда игрок нажимает на фигуру она исчезает, очки добавляются к счету (от 0 до 100 очков, в зависимости от того, насколько далеко фигура успела сместится от левого края). Следующая произвольная фигура начинает движение. Пока получилось так (неправильно и совсем по-дилетантски):
$("#circle").animate({ left: '100%' }, 7000 ); $("#rhombus").hide(); $("#circle").click(function(){ $(this).hide(); $("#rhombus").show().animate({ left: '100%' }, 7000 ); $('#count').html(+$('#count').html()+1); }); body { text-align: center; background: #F0EFEE; color: #777; } #count { position: fixed; display: inline-block; float: left; padding: 10px 20px; background: #fff; font: 1.5rem/1 monospace; border-radius: .25rem; box-shadow: 0 2px 2px rgba(0, 0, 0, .2); z-index:20; left:20px; top:15px; } .linear { display: inline-block; position: relative; margin: 20px 16px 20px 20px; width: 80%; height: 400px; background:white; } #left { background: #F0EFEE; width: 10%; height: 100%; top:0; left:0; position: fixed; z-index:15; } #right { background: #F0EFEE; width: 11%; height: 100%; top:0; left:89%; position: fixed; z-index:15; } #circle { position: absolute; width: 45px; height: 45px; left: 0; top: 150px; border-radius: 50%; background: #F6AC31; } #rhombus { border-style: solid; border-color: transparent transparent #00BFFF transparent; border-width: 0 15px 15px 15px; height: 0; width: 30px; left: 0; top: 150px; position: absolute; } #rhombus:after { content: ""; position: absolute; top: 15px; left: -15px; width: 0; height: 0; border-style: solid; border-color: #00BFFF transparent transparent transparent; border-width: 40px 30px 0 30px; }

0

https://jsfiddle.net/gc0jv3s8/1/


Ответ

Обычно стоит разбивать логику на вспомогательные и оборачивать это в функции (методы) для выделения общей логики по работе с элементами с одинаковым поведением..
Например вот несколько оберток в виде функций:
getRandomInt - дает рандомный выбор элементов из массива. На данный момент он состоит из двух: ['circle', 'rhombus'];. Но можешь добавлять неограниченное их количество (в соответствии с их существованием, конечно). init - для любой начальной инициализации. На данный момент там прячутся все фигуры, чтобы не было видно. Хотя это можно сделать в CSS, но данная функция призвана показать, что возможны и должны быть сделаны какие-либо действия до основной игры. spawn - собственно делает порождение элементов:
берет рандомный индекс из массива элементов определяет его идентификатор. Так как мы знаем его индекс в массиве, то его идентификатор будет равен # плюс имя, которое мы достали из массива по индексу. запускает саму анимацию навешивает слушателя клика на элемент с данным идентификатором. on - прикрепляет событие к элементу. Причем прикрепляет это к динамически созданному элементу. Хотя в данном случае это не обязательно....Хотя....Обязательно!)) При клике на выбранный элемент
открепляем событие клика (off). Зачем нам плодить событие? останавливаем анимацию (stop) возвращаем элемент в начальную позицию прячем заново запускаем генерацию spawn

Пример кода смотрим ниже:
var elements = ['circle', 'rhombus']; function init() { $('.linear > i').hide(); } function spawn() { var elNum = getRandomInt(0, elements.length); var elId = "#"+(elements[elNum]); $(elId).show().animate({ left: '100%' }, 7000 ); $(document).on('click', elId, function(){ $(document).off('click', elId); $(this).stop( true, true ).css('left', 0).hide(); $('#count').html(+$('#count').html()+1); spawn(); }); } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } init(); spawn(); body { text-align: center; background: #F0EFEE; color: #777; } #count { position: fixed; display: inline-block; float: left; padding: 10px 20px; background: #fff; font: 1.5rem/1 monospace; border-radius: .25rem; box-shadow: 0 2px 2px rgba(0, 0, 0, .2); z-index:20; left:20px; top:15px; } .linear { display: inline-block; position: relative; margin: 20px 16px 20px 20px; width: 80%; height: 400px; background:white; } #left { background: #F0EFEE; width: 10%; height: 100%; top:0; left:0; position: fixed; z-index:15; } #right { background: #F0EFEE; width: 11%; height: 100%; top:0; left:89%; position: fixed; z-index:15; } #circle { position: absolute; width: 45px; height: 45px; left: 0; top: 150px; border-radius: 50%; background: #F6AC31; } #rhombus { border-style: solid; border-color: transparent transparent #00BFFF transparent; border-width: 0 15px 15px 15px; height: 0; width: 30px; left: 0; top: 150px; position: absolute; } #rhombus:after { content: ""; position: absolute; top: 15px; left: -15px; width: 0; height: 0; border-style: solid; border-color: #00BFFF transparent transparent transparent; border-width: 40px 30px 0 30px; }

0


На самом деле дорабатывать и улучшать тут можно еще много. Но как черновик для начала - достаточно.
Вообще хочу напомнить, что для анимации (особенно для игры) скорее лучше использовать setInterval, а то и вовсе requestAnimationFrame. И скорее не элементы DOM дерева, а canvas и WebGL.

Комментариев нет:

Отправить комментарий