Игра "Пятнашки"
Приглашаю посмотреть на разработанный мной учебный (не обучающий) проект разработки скрипта игры "Пятнашки" (альфа-версия):
![]() Разработка: http://ru.wikiversity.org/wiki/15_puzzle Демо: http://puzzlewikivers.sourceforge.net/15puzzle.html Скрипт (версия 0.1): http://ru.wikiversity.org/wiki/15_puzzle_0.1 |
Как-то скучно. Пример похожего скрипта-плагина для jQuery.
P.S. А от выпадения неразрешимых комбинаций Вы как-нибудь защищаетесь? |
Вы отстали от тенденций в web-разработке лет на 10. Вы не умеете верстать. Код ужасен.
Вам нужно читать учебные материалы, а не писать их. Если бы это было подано, как "я написал свой первый скрипт, гляньте, что не так", было бы что обсуждать. И ещё: не любая комбинация в пятнашках сходится. Надо перемешивать начальную комбинацию, а не придумывать произвольную. |
Цитата:
Критиковать просто, а что-то сделать полезное желающих мало. Цитата:
|
Цитата:
|
Цитата:
Цитата:
Я не понимаю, почему люди, не разбирающиеся в предметной области, делает учебные материалы в этой области. А потом мы удивляемся, откуда новички набираются всего того бреда, с которым приходят на форум. |
Цитата:
Также и с Викиверситетом. Сейчас Вы критикуете, позже придут специалисты и всё исправят, и через несколько лет везде будут ссылаться на курсы Викиверситета как на образец. |
Цитата:
|
Цитата:
Вы зря гоните на Kolyaj, у него есть сайт alljs.ru, на котором он старался и писал учебные материалы для таких нубов как Вы и Я. :) ps: Ваш скрипт очень сомнителен с точки зрения обучающей способности, подача материала может быть, но не сам скрипт. Проще создать массив из 15 элементов и перемешать их, а не придумывать очень сложный для понимания велосипед. Дальше мне просто лень писать, что там исправлять, т.к. Вы должны ещё открыть для себя мир js и html/css |
Bolo1910,
пожалуйста, воспринимайте конструктивную критику конструктивно. Ваш код не тот, по которому стоит учиться. Используйте css, разделяйте логику и представление, не делайте кашу из тегов, не исользуйте document.write без необходимости, используйте методы DOM, забудьте про учебники по html, датированные ранее, чем 2005 годом, помните про кроссбраузерность. |
Этот код по праву можно назвать индусским. В обработчиках onclick одно и то же. Тут даже не знание js дико лажает, а в общем умение программировать, проектировать модель и т.д. Что например будешь делать если надо будет поле сделать 5*5? А должно решаться чисто сменой в конфигурации вместо 4 на 5.
|
Цитата:
Такой на форумах критики мало. |
Цитата:
|
Хм, какое совпадение... http://govnokod.ru/4389
|
както вы сильно жестко на парня накинулись...
|
Цитата:
Но если надо то по скрипту эту функцию добавить просто (могу сделать). |
Пятнашки )))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>15</title>
<style type="text/css">
td{
height: 40px; width: 40px; text-align: center; color: #FFFFF0; font-weight: bold; font-size: large;
}
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
for (var m = [], l = 4, k = 1, z = [l - 1, l - 1], // l--размер поля
b = ["background-color: #4169E1;", "background-color: #C0C0C0;color: #C0C0C0;"],
t = document.createElement("table"), c = 0; c < l; c++) {
var tr = t.insertRow(c);
m[c] = [];
for (var s = 0; s < l; s++) {
var td = tr.insertCell(s);
td.style.cssText = b[0];
td.onclick = function (a, e) {
return function () {
cl_go(a, e)
}
}(c, s);
m[c][s] = k;
td.innerHTML = k++
}
}
t.rows[l - 1].cells[l - 1].style.cssText = b[1];
t.rows[l - 1].cells[l - 1].innerHTML='';
m[l - 1][l - 1] = 0;
document.body.appendChild(t);
var end = m.toString().split(",").join(""),
v = l * l * 2;
function go() {
for (var a = [
[-1, 0],
[0, -1],
[1, 0],
[0, 1]
]; a.length;) {
var e = Math.floor(Math.random() * a.length),
d = a[e];
a.splice(e, 1);
if (m[z[0] + d[0]] && m[z[0] + d[0]][z[1] + d[1]]) break
}
m[z[0]][z[1]] = m[z[0] + d[0]][z[1] + d[1]];
t.rows[z[0]].cells[z[1]].style.cssText = b[0];
t.rows[z[0]].cells[z[1]].innerHTML = m[z[0]][z[1]];
t.rows[z[0] + d[0]].cells[z[1] + d[1]].style.cssText = b[1];
t.rows[z[0] + d[0]].cells[z[1] + d[1]].innerHTML = '';
m[z[0] + d[0]][z[1] + d[1]] = 0;
z = [z[0] + d[0], z[1] + d[1]];
if (m[l - 1][l - 1] || v > 0) {
v--;
setTimeout(arguments.callee, 100)
} else {
alert("Please play!!!");
v = l * l * 2
}
}
function cl_go(a, e) {
for (var d = [
[-1, 0],
[0, -1],
[1, 0],
[0, 1]
]; d.length;) {
var g = Math.floor(Math.random() * d.length),
f = d[g];
d.splice(g, 1);
if (m[a + f[0]] && m[a + f[0]][e + f[1]] == 0) {
m[a + f[0]][e + f[1]] = m[a][e];
m[a][e] = 0;
t.rows[a].cells[e].style.cssText = b[1];
t.rows[a].cells[e].innerHTML = '';
t.rows[a + f[0]].cells[e + f[1]].style.cssText = b[0];
t.rows[a + f[0]].cells[e + f[1]].innerHTML = m[a + f[0]][e + f[1]];
z = [a, e];
break
}
}
end == m.toString().split(",").join("") && alert("Game over")
};
</script>
<input type="button" name="" value="Mix" onclick="go()"/>
</body>
</html>
|
рони,
а почему время прохождения не выдает? Это же самое интересное :) |
Gozar,
Будет Вам и дудка, будет и свисток )))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>15</title>
<style type="text/css">
td{
height: 40px; width: 40px; text-align: center; color: #FFFFF0; font-weight: bold; font-size: large;
}
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
for (var m = [], l = 4, k = 1, z = [l - 1, l - 1],start,step, // l--размер поля
b = ["background-color: #4169E1;", "background-color: #C0C0C0;color: #C0C0C0;"],
t = document.createElement("table"), c = 0; c < l; c++) {
var tr = t.insertRow(c);
m[c] = [];
for (var s = 0; s < l; s++) {
var td = tr.insertCell(s);
td.style.cssText = b[0];
td.onclick = function (a, e) {
return function () {
cl_go(a, e)
}
}(c, s);
m[c][s] = k;
td.innerHTML = k++
}
}
t.rows[l - 1].cells[l - 1].style.cssText = b[1];
t.rows[l - 1].cells[l - 1].innerHTML='';
m[l - 1][l - 1] = 0;
document.body.appendChild(t);
var end = m.toString().split(",").join(""),
v = l * l * 2;
function go() {
for (var a = [
[-1, 0],
[0, -1],
[1, 0],
[0, 1]
]; a.length;) {
var e = Math.floor(Math.random() * a.length),
d = a[e];
a.splice(e, 1);
if (m[z[0] + d[0]] && m[z[0] + d[0]][z[1] + d[1]]) break
}
m[z[0]][z[1]] = m[z[0] + d[0]][z[1] + d[1]];
t.rows[z[0]].cells[z[1]].style.cssText = b[0];
t.rows[z[0]].cells[z[1]].innerHTML = m[z[0]][z[1]];
t.rows[z[0] + d[0]].cells[z[1] + d[1]].style.cssText = b[1];
t.rows[z[0] + d[0]].cells[z[1] + d[1]].innerHTML = '';
m[z[0] + d[0]][z[1] + d[1]] = 0;
z = [z[0] + d[0], z[1] + d[1]];
if (m[l - 1][l - 1] || v > 0) {
v--;
setTimeout(arguments.callee, 100)
} else {step=0;start = new Date();
alert("Please play!!!");
v = l * l * 2
}
}
function cl_go(a, e) {
if(end == m.toString().split(",").join("")) {alert("Please Mix!!!");return};
step++;
for (var d = [
[-1, 0],
[0, -1],
[1, 0],
[0, 1]
]; d.length;) {
var g = Math.floor(Math.random() * d.length),
f = d[g];
d.splice(g, 1);
if (m[a + f[0]] && m[a + f[0]][e + f[1]] == 0) {
m[a + f[0]][e + f[1]] = m[a][e];
m[a][e] = 0;
t.rows[a].cells[e].style.cssText = b[1];
t.rows[a].cells[e].innerHTML = '';
t.rows[a + f[0]].cells[e + f[1]].style.cssText = b[0];
t.rows[a + f[0]].cells[e + f[1]].innerHTML = m[a + f[0]][e + f[1]];
z = [a, e];
break
}
}
end == m.toString().split(",").join("") && alert("Game over "+Math.floor(((new Date()).getTime() - start.getTime())/1000)+" s "+step+" step")
};
</script>
<input type="button" name="" value="Mix" onclick="go()"/>
</body>
</html>
|
камрады, оцените, как вам наша реализация пятнашек?
|
Мне как только начавшему писать на js (да и вообще писать что либо на каком-либо языке программирования) очень даже хороший пример. Мне не нужен сейчас для примеров классный код, с подключением каких-то заумных библиотек , мне нужна для начала простая "азбука" пусть даже в виде "индусского кода". Как использовать циклы, условия, переменные, объекты, как просто менять данные местами, используя функции. Тут всего понемногу, просто и прозрачно. А начинающему сразу забивать голову jQuery, как тут предлагают, считаю глупо.
Потому большое спасибо за пример! |
согласно вашей логике:
- сначала нужно научиться машину водить плохо, чтобы потом переучиваться водить ее хорошо - чтобы освоить английский, надо учить китайский - чтобы приготовить амлет, надо зарезать свинью ... |
Приехал =(
![]() Тут минус в том, что автор очень неэффективно решил проблемы, возникающие перед ним в процессе разработки. Раскидал ячейки, хотя проще было циклом. Придумал неправильный алгоритм заполнения ячеек и вешает на него заплатку. Посоветовался бы на форуме, как лучше ее решить =) |
Цитата:
- водить машину зная принцип работы двигателя сгорания; - использовать рацию зная как осуществляется передача радиоволн; - жить в доме и знать что такое фундамент; - ну и используя jQvery знать тот язык на котором он написан. А ваши три примера "и не в склад и не в лад поцелуй дрова в живот". |
Решение пятнашек (вместо матрицы 3х3 ставите матрицу 4х4)
Взял пятнашки от рони, перетасовал их вручную, вроде работает :) У "восьмерки" пространство состояний 3^22, у пятнашек оно больше))) В целом решение писалось для любых квадратных матриц. Косяки вида "если подать уже решенное состояние, алгоритм будет его решать в ~3 хода" не исправлял, т.к. делал на скорую руку. |
nerv_,
:victory: |
|
Надеюсь, тут заменят цифры картинками?
|
Цитата:
|
| Часовой пояс GMT +3, время: 01:11. |