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

[de_arnst]

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

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

[shpaker]

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

[BAN]

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

[shpaker]

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

[guyfawkes]

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

[TheShock]

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

[guyfawkes]

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

[shpaker]

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

[onix74]

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

[pomkaster]

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

[TheShock]

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

[ibnteo]

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

[ibnteo]

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

[Ogra]

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

[Spavvn]

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

[somniator]

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

[TheShock]

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

[widowmaker]

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

[mihmig]

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

[shpaker]

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

[aL13n]

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

[shpaker]

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

[ankh1989]

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

[serjoga]

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

[TheShock]

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

[shpaker]

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

[TheShock]

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

[shpaker]

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

[mr_avi]

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

[de_arnst]

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

[TheShock]

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

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]

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

[TheShock]

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

[TheShock]

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

[shpaker]

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

[TheShock]

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

[guyfawkes]

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

[TheShock]

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

[Ogra]

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

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

[oWeRQ]

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

[janitor]

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

[TheShock]

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

[janitor]

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

[TheShock]

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

Т.к. в 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]

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

[TheShock]

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

[Neongrey]

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

[stfalcon]

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

[shpaker]

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

[mihmig]

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