simple board game to be used for canvas chapter and adding features i…

…n subsequent chapters
Sophrinix · Apr 26, 2010 · f036089 · f036089
1 parent 35cedb3
commit f036089
Show file tree

Hide file tree

Showing 7 changed files with 312 additions and 2 deletions.
diff --git a/canvas.html b/canvas.html
@@ -541,6 +541,12 @@ <h2 id=transforms>Transforms</h2>
 
 <canvas id=e3 width=177 height=113></canvas>
 
+<pre><code>  var cat = document.getElementById("cat");
+  var e3 = document.getElementById("e3");
+  var ctx = e3.getContext("2d");
+  <mark>ctx.rotate(-Math.PI);</mark>
+  ctx.drawImage(cat, -177, -113);</code></pre>
+
 <p>&hellip;to be continued&hellip; <!-- FIXME -->
 
 <p class=a>&#x2767;

diff --git a/examples/canvas-halma.html b/examples/canvas-halma.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Halma</title>
+<script src="halma.js"></script>
+</head>
+<body>
+<h1>Canvas Halma</h1>
+<p id="moves">Moves: <span id="movecount">0</span></p>
+</body>
+</html>
diff --git a/examples/halma.js b/examples/halma.js
@@ -0,0 +1,181 @@
+var kBoardWidth = 9;
+var kBoardHeight= 9;
+var kPieceWidth = 50;
+var kPieceHeight= 50;
+var kPixelWidth = 1 + (kBoardWidth * kPieceWidth);
+var kPixelHeight= 1 + (kBoardHeight * kPieceHeight);
+var gCanvasElement;
+var gDrawingContext;
+var gPieces;
+var gNumPieces;
+var gSelectedPieceIndex;
+var gSelectedPieceHasMoved;
+var gMoveCount;
+
+function Cell(row, column) {
+    this.row = row;
+    this.column = column;
+}
+
+function getCursorPosition(e) {
+    /* returns Cell with .row and .column properties */
+    var x;
+    var y;
+    if (e.pageX || e.pageY) {
+	x = e.pageX;
+	y = e.pageY;
+    }
+    else {
+	x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+	y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+    }
+    x -= gCanvasElement.offsetLeft;
+    y -= gCanvasElement.offsetTop;
+    x = Math.min(x, kBoardWidth * kPieceWidth);
+    y = Math.min(y, kBoardHeight * kPieceHeight);
+    var cell = new Cell(Math.floor(y/kPieceWidth), Math.floor(x/kPieceHeight));
+    return cell;
+}
+
+function onclick(e) {
+    var cell = getCursorPosition(e);
+    for (var i = 0; i < gNumPieces; i++) {
+	if ((gPieces[i].row == cell.row) && 
+	    (gPieces[i].column == cell.column)) {
+	    clickOnPiece(i);
+	    return;
+	}
+    }
+    clickOnEmptyCell(cell);
+}
+
+function clickOnEmptyCell(cell) {
+    if (gSelectedPieceIndex == -1) { return; }
+    var rowDiff = Math.abs(cell.row - gPieces[gSelectedPieceIndex].row);
+    var columnDiff = Math.abs(cell.column - gPieces[gSelectedPieceIndex].column);
+    if ((rowDiff <= 1) &&
+	(columnDiff <= 1)) {
+	/* we already know that this click was on an empty square,
+	   so that must mean this was a valid single-square move */
+	gPieces[gSelectedPieceIndex].row = cell.row;
+	gPieces[gSelectedPieceIndex].column = cell.column;
+	gMoveCount += 1;
+	gSelectedPieceIndex = -1;
+	gSelectedPieceHasMoved = false;
+	drawBoard();
+	return;
+    }
+    if ((((rowDiff == 2) && (columnDiff == 0)) ||
+	 ((rowDiff == 0) && (columnDiff == 2)) ||
+	 ((rowDiff == 2) && (columnDiff == 2))) && 
+	isThereAPieceBetween(gPieces[gSelectedPieceIndex], cell)) {
+	/* this was a valid jump */
+	if (!gSelectedPieceHasMoved) {
+	    gMoveCount += 1;
+	}
+	gSelectedPieceHasMoved = true;
+	gPieces[gSelectedPieceIndex].row = cell.row;
+	gPieces[gSelectedPieceIndex].column = cell.column;
+	drawBoard();
+	return;
+    }
+    gSelectedPieceIndex = -1;
+    gSelectedPieceHasMoved = false;
+    drawBoard();
+}
+
+function clickOnPiece(pieceIndex) {
+    if (gSelectedPieceIndex == pieceIndex) { return; }
+    gSelectedPieceIndex = pieceIndex;
+    gSelectedPieceHasMoved = false;
+    drawBoard();
+}
+
+function isThereAPieceBetween(cell1, cell2) {
+    /* note: assumes cell1 and cell2 are 2 squares away
+       either vertically, horizontally, or diagonally */
+    var rowBetween = (cell1.row + cell2.row) / 2;
+    var columnBetween = (cell1.column + cell2.column) / 2;
+    for (var i = 0; i < gNumPieces; i++) {
+	if ((gPieces[i].row == rowBetween) &&
+	    (gPieces[i].column == columnBetween)) {
+	    return true;
+	}
+    }
+    return false;
+}
+
+function drawBoard() {
+    gDrawingContext.clearRect(0, 0, kPixelWidth, kPixelHeight);
+
+    gDrawingContext.beginPath();
+
+    /* vertical lines */
+    for (var x = 0; x <= kPixelWidth; x += kPieceWidth) {
+	gDrawingContext.moveTo(0.5 + x, 0);
+	gDrawingContext.lineTo(0.5 + x, kPixelHeight);
+    }
+
+    /* horizontal lines */
+    for (var y = 0; y <= kPixelHeight; y += kPieceHeight) {
+	gDrawingContext.moveTo(0, 0.5 + y);
+	gDrawingContext.lineTo(kPixelWidth, 0.5 +  y);
+    }
+
+    /* draw it! */
+    gDrawingContext.strokeStyle = "#ccc";
+    gDrawingContext.stroke();
+
+    for (var i = 0; i < 9; i++) {
+	drawPiece(gPieces[i], i == gSelectedPieceIndex);
+    }
+
+    document.getElementById("movecount").innerHTML = gMoveCount;
+}
+
+function drawPiece(p, selected) {
+    var column = p.column;
+    var row = p.row;
+    var x = (column * kPieceWidth) + (kPieceWidth/2);
+    var y = (row * kPieceHeight) + (kPieceHeight/2);
+    var radius = (kPieceWidth/2) - (kPieceWidth/10);
+    gDrawingContext.beginPath();
+    gDrawingContext.arc(x, y, radius, 0, Math.PI*2);
+    gDrawingContext.closePath();
+    gDrawingContext.strokeStyle = "#000";
+    gDrawingContext.stroke();
+    if (selected) {
+	gDrawingContext.fillStyle = "#000";
+	gDrawingContext.fill();
+    }
+}
+
+function newGame() {
+    gPieces = [new Cell(6, 0),
+	       new Cell(7, 0),
+	       new Cell(8, 0),
+	       new Cell(6, 1),
+	       new Cell(7, 1),
+	       new Cell(8, 1),
+	       new Cell(6, 2),
+	       new Cell(7, 2),
+	       new Cell(8, 2)];
+    gNumPieces = gPieces.length;
+    gSelectedPieceIndex = -1;
+    gSelectedPieceHasMoved = false;
+    gMoveCount = 0;
+    drawBoard();
+}
+
+function init() {
+    gCanvasElement = document.createElement("canvas");
+    gCanvasElement.id = "c";
+    gCanvasElement.width = kPixelWidth;
+    gCanvasElement.height = kPixelHeight;
+    document.body.appendChild(gCanvasElement);
+    gCanvasElement.addEventListener("click", onclick, false);
+    gDrawingContext = gCanvasElement.getContext("2d");
+    newGame();
+}
+
+window.onload = init;
diff --git a/index.html b/index.html
@@ -39,7 +39,7 @@ <h3>Table of Contents</h3>
 <li><a href=canvas.html>Let&#8217;s Call It a Draw(ing Surface)</a>
 <li><a href=video.html>Video in a Flash (Without That Other Thing)</a>
 <li><a href=geolocation.html>You Are Here (And So Is Everybody Else)</a>
-<li>SELECT * FROM BROWSER WHERE 5 > 2
+<li>A Place To Put Your Stuff
 <li>Thread The Needle, Thread The Script
 <li><a href=offline.html>Let&#8217;s Take This Offline</a>
 <li><a href=forms.html>A Form of Madness</a>

diff --git a/storage.html b/storage.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Local Storage - Dive Into HTML5</title>
+<!--[if lte IE 9]><script src=j/html5.js></script><![endif]-->
+<link rel="shortcut icon" href=favicon.ico>
+<link rel=alternate type=application/atom+xml href=http://hg.diveintohtml5.org/hgweb.cgi/atom-log>
+<link rel=stylesheet href=screen.css>
+<style>
+body{counter-reset:h1 7}
+</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
+<div id=zz>
+<p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html#storage>Dive Into <abbr>HTML5</abbr></a> <span class=u>&#8227;</span>
+<h1><br>A Place To Put<br>Your Stuff</h1>
+<p id=toc>&nbsp;
+<p class=a>&#x2767;
+<h2 id=divingin>Diving In</h2>
+
+<p class=f><img src=i/aoc-g.png alt=G width=106 height=103>FIXME
+
+<p class=a>&#x2767;
+
+<h2 id=ie>What About IE?</h2>
+
+<p>Internet Explorer does not support it! Surprise surprise!
+
+<p>FIXME
+
+<h2 id=further-reading>Further Reading</h2>
+
+<ul>
+<li>
+<li>
+<li>
+<li>
+<li>
+<li>
+<li>
+</ul>
+
+<p class=a>&#x2767;
+
+<div class=pf>
+<h4>Did You Know?</h4>
+<div class=moneybags>
+<blockquote><p>In association with O&#8217;Reilly, Google Press will be publishing this book in a variety of formats, including paper, Kindle, and <abbr>DRM</abbr>-free <abbr>PDF</abbr>. The printed book will be called &#8220;HTML5: Up &amp; Running,&#8221; and we hope to release it <del>by next February</del> <del>in the first quarter of 2010</del> as soon as it&#8217;s good and ready, and not a moment sooner. This chapter will be included in the print edition.
+<p>If you liked this chapter and want to show your appreciation, you can <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&amp;tag=diveintomark-20&amp;creativeASIN=0596806027">pre-order &#8220;HTML5: Up &amp; Running&#8221; with this affiliate link</a>. You&#8217;ll get a book, and I&#8217;ll get a buck. I do not currently accept direct donations.
+</blockquote>
+</div>
+</div>
+
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
+
+<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
+</div>
+<script src=j/jquery.js></script>
+<script src=j/modernizr.js></script>
+<script src=j/dih5.js></script>
+
diff --git a/table-of-contents.html b/table-of-contents.html
@@ -120,7 +120,7 @@ <h1>Table of Contents</h1>
 <li><dl><dt><a href=geolocation.html#putting-it-all-together>A Complete, Live Example</a><dd>viii</dl>
 <li><dl><dt><a href=geolocation.html#further-reading>Further Reading</a><dd>ix</dl>
 </ol>
-<li>SELECT * FROM BROWSER WHERE 5 > 2
+<li>A Place To Put Your Stuff
 <li>Thread The Needle, Thread The Script
 <li id=offline><a href=offline.html>Let&#8217;s Take This Offline</a>
 <ol>

diff --git a/workers.html b/workers.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Web Workers - Dive Into HTML5</title>
+<!--[if lte IE 9]><script src=j/html5.js></script><![endif]-->
+<link rel="shortcut icon" href=favicon.ico>
+<link rel=alternate type=application/atom+xml href=http://hg.diveintohtml5.org/hgweb.cgi/atom-log>
+<link rel=stylesheet href=screen.css>
+<style>
+body{counter-reset:h1 8}
+</style>
+<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
+<div id=zz>
+<p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html#workwers>Dive Into <abbr>HTML5</abbr></a> <span class=u>&#8227;</span>
+<h1><br>Thread The Needle,<br>Thread The Script</h1>
+<p id=toc>&nbsp;
+<p class=a>&#x2767;
+<h2 id=divingin>Diving In</h2>
+
+<p class=f><img src=i/aoc-g.png alt=G width=106 height=103>FIXME
+
+<p class=a>&#x2767;
+
+<h2 id=further-reading>Further Reading</h2>
+
+<ul>
+<li>
+<li>
+<li>
+<li>
+<li>
+<li>
+<li>
+</ul>
+
+<p class=a>&#x2767;
+
+<div class=pf>
+<h4>Did You Know?</h4>
+<div class=moneybags>
+<blockquote><p>In association with O&#8217;Reilly, Google Press will be publishing this book in a variety of formats, including paper, Kindle, and <abbr>DRM</abbr>-free <abbr>PDF</abbr>. The printed book will be called &#8220;HTML5: Up &amp; Running,&#8221; and we hope to release it <del>by next February</del> <del>in the first quarter of 2010</del> as soon as it&#8217;s good and ready, and not a moment sooner. This chapter will be included in the print edition.
+<p>If you liked this chapter and want to show your appreciation, you can <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&amp;tag=diveintomark-20&amp;creativeASIN=0596806027">pre-order &#8220;HTML5: Up &amp; Running&#8221; with this affiliate link</a>. You&#8217;ll get a book, and I&#8217;ll get a buck. I do not currently accept direct donations.
+</blockquote>
+</div>
+</div>
+
+<p class=c>Copyright MMIX&ndash;MMX O&#8217;Reilly Media &bull; written by <a href=about.html>Mark Pilgrim</a>
+
+<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
+</div>
+<script src=j/jquery.js></script>
+<script src=j/modernizr.js></script>
+<script src=j/dih5.js></script>