shpaker Apr 29 2011 at 08:31

Canvas: пятнадцать минут на пятнашки

4 min

46K

JavaScript *HTML *Canvas *

Tutorial

+45

Comments 51

de_arnst Apr 29 2011 at 10:01

А зачем вы используйте

var context = canvas.getContext(«2d»);
в двух функциях anim и init?

shpaker Apr 30 2011 at 07:50

Правда ваша. В anim контекст излишен) Исправил

BAN May 4 2011 at 12:18

Если следовать посту, то в anim контекст необходим

shpaker May 8 2011 at 13:46

Вообще убил в тексте anim. Когда торопишься на некоторые вещи иногда не обращаешь внимания, и как показала практика совершенно напрасно )

guyfawkes Apr 29 2011 at 10:13

Зачем перерисовывать поле каждые 20 (в вашем случае) мс? Не лучше ли было бы перерисовывать при непосредственно перемещении плитки? Зачем функции, которая передается в setDraw, параметры-координаты? Или я неверно понял логику?

TheShock Apr 29 2011 at 11:56

Поле вообще не надо перерисовывать) Надо зарисовать старую пятнашку и нарисовать новую ;)

guyfawkes Apr 29 2011 at 12:37

Это-то в идеале) Код вообще, что называется, оставил ряд вопросов после себя.

shpaker Apr 30 2011 at 07:53

Ряд вопросов? )) Задавайте. Пытался писать как можно проще. Поле неоправданно перерисовываю каждый раз признаю, но это скорей издержка того что задумывались пятнашки более продвинутыми и в них перерисовка была просто необходима. Но в итоге было решено всё упростить и оставить так как описано в посте.

onix74 Apr 29 2011 at 10:15

Спасибо! Вспомнил детство :)

pomkaster Apr 29 2011 at 13:53

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

TheShock Apr 29 2011 at 14:06

Да, такие позиции есть. В итоге, насколько я помню, можно собрать один из двух вариантов:

ibnteo Apr 29 2011 at 23:18

Нет не собираемых позиций.

ibnteo Apr 29 2011 at 23:53

Хотя нет, ошибся я, одна всё же есть, указанная на первой картинке: «Можно показать, что ровно половину из всех возможных 1 307 674 368 000 (=15!) начальных положений пятнашек невозможно привести к собранному виду»

Ogra Apr 29 2011 at 10:21

Собрал махом.
А с пятнашками из комплекта Portal 2 несколько дней мучаюсь ;)

Spavvn Apr 29 2011 at 11:55

А я их успел собрать, пока игра устанавливалась :)

somniator Apr 29 2011 at 10:24

Спасибо, вспомнил цитату с башорга:
Удивительное это дело — прогресс. Чтобы набрать и распечатать одну
страничку красиво оформленного текста мне уже не хватает мощности
компьютера, который с легкостью может управлять двумя тысячами советских
боевых спутников одновременно.
Я к тому, что страница загружает одно ядро на 100%. И это всего лишь пятнашки.

+10

TheShock Apr 29 2011 at 11:55

Ну, код для обучения сгодиться. То же самое при помощи LibCanvas.Engines.Tiles можно сделать на Canvas с меньшим кодом и с близкой к нулевой загрузкой проца)

widowmaker Apr 29 2011 at 10:36

А зачем вообще канву использовать? Даёшь пятнашки на дивах!

mihmig Apr 29 2011 at 10:39

А добавьте таблицу рекордов вида:
md5(начальная позиция), время*клики ник.

shpaker Apr 30 2011 at 07:55

Поздно уже добавлять, но учту ваше пожелание на будущее.
Кстати в блоге к Пятнашкам комменты все в рекордах.

aL13n Apr 29 2011 at 11:28

Не хватает возможности перетаскивать несколько пятнашек на одной линии, приходится порой делать целых три клика вместо одного :)

shpaker Apr 30 2011 at 07:57

Я изначально так и делал. Но без анимации как-то это убого выглядело и потому убрал. Зря наверное, но уже сделано )

ankh1989 Apr 29 2011 at 11:32

Какие NP-полные задачи решают эти пятнашки? Они грузят двух-ядерный процессор на 50%.

serjoga Apr 29 2011 at 12:01

Я думаю неважно на сколько грузится процессор, так как идея у автора была совсем другая.
Первое: вспомнить детство и реализовать старую добрую игру на компьютере.
Второе: проверить свои силы в JavaScript + Canvas, может узнать чего-то новое.

TheShock Apr 29 2011 at 12:03

Видимо, также, третье: рассказать основы рисования на Canvas)

shpaker Apr 30 2011 at 07:59

Чистая правда. И первое, и второе, и третье ))

TheShock Apr 29 2011 at 11:58

На фотке с айФоном лампу надо было ставить под сильным углом, тогда тени стали бы такими, что цифры можно было бы прочитать)

shpaker Apr 30 2011 at 08:01

А вообще произведение не моё. Но идея мне нравится )) тов.hobbeat'у респект за фото

mr_avi Apr 29 2011 at 12:25

Делать было нечего, сделал простелькие пятнашки на дивах :)

de_arnst Apr 29 2011 at 12:48

Ох, завидую я вам, вам делать было нечего…

TheShock Apr 29 2011 at 12:50

Вижу, ищете стиль и стараетесь делать по уму. Впринципе, неплохо, но кое-где перепроектировали, а кое-где — недопроектировали ;)

regisrty => registry.

var div = $("<div dir='{blockId:"+index+"}'/>");
// Лучше через второе свойство добавлять аттрибуты
var div = $("<div />", { dir:  dir='{blockId:'+index+'}'});

$.each(regisrty.getOption('block').css, function(property, value) {
    div.css(property, value);
}.bind(this));

//  =>
div.css(regisrty.getOption('block').css);

div.css('float', 'left');
div.css('border', '1px solid #000');
div.css('width', regisrty.blockSize - 2);
div.css('height', regisrty.blockSize - 2);

// =>
div.css({
    float : 'left',
    border: '1px solid #000',
    width : registry.blockSize - 2,
    height: registry.blockSize - 2
})

Хотя, такие вещи лучше вынести в CSS.

if (0 == index) {
// =>
if (!index)

$(div).click(function() {
    this.processEvent(div);
}.bind(this));
// =>
$(div).click(this.processEvent.bind(this, div));

this.processEvent так и проситься рефакторинга. Проглядывается копипаст шаблон:

if (typeof stack[column][value] != 'undefined' && stack[column][value] == 0) {
    stack[column][value] = stack[column][row];
    stack[row] = 0;
}

Вместо typeof stack[column][row+1] != 'undefined' лучше пишите stack[column][row+1] != null. В вашем случае суть та же, а захламление кода меньше. Тем более реальная проверка на 'undefined' практически никогда не нужна.

this.init = function() {
    $.each(this.options.css, function(property, value) {
        $('#' + this.options.id).css(property, value);
    }.bind(this));
    
    this.paint();
}
// => 
this.init = function() {
    $('#' + this.options.id).css(this.options.css);
    this.paint();
}

Идея с флагом — не очень, проверяете одно и то же:

var finish = false;
while (!finish) {
    r = Math.round(Math.random() * 15);
    
    if ( !localStack[r] && 0 != localStack[r] ) {
        localStack[r] = r;
        finish = true;
    }
}
// =>
while (true) {
    r = Math.round(Math.random() * 15);
    
    if ( !localStack[r] ) {
        localStack[r] = r;
        break;
    }
}

getDiv() — плохое название. А если пятнашка станет spanом? getCell/getItem/getElement, что-то типа такого.

mr_avi Apr 29 2011 at 14:00

Ого, спасибо:)
Сначала старался сделать правильно, потом уже просто лишь бы работало.

TheShock Apr 29 2011 at 14:12

Обращайтесь) Рад помочь всем, кто серьёзно изучает JavaScript)

TheShock Apr 29 2011 at 14:12

ps. Можно в джаббер

shpaker Apr 30 2011 at 08:03

Мне понравилось) Прикольно вышло

TheShock Apr 29 2011 at 12:53

И да, bind — штука прикольная, но лучше добавить обратную совместимость, ибо даже в третьем фоксе пятнашки уже не работают.

guyfawkes Apr 30 2011 at 09:08

Кстати, такой вопрос: есть ли библиотека/модуль с подобной поддержкой обратной совместимости для всех или большинства нововведений? Может, даже поделитесь своей :)

TheShock Apr 30 2011 at 11:36

AtomJS ;) В частности, везде одинаково работают аксессоры, есть JavaScript 1.8.5 Compatibility и еще кое-что)

Ogra Apr 29 2011 at 14:33

Ваша версия не решается в 50% случаев — habrahabr.ru/blogs/html5/118356/#comment_3859537

Мне вот сходу достался нерешаемый вариант (

oWeRQ Apr 29 2011 at 14:41

Неправильно генерится поле… не всегда можно собрать.

janitor Apr 29 2011 at 13:43

Тоже было нечего делать, а с canvas никогда не работал — решил попробовать игру сделать какую-нибудь…
В итоге решил сделать «Swell Foop» — так она в убунте называлась, вроде бы. Посидел вечерок, сделал.
Код написан неоптимально, допиливать лень, да и нет времени. Проект на git: https://github.com/Shut/swellfoo.
Хостинга нет, так что выложить посмотреть негде, к сожалению.

TheShock Apr 29 2011 at 13:53

Выложите на Github pages. Если не требуется серверная часть, то довольно удобно и относительо вечно

janitor Apr 29 2011 at 14:15

Спасибо, не знал (первый проект на git, никогда не пользовался до этого, позор мне :) ).
Доступно теперь по http://shut.github.com/swellfoop/.
Таблицы рейтингов отключить пришлось.
Да и тестровал только в FF, Chrome и Opera — IE в топку.

TheShock Apr 29 2011 at 15:04

Очень классно. Порадовала высокая производительность и внешний вид.
Код грязноват.

Т.к. в IE не работает и врядли заработает могу посоветовать убрать функцию addEvent — у всех целевых браузеров есть addEventListener. Аналогично с XHR и ActiveXObject.

Одна из серьезный проблем — у вас используются то табы, то пробелы. Рекомендую выбрать что-то одно.

Вы, практически, переписали половину AtomJS. Если не знаете, это миниатюрная js-либа, смесь JQuery и MooTools, который не тянет совместимость со старыми браузерами. У вас написано пол этой либы)))

function randomNumber(m, n) {
  return Math.floor( Math.random() * (n - m + 1) ) + m;
}
randomNumber(min, max)
// =>
Number.random(min, max)

document.getElementById('newGame')
// =>
atom.dom("#newGame")

Game.prototype._getNickname = function() {
	var cookie = ' ' + document.cookie;
	var search = ' nickname=';
	var nickname = null;
	var offset = 0;
	var end = 0;
	if (cookie.length > 0) {
		offset = cookie.indexOf(search);
		if (offset != -1) {
			offset += search.length;
			end = cookie.indexOf(";", offset)
			if (end == -1) {
				end = cookie.length;
			}
			nickname = cookie.substring(offset, end);
		}
	}
	return (nickname);
}
// => 
Game.prototype._getNickname = function() {
    return atom.cookie.get('nickname');
}

А также atom.ajax, atom.Class, atom.Class.Options.

Ну и, как я говорил выше, такая штука очень круто делается на LibCanvas.Engines.Tiles

janitor Apr 29 2011 at 15:44

1) Да, насчет кода знаю — можно выкинуть/переписать, но руки никак не дохоодят… Хотел даже топик написать, но куда там, если на гитхаб уже месяц не мог выложить — а все лень.
2)Некоторые части (запись в куки, навешивание событий) — просто скопипастены из других проектов, а там поддерживается ИЕ (т.к. тот же jQuery не используется на работе, куча уже ставших классическими функций, вроде навешивания обработчика событий, ajax).
3) Про atom.js читал (вроде Ваше творение, да?), но вот использовать не приходилось, к сожалению… Будет время — поразбираюсь, прикручу :)
4) Да, про табы в курсе. Просто начал делать на работе (а там для отступов принято использовать пробелы), дома же у меня табы (да и везде в своих проектах их использую). А ширина отступа везде 4 пробела, то не заметил даже.

TheShock Apr 29 2011 at 15:46

3. Да, моё и развитие не останавливается)

Neongrey Apr 30 2011 at 03:45

я набрал 3220 очков: о)

-1

stfalcon Dec 15 2011 at 00:58

Разобрал пример с пятнашек и решил повторить ваш подвиг :)
У меня немного меньше кода вышло stfalcon.github.com/swell-foop/, но не реализован подсчет очков и подсветка секторов.

UFO just landed and posted this here

shpaker Apr 30 2011 at 08:07

Ошиблись дважды. Не Smart Cover и не iPhone! Пятнашки на iPod'е ))

mihmig Feb 7 2012 at 15:45

к сожалению, в Вашей игре(прототипе) есть маленький недостаток, делающий игру неиграбельной — отслеживается событие onmouseclick (а не omousedown). Поэтому при отпускании кнопки мыши (если она передвинулась хоть на пиксель) — события не происходит…