Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите господа!!!сам не допру никак)) (https://javascript.ru/forum/misc/23315-pomogite-gospoda-sam-ne-dopru-nikak.html)

dimidrol 20.11.2011 00:46

Помогите господа!!!сам не допру никак))
 
вот пишу крестикиНолики. Как мне взять(например) "td"[2] и проверить какой из рисунков в нем находиться??? помогите новичку плиз)))
Код:

<BODY>
        <table><tbody>
                <tr> <td></td><td></td><td></td> </tr>
                <tr> <td></td><td></td><td></td> </tr>
                <tr> <td></td><td></td><td></td> </tr>
        </tbody></table>
       
<script language="javascript">
        var O=new Image()
        O.src ="zero.png";
        var X=new Image()
        X.src ="dagger.png"; 
 
  function ticTacToe(){
    var cells = document.getElementsByTagName("td");
    var last = O;
    for (var i =0; i <= 8; i++){
      var cell = cells[i];
      cell.onclick = function (x){
	return function(){
	  if (cells[x].innerHTML==""){
	    if (last==X){
	      this.appendChild(O.cloneNode(false) );
	    }
	    else{
	      this.appendChild(X.cloneNode(false) );
	    }
	  last=last==X ? O : X;
	 }
	 else {
	  alert ("клетка заполнена");
	 }
	}
      }(i);
    }
  }
ticTacToe() 
</script>

</BODY>


Ultimatum 20.11.2011 00:53

Не стал читать Ваш код, так как не читабелен.

Вы матрицу себе представляете что это такое, ну или массив. В данном случае у вас должен быть массив, скажем
var table = [
[id1,id2,id3]
[id4,id5,id6]
[id7,id8,id9]
];

Его даже можно сделать одномерным. И считывать что находиться в нём.

dimidrol 20.11.2011 01:18

Цитата:

Сообщение от Ultimatum (Сообщение 137739)
Не стал читать Ваш код, так как не читабелен.

Вы матрицу себе представляете что это такое, ну или массив. В данном случае у вас должен быть массив, скажем
var table = [
[id1,id2,id3]
[id4,id5,id6]
[id7,id8,id9]
];

Его даже можно сделать одномерным. И считывать что находиться в нём.

вот, исправил!я понимаю что такое матрица, но мне немного сложно вас понять
мне просто добавить var table, а вместо id1, id2...поставить идентификатор td? А как потом считывать?

ksa 20.11.2011 15:39

Интересно будет последить как гражданин, который сам не умеет работать с массивами (Ultimatum), будет учить как нужно работать с массивами.

Ultimatum, пивом и чипсами я запасся... Т.ч. готов внимать твоему гению. :yes:

dimidrol 20.11.2011 16:27

Цитата:

Сообщение от ksa;137812

[b
Ultimatum[/b], пивом и чипсами я запасся... Т.ч. готов внимать твоему гению. :yes:

))та блин, помоги лучше!!!:cray:

trikadin 20.11.2011 17:01

Цитата:

Сообщение от dimidrol
))та блин, помоги лучше!!!

Согласен. Он же не виноват, что тут есть Ultimatum. :D

А вообще, dimidrol, в вашем коде много плохого. Например, в результате O.cloneNode(true) (кстати, зачем true, если у картинки O нет детей, которые надо копировать?) каждый раз создаётся новый элемент с таким же id. Т. е. у вас на странице id теряет своё основное св-во - уникальность. Дальше: вам совершенно необязательно через замыкания сохранять номер элемента - можно через this обратиться к нему:
<div id="el" style="width: 100px; height: 100px; background: red"></div>
<script>
document.getElementById("el").onclick= function(){
 alert(this.style.background); // и вовсе необязательно обработчику знать, каким по счёту на странице является этот див))
};
</script>

P. S. Как поправите это - публикуйте код, продолжим разбор ошибок дальше.
P. P. S. И уберите это бешеное количество отступов - бесит. Вполне достаточно одного-двух пробелов или символа табуляции.

ksa 20.11.2011 18:28

Цитата:

Сообщение от dimidrol
помоги лучше

Извини, но тут есть спец который получает 80т.р (означеный Ultimatum)!
Мне просто до жути интересно, как решит такую задачку гражданин, который еще не овладел навыком поиска элемента в массиве...

Да и задачу ты в корне неправильно начал делать. Лучше сразу такое выкинуть. Ну если только табличку пустую оставить... :)

dimidrol 22.11.2011 14:54

<table><tbody>
<tr> <td id="a"></td><td id="b"></td><td id="c"></td> </tr>
<tr> <td id="d"></td><td id="e"></td><td id="f"></td> </tr>
<tr> <td id="g"></td><td id="h"></td><td id="i"></td> </tr>
</tbody></table>


<script>
		var O=new Image()
		O.src ="zero.png";
		var X=new Image()
		X.src ="dagger.png"; 
	function ticTacToe(){
		var cells = document.getElementsByTagName("td");
		var last = O;
		for (var i =0; i <= 8; i++){
			var cell = cells[i];
			cell.onclick = function (){
					if (this.innerHTML==""){
						if (last==X){
							this.appendChild(O.cloneNode(false));
						}
						else{
							this.appendChild(X.cloneNode(false));
						}
						last=last==X ? O : X;
					}
					else {
						alert ("клетка заполнена");
					}
			};
		}
	}
	ticTacToe()	
</script>


Но я не понимаю что мне использовать вместо метода O.cloneNode(false), у меня же всего два рисунка, innerHTML удаляет прошлый!

ksa 23.11.2011 10:53

Цитата:

Сообщение от dimidrol
Но я не понимаю что мне использовать ...

Даю намёк... ;)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#playing td {
	width: 30px;
	height: 30px;
}
.player0 {
	background: url('http://javascript.ru/forum/images/smilies/blink.gif') no-repeat center;
}
.player1 {
	background: url('http://javascript.ru/forum/images/smilies/laugh.gif') no-repeat center;
}
</style>
<script type="text/javascript">
player=0;
$(document).ready(function (){
	$('#playing td').click(function (){
		if (this.className!='') {
			return false;
		};
		this.className='player'+player;
		player=(player+1)%2;
	});
});
</script>
</head>
<body>
<table border='1'>
<tbody id='playing'>
<tr>
	<td></td><td></td><td></td>
</tr>
<tr>
	<td></td><td></td><td></td>
</tr>
<tr>
	<td></td><td></td><td></td>
</tr>
</tbody>
</table>
</body>
</html>

dimidrol 27.11.2011 15:19

вот, разобрался!Просто jquery ще не начинал(первый раз юзаю)! что дальше?
<script type="text/javascript">
		player=0;
		$(document).ready(function(){
			$(document).css("background").slideDown("slow");
			$("#game td").click(function(){
				if (this.className==""){
					this.className="player"+player;
					player = (player+1)%2;
				}
			})
		})
</script>

ksa 27.11.2011 15:29

Цитата:

Сообщение от dimidrol
что дальше?

А дальше нужно писать алгоритм, проверяющий на "победу" или "окончание игры"... :D

dimidrol 28.11.2011 23:46

ладно, попробую сам)))Спасибо огромное!!!

bear9 02.12.2011 03:36

Интересен результат ))) Получилось что-то?

ksa 02.12.2011 09:00

Если автор не смог просто ставить картинки в поле - алгоритм игры точно не напишет... :no:

dimidrol 10.12.2011 01:04

Цитата:

Сообщение от bear9 (Сообщение 140290)
Интересен результат ))) Получилось что-то?

да очень даже получилось) почти доделал! скоро выложу результат!(сессия у меня)))

dimidrol 10.12.2011 01:08

Цитата:

Сообщение от ksa (Сообщение 140300)
Если автор не смог просто ставить картинки в поле - алгоритм игры точно не напишет... :no:

а ты сразу гуру JS родился??? я учусь...не все же сразу!

trikadin 10.12.2011 01:28

dimidrol, это просто была оценка твоих текущих знаний. Никаких претензий, просто оценка.

ksa 10.12.2011 10:35

Цитата:

Сообщение от dimidrol
я учусь...не все же сразу

Странная у тебя манера учиться... :)
- Покажите как поставить крестики и нолики. А то у меня не получается...
- Вот так...
- А теперь что делать дальше?

Если тебе интересно как я начинал - так делал задачки от простого к сложному... Т.е. те самые крестики нолики не делал сразу. :D
К этому времени были освоены ветвления и циклы. Был кой-какой навык по обработке данных...

Т.е. если ты прогить не умеешь - рано на такие задачки замахиваться... ;)

dimidrol 10.12.2011 18:39

ну я уже сделал симулятор монетки и рулетки)))

ksa 10.12.2011 21:28

dimidrol, тогда почему были такие трудности с установкой крестиков и ноликов?

dimidrol 10.12.2011 22:27

ну я там графику не применял.

ksa 11.12.2011 17:05

dimidrol, в моём примере нет графики вообще... :D

Livanderiaamarum 11.12.2011 23:37

нужно тебе разделить ЛОГИКУ игры от оболочки. я обычно (ни разу если честно) так делаю.
)))))))


суть в том что у тебя должна быть виртуальная матрица лишь СИМВОЛИЗИРУЮЩАЯ крестики нолики, в ней должны производится изменения, и именно с ней должны проводиться все операции)! с виртуальной матрицей невидимой человеку)!!! и нужно нафигачть функцию "отрисоватьИзменения()" ! и вот эта рисовальная функция будет смотреть что с виртуальной матрицей, пробегаться по ней и рисовать это на страничке )))) как это все сделать ты я думаю сам найдешь способ

ну и так же должна быть функция изменения этой виртуальной матрицы,через нарисованые квадраты)))
..то есть оболочка должна уметь изменять матрицу и после вызывать тот самый метод .отрисоватьИзменения()

как то так

не нужно херачить ЛОГИКУ игры и ОТРИСОВКУ к одну кучу))) лучше разделить, и это на самом деле не так сложно как кажется пока не начал)

ksa 12.12.2011 08:59

Цитата:

Сообщение от Livanderiaamarum
как то так

Фигня какая-то...

Livanderiaamarum 12.12.2011 11:24

Цитата:

Сообщение от ksa (Сообщение 142128)
Фигня какая-то...

веский аргумент. вы наверное просто не знакомы с MVC архитектурой(( рекомендую подтянуть скилл.:)

ksa 12.12.2011 14:00

Livanderiaamarum, для программки "Крестики Нолики" это точно фигня.

Livanderiaamarum 12.12.2011 14:39

Цитата:

Сообщение от ksa (Сообщение 142201)
Livanderiaamarum, для программки "Крестики Нолики" это точно фигня.

ну он хочет поназасовывать в матрицу дом элементы)))! и я хочу посоветовать что такие вещи нужно логически разделять. при том вроде просто обьяснил))

ksa 12.12.2011 15:09

Livanderiaamarum, таки я пытаюсь сказать, что там и матрица-то никакая не нужна. Т.ч. куда уже проще-то?

рони 13.12.2011 08:35

Вариант крестиков нуликов ))) :write:
<!DOCTYPE>
<html>
<head>
  <title></title>
<style type="text/css">
td{
   height: 22px; width: 22px; text-align: center;
   border: #000000 solid 1px;
}
</style>
</head>

<body>

<div id="tv"></div>
<script  type="text/javascript">
for (var m = Array(9), l = 3, b = ["background-color: #FFFF00;", "background-color: #00FF00;"],
 t = document.createElement("table"), st = 0, c = 0; c < l; c++)
 for (var tr = t.insertRow(c), s = 0; s < l; s++) {
    var td = tr.insertCell(s);
    td.innerHTML = "&nbsp;";
    td.onclick = function (a) {
        return function () {
            go(a)
        }
    }(st++)
}
document.body.appendChild(t);
var arr = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
],
    arr_st = [
        [1, 3, 5, 7],
        [0, 2, 6, 8]
    ],
    n = 1,
    step = 0;

function arr_indexOf(a, e) {
    for (var d = 0; d < a.length; d++) if (a[d] === e) return d;
    return -1
}
function rand() {
    for (var a = [], e = 0; e < m.length; e++) void 0 == m[e] && a.push(e);
    return a[Math.random() * a.length | 0]
}
function rand_st(a) {
    for (var a = arr_st[a], e = [], d = 0; d < a.length; d++) void 0 == m[a[d]] && e.push(a[d]);
    return e[Math.random() * e.length | 0]
}
function show(a) {
    if ( void 0 == a)  return
    step++;
    t.rows[Math.floor(a / 3)].cells[a % 3].innerHTML = n ? "X" : "O";
    m[a] = n;
    n ^= 1;
    9 == step && mess("0 == 0")
}
function vivat(a, e) {
    for (var d = 0; d < a.length; d++) {
        var f = a[d];
        t.rows[Math.floor(f / 3)].cells[f % 3].style.cssText = b[e]
    }
}
function arr_null(a) {
    for (var e = 0; e < a.length && !(void 0 == m[a[e]]); e++);
    return a[e]
}
function go(a) {
    if (void 0 == m[a] && 9 > step) {
        show(a);
        for (var e = 0, d = []; e < arr.length; e++) {
            for (var f = 0, g = 0; g < arr[e].length; g++) {
                var h = arr[e][g];
                1 === m[h] && f++;
                0 === m[h] && f--
            }
            d[e] = f
        }
         - 1 != arr_indexOf(d, -3) ?
          (f = arr_indexOf(d, -3), mess("vivat O"), vivat(arr[f], 0), step = 9) : -1 != arr_indexOf(d, 3) ?
          (f = arr_indexOf(d, 3), mess("vivat X"), vivat(arr[f], 1), step = 9) : -1 != arr_indexOf(d, -2) ?
          (f = arr_indexOf(d, -2), go(arr_null(arr[f]))) : -1 != arr_indexOf(d, 2) ?
          (f = arr_indexOf(d, 2), show(arr_null(arr[f]))) : show(void 0 == m[4] ?
          4 : (m[0] && m[8] || m[2] && m[6]) && void 0 != rand_st(0) ?
          rand_st(0) : 4 == a ?
          rand_st(1) : m[1] && m[3] && void 0 == m[0] ?
          0 : m[1] && m[5] && void 0 == m[2] ?
          2 : m[3] && m[7] && void 0 == m[6] ?
          6 : m[5] && m[7] && void 0 == m[8] ?
          8 : m[4] && (m[0] || m[2] || m[6] || m[8]) && void 0 != rand_st(1) ? rand_st(1) : rand())
    }
}
function mess(a) {
    document.getElementById("tv").innerHTML = a
}
function new_go() {
    mess("go");
    step = 0;
    m = Array(9);
    n = 1;
    var tds = t.getElementsByTagName('td')
    for (var i=0; i<tds.length; i++)  {
        tds[i].innerHTML = "&nbsp;";
        tds[i].style.cssText = ""
    }

}
new_go();
</script>
<input type="button" name="" value="new"  onclick="new_go()"/>
</body>
</html>


Часовой пояс GMT +3, время: 03:03.