01.06.2018, 00:23
|
|
Новичок на форуме
|
|
Регистрация: 29.05.2018
Сообщений: 9
|
|
Сообщение от рони
|
потому что не все комбинации можно упорядочить,
можно гонять пустую ячейку рандомно из начального "правильного" положения.
|
ну гонять ее долго можно/очень долго/ но в итоге должна же собраться  |
|
01.06.2018, 00:29
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Amedeo Avogadro,
Такая игра раньше в карманном варианте была, была всегда решаема, а если не решалась, человек отходил в сторонку и каким то загадочным образом находил решение.
|
|
01.06.2018, 00:45
|
|
Новичок на форуме
|
|
Регистрация: 29.05.2018
Сообщений: 9
|
|
|
Сообщение от j0hnik
|
Amedeo Avogadro,
Такая игра раньше в карманном варианте была, была всегда решаема, а если не решалась, человек отходил в сторонку и каким то загадочным образом находил решение.
|
но включаем игру по первой ссылке)
Всем спасибо за обсуждение)
Проблема с ховером решилась, в move_value() нужно убрать #dddddd и присваивать просто пустую строку, но это все равно странно, .cell_game:hover это же никак не затрагивает.... |
|
01.06.2018, 00:50
|
 |
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
|
Нужно решить вопрос с тем, что рони говорил - нерешаемые комбинации. А когда все будет готово, советую попробовать сделать те же пятнашки, только с анимированными плитками, чтоб они плавно переезжали с места на место. Вот там будут интересные подводные камни при работе с DOM и вообще - это веселая задачка)
|
|
01.06.2018, 01:01
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Amedeo Avogadro
|
|
ну гонять ее долго можно
|
достаточно 20-30 сдвигов
|
Сообщение от Amedeo Avogadro
|
|
но в итоге должна же собраться
|
не понял. |
|
01.06.2018, 21:01
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.klet, .cl{
width: 50px;
height: 50px;
background-color: #ddd;
font-size: 42px;
border: 5px solid #ccc;
color: grey;
text-align: center;
}
.cl{
background-color: white;
border: 0;
color: white;
}
.green{
background-color: #B6FF00FF;
}
</style>
</head>
<body>
<div id="game"></div>
<script>
var game = document.querySelector('#game'),
table = document.createElement('table'), str = '';
arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,'cl'].sort((a, b)=>Math.random() - 0.5);
for(var i = 0; i<4; i++){
str += '<tr>';
for(var j = 0; j<4; j++) str += '<td class="klet '+(arr[arr.length-1] == 'cl'&&'cl')+'">'+arr.pop();
}
table.innerHTML = str;
game.append(table);
var td = document.querySelectorAll('td');
function fn2(t){
var cl = document.querySelector('.cl'),
text = t.textContent;
t.textContent = 'cl';
cl.textContent = text;
cl.classList.remove('cl');
t.classList.add('cl');
fn1();
}
(fn1=()=>{
var x = 0;
for(var i = 0; i<15; i++){
if(i+1 == td[i].textContent*1 && i==x) {
td[i].classList.add('green');
if(++x == 15) alert('Победа');
}
else td[i].classList.remove('green');
}
})();
td.forEach((el,i) => el.onclick = function(){
if ((i!=0 && i!=4 && i!=8 && i!=12 && td[i-1].matches('.cl')) || (i!=15 && i!=11 && i!=7 && i!=3 && td[i+1].matches('.cl')) || (i<12 && td[i+4].matches('.cl')) ||(i>3 && td[i-4].matches('.cl')) ) fn2(this);
});
</script>
</body>
</html>
|
|
02.06.2018, 12:06
|
|
Новичок на форуме
|
|
Регистрация: 29.05.2018
Сообщений: 9
|
|
|
Сообщение от j0hnik
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.klet, .cl{
width: 50px;
height: 50px;
background-color: #ddd;
font-size: 42px;
border: 5px solid #ccc;
color: grey;
text-align: center;
}
.cl{
background-color: white;
border: 0;
color: white;
}
.green{
background-color: #B6FF00FF;
}
</style>
</head>
<body>
<div id="game"></div>
<script>
var game = document.querySelector('#game'),
table = document.createElement('table'), str = '';
arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,'cl'].sort((a, b)=>Math.random() - 0.5);
for(var i = 0; i<4; i++){
str += '<tr>';
for(var j = 0; j<4; j++) str += '<td class="klet '+(arr[arr.length-1] == 'cl'&&'cl')+'">'+arr.pop();
}
table.innerHTML = str;
game.append(table);
var td = document.querySelectorAll('td');
function fn2(t){
var cl = document.querySelector('.cl'),
text = t.textContent;
t.textContent = 'cl';
cl.textContent = text;
cl.classList.remove('cl');
t.classList.add('cl');
fn1();
}
(fn1=()=>{
var x = 0;
for(var i = 0; i<15; i++){
if(i+1 == td[i].textContent*1 && i==x) {
td[i].classList.add('green');
if(++x == 15) alert('Победа');
}
else td[i].classList.remove('green');
}
})();
td.forEach((el,i) => el.onclick = function(){
if ((i!=0 && i!=4 && i!=8 && i!=12 && td[i-1].matches('.cl')) || (i!=15 && i!=11 && i!=7 && i!=3 && td[i+1].matches('.cl')) || (i<12 && td[i+4].matches('.cl')) ||(i>3 && td[i-4].matches('.cl')) ) fn2(this);
});
</script>
</body>
</html>
|
ого, я тут некоторые места не понял но все равно спасибо. 
|
|
02.06.2018, 15:52
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Rise,
|
|
|
|
