[Challenge - Beginner] Draw a chess field

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

klevis miho
Forum Contributor
Posts: 413
Joined: Wed Oct 29, 2008 2:59 pm
Location: Albania
Contact:

[Challenge - Beginner] Draw a chess field

Post by klevis miho »

Print a chess field (8x8).
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: [Challenge - Beginner] Draw a chess field

Post 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>
 
 
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: [Challenge - Beginner] Draw a chess field

Post 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; 
    } 
}
 
klevis miho
Forum Contributor
Posts: 413
Joined: Wed Oct 29, 2008 2:59 pm
Location: Albania
Contact:

Re: [Challenge - Beginner] Draw a chess field

Post by klevis miho »

That's a very professional solution u posted here :) .
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: [Challenge - Beginner] Draw a chess field

Post 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.
klevis miho
Forum Contributor
Posts: 413
Joined: Wed Oct 29, 2008 2:59 pm
Location: Albania
Contact:

Re: [Challenge - Beginner] Draw a chess field

Post 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
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: [Challenge - Beginner] Draw a chess field

Post 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:
klevis miho
Forum Contributor
Posts: 413
Joined: Wed Oct 29, 2008 2:59 pm
Location: Albania
Contact:

Re: [Challenge - Beginner] Draw a chess field

Post by klevis miho »

But the players are standing in the right and the left of the field :D
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: [Challenge - Beginner] Draw a chess field

Post 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.
Last edited by McInfo on Wed Jun 16, 2010 7:36 pm, edited 1 time in total.
lovelf
Forum Contributor
Posts: 153
Joined: Wed Nov 05, 2008 12:06 am

Re: [Challenge - Beginner] Draw a chess field

Post 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.
Attachments
board.png
board.png (11.1 KiB) Viewed 9215 times
white pawn
white pawn
wpawn.png (2.07 KiB) Viewed 9215 times
black pawn
black pawn
bpawn.png (2.25 KiB) Viewed 9213 times
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: [Challenge - Beginner] Draw a chess field

Post 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>
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Re: [Challenge - Beginner] Draw a chess field

Post by Ollie Saunders »

:mrgreen:

Code: Select all

<?php echo '?';
Zoom:?

Edit: it looked more like a chess board in the special characters browser thingy.
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Re: [Challenge - Beginner] Draw a chess field

Post 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!
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: [Challenge - Beginner] Draw a chess field

Post 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]" :)
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: [Challenge - Beginner] Draw a chess field

Post by Benjamin »

That is sweet!
Post Reply