Chińczyk w JS

0

Witam,

jestem młodym, początkującym programistą. Bawię się ostatnio językami webowymi. Mianowicie nie mogę napisać algorytmu który przesuwał by pionek o losową ilość oczek tak by był zachowany sposób poruszania się po planszy do chińczyka. Samą planszę wykonałem w html-u i css-ie. Losowość opisałem funkcjami:

math.floor((math.random()*5)+1)

Wraz z losowaniem liczb zmienia się grafika kostki z odpowiednią liczbą oczek.

Problemem jest przejście pionka z pól na obrzeżach planszy na kolorowe pola gdzie trzeba ułożyć wszystkie pionki aby wygrać. Można by to zrobić nakładając na siebie 4 warstwy divów i nadając im kolejne numery ale było by to bardzo nie eleganckie i uniemożliwiało by zbijanie się pionków, które także chcę zaimplementować.

Proszę o wskazanie kierunku w którym powinienem pójść. Z góry dziękuję :P

1

Czyli Twój algorytm działa, ale problem jest jak ktoś zrobił pełne okrążenie i musi zaparkować? Jeżeli tak, to bez kodu raczej nie powiemy Ci gdzie błąd ;)

0

Wybacz, nie sprecyzowałem. Nie napisałem kodu w js. Zrobiłem wszystko w Html i css, ale w momencie kiedy miałem to wprawić w ruch stanąłem w miejscu i nie wiem co dalej z tym zrobić.

Tak wygląda html:

<!doctype html>
<HTMl lang=pl>
	<head>
		<meta charset="utf-8">
		<meta name="Description"   content="Gra w chińczyka.">
		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
		
		<title>Chinńczyk!</title>
		
		<link rel="stylesheet" href="style.css" type="text/css" />
	
	</head>
	<body>
		
		<div id="container">
		<div id="LHcorner">
			<div class="square"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
		</div>
		
		<div id="gora">
			<div class="square"></div>
			<div class="square"></div>
			<div class="squareg"></div>
			<div style="clear:both;"></div>
			<div class="square"></div>
			<div class="squareg"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
			<div class="square"></div>
			<div class="squareg"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
			<div class="square"></div>
			<div class="squareg"></div>
			<div class="square"></div>
		
		</div>
		
		
		<div id="RHcorner">
			<div class="square"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
		</div>
			<div style="clear:both;"></div>
		<div id="srodek">
			<div class="squarey"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="squareg"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
			<div class="square"></div>
			<div class="squarey"></div>
			<div class="squarey"></div>
			<div class="squarey"></div>
			<div class="squarey"></div>
			<div id="czarny"></div>
			<div class="squarer"></div>
			<div class="squarer"></div>
			<div class="squarer"></div>
			<div class="squarer"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="squareb"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div class="squarer"></div>
			<div style="clear:both;"></div>
		
		
		</div>
		<div id="LLcorner">
			<div class="square"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
		</div>
		
		<div id="gora">
			<div class="square"></div>
			<div class="squareb"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
			<div class="square"></div>
			<div class="squareb"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
			<div class="square"></div>
			<div class="squareb"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
			<div class="squareb"></div>
			<div class="square"></div>
			<div class="square"></div>
		
		</div>
		
		<div id="RLcorner">
			<div class="square"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
			<div class="square"></div>
			<div class="square"></div>
			<div style="clear:both;"></div>
		
		</div>
		<div style="clear:both;"></div>
		
		
		
		</div>
	</body>

</html>

A tak css:

*
{
	margin:0px;
	padding:0px;
}
#container
{
	margin-left:auto;
	margin-right:auto;
	width:1100px;
	min-height:1100px;
	background-color:#cccccc;
}

#RHcorner
{
	background-color:green;
	width: 200px;
	height:200px;
	float: left;
	margin-left:200px;
	
}
#LHcorner
{
	background-color:yellow;
	width: 200px;
	height:200px;
	float: left;
}
#RLcorner
{
	margin-left:200px;
	background-color:red;
	width: 200px;
	height:200px;
	float: left;
	margin-top:200px;
}
#LLcorner
{
	background-color:blue;
	width: 200px;
	height:200px;
	float: left;
	margin-top:200px;
	
}
.square
{
	border-style: solid;
	border-width:3px;
	border-color:black;
	float:left;
	width:94px;
	height:94px;
	
}
.squareg
{
	border-style: solid;
	border-width:3px;
	border-color:black;
	float:left;
	width:94px;
	height:94px;
	background-color:green;
}
.squareb
{
	border-style: solid;
	border-width:3px;
	border-color:black;
	float:left;
	width:94px;
	height:94px;
	background-color:blue;
}
.squarey
{
	border-style: solid;
	border-width:3px;
	border-color:black;
	float:left;
	width:94px;
	height:94px;
	background-color:yellow;
}
.squarer
{
	border-style: solid;
	border-width:3px;
	border-color:black;
	float:left;
	width:94px;
	height:94px;
	background-color:red;
}
#czarny
{
	border-style: solid;
	border-width:3px;
	border-color:black;
	float:left;
	width:94px;
	height:94px;
	background-color:black;
}
#gora
{
	float:left;
	margin-left:200px;
	width:300px;
	height:400px;
}
#srodek
{
	width:1100px;
	height:300px;
}
1

Ciekawy problem, nie robiłem jeszcze nigdy chińczyka w JS (ani w żadnym innym języku). Mógłbyś wstawić jakiś rysunek, gdzie byłaby narysowana symboliczna plansza i miejsce gdzie masz problem i co chcesz osiągnąć? (np. za pomocą strzałek).

Problemem jest przejście pionka z pól na obrzeżach planszy na kolorowe pola gdzie trzeba ułożyć wszystkie pionki aby wygrać. Można by to zrobić nakładając na siebie 4 warstwy divów
i nadając im kolejne numery ale było by to bardzo nie eleganckie i uniemożliwiało by zbijanie się pionków, które także chcę zaimplementować.

ciężko mi sobie skonceptualizować ten problem, o którym piszesz.

1

Chodzi o przejście pionka, za pomocą podmiany wewnętrznego html div-a w miejscach zaznaczonych. Już wiem, że muszę dołożyć do wszystkich białych kwadratów unikalne id od 1 do 40, ale nadal nie wiem jak to zamknąć w js, tak aby odpowiedni pionek - div wystylizowany na pionka w css-ie - wskoczył na pola odpowiedniego koloru. Cyba dobrze wyjaśniłem, mam nadzieję.

1ff78-chinczyk.png

1

Może ta wersja będzie bardziej czytelna:
1ff78-chinczyk.png

1

Najprostszym rozwiązaniem według mnie będzie zliczanie ile kroków zrobił już dany pionek, aby pionek doszedł do mety musi pokonać tą samą ilość pól. Dzięki temu matematycznie będziesz mógł obliczyć czy pionki są na tym samym polu, czy je zbić czy mają skręcić na kolorowe pole.

0

To rozwiązuję problem przejścia, ale zbijanie będę musiał rozpisać jako if sprawdzający w danym divie jest pionek czy nie i jakiego jest on koloru, ponieważ każdy kolor zaczyna z innego koloru. Gdybym zrobił to za pomocą zliczania to dla każdego koloru div o numerze 1 będzie inny. Tak czy inaczej dziękuję za pomysł, powinienem teraz dać radę to sklecić w całość.

1

Tak, ale wtedy możesz zrobić zależności między kolorami bo pomiędzy nimi jest 11 różnicy np. jeśli zielony poszedł o 1 pole, to żółty po przejściu o 11 pól + 1 go zbije, a niebieski po 2x(11)+1 go zbije etc. wystarczy dobrze obmyślić strukturę pomiędzy kolorami i już będzie z górki.

0

@Smile13: Jeszcze takie porady odnośnie css może Ci się przyda:

.square
{
    border-style: solid;
    border-width:3px;
    border-color:black;
    float:left;
    width:94px;
    height:94px;
 
}
.squareg
{
    border-style: solid;
    border-width:3px;
    border-color:black;
    float:left;
    width:94px;
    height:94px;
    background-color:green;
}
.squareb
{
    border-style: solid;
    border-width:3px;
    border-color:black;
    float:left;
    width:94px;
    height:94px;
    background-color:blue;
}
.squarey
{
    border-style: solid;
    border-width:3px;
    border-color:black;
    float:left;
    width:94px;
    height:94px;
    background-color:yellow;
}
.squarer
{
    border-style: solid;
    border-width:3px;
    border-color:black;
    float:left;
    width:94px;
    height:94px;
    background-color:red;
}

Nie powinno się powtarzać tych samych styli w taki sposób, dużo lepiej jest zrobić coś takiego:

.square
{
    border-style: solid;
    border-width:3px;
    border-color:black;
    float:left;
    width:94px;
    height:94px;
}
.squareg
{
    background-color:green;
}
.squareb
{
    background-color:blue;
}
.squarey
{
    background-color:yellow;
}
.squarer
{
    background-color:red;
}

I wtedy przypisujesz 2 klasy, a css jest bardziej przejrzysty i łatwiejszy w modyfikacji np. zwiększając mapę zmieniasz width i height w jednej klasie, a nie w czterech.
Dodatkowo lepiej jest nie opisywać klas tak:

#czarny
{
    border-style: solid;
    border-width:3px;
    border-color:black;
    float:left;
    width:94px;
    height:94px;
    background-color:black;
}

Tzn. nie jaki to kolor tylko co on reprezentuje, np. #active-square. Plus używasz nazw klas polskich jak i angielskich.

Takie drobne rady, które mogą Ci pomóc w przyszłości :)

0

Jeżeli uda ci się zrobić to co zaplanowałeś to wrzuć projekt na githuba chętnie zerkne

1 użytkowników online, w tym zalogowanych: 0, gości: 1