Метка «Canvas» - 5

Изометрический сапёр на LibCanvas (html5)
Этот топик будет отличаться от предыдущего топика Классический сапёр на html5 и LibCanvas. Его даже, скорее, можно назвать продолжением. И первая часть содержала пошаговую и детальную инструкцию, как заставить работать игрушку, то в этой части будет пару интересных приёмов, как её «оказуалить».

Играть в изометрический «Сапёр»


Если вы новичёк в этом деле, то стоит начинать с первой части. Для тех, кто хочет углублятся я рассмотрю следующие темы на примере изометрического сапёра, построеного на базе LibCanvas:

  • Изометрическая проекция
  • Оптимизация скорости отрисовки через грязный хак
  • Спрайтовые анимации
  • Draggable слои
  • Оптимизация обработчика мыши согласно особенностей приложения

Читать полностью »

Необходимо к проекту подключить Google Chrome Frame. Проект полностью на Canvas, огромные полотна. Всё отлично, он всё подхватывает, если бы не одна проблема. <canvas> работает ровно до того момента, пока его площадь не перевалит за 216. То, есть, скажем, холст размером 256*256 — работает без малейших нареканий. Стоит поставить размер 257*256 — отрисовка не происходит или происходит только один раз.

Проверял на IE7 и IE8.

Вот ссылка для теста: theshock.github.com/trash/chrome-frame-fail.html

Вот пример того, как оно выглядит в IE8:
Google Chrome Frame и большой Canvas

Читать полностью »

Классический сапёр на html5 и LibCanvas

В этой статье я пошагово расскажу, как писать самый обычный, классический сапёр при помощи Html5 Canvas, AtomJS, и тайлового движка LibCanvas.
Читать полностью »

Возможно заголовок слишком кричащий, муза по заголовкам меня покинула. И, да, здесь не будет японских роботов и сюжета фильмов где эти же роботы захватывают мир. Но здесь будет искусственный интеллект (ИИ), так как ИИ можно считать присутствующим, если при принятии решения используется оценочная функция. А она будет в нашем алгоритме поиска пути. И, да, это будет моделирования спасательной операции, заключаться будет в том, что команде спасателей нужно обойти всё здания (все комнаты), найти там людей (который по задумке автора сами спастись не могут) и вывести их из здания. Реализовано все будет на JavaScipt, Canvas, и немного PHP для работы с базой. Думал сначала сделать статью в стиле своей последней, то есть обсуждаем именно JavaScript, но не хочу повторятся, так что здесь скорее всего пройдемся по архитектуре самой программы (да, зразу скажу, если может кто очень ждет вторую часть змейки, она в процессе, в комментариях по этому поводу ничего нового не скажу). С бюрократией вроде бы все, приступим.
Читать полностью »

Крис Тейлор, известный миру игрохитами Total Annihilation и Supreme Commander, явил миру свою новую разработку, пока что носящую рабочее имя Project Mercury. Игровая технология, которая легла в основу — strategic zoom. Впервые подобная технология была, если не ошибаюсь, применена в игре M.A.X. 2, вышедшей в 1998м году. Крис же выжал из нее все возможное и, благодаря ему, теперь «классические» RTS игры вызывают ощущение клаустрофобии, запертости в «маленьком экране».
И теперь Крис предлагает использовать эту технологию на «рабочем столе», называя его Infinite Desktop. О проекте лучше всего расскажет его автор:

Читать полностью »

Статья с тэгом «обучающий материал». С нуля, поэтому будем писать свой не сложный (для начала) физический движок и сразу же не сложную игру (я выбрал змейку) на нем. Но статья скорее будет не об этом, так как это не такое уж и сложное задание, а о том, как это все будет на JavaScript, причем с максимально красивым (правильным) кодом (жду, что все что можно сделать еще лучше вы опишите в комментариях). «А в ответ полетели спелые помидоры..». Начнем.
(кто дочитал аж до сюда, держите печеньки, управления стрелками влево-вправо):
вот что будет: в части один
и это же (dev-mode)
Читать полностью »

image

HTML 5 в браузерах и HTML 5 для Windows 8 Metro в настоящее время серьезные кандидаты для разработки современных игр.

Используя Canvas, вы имеете доступ к аппаратным ускорениям пространства, и если использовать некоторые советы и приемы, то сможете достигнуть великолепных 60 кадров в секунду.

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

Целью данной статьи является показать вам некоторые трюки, которые помогут получить максимальную мощность от HTML 5 Canvas.

В следующих главах Я буду использовать примеры, чтобы продемонстрировать концепции о которых Я хочу рассказать. Образецом будет 2D туннельный эффект, который я написал для Coding4Fun и представил на TechDays 2012 году во Франции (http://video.fr.msn.com/watch/video/techdays-2012-session-technique-coding4fun/zqy7cm8l).

Этот эффект в основном вдохновлен ​​кодом Commodore Amiga, который я написал, когда был молодым демомейкером в 80-х.

Используется только canvas и JavaScript (когда-то исходный код был только ассемблере 68000):

image
Читать полностью »

Существует не слишком широко известная браузерная игра. Игровой процесс в ней очень простой и монотонный, что способствует появлению ботов. Для борьбы с ними в игру введена капча, время от времени вылезающая во время боя. На угадывание даётся 50 секунд, если угадать за 20, то дадут дополнительный бонус. Капч два вида: «Угадай пони» и «Пройди лабиринтик». С угадыванием пони проблем у меня обычно не возникало, а вот пройти лабиринт за 20 секунд — задача не всегда тривиальная. И я задумался, а нельзя ли написать Userscript, который бы самостоятельно проходил лабиринт и сообщал мне правильный ответ…
Читать полностью »

в 8:45, , рубрики: canvas, javascript, pusher, sokoban, метки: , ,

За последнюю неделю на хабре было столько графики на canvas, и мне тоже захотелось поучаствовать в публикование топиков на эту тему. В силу дефицита времени было решено писать в перерывах на работе, а заодно посмотреть справлюсь ли я с поставленной для себе задачей занимаяь ею «между делом».
Sokoban в 4 часа
Читать полностью »

Темными морозными вечерами, когда работы с каждым днём до Нового года становится всё больше, а времени до самого Нового года всё меньше… в общем, за три таких вечера, чтобы хоть как-то отвлечься, связали для вас игру

image

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js