[Challenge - Beginner] Draw a chess field
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
Print a chess field (8x8).
Re: [Challenge - Beginner] Draw a chess field
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").
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
Weee!
chess.php
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
That's a very professional solution u posted here
.
Re: [Challenge - Beginner] Draw a chess field
Nice,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").
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
My solution is a little old school lol
It would take me ages to do this in Photoshop 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
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. 
-
klevis miho
- Forum Contributor
- Posts: 413
- Joined: Wed Oct 29, 2008 2:59 pm
- Location: Albania
- Contact:
Re: [Challenge - Beginner] Draw a chess field
But the players are standing in the right and the left of the field 
Re: [Challenge - Beginner] Draw a chess field
I had some GD grid code laying around, so I modified it to be checker-board-compatible.
Edit: This post was recovered from search engine cache.
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);
?>
Last edited by McInfo on Wed Jun 16, 2010 7:36 pm, edited 1 time in total.
Re: [Challenge - Beginner] Draw a chess field
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?
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.
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>
The position of the pieces is turned upside down(?) Had mispositioned a bishop there, edited on the code.
- Attachments
-
- board.png (11.1 KiB) Viewed 9214 times
-
- white pawn
- wpawn.png (2.07 KiB) Viewed 9214 times
-
- black pawn
- bpawn.png (2.25 KiB) Viewed 9212 times
Re: [Challenge - Beginner] Draw a chess field
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'; ?>"> </td>
<?php endfor; ?>
</tr>
<?php endfor; ?>
</table>- Ollie Saunders
- DevNet Master
- Posts: 3179
- Joined: Tue May 24, 2005 6:01 pm
- Location: UK
Re: [Challenge - Beginner] Draw a chess field
Code: Select all
<?php echo '?';Edit: it looked more like a chess board in the special characters browser thingy.
- Ollie Saunders
- DevNet Master
- Posts: 3179
- Joined: Tue May 24, 2005 6:01 pm
- Location: UK
Re: [Challenge - Beginner] Draw a chess field
The shortest solution I can come up with:
And the first time I've ever used the xor operator. I knew it had to be useful for something!
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) ? '?' : ' '; }Re: [Challenge - Beginner] Draw a chess field
Ollie Saunders wrote:And the first time I've ever used the xor operator. I knew it had to be useful for something!
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";
}There are 10 types of people in this world, those who understand binary and those who don't
Re: [Challenge - Beginner] Draw a chess field
That is sweet!