Permalink
Browse files

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

…n subsequent chapters
  • Loading branch information...
1 parent 35cedb3 commit f036089193f3e80d9e6993944636b5ca6645f85e Mark Pilgrim committed Apr 26, 2010
Showing with 312 additions and 2 deletions.
  1. +6 −0 canvas.html
  2. +12 −0 examples/canvas-halma.html
  3. +181 −0 examples/halma.js
  4. +1 −1 index.html
  5. +59 −0 storage.html
  6. +1 −1 table-of-contents.html
  7. +52 −0 workers.html
View
@@ -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;
View
@@ -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>
View
@@ -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;
View
@@ -39,7 +39,7 @@
<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>
View
@@ -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>
+
View
@@ -120,7 +120,7 @@
<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>
View
@@ -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>

0 comments on commit f036089

Please sign in to comment.