0

チェス盤と絵を完全にコーディングすることに成功しました。ただし、多次元配列の代わりに、「if」ステートメントを使用して、配列ではなく for ループ内にチェスの駒の画像を挿入する必要があります。私がそれを試みるたびに、うまくいかず、すべてが台無しになります。誰でも私を助けて、何をすべきか提案してもらえますか。以下の私のコーディングを参照してください。

<html> 
<head> 
<style> 
th{ 
   width:60px; 
   height:60px; 
} 

table{ 
     border: 5px solid #FFBB78; 
     border-collapse:collapse; 
} 

td{ 
   width:60px; 
   height:60px; 
} 

tr{ 
   width:60px; 
   height:60px;  

} 
h1{ 
  color:#6633FF; 
}

</style> 

<script type="text/javascript"> 
function changeColor(){
    document.getElementById("king").style.backgroundColor="#666699";
 }

 function knight(){
    var msg = "This is the Knight";
    alert(msg);
 }

 function king(){
    var msg = "This is the King";
    alert(msg);
 }

 function pawn(){
    var msg = "This is the Pawn";
    alert(msg); 
 }

 function bishop(){
    var msg = "This is the Bishop";
    alert(msg);   
 }

 function rook(){
    var msg = "This is the Rook";
    alert(msg);    
 }

 function queen(){
     var msg = "This is the Queen";
     alert(msg);   
 }

</script> 
</head> 
<body> 
<?php 

/*$pictures = array( //Multi-dimensional array starts here
    //row 1/column 1
    "1,1" => '<img src="chess/br.gif" onclick="rook()"/>',  
    "1,3" => '<img src="chess/bb.gif" onclick="bishop()"/>', 
    "1,4" => '<img src="chess/bq.gif" onclick="queen()"/>',
    "1,5" => '<img src="chess/bk.gif" onclick="king()" />',
    "1,8" => '<img src="chess/br.gif" onclick="rook()"/>',

    //row 2 column 2
    "2,1" => '<img src="chess/bp.gif" onclick="pawn()"/>', 
    "2,2" => '<img src="chess/bp.gif" onclick="pawn()"/>', 
    "2,3" => '<img src="chess/bp.gif" onclick="pawn()"/>', 
    "2,4" => '<img src="chess/bp.gif" onclick="pawn()"/>', 
    "2,5" => '<img src="chess/bb.gif" onclick="bishop()"/>', 
    "2,6" => '<img src="chess/bp.gif" onclick="pawn()"/>', 
    "2,7" => '<img src="chess/bp.gif" onclick="pawn()"/>', 
    "2,8" => '<img src="chess/bp.gif" onclick="pawn()"/>',

    //row 3 column3
    "3,3" => '<img src="chess/bn.gif"  onclick="knight()"/>',
    "3,6" => '<img src="chess/bn.gif"  onclick="knight()" />',

    //row 4 column4
    "4,5" => '<img src="chess/bp.gif" onclick="pawn()"/>',

    //row 5 column 5
    "5,3" => '<img src="chess/wb.gif" onclick="bishop()"/>',
    "5,5" => '<img src="chess/wp.gif" onclick="pawn()"/>',

    //row 6 column 6
    "6,4" => '<img src="chess/wp.gif" onclick="pawn()"/>',
    "6,6" => '<img src="chess/wn.gif" onclick="knight()"/>',

    //row 7 column 7
    "7,1" => '<img src="chess/wp.gif" onclick="pawn()"/>',
    "7,2" => '<img src="chess/wp.gif" onclick="pawn()"/>',
    "7,3" => '<img src="chess/wp.gif" onclick="pawn()"/>',
    "7,6" => '<img src="chess/wp.gif" onclick="pawn()"/>',
    "7,7" => '<img src="chess/wp.gif" onclick="pawn()"/>',
    "7,8" => '<img src="chess/wp.gif" onclick="pawn()"/>',

    //row 8 column 8
    "8,1" => '<img src="chess/wr.gif" onclick="rook()"/>',
    "8,2" => '<img src="chess/wn.gif" onclick="knight()"/>',
    "8,3" => '<img src="chess/wb.gif" onclick="bishop()"/>',
    "8,4" => '<img src="chess/wq.gif" onclick="queen()"/>',
    "8,6" => '<img src="chess/wr.gif" onclick="rook()"/>',
    "8,7" => '<img src="chess/wk.gif" onmouseover="changeColor()" id="king" onclick="king()"/>',);//array ends here*/

    echo"<h1 align='center'>SAJID Chess Board</h1>"; 
    echo"<table border='1' align='center'>"; 

     for($i = 1; $i <= 8; $i++){ //loop starts here and sequently creates sqares     
          echo "<tr>"; 
     for($j = 1; $j <=8; $j++){ 
          if( ($i+$j)%2==0 ) {// since i and j will create the same sqaures throughout the loop, so I add it up without writting another loop 

                echo"<td bgcolor='#FF9933'>"; //color names are taken from www.w3schools.com html color picker
              } 
            else { 
                echo"<td bgcolor='#FFFF66'>"; 
            } 


          if(isset($pictures["{$i},{$j}"]))//Determine if a picture variable is set and is not NULL 
                echo $pictures["{$i},{$j}"]; //prints out the chess piece pictures

                echo "</td>"; 
                } 
                echo "</tr>"; 
                } //loop ends here

                echo "</table>"; 

?> 
</body> 
</html>
4

1 に答える 1

0

私は自分で答えを見つけました。私を助けようとしたすべての人に感謝します。「if」を使用してループ内のチェス盤内に画像を配置するには

$i を行、$j を列と考えてみましょう。

if($i==1 && $j==2){
  echo "<img src='image.gif'/>";
}

これで、チェス盤内の「for」ループ内の任意の場所に画像を配置でき、画像を繰り返すことなく、任意の行と列に配置できます。

于 2012-05-30T14:42:17.523 に答える