Losowanie obrazka z tablicy :: 4programmers.net

0

witam,
jestem nowicjuszem w programowaniu i mam pewien problem. Otóż, mam tablice:

 
var karty = Array(23);
	karty[0]=new Image();
	karty[0].src = "gf/9_1.bmp";
	karty[1]=new Image();
	karty[1].src = "gf/9_2.bmp";
	karty[2]=new Image();
	karty[2].src = "gf/9_3.bmp";
	karty[3]=new Image();
	karty[3].src = "gf/9_4.bmp";
	karty[4]=new Image();
	karty[4].src = "gf/10_1.bmp";
	karty[5]=new Image();
	karty[5].src = "gf/10_2.bmp";
	karty[6]=new Image();
	karty[6].src = "gf/10_3.bmp";
	karty[7]=new Image();
	karty[7].src = "gf/10_4.bmp";
	karty[8]=new Image();
	karty[8].src = "gf/j_1.bmp";
	karty[9]=new Image();
	karty[9].src = "gf/j_2.bmp";
	karty[10]=new Image();
	karty[10].src = "gf/j_3.bmp";
	karty[11]=new Image();
	karty[11].src = "gf/j_4.bmp";
	karty[12]=new Image();
	karty[12].src = "gf/q_1.bmp";
	karty[13]=new Image();
	karty[13].src = "gf/q_2.bmp";
	karty[14]=new Image();
	karty[14].src = "gf/q_3.bmp";
	karty[15]=new Image();
	karty[15].src = "gf/q_4.bmp";
	karty[16]=new Image();
	karty[16].src = "gf/k_1.bmp";
	karty[17]=new Image();
	karty[17].src = "gf/k_2.bmp";
	karty[18]=new Image();
	karty[18].src = "gf/k_3.bmp";
	karty[19]=new Image();
	karty[19].src = "gf/k_4.bmp";
	karty[20]=new Image();
	karty[20].src = "gf/a_1.bmp";
	karty[21]=new Image();
	karty[21].src = "gf/a_2.bmp";
	karty[22]=new Image();
	karty[22].src = "gf/a_3.bmp";
	karty[23]=new Image();
	karty[23].src = "gf/a_4.bmp";

i chciałbym aby został wylosowany obrazek i zostal wyswietlony. I nie wiem od czego mam zacząć.
Ma być to gra karciana oczko i będę wykorzystywać to losowanie i tą tablice jak przemieszczę kartę z talii na pole gry.

0

Losujesz indeks za pomocą Math.random(), potem pobierasz src obrazka z tablicy i wrzucasz obrazek do jakiegoś diva, co za problem?

0

a napisałbyś mi to bo to dla mnie troche skomplikowane. To znaczy wiem o czym mówisz, ale mam problemy z zapisem.

1

var randIndex = Math.round(Math.random() * (karty.length - 1); // losowanie indeksu tablicy z zakresu 0 - 23
var newDiv = document.createElement("div");
newDiv.innerHTML = '<img src="' + karty[randIndex].src + '" />'; //tworze diva
document.getElementsByTagName("body")[0].appendChild(newDiv) //dodaje na koniec dokumentu

Pisane na sucho, ale powinno być OK, chociaż dawno nie pisałem w czystym Javascripcie, jQuery rozleniwia...

0

Obecnie graficznie wyglada to tak:
http://www25.zippyshare.com/v/24137373/file.html

Chciałbym, puszczając karte pobraną z górnej talii, żeby sie odwrociła i przybrała losową figurę. Jak to zrobić?

Oto cały kod mojej gry:

<html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
img
{
	position:absolute;
	}
	
</style>


<script type="text/javascript">
document.onmousedown=coordinates;
document.onmouseup=mouseup;
var sender;
function coordinates(e)
{
if (e == null) { e = window.event;}
sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;

if (sender.id=="moveMe")
  {
  mouseover=true;
  pleft=parseInt(sender.style.left);
  ptop=parseInt(sender.style.top);
  xcoor=e.clientX;
  ycoor=e.clientY;
  document.onmousemove=moveImage;
  return false;
  }
else { return false; }
}

function moveImage(e)
{
if (e == null) { e = window.event;}
sender.style.left=pleft+e.clientX-xcoor+"px";
sender.style.top=ptop+e.clientY-ycoor+"px";
return false;
}

function mouseup(e)
{
document.onmousemove=null; 
if (sender.offsetLeft>330 && sender.offsetLeft<370 && 
sender.offsetTop>105 && sender.offsetTop<195)
	{
	sender.style.left = "350px";
	sender.style.top = "150px";
	}
	else{

		if(
		sender.offsetLeft>430 && sender.offsetLeft<470 &&
		sender.offsetTop>105 && sender.offsetTop<195)
		{
			sender.style.left = "450px";
			sender.style.top = "150px";
			}	
		else
		{
			if(
			sender.offsetLeft>530 && sender.offsetLeft<570 &&
			sender.offsetTop>105 && sender.offsetTop<195)
			{
				sender.style.left = "550px";
				sender.style.top = "150px";}
				else
				{	 
					sender.style.left = pleft + "px";
					sender.style.top = ptop + "px";
					}
	}
}
}
function odwrot()
{
document.getElementById('moveMe').src="gf/9_1.bmp";
document.onmousemove=null;
}
</script>

</head>


<body background="gf/bg.jpg"><br>
<form>
<input type="button" onclick=
"alert('Waga figur:'+'\n'+'9 - wartość 0'+'\n'+'10 - wartosc 10'+'\n'+
'Walet - wartość 2'+'\n'+'Dama - wartość 3'+'\n'+'Król - wartość 4'
+'\n'+'As - wartość 11')" 
value="Wartości kart">
</form>
<script type="text/javascript" >

alert("GRA KARCIANA OCZKO!" + "\n" + " Aby zacząć kliknij OK");


var zmienna = 10;

//talia kart na stole
var talia = new Array (23);

for(i=0;i<=23;i++)
{
	talia[i] = document.createElement("img");
	document.body.appendChild(talia[i]);
	talia[i].src="gf/0.bmp";
	talia[i].style.top=zmienna* "0" + "px";
	talia[i].style.left=zmienna* "20" + "px";
	talia[i].id="moveMe";
	onlick="odwrot()";
	zmienna++;
	}



//pole na ktory mamy wybrane karty
pole1 = document.createElement("img");
document.body.appendChild(pole1);
pole1.src="gf/pole.PNG";
pole1.style.top="150px";
pole1.style.left="250px";

pole2 = document.createElement("img");
document.body.appendChild(pole2);
pole2.src="gf/pole.PNG";
pole2.style.top="150px";
pole2.style.left="350px";

pole3 = document.createElement("img");
document.body.appendChild(pole3);
pole3.src="gf/pole.PNG";
pole3.style.top="150px";
pole3.style.left="450px";

pole4 = document.createElement("img");
document.body.appendChild(pole4);
pole4.src="gf/pole.PNG";
pole4.style.top="150px";
pole4.style.left="550px";


var karty = Array(23);
	karty[0]=new Image();
	karty[0].src = "gf/9_1.bmp";
	karty[1]=new Image();
	karty[1].src = "gf/9_2.bmp";
	karty[2]=new Image();
	karty[2].src = "gf/9_3.bmp";
	karty[3]=new Image();
	karty[3].src = "gf/9_4.bmp";
	karty[4]=new Image();
	karty[4].src = "gf/10_1.bmp";
	karty[5]=new Image();
	karty[5].src = "gf/10_2.bmp";
	karty[6]=new Image();
	karty[6].src = "gf/10_3.bmp";
	karty[7]=new Image();
	karty[7].src = "gf/10_4.bmp";
	karty[8]=new Image();
	karty[8].src = "gf/j_1.bmp";
	karty[9]=new Image();
	karty[9].src = "gf/j_2.bmp";
	karty[10]=new Image();
	karty[10].src = "gf/j_3.bmp";
	karty[11]=new Image();
	karty[11].src = "gf/j_4.bmp";
	karty[12]=new Image();
	karty[12].src = "gf/q_1.bmp";
	karty[13]=new Image();
	karty[13].src = "gf/q_2.bmp";
	karty[14]=new Image();
	karty[14].src = "gf/q_3.bmp";
	karty[15]=new Image();
	karty[15].src = "gf/q_4.bmp";
	karty[16]=new Image();
	karty[16].src = "gf/k_1.bmp";
	karty[17]=new Image();
	karty[17].src = "gf/k_2.bmp";
	karty[18]=new Image();
	karty[18].src = "gf/k_3.bmp";
	karty[19]=new Image();
	karty[19].src = "gf/k_4.bmp";
	karty[20]=new Image();
	karty[20].src = "gf/a_1.bmp";
	karty[21]=new Image();
	karty[21].src = "gf/a_2.bmp";
	karty[22]=new Image();
	karty[22].src = "gf/a_3.bmp";
	karty[23]=new Image();
	karty[23].src = "gf/a_4.bmp";

//losowanie karty z powyższej tablicy
var randIndex = Math.round(Math.random() * (karty.length - 1));
var los = document.createElement("img");

los.src =karty[randIndex].src;

document.getElementsByTagName("body")[0].appendChild(los)
los.style.top="150px";
los.style.left="250px";

//losowanie drugiej karty
var randIndex2 = Math.round(Math.random() * (karty.length - 1));
var los2 = document.createElement("img");
los2.src=karty[randIndex2].src;
document.getElementsByTagName("body")[0].appendChild(los2)
los2.style.top="150px";
los2.style.left="350px";





</script>
</body>
</html>

Losowanie obrazka z tablicy

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

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami