pelita
Threadersteller
Dabei seit: 07.09.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 07.09.2010 17:40
Titel kartenlegespiel mit bildern und wörtern |
  |
|
hallihallo,
ich würde gerne ein memory spiel mit javascript und html erstellen bei dem man nicht zwei gleiche bilder finden muss sondern zu einem bild das passende wort. Z.B zu einem bild von einem hund muss man dann das wort "hund" aufdecken.
ein klassisches memory spiel an sich wurde schon programmiert aber nun weiß ich nicht weiter.
hier mal der html code
| Code: | <script language=JavaScript>
<!--
var cardOnField = new Array(3*4);
var nPairs = cardOnField.length / 2;
var nTries;
var nPairsFound;
var iFirstField;
var iSecondField;
var clickable = false;
var i0 = new Image(40, 40); i0.src = "0.jpg";
var i1 = new Image(40, 40); i1.src = "1.jpg";
var i2 = new Image(40, 40); i2.src = "2.jpg";
var i3 = new Image(40, 40); i3.src = "3.jpg";
var i4 = new Image(40, 40); i4.src = "4.jpg";
var i5 = new Image(40, 40); i5.src = "5.jpg";
var i6 = new Image(40, 40); i6.src = "6.jpg";
var sHiddenImage = "0.jpg";
function isHiddenCardOnField (i) {
if (!document.images)
return "non compatible browser";
var name = document.images["p" + i].src;
var len = name.length;
return name.substring (len-sHiddenImage.length, len) == sHiddenImage;
}
function showCardOnField (i) {
eval("window.document.board.p" + i
+ ".src='" + cardOnField[i] + ".jpg'");
}
function hideCardOnField (i) {
eval("window.document.board.p" + i
+ ".src='" + sHiddenImage + "'");
}
function hide() {
hideCardOnField(iFirstField);
hideCardOnField(iSecondField);
iFirstField = -1;
iSecondField = -1;
clickable = true;
}
function clickon(i) {
if (!clickable)
return;
if (!isHiddenCardOnField (i))
return;
showCardOnField(i);
if (iFirstField == -1 || i == iFirstField) {
iFirstField = i;
return;
}
clickable = false;
iSecondField = i;
nTries++;
if (cardOnField[iFirstField] != cardOnField[iSecondField]) {
setTimeout("hide()", 1050);
return;
}
nPairsFound++;
if (nPairsFound == nPairs)
alert("Gewonnen! "
+ "Du hast alle Paare mit " + nTries + " Versuchen gefunden!");
iFirstField = -1;
iSecondField = -1;
clickable = true;
}
function randomise() {
for (var n = 0; n < cardOnField.length; n++) {
i = Math.floor(Math.random()*cardOnField.length);
card = cardOnField[i];
cardOnField[i] = cardOnField[n];
cardOnField[n] = card;
}
}
function initGame() {
nTries = 0;
nPairsFound = 0;
iFirstField = -1;
iSecondField = -1;
for (var n = 0; n < cardOnField.length; n++) {
cardOnField[n] = Math.floor (n/2) + 1;
hideCardOnField(n);
}
randomise();
clickable = true;
}
//-->
</script>
<body onload=initGame()>
<h1><font face="Comic Sans MS" size="5" color=172983><div align="center">Verkehrszeichen Kartenspiel - Level 1</div></font></h1>
<div align="center"><blockquote>
<form name=board>
<table border=1 >
<tr>
<td width=130><a href="javascript:clickon(0)"><img height=125
src="0.jpg" width=130 border=0 name=p0></a></td>
<td width=130><a href="javascript:clickon(1)"><img height=125
src="0.jpg" width=130 border=0 name=p1></a></td>
<td width=130><a href="javascript:clickon(2)"><img height=125
src="0.jpg" width=130 border=0 name=p2></a></td>
<td width=130><a href="javascript:clickon(3)"><img height=125
src="0.jpg" width=130 border=0 name=p3></a></td>
</tr>
<tr>
<td width=130><a href="javascript:clickon(4)"><img height=125
src="0.jpg" width=130 border=0 name=p4></a></td>
<td width=130><a href="javascript:clickon(5)"><img height=125
src="0.jpg" width=130 border=0 name=p5></a></td>
<td width=130><a href="javascript:clickon(6)"><img height=125
src="0.jpg" width=130 border=0 name=p6></a></td>
<td width=130><a href="javascript:clickon(7)"><img height=125
src="0.jpg" width=130 border=0 name=p7></a></td>
</tr>
<tr>
<td width=130><a href="javascript:clickon(8)"><img height=125
src="0.jpg" width=130 border=0 name=p8></a></td>
<td width=130><a href="javascript:clickon(9)"><img height=125
src="0.jpg" width=130 border=0 name=p9></a></td>
<td width=130><a href="javascript:clickon(10)"><img height=125
src="0.jpg" width=130 border=0 name=p10></a></td>
<td width=130><a href="javascript:clickon(11)"><img height=125
src="0.jpg" width=130 border=0 name=p11></a></td>
</tr>
</font></div>
<div id="bild"><img src="bg_memory.jpg" alt="" height="500" width="805" border="0" /></div>
</body></html> |
kann mir vielleicht einer damit helfen?
|
|
Willkommen auf dem Portal für Mediengestalter
