Форум

m1lk1way · #1 (**permalink**) 10.03.2016, 16:02

В общем пишу свои "пятнашки" на ангуляре. И вроде как все хорошо и солнечно, но столкнулся с проблемой перемешивания фишек. Пока что решил не заморачиваться особо насчет "несобираемых" комбинаций и пока просто хочу расположить фишки рандомно. Итак:
Имею массив массивов

рядов, в которых находятся фишки (он же выйгрышный):

var grid = [[{id: 1, empty: false},{id: 2, empty: false},{id: 3, empty: false}],
           [{id: 4, empty: false},{id: 5, empty: false},{id: 6, empty: false}],
           [{id: 7, empty: false},{id: 8, empty: false},{id: 9, empty: true}]];

Необходимо перемешать фишки, но пустую девятку оставить в правом нижнем углу.
Моя идея(частично реализованная):
Генерирую массив из восьми уникальных рандомных чисел и чтобы девятка пустая оставалась в правом нижнем углу - запушиваю её в конец массива, получаю массив (например):

[2, 1, 4, 8, 7, 3, 5, 6, 9]

дальше мои мозги спотыкаются и отказываются что-то придумывать.
Как вариант "итерироватся" в исходный массив и создавать в нем объекты исходя из сгенерированного id.
Может я изначально пошел не по тому пути?)

рони · #2 (**permalink**) 10.03.2016, 16:10

m1lk1way,
так мешайте перемещая дырку случайное количество раз в случайном направлении
так тут сделал, анимацию перемешивания можно убрать тамИгра "Пятнашки"

m1lk1way · #3 (**permalink**) 10.03.2016, 18:45

суть я уловил. вот моя реализация.

var directs = [[1, 0], [-1, 0], [0, 1], [0, -1]], //направления движений
          tref, trow, tcol; // куда будем двигать

$scope.shuffle = function(){
      var emprow = 2, \\вручную пока что указываю, где лежит пустышка
          empcol = 2, \\вручную пока что указываю, где лежит пустышка
          temp, tempp; \\одна для хранения, вторая для отладки
       for (var d = 0; d < directs.length; d++) {
                    console.log(d); \\ слежу за номером итерации
                    trow = emprow + directs[d][0];
                    tcol = empcol + directs[d][1];
                    if (this.grid[trow] && this.grid[trow][tcol] && this.grid[trow][tcol].empty == false) {
                        console.log('двигаю'); \\ удостоверимся, что условие пройдено
                        temp = this.grid[emprow][empcol]; //сохраним пока тут
                        tempp = this.grid[trow][tcol]; //сохраняю для отслеживания что с чем менялось
                        this.grid[emprow][empcol] = this.grid[trow][tcol]; //меняем местами
                        this.grid[trow][tcol] = temp; //окончательно поменяли
                        console.log("передвинул"+JSON.stringify(temp)+"сюда"+JSON.stringify(tempp));
                        emprow = trow;
                        empcol = tcol;
                    }
                }
    };

Эта штука делает 2 перемены местами (ну оно и логично ведь итерация идет до directs.length). Как бы мне это грамотно зарекурсить?)

рони · #4 (**permalink**) 10.03.2016, 18:52

m1lk1way,
какие то странные пятнашки или 9 это пустышка?

m1lk1way · #5 (**permalink**) 10.03.2016, 18:56

Сообщение от рони

m1lk1way,
какие то странные пятнашки или 9 это пустышка?

Да, пятнашки 3 на 3 пока что =) так что по меркам массивов [2][2] это и есть пустышка

рони · #6 (**permalink**) 10.03.2016, 19:19

m1lk1way,
не могли бы вы протестировать на несобираемость данный код

function gen() {
         function f(a) {
             for (var b = 3, c = 0; c < a.length - 1; c++) {
                 !a[c] && (b -= 3 - c / 3 | 0);
                 for (var d = c + 1; d < a.length; d++) a[c] && a[d] && a[d] < a[c] && b++
             }
             return !(b % 2)
         }
         for (var a = [1, 2, 3, 4, 5, 6, 7, 8]; !f(a);)
             for (var b = a.length - 1; 0 < b; b--) {
                 var e = Math.floor(Math.random() * (b + 1)),
                     g = a[e];
                 a[e] = a[b];
                 a[b] = g
             }
         a.push(9);
         return a
     };

 alert(gen());

Cuntmann · #7 (**permalink**) 10.03.2016, 19:24

Какое-то время назад на другом форуме делал одному буржуйскому оболтусу домашнее задание "пятнашки". Ангуляр я не знаю, у меня применяется jQuery. Посмотрите, возможно, вам что-то из кода пригодится.

index.htm

<!doctype html>
<html>
 <head>
    <meta charset="utf-8" />
    <title>Fifteen Puzzle</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!--link href="fifteen.css" rel="stylesheet" />
    <script src="fifteen.js"></script //-->
    <style>
    body{
  font-family:cursive;
}
div{
  font-size:40pt;
}
#controls{
  text-align:center;
}
#puzzlearea{
  width:385px;
  height:385px;
  margin-left:auto;
  margin-right:auto;
}
#score{
  text-align:center;
  position:absolute;
  right:150px;
  top:150px;
  width:200px;
  padding:5px;
  font-size:14px;
}
#score b{
  color:Crimson;
}
#shufflebutton{
  cursor:pointer;
}
.tile{
  width: 90px;
  height: 90px;
  display: inline-block;
  border: 1px solid black;
  background-color:#f8f8ff;
  text-align:center;
  margin:2px;
}		
.movable{
  color:#ccc;
  cursor:pointer;
}
    </style>
    <script>
    var xyz=[],
    arr=[],
	moves=0,
    i=1;

	for(; i < 17; i++){
		arr.push(i);
		xyz.push(i);
		}

function shuffle(ar){
	return ar.sort(function(){return 0.5 - Math.random()});
}

function goround(){
	$('#puzzlearea').empty();
    for(var k=0; k < arr.length; k++){
	if(arr[k]==16){$('#puzzlearea').append('<div class="tile" id="ch-'+arr[k]+'" style="visibility:hidden;">'+arr[k]+'</div>');}
	else{$('#puzzlearea').append('<div class="tile" id="ch-'+arr[k]+'">'+arr[k]+'</div>');}
		}
		find_neighbours();
}

function solve(){
$('#puzzlearea').empty();
    for(var k=0; k < xyz.length; k++){
	if(xyz[k]==16){$('#puzzlearea').append('<div class="tile" id="ch-'+xyz[k]+'" style="visibility:hidden;">'+xyz[k]+'</div>');}
	else{$('#puzzlearea').append('<div class="tile" id="ch-'+xyz[k]+'">'+xyz[k]+'</div>');}
		}
    $('#score').html('<span style="text-align:center;color:Crimson;font-size:24px;">You WIN!</span><br />tricky lazy pig...');
}

function find_neighbours(){
	var o=$('#ch-16'),
	    i=o.index(),
		prev=(i > 0) ? ($('#ch-'+(arr[i-1]))) : false,
		next=(i < 16) ? ($('#ch-'+(arr[i+1]))) : false,
		upper=(i > 3) ? ($('#ch-'+(arr[i-4]))) : false,
		lower=(i < 12) ? ($('#ch-'+(arr[i+4]))) : false;
		
		if(prev && (i % 4 != 0)){prev.addClass('movable');}
		if(next && jQuery.inArray(i,[3,7,11,15])==-1){next.addClass('movable');}
		if(upper){upper.addClass('movable');}
		if(lower){lower.addClass('movable');}
	
	$('.movable').click(function(){
		var this_i=$(this).index(),
		    this_num=Number($(this).text()),
		    dummy_i=$('#ch-16').index(),
			dummy_num=Number($('#ch-16').text());
			
			arr[this_i]=dummy_num;
			arr[dummy_i]=this_num;
			goround();
			moves++;
			
			$('#score').html('You have made <b>'+moves+'</b> move'+(moves==1?'':'s')+' <span>so far...</span>');
	if(xyz.toString()==arr.toString()){
		$('#score span').replaceWith('<br /><br />and ');
		$('#score').append('<span style="text-align:center;color:Crimson;font-size:24px;">You WIN!</span>');
		}
	else{
		try{$('#res').remove();}
		catch(e){}
		}
	});
}

$(document).ready(function(){
	$('body').append('<div id="score"></div>');
	$('#shufflebutton').after('<button id="slv">Solve</button>');
	$('button').css({
		border:'none',
		backgroundColor:'transparent',
		cursor:'pointer',
		fontWeight:'bold',
		fontSize:'16px',
		marginLeft:'15px',
		marginRight:'15px'
	}).on('focus',function(){$(this).blur();});
	$('#slv').click(solve);
	$('#shufflebutton').click(function(){
		moves=0;
		$('#score').empty();
		arr=shuffle(arr);
		goround();
	});
	
$('#shufflebutton').click();
/* Хрень */
setTimeout(function(){
	$('p').eq(0).fadeOut(1200,function(){
		$('p').eq(2).fadeOut(1200,function(){
			$('#w3c').css({textAlign:'center'});
		$('h1').css({textAlign:'center'}).animate({fontSize:'52px'},1200);
		});
	});
},10000);
});
    </script>
 </head>

  <body>
    <h1>Fifteen Puzzle</h1>

    <p>
      The goal of the fifteen puzzle is to un-jumble its fifteen squares
      by repeatedly making moves that slide squares into the empty space.
      How quickly can you solve it?
    </p>

    <div id="puzzlearea">
      <div>1</div><div>2</div><div>3</div><div>4</div>
      <div>5</div><div>6</div><div>7</div><div>8</div>
      <div>9</div><div>10</div><div>11</div><div>12</div>
      <div>13</div><div>14</div><div>15</div>
    </div>

    <p id="controls">
      <button id="shufflebutton">Shuffle</button>
    </p>
    
    <p>
      American puzzle author and mathematician Sam Loyd is often falsely
      credited with creating the puzzle; indeed, Loyd claimed from 1891
      until his death in 1911 that he invented it.
      The puzzle was actually created around 1874 by Noyes Palmer Chapman,
      a postmaster in Canastota, New York.
    </p>

  </body>
</html>

рони · #8 (**permalink**) 10.03.2016, 19:58

Cuntmann,
большая вероятность для ваших пятнашек что будет несобираемая комбинация

Cuntmann · #9 (**permalink**) 10.03.2016, 20:08

рони,
шаффл нажимайте и заново ))

рони · #10 (**permalink**) 10.03.2016, 20:10

Cuntmann,
неа лучше вы доведите до ума shuffle

Форум

Справочник

Discord чат

Курсы javascript