Page 1 of 2

[Challenge - Beginner] Draw a chess field

Posted: Thu Aug 27, 2009 2:38 am
by klevis miho
Print a chess field (8x8).

Re: [Challenge - Beginner] Draw a chess field

Posted: Thu Aug 27, 2009 3:39 am
by onion2k
My approach. I imagine the two nested for loops could be reduced to one loop from 0 to 63 with some manipulation of the numbers, but it wouldn't be very readable.

Note that the outer for loop counts down rather than up. That's for the coordinates (chess boards are marked as 8 at the "top").

Code: Select all

 
 
<style>
#board {
    float: left;
    width: 480px;
    height: 480px;
    border: 10px solid #888;
}
.square {
    float: left;
    width: 60px;
    height: 60px;
    color: #888;
}
.black {
    background-color: black;
}
.white {
    background-color: white;
}
</style>
 
<div id="board">
 
<?php
 
    for ($y=8;$y>0;$y--) {
        for ($x=0;$x<8;$x++) {
            echo (($x+$y)%2==0) ? "<div class=\"square white\">".chr($x+97).$y."</div>" : "<div class=\"square black\">".chr($x+97).$y."</div>";
        }
    }
?>
 
</div>
 
 

Re: [Challenge - Beginner] Draw a chess field

Posted: Thu Aug 27, 2009 3:51 am
by papa
Weee!

chess.php

Code: Select all

 
<?php
$invert = 0;
 
for($i=1; $i<65; $i++) {
    $row = $i%8==0 ? "<br />" : "";
    switch($invert) {
        case 1: 
            $bg = $i%2==0 ? "000000" : "ffffff";
            break;
        default:
            $bg = $i%2==0 ? "ffffff" : "000000";
    }
    echo $bg;
    echo $row;
    
    if(!empty($row)) {
        if($invert == 0) $invert = 1;
        else $invert = 0; 
    } 
}
 

Re: [Challenge - Beginner] Draw a chess field

Posted: Thu Aug 27, 2009 4:00 am
by klevis miho
That's a very professional solution u posted here :) .

Re: [Challenge - Beginner] Draw a chess field

Posted: Thu Aug 27, 2009 4:01 am
by papa
onion2k wrote:My approach. I imagine the two nested for loops could be reduced to one loop from 0 to 63 with some manipulation of the numbers, but it wouldn't be very readable.

Note that the outer for loop counts down rather than up. That's for the coordinates (chess boards are marked as 8 at the "top").
Nice,

I think my board looks better, but your code is very neat.

Re: [Challenge - Beginner] Draw a chess field

Posted: Thu Aug 27, 2009 4:56 am
by klevis miho
My solution is a little old school lol

Code: Select all

<html>
<body>
<head>
<style>
.white {
    background-color: white;
}
.black {
    background-color: black;
}
</style>
<table border="0" width="500" height="500" cellpadding="0" cellspacing="0">
<?php
    for($i=0; $i<8; $i++) {
        echo "<tr>";
        for($j=0; $j<8; $j++) {
 
            if(($i+$j)%2 == 0) {
                echo "<td class='black'></td>";
            } else {
                echo "<td class='white'></td>";
            }
        }
        echo "</tr>";
    }
?>
</table>
</body>
</html>
 

It would take me ages to do this in Photoshop lol

Re: [Challenge - Beginner] Draw a chess field

Posted: Thu Aug 27, 2009 5:01 am
by onion2k
I think you and papa need to go and examine a real chess board. The right hand square nearest each player (a8 and h1) is always white, not black. :wink:

Re: [Challenge - Beginner] Draw a chess field

Posted: Thu Aug 27, 2009 5:04 am
by klevis miho
But the players are standing in the right and the left of the field :D

Re: [Challenge - Beginner] Draw a chess field

Posted: Thu Aug 27, 2009 12:27 pm
by McInfo
I had some GD grid code laying around, so I modified it to be checker-board-compatible.

Code: Select all

<?php
$cellWidth   = 50;
$cellHeight  = 50;
$cellSpacing = 1;
$cellsWide   = 8;
$cellsHigh   = 8;
 
$imageWidth  = $cellsWide * ($cellWidth + $cellSpacing) + $cellSpacing;
$imageHeight = $cellsHigh * ($cellHeight + $cellSpacing) + $cellSpacing;
 
$image = imagecreatetruecolor($imageWidth, $imageHeight);
 
$colorBackground = imagecolorallocate($image, 223, 223, 255);
$colorCellOdd    = imagecolorallocate($image, 191, 191, 223);
$colorCellEven   = imagecolorallocate($image,  95,  95, 127);
 
$cellCount = 0;
 
imagefill($image, 0, 0, $colorBackground);
 
function cell ($x, $y)
{
    global $image, $cellWidth, $cellHeight, $colorCellOdd, $colorCellEven, $cellCount, $cellsWide;
    $colorCell = ($cellCount++ & 1) ? $colorCellOdd : $colorCellEven;
    imagefilledrectangle($image, $x, $y, $x + $cellWidth - 1, $y + $cellHeight - 1, $colorCell);
}
 
function cellRow ($y)
{
    global $cellWidth, $cellSpacing, $cellsWide, $cellCount;
    $cellCount++;
    for ($i = 0; $i < $cellsWide; $i++) {
        cell($cellSpacing + $i * ($cellWidth + $cellSpacing), $y);
    }
}
 
function cellRows ()
{
    global $cellHeight, $cellSpacing, $cellsHigh;
    for ($i = 0; $i < $cellsHigh; $i++) {
        cellRow($cellSpacing + $i * ($cellHeight + $cellSpacing));
    }
}
 
cellRows();
 
if (!headers_sent()) {
    header('Content-Type: image/png');
    imagepng($image);
}
 
imagedestroy($image);
?>
Edit: This post was recovered from search engine cache.

Re: [Challenge - Beginner] Draw a chess field

Posted: Sat Aug 29, 2009 1:39 pm
by lovelf
Hi,

I've doing with papa's code a chess board, I don't like the icons I have, does anyone have a good set of icons?

Code: Select all

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.white {
    background-color: #fcfcfc;width:62.5px;height:62.5px;border:1px solid #593d0f;color:#313131;font-weight:bolder;text-align:center;
}
.black {
  background-color: #313131;width:62.5px;height:62.5px;border:1px solid #313131;color:#ffffff;font-weight:bolder;text-align:center;
}
</style>
</head>
<body>
<table border="0" width="500" height="500" cellpadding="0" cellspacing="0">
<?php
 
$rookblack='rblack';
$pawnblack='pblack';
$bishopblack='bblack';
$horseblack='hblack';
$kingblack='kblack';
$queenblack='qblack';
 
$rookwhite='rwhite';
$pawnwhite='pwhite';
$bishopwhite='bwhite';
$horsewhite='hwhite';
$kingwhite='kwhite';
$queenwhite='qwhite';
 
$nrk=1;
$nrkv=1;
    for($i=0; $i<8; $i++) {
 
        echo "<tr>";
        for($j=0; $j<8; $j++) {
 
 
            if(($i+$j)%2 == 0) {
if($nrk=='2'){$cnt=$pawnblack;}
else if($nrk=='7'){$cnt=$pawnwhite;}
 
if($nrkv=='1'){$cnt=$rookblack;}
if($nrkv=='2'){$cnt=$bishopblack;}
if($nrkv=='3'){$cnt=$horseblack;}
if($nrkv=='4'){$cnt=$queenblack;}
if($nrkv=='5'){$cnt=$kingblack;}
if($nrkv=='6'){$cnt=$horseblack;}
if($nrkv=='7'){$cnt=$bishopblack;}
if($nrkv=='8'){$cnt=$rookblack;}
if($nrkv=='57'){$cnt=$rookwhite;}
if($nrkv=='58'){$cnt=$bishopwhite;}
if($nrkv=='59'){$cnt=$horsewhite;}
if($nrkv=='60'){$cnt=$kingwhite;}
if($nrkv=='61'){$cnt=$queenwhite;}
if($nrkv=='62'){$cnt=$horsewhite;}
if($nrkv=='63'){$cnt=$bishopwhite;}
if($nrkv=='64'){$cnt=$rookwhite;}
 
                echo '<td class="black" id="piece'.$nrkv.'">'.$cnt.'</td>';
unset($cnt);
$nrkv++;
            } else {
 
if($nrk=='2'){$cnt=$pawnblack;}
else if($nrk=='7'){$cnt=$pawnwhite;}
 
if($nrkv=='1'){$cnt=$rookblack;}
if($nrkv=='2'){$cnt=$bishopblack;}
if($nrkv=='3'){$cnt=$horseblack;}
if($nrkv=='4'){$cnt=$queenblack;}
if($nrkv=='5'){$cnt=$kingblack;}
if($nrkv=='6'){$cnt=$horseblack;}
if($nrkv=='7'){$cnt=$bishopblack;}
if($nrkv=='8'){$cnt=$rookblack;}
if($nrkv=='57'){$cnt=$rookwhite;}
if($nrkv=='58'){$cnt=$bishopwhite;}
if($nrkv=='59'){$cnt=$horsewhite;}
if($nrkv=='60'){$cnt=$kingwhite;}
if($nrkv=='61'){$cnt=$queenwhite;}
if($nrkv=='62'){$cnt=$horsewhite;}
if($nrkv=='63'){$cnt=$bishopwhite;}
if($nrkv=='64'){$cnt=$rookwhite;}
 
                echo '<td class="white" id="piece'.$nrkv.'">'.$cnt.'</td>';
unset($cnt);
$nrkv++;
            }
        }
        echo "</tr>";
$nrk++;
    }
 
?>
</table>
 
<script type="text/javascript">
var r=49;
while(r<=56){
document.getElementById("piece"+r).innerHTML='<img src="wpawn.png" style="text-align:center;">';
r++;
}
var r=9;
while(r<=16){
document.getElementById("piece"+r).innerHTML='<img src="bpawn.png" style="text-align:center;">';
r++;
}
</script>
</body>
</html>
 
Obviously the code ain't optimized at all right now, sloppy but would like to create the game. Would like to give life to it with JS and PHP :)
The position of the pieces is turned upside down(?) Had mispositioned a bishop there, edited on the code.

Re: [Challenge - Beginner] Draw a chess field

Posted: Sat Aug 29, 2009 6:06 pm
by Benjamin

Code: Select all

<style type="text/css">
table.chessboard {
  width: 600px;
  height: 600px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}
 
table.chessboard td {
  width: 75px;
  height: 75px;
}
 
table.chessboard td.odd {
  background-color: #000000;
}
 
</style>
 

Code: Select all

<table cellspacing="0" class="chessboard">
  <?php for ($i = 0; $i < 8; $i++): ?>
  <tr>
    <?php for ($j = 0; $j < 8; $j++): ?>
    <td class="<?php echo (($i + $j) % 2 == 0) ? 'even' : 'odd'; ?>">&nbsp;</td>
    <?php endfor; ?>
  </tr>
  <?php endfor; ?>
</table>

Re: [Challenge - Beginner] Draw a chess field

Posted: Sun Aug 30, 2009 7:57 pm
by Ollie Saunders
:mrgreen:

Code: Select all

<?php echo '?';
Zoom:?

Edit: it looked more like a chess board in the special characters browser thingy.

Re: [Challenge - Beginner] Draw a chess field

Posted: Sun Aug 30, 2009 8:13 pm
by Ollie Saunders
The shortest solution I can come up with:

Code: Select all

for ($w = 8, $i = 0; $i < $w * $w; ++$i) { 
    if ($i % $w === 0 && $i) { echo "\n"; } 
    echo ($i % 2 === 0 xor $i / $w % 2 === 0) ? '?' : ' '; }
And the first time I've ever used the xor operator. I knew it had to be useful for something!

Re: [Challenge - Beginner] Draw a chess field

Posted: Wed Sep 02, 2009 3:04 am
by VladSun
Ollie Saunders wrote:And the first time I've ever used the xor operator. I knew it had to be useful for something!
:mrgreen:

bin-attack!

Code: Select all

for ($i = 1 >> 1; $i < 1 << 6; $i++)
{
    echo ( $i & 8 ) >> 3 ^ $i & 1 ? '??' : '  ';
    
    if (! (7 ^ ($i & 7)))
        echo "\n";
}
Now, that's a "[Challenge - Beginner]" :)

Re: [Challenge - Beginner] Draw a chess field

Posted: Wed Sep 02, 2009 5:02 am
by Benjamin
That is sweet!