Byta bild vid klick på bilder i en matris.

2014-12-19 19:05

Medlem

Plats: Vellinge
Registrerad: Nov 2002

●

Byta bild vid klick på bilder i en matris.

Jag håller på att fräscha upp min webbprogrammering och började pilla lite med tic tac toe spelet. Jag tänkte programmera spelet med hjälp av bilder. En bild som är en tom ruta. Sedan bild 2 och 3 är bilder på kryss och cirkel.

Jag har lagt uppbilderna i en matris och när spelet börjar är det 9 st bilder på en tom ruta och bilden jag använder heter tom.gif, de andra heter kryss.gif och cirkel.gif. Bilderna i matrisen sätter jag id-attributen till r1 - r9.

Det jag behöver hjälp med är att hur gör jag lättast för att byta en bild när jag klickar i en ruta? Klickar jag i en tom ruta så vill jag att bilden ändras till en annan. Jag har hittat exempel på när man har en bild och klickar på den, men inte om jag har 9 olika att bilder att utgå från.

För tillfället behöver jag inte lösa att den ska känna av om det är kryss eller cirkel som ska ändras till utan bara att byta bild, det andra vill jag försöka lösa själv.

Någon som har lite tips på hur jag skulle kunna göra?

Visa signatur

Apple Mackbook Pro 15" Retina 2013

Rapportera Redigera

Citera flera Citera

2014-12-22 11:58

Permalänk

Ernesto

Medlem ★

Plats: Stockholm
Registrerad: Aug 2005

●

Vad programmerar du i för språk?

Rapportera Redigera

Citera flera Citera

2014-12-22 14:23

Permalänk

Wickit

Medlem

Plats: hemma
Registrerad: Maj 2006

●

Jag antar att du kör spellogiken i javascript.

Du skulle tex kunna sätta en klass på varje ruta och koppla upp lyssnare.

<div class="square">
    
</div>

$('.square').click(function(){

});

Rapportera Redigera

Citera flera Citera

2014-12-22 14:34

Permalänk

Yxskaftet

Medlem

Registrerad: Okt 2002

●

Får man fråga varför du ska använda bilder överhuvudtaget när det är kryss och cirklar du ska rita ut?

Rapportera Redigera

Citera flera Citera

2014-12-23 12:21

Permalänk

Ernesto

Medlem ★

Plats: Stockholm
Registrerad: Aug 2005

●

<div class="square">
    
</div>


<script>
$(function() {

	BindClickToSquares();

});


function BindClickToSquares()
{
	$(".square").on("click",HandleSquareClick);
}

function HandleSquareClick()
{
	var square = $(this);

	var validMove = UpdateGameLogicOnClick(square);
	
	if(validMove.success)
	{
		UpdateSquareImage(square);
	} else {
		SetStatusMessage(validMove.statusMessage);
	}
}

function UpdateSquareImage(square)
{
	// kryss eller cirkel
	var playerImage = GetPlayerImageType();
	
	var currentImage = square.find("img");
	
	currentImage.hide().attr("src", playerImage + ".gif").fadeIn("fast");
	
}

function SetStatusMessage(message) {

// broadcast message
}

function UpdateGameLogicOnClick()
{
	// Update game logic, set states, etc.
	
	return {"success": true, "message": "Bra!"};
}
</script>

Rapportera Redigera

Citera flera Citera

2014-12-23 12:23

Permalänk

Ernesto

Medlem ★

Plats: Stockholm
Registrerad: Aug 2005

●

Skrivet av Yxskaftet:

Får man fråga varför du ska använda bilder överhuvudtaget när det är kryss och cirklar du ska rita ut?

Gå till inlägget

Hans kryss eller cirkel kanske ska vara fin? Spelplanen kanske är ett foto av hans morfars gamla luffarschack och han har olika snidade ek-ringar som ska placeras ut.

Det är väldigt svårt att göra med annat än bilder.

Rapportera Redigera

Citera flera Citera (1)

2014-12-23 20:05

Permalänk

kobb3

Medlem