Помогите плз с пятнашками

DasBit · August 13, 2011

Доброго времени суток. Наведите пожалуйста на мысль как заставить в пятнашках элементы головоломки двигаться :unsure:

Я понимаю что нужно принимать функцией значение элемента при клике на нем, вот:

<img src="images/1.gif" name="1" onClick="imgChange(1)" />

И вот так:

function imgChange(imgNumber) { }

Дальше завис :blush: натолкните хоть просто на мысль как. Я догадываюсь, что ответ очень прост, но не могу до него допереть.

З.Ы. Стыд и позор :facepalmxd:

CalvinKlein · August 18, 2011

а что там непонятного, вроде всё просто?!
Ага, ну раз я в "просто" не врубаю, значит все...можно считать, что курсач провален

Ну неужели совсем ничего не понятно?

DasBit · August 18, 2011

а что там непонятного, вроде всё просто?!
Ага, ну раз я в "просто" не врубаю, значит все...можно считать, что курсач провален
Ну неужели совсем ничего не понятно?

Ну конечно не совсем все, но все же. Что-то понимаю, что-то нет. Просто наверное за сегодня я и так норм мозги запарил. Нужно имхо передохнуть, а завтра на свежую голову посидеть, подумать. Все таки еще неделька есть у меня в запасе)

CalvinKlein · August 18, 2011

Ну конечно не совсем все, но все же. Что-то понимаю, что-то нет. Просто наверное за сегодня я и так норм мозги запарил. Нужно имхо передохнуть, а завтра на свежую голову посидеть, подумать. Все таки еще неделька есть у меня в запасе)

Обращайся если что

olga153b · August 22, 2011

Доброе время суток! Перечитала я эту тему с 1 поста до 29 последнего и не один раз, скачала код всех троих. psywalker,kelvinclein,dasbit

У меня вопрос Напишите плз код, чтобы одна(любая) цифра сдвинулась на соседнее пустое место. Без циклов, без разветвлений--в этом я сама способна разобраться, меня этот вопрос давно уже мучает.Нужно заставить сдвинуться с места. Я каждый день читаю JS, и MOVE тоже читала, но пока еще ничего не могу.

Int · August 22, 2011

передвинуть картинку? о_О

<div style="position:fixed; left:100px;" id="one">1</div>

document.getElementById('one').style.left='50px';

CalvinKlein · August 22, 2011


function move( el, xf, yf, xt, yt )
{
	var sm = 0;
	timer = setInterval( function()
		{
			el.style["top"] = yf*size+sm*(yt-yf)+"px";
			el.style["left"] = xf*size+sm*(xt-xf)+"px";
			sm+=10;
			if( sm > size ) {
				el.style["top"] = yt*size+"px";
				el.style["left"] = xt*size+"px";
				clearInterval(timer);
				timer = 0;
			}
		}, 10
	);
}

так вот же мой код перемещения

здесь el - фишка,

xf - начальная координата x

yf - начальная координата y

xt - конечная координата x

yt - конечная координата y

size - расстояние на которое надо переместить

olga153b · August 23, 2011


<html>
 <head>
  <title>Игра Пятнашки</title>
  <script type="text/javascript">

function initgame()

  function move( el, 40, 40, 140, 40 )
{


        var sm = 0;
        timer = setInterval( function()
                {
                        el.style["top"] = 40*100+(40-40)+"px";
                        el.style["left"] = 40*100+(140-40)+"px";

                }, 10
        );
}


  </script>
 </head>
 <body>                                            

  <table border="1" bgcolor="yellow">

   <tr>
        <td>
	<img src="1.gif" id="1" onClick="function move( el, 40, 40, 140, 40 )" />
	</td>
        <td> privet.....</td>
       </tr>
  </table>
  </body>
  </html>

что ему надо? не двигается. рисунок

Edited August 23, 2011 by olga153b

CalvinKlein · August 23, 2011

конечно он не будет двигаться ведь у вас нет переменной

Да и вообще javascript код сплошная ошибка,

onClick="function move( el, 40, 40, 140, 40 );" что за бред?

onClick="move( el, 40, 40, 140, 40 );" пишите так

и ещё где стиль пятнашки прописан?

чтобы она двигалась у неё должно быть свойство position:absolute

да и el - это элемент который по id получить надо

Edited August 23, 2011 by CalvinKlein

olga153b · August 23, 2011


<html>
 <head>
  <title>Игра Пятнашки</title>
  <script type="text/javascript">

<style type="text/css">
	*{ margin: 0; padding: 0;}
	body,html { height: 100%;}


       #field
{
	position:relative;
}
        .pat
{
	position:absolute;
	width:100px;
	height:100px;

	border-style: solid;
	border-width: 3px;
	border-color:#ededed #aaa #aaa #ededed;

	line-height:100px;
	text-align:center;
	background:#ddf;
	font-family:Arial, Sans-Serif;
	font-size:60px;

	cursor:pointer;
}


</style>

function ge(n){return document.getElementById(n);}
function ce(t){return document.createElement(t);}
function initgame()
{

	var feild = ge('field');
	var el;
	el = ce("div");



			el.className = "pat";


size = 100;
}  
  function move( el, 40, 40, 140, 40 )
{


        var sm = 0;
        timer = setInterval( function()
                {
                        el.style["top"] = 40*100+(40-40)+"px";
                        el.style["left"] = 40*100+(140-40)+"px";

                }, 10
        );
}


  </script>
 </head>
 <body> 
<script type="text/javascript">
		initgame();
	</script>


<div id="field"></div>

                            <!--      <div style="display:none;"><script type="text/javascript"> 
                                   </div>    
                                       -->                                      

  <table border="1" bgcolor="yellow">

   <tr>
        <td>
	<img src="1.gif" id="1" onClick=" move( el, 40, 40, 140, 40 )" />
	</td>
        <td> privet.....</td>
       </tr>
  </table>

  </body>
  </html>

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

CalvinKlein · August 23, 2011


<html>
 <head>
  <title>Игра Пятнашки</title>
  <script type="text/javascript">

<style type="text/css">
	*{ margin: 0; padding: 0;}
	body,html { height: 100%;}


       #field
{
	position:relative;
}
        .pat
{
	position:absolute;
	width:100px;
	height:100px;

	border-style: solid;
	border-width: 3px;
	border-color:#ededed #aaa #aaa #ededed;

	line-height:100px;
	text-align:center;
	background:#ddf;
	font-family:Arial, Sans-Serif;
	font-size:60px;

	cursor:pointer;
}


</style>

function ge(n){return document.getElementById(n);}
function ce(t){return document.createElement(t);}
function initgame()
{

	var feild = ge('field');
	var el;
	el = ce("div");



			el.className = "pat";


size = 100;
}  
  function move( el, 40, 40, 140, 40 )
{


        var sm = 0;
        timer = setInterval( function()
                {
                        el.style["top"] = 40*100+(40-40)+"px";
                        el.style["left"] = 40*100+(140-40)+"px";

                }, 10
        );
}


  </script>
 </head>
 <body> 
<script type="text/javascript">
		initgame();
	</script>


<div id="field"></div>

                            <!--      <div style="display:none;"><script type="text/javascript"> 
                                   </div>    
                                       -->                                      

  <table border="1" bgcolor="yellow">

   <tr>
        <td>
	<img src="1.gif" id="1" onClick=" move( el, 40, 40, 140, 40 )" />
	</td>
        <td> privet.....</td>
       </tr>
  </table>

  </body>
  </html>

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

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

DasBit · August 31, 2011

Двигаться то у меня они начали. Только кликать нужно по соседним картинкам. Где то походу ошибка с координатами при клике :unsure:

olga153b · August 31, 2011

http://www.ph4.ru/js/jsp/index.htm несколько дней это читаю, но пока все в голове в тумане, прояснения нет.

CalvinKlein · August 31, 2011

ещё почитайте про DOM и работе с DOM на js

Great Rash · September 1, 2011

http://www.ph4.ru/js/jsp/index.htm несколько дней это читаю, но пока все в голове в тумане, прояснения нет.

Срочно прекращайте это читать! Это очень плохой самоучитель. Тут хороший.

sigma77 · September 1, 2011

Срочно прекращайте это читать! Это очень плохой самоучитель. Тут хороший.

+1

А у кого более менее нормально с английским даже лучше http://javascript.info/

DasBit · September 2, 2011

Все, разобрался :boast: . Спасибо всем отозвавшимся. Тему можно закрывать !

olga153b · September 15, 2011

ещё почитайте про DOM и работе с DOM на js

Спасибо, что указали в каком направлении двигаться,

Квадратик с места сдвинула, пока так.

Продолжаю работать в этом направлении, чтобы переместить из пункта А в пункт Б, по координатам.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>mesto_menyaet</title>
<style>
	* {
	margin: 0;
	padding: 0;
}
#kvadrat {
	width: 100px;
	height:100px;
	background:red;
}

#kvadrat1 {
	width: 100px;
	height:100px;
	background:#fff;
}
</style>
<script>
function go() {
        var body = document.getElementsByTagName('body')[0]
        var krasn = body.removeChild(body.firstChild)
        var zelen = body.removeChild(body.firstChild)
        body.appendChild(zelen)
        body.appendChild(krasn)
}
window.onload = function() { document.body.onclick = go }
</script>

    </head>
    <body>

	       <div id="kvadrat">
               </div>
		<div id="kvadrat1">
                </div>



    </body>
</html>

Sign In

Помогите плз с пятнашками

Question

Link to comment

Share on other sites

42 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information