✔ Bild mit Javascript einfügen

prinzessin4444 · 19. Januar 2009

Hallo!
Ich programmier gerade das Minesweeper Spiel nur ich komme jetzt nicht mehr weiter.
Ich möchte anstatt der 0 die im moment da steht ein Bild einsetzten und das selbe für die 9, nur irgendwie krieg ich das nicht hin.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
 <script type="text/javascript">
  var anzahlBomben=15;



  var rahmen = new Array();

  rahmen[0] = new Array();
  rahmen[0][0] = 0;
  rahmen[0][1] = 0;
  rahmen[0][2] = 0;
  rahmen[0][3] = 0;
  rahmen[0][4] = 0;
  rahmen[0][5] = 0;
  rahmen[0][6] = 0;
  rahmen[0][7] = 0;
  rahmen[0][8] = 0;
  rahmen[0][9] = 0;


  rahmen[1] = new Array();
  rahmen[1][0] = 0;
  rahmen[1][1] = 0;
  rahmen[1][2] = 0;
  rahmen[1][3] = 0;
  rahmen[1][4] = 0;
  rahmen[1][5] = 0;
  rahmen[1][6] = 0;
  rahmen[1][7] = 0;
  rahmen[1][8] = 0;
  rahmen[1][9] = 0;

  rahmen[2] = new Array();
  rahmen[2][0] = 0;
  rahmen[2][1] = 0;
  rahmen[2][2] = 0;
  rahmen[2][3] = 0;
  rahmen[2][4] = 0;
  rahmen[2][5] = 0;
  rahmen[2][6] = 0;
  rahmen[2][7] = 0;
  rahmen[2][8] = 0;
  rahmen[2][9] = 0;

  rahmen[3] = new Array();
  rahmen[3][0] = 0;
  rahmen[3][1] = 0;
  rahmen[3][2] = 0;
  rahmen[3][3] = 0;
  rahmen[3][4] = 0;
  rahmen[3][5] = 0;
  rahmen[3][6] = 0;
  rahmen[3][7] = 0;
  rahmen[3][8] = 0;
  rahmen[3][9] = 0;

  rahmen[4] = new Array();
  rahmen[4][0] = 0;
  rahmen[4][1] = 0;
  rahmen[4][2] = 0;
  rahmen[4][3] = 0;
  rahmen[4][4] = 0;
  rahmen[4][5] = 0;
  rahmen[4][6] = 0;
  rahmen[4][7] = 0;
  rahmen[4][8] = 0;
  rahmen[4][9] = 0;

  rahmen[5] = new Array();
  rahmen[5][0] = 0;
  rahmen[5][1] = 0;
  rahmen[5][2] = 0;
  rahmen[5][3] = 0;
  rahmen[5][4] = 0;
  rahmen[5][5] = 0;
  rahmen[5][6] = 0;
  rahmen[5][7] = 0;
  rahmen[5][8] = 0;
  rahmen[5][9] = 0;

  rahmen[6] = new Array();
  rahmen[6][0] = 0;
  rahmen[6][1] = 0;
  rahmen[6][2] = 0;
  rahmen[6][3] = 0;
  rahmen[6][4] = 0;
  rahmen[6][5] = 0;
  rahmen[6][6] = 0;
  rahmen[6][7] = 0;
  rahmen[6][8] = 0;
  rahmen[6][9] = 0;

  rahmen[7] = new Array();
  rahmen[7][0] = 0;
  rahmen[7][1] = 0;
  rahmen[7][2] = 0;
  rahmen[7][3] = 0;
  rahmen[7][4] = 0;
  rahmen[7][5] = 0;
  rahmen[7][6] = 0;
  rahmen[7][7] = 0;
  rahmen[7][8] = 0;
  rahmen[7][9] = 0;

  rahmen[8] = new Array();
  rahmen[8][0] = 0;
  rahmen[8][1] = 0;
  rahmen[8][2] = 0;
  rahmen[8][3] = 0;
  rahmen[8][4] = 0;
  rahmen[8][5] = 0;
  rahmen[8][6] = 0;
  rahmen[8][7] = 0;
  rahmen[8][8] = 0;
  rahmen[8][9] = 0;

  rahmen[9] = new Array();
  rahmen[9][0] = 0;
  rahmen[9][1] = 0;
  rahmen[9][2] = 0;
  rahmen[9][3] = 0;
  rahmen[9][4] = 0;
  rahmen[9][5] = 0;
  rahmen[9][6] = 0;
  rahmen[9][7] = 0;
  rahmen[9][8] = 0;
  rahmen[9][9] = 0;

  function bombenVerteilen(){
      for (var b=0; b<anzahlBomben; b++){
         var j = Math.random();
         j = j*10;
         j = Math.floor(j);

         var i = Math.random();
         i = i*10;
         i = Math.floor(i);

         if (rahmen[j][i] == 9){
                 b--;
         }
         else{
                 rahmen[j][i]=9;
         }

      }

  bombenUeberpruefung();
  }




  function bombenUeberpruefung(){
         var i,j;
         for (i=0; i<10; i++){
                 for(j=0; j<10; j++){
                         var feld = rahmen[j][i];
                         if (feld == 9){
                                 if (((i+1)<10) && (rahmen[j][i+1] <9)){
                                         var feld_um1 = rahmen[j][i+1];
                                         feld_um1++;
                                         rahmen[j][i+1] = feld_um1;
                                 }

                                 if (((i-1)>=0) && (rahmen[j][i-1]<9)){
                                         var feld_um2 = rahmen[j][i-1];
                                         feld_um2++;
                                         rahmen[j][i-1] = feld_um2;
                                 }

                                 if (((j+1)<10) && (rahmen[j+1][i]<9)){
                                         var feld_um3 = rahmen[j+1][i];
                                         feld_um3++;
                                         rahmen[j+1][i] = feld_um3;
                                 }

                                 if (((j-1)>=0) && (rahmen[j-1][i]<9)){
                                         var feld_um4 = rahmen[j-1][i];
                                         feld_um4++;
                                         rahmen[j-1][i] = feld_um4;
                                 }

                                 if (((i+1)<10) && ((j+1)<10) && (rahmen[j+1][i+1]<9)){
                                         var feld_um5 = rahmen[j+1][i+1];
                                         feld_um5++;
                                         rahmen[j+1][i+1] = feld_um5;
                                 }

                                 if (((i-1)>=0) && ((j-1)>=0) && (rahmen[j-1][i-1]<9)){
                                         var feld_um6 = rahmen[j-1][i-1];
                                         feld_um6++;
                                         rahmen[j-1][i-1] = feld_um6;
                                 }

                                 if (((j+1)<10) && ((i-1)>=0) && (rahmen[j+1][i-1]<9)){
                                         var feld_um7 = rahmen[j+1][i-1];
                                         feld_um7++;
                                         rahmen[j+1][i-1] = feld_um7;
                                 }

                                 if (((j-1)>=0) && ((i+1)<10) && (rahmen[j-1][i+1]<9)){
                                         var feld_um8 = rahmen[j-1][i+1];
                                         feld_um8++;
                                         rahmen[j-1][i+1] = feld_um8;
                                 }
                         }
                 }
         }
  }

  function feldNummer(elementId){
         var koordinaten = elementId.split("_");
         var j=koordinaten[0];
         var i=koordinaten[1];
         document.getElementById(elementId).innerHTML= rahmen[j][i];

         document.getElementById(elementId).style.color="blue";
         document.getElementById(elementId).style.background="grey";




  }
</script>

</head>
<body style="font-family:arial;font-size:10px;text-align:center;">
<table border="0" style="160px">
         <tr style="160px">
                 <td id="0_0"  onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">

                 </td>
                 <td id="0_1" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="0_2" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="0_3" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="0_4" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="0_5" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="0_6" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="0_7" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="0_8" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="0_9" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
         </tr>
         <tr style="160px">
                 <td id="1_0" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="1_1" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="1_2" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="1_3" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="1_4" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="1_5" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="1_6" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="1_7" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="1_8" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="1_9" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
         </tr>
          <tr style="160px">
                 <td id="2_0" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="2_1" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="2_2" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="2_3" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="2_4" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="2_5" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="2_6" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="2_7" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="2_8" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="2_9" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
         </tr>
          <tr style="160px">
                 <td id="3_0" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="3_1" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="3_2" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="3_3" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="3_4" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="3_5" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="3_6" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="3_7" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="3_8" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="3_9" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
         </tr>
          <tr style="160px">
                 <td id="4_0" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="4_1" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="4_2" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="4_3" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="4_4" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="4_5" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="4_6" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="4_7" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="4_8" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="4_9" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
         </tr>
          <tr style="160px">
                 <td id="5_0" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="5_1" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="5_2" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="5_3" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="5_4" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="5_5" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="5_6" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="5_7" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="5_8" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="5_9" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
         </tr>
          <tr style="160px">
                 <td id="6_0" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="6_1" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="6_2" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="6_3" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="6_4" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="6_5" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="6_6" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="6_7" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="6_8" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="6_9" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
         </tr>
          <tr style="160px">
                 <td id="7_0" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="7_1" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="7_2" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="7_3" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="7_4" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="7_5" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="7_6" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="7_7" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="7_8" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="7_9" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
         </tr>
          <tr style="160px">
                 <td id="8_0" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="8_1" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="8_2" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="8_3" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="8_4" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="8_5" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="8_6" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="8_7" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="8_8" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="8_9" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
         </tr>
          <tr style="160px">
                 <td id="9_0" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="9_1" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="9_2" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="9_3" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="9_4" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="9_5" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="9_6" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="9_7" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="9_8" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
                 <td id="9_9" onClick="feldNummer(this.id)" style="width:16px;">
                         <img src="quadrat.jpg">
                 </td>
         </tr>
</table>
<button name="start" type="button"  onclick="bombenVerteilen()" style="float:left">start
</button>
</body>
</html>

Quaese · 19. Januar 2009

Hi,

überprüfe in der Funktion feldNummer in einer switch-Anweisung welcher Wert sich aktuell in rahmen[j][i] befindet und weise einer Variablen den entsprechenden Source-String zu.

Beispiel:

Code:

function feldNummer(elementId){
	var koordinaten = elementId.split("_");
	var j=koordinaten[0];
	var i=koordinaten[1];
	var strSrc = "";

	switch(rahmen[j][i]){
	  case 0:
	    strSrc = "null.gif";
	    break;
	  case 9:
	    strSrc = "bombe.gif";
	    break;
	  default:
	    strSrc = "null.gif";
	}

	document.getElementById(elementId).innerHTML= "<img src=\""+strSrc+"\">";
	//document.getElementById(elementId).innerHTML= rahmen[j][i];

	document.getElementById(elementId).style.color="blue";
	document.getElementById(elementId).style.backgroundColor="#ccc";
}

Ciao
Quaese

prinzessin4444 · 19. Januar 2009

hi!
so funktioniert das aber nicht.

Quaese · 19. Januar 2009

Hi,

ich hab dir mal ein funktionierendes Beispiel hochgeladen - hier.

Im Prinzip wie in meinem ersten Post, nur werden die Grafiken nicht über innerHTML geändert, sondern über das Zuweisen der benötigten Bildquelle (aus Performanzgründen).

Ciao
Quaese

✔ Bild mit Javascript einfügen

prinzessin4444

Mitglied

Quaese

Moderator

prinzessin4444

Mitglied

Quaese

Moderator

Neue Beiträge