├── .gitattributes
├── 9781484238639.jpg
├── Contributing.md
├── LICENSE.txt
├── README.md
├── ch01
    └── html5logoscale.html
├── ch02
    ├── collagebaseV2muted.html
    ├── collagedataV2.js
    ├── danielAndAnnika.JPG
    ├── monkeyMar18.mp4
    ├── monkeyMar18.ogv
    ├── monkeyMar18.webm
    └── threePlusDog.jpg
├── ch03
    ├── joshuahomerun.mp4video.mp4
    ├── joshuahomerun.theora.ogv
    ├── joshuahomerun.webmvp8.webm
    ├── videobounceC.html
    └── videobounceEwithClipPath.html
├── ch04
    ├── bx1.png
    ├── mapspotlight.html
    └── rx1.png
├── ch05
    ├── bx1.png
    ├── esther.jpg
    ├── estherT.mp3
    ├── estherT.ogv
    ├── estherT.wav
    ├── mapmediaquiz.html
    ├── maze.mp4
    ├── maze.theora.ogv
    ├── maze.webmvp8.webm
    ├── mediaquizcontent.js
    ├── miyajima0.JPG
    ├── rx1.png
    ├── sfire3.mp4
    ├── sfire3.theora.ogv
    ├── sfire3.webmvp8.webm
    └── x1.png
├── ch06
    ├── AddTo!5andTicTacToe.docx
    └── addTo15JSplain.html
├── ch07
    ├── cleftlip.jpg
    ├── frog.jpg
    ├── origamifish.html
    ├── origamifrog.html
    ├── sink.mp4video.mp4
    ├── sink.theora.ogv
    ├── sink.webmvp8.webm
    ├── talk.mp4video.mp4
    ├── talk.theora.ogv
    ├── talk.webmvp8.webm
    ├── throat1.jpg
    └── throat2.jpg
├── ch08
    ├── barsbase.png
    ├── jigsawBars8c.html
    ├── monkeybars.mp4
    ├── monkeybars.ogv
    └── monkeybars.webm
├── ch09
    ├── alabama.gif
    ├── alaska.gif
    ├── arizona.gif
    ├── arkansas.gif
    ├── california.gif
    ├── colorado.gif
    ├── connecticut.gif
    ├── delaware.gif
    ├── florida.gif
    ├── georgia.gif
    ├── hawaii.gif
    ├── idaho.gif
    ├── illinois.gif
    ├── indiana.gif
    ├── iowa.gif
    ├── kansas.gif
    ├── kentucky.gif
    ├── louisiana.gif
    ├── maine.gif
    ├── maryland.gif
    ├── massachusetts.gif
    ├── michigan.gif
    ├── minnesota.gif
    ├── mississippi.gif
    ├── missouri.gif
    ├── montana.gif
    ├── nebraska.gif
    ├── nevada.gif
    ├── newhampshire.gif
    ├── newjersey.gif
    ├── newmexico.gif
    ├── newyork.gif
    ├── northcarolina.gif
    ├── northdakota.gif
    ├── ohio.gif
    ├── oklahoma.gif
    ├── oregon.gif
    ├── pennsylvania.gif
    ├── rhodeisland.gif
    ├── rhodeislandbig.gif
    ├── southcarolina.gif
    ├── southdakota.gif
    ├── statesgame.html
    ├── tennessee.gif
    ├── texas.gif
    ├── utah.gif
    ├── vermont.gif
    ├── virginia.gif
    ├── washington.gif
    ├── westvirginia.gif
    ├── wisconsin.gif
    └── wyoming.gif
├── ch10
    ├── barsbase.png
    ├── jigsawBars8.html
    ├── monkeybars.mp4
    ├── monkeybars.ogv
    ├── monkeybars.webm
    ├── noodles1.JPG
    ├── noodles2.JPG
    ├── noodles3.jpg
    ├── noodles4.jpg
    ├── quizTabs.html
    ├── sfire3.mp4
    ├── sfire3.theora.ogv
    ├── sfire3.webmvp8.webm
    └── uncoverNoodles.html
└── errata.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/9781484238639.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/9781484238639.jpg


--------------------------------------------------------------------------------
/Contributing.md:
--------------------------------------------------------------------------------
 1 | # Contributing to Apress Source Code
 2 | 
 3 | Copyright for Apress source code belongs to the author(s). However, under fair use you are encouraged to fork and contribute minor corrections and updates for the benefit of the author(s) and other readers.
 4 | 
 5 | ## How to Contribute
 6 | 
 7 | 1. Make sure you have a GitHub account.
 8 | 2. Fork the repository for the relevant book.
 9 | 3. Create a new branch on which to make your change, e.g. 
10 | `git checkout -b my_code_contribution`
11 | 4. Commit your change. Include a commit message describing the correction. Please note that if your commit message is not clear, the correction will not be accepted.
12 | 5. Submit a pull request.
13 | 
14 | Thank you for your contribution!


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Freeware License, some rights reserved
 2 | 
 3 | Copyright (c) 2018 Jeanine Meyer
 4 | 
 5 | Permission is hereby granted, free of charge, to anyone obtaining a copy 
 6 | of this software and associated documentation files (the "Software"), 
 7 | to work with the Software within the limits of freeware distribution and fair use. 
 8 | This includes the rights to use, copy, and modify the Software for personal use. 
 9 | Users are also allowed and encouraged to submit corrections and modifications 
10 | to the Software for the benefit of other users.
11 | 
12 | It is not allowed to reuse,  modify, or redistribute the Software for 
13 | commercial use in any way, or for a user’s educational materials such as books 
14 | or blog articles without prior permission from the copyright holder. 
15 | 
16 | The above copyright notice and this permission notice need to be included 
17 | in all copies or substantial portions of the software.
18 | 
19 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22 | AUTHORS OR COPYRIGHT HOLDERS OR APRESS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
25 | SOFTWARE.
26 | 
27 | 
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Apress Source Code
 2 | 
 3 | This repository accompanies [*HTML5 and JavaScript Projects*](http://www.apress.com/9781484238639) by Jeanine Meyer (Apress, 2018).
 4 | 
 5 | [comment]: #cover
 6 | ![Cover image](9781484238639.jpg)
 7 | 
 8 | Download the files as a zip using the green button, or clone the repository to your machine using Git.
 9 | 
10 | ## Releases
11 | 
12 | Release v1.0 corresponds to the code in the published book, without corrections or updates.
13 | 
14 | ## Contributions
15 | 
16 | See the file Contributing.md for more information on how you can contribute to this repository.


--------------------------------------------------------------------------------
/ch01/html5logoscale.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <title>HTML5 Logo </title>
  5 | <meta charset="UTF-8">
  6 | <style>
  7 | footer {display:block; border-top: 1px solid orange; margin: 10px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold;}
  8 | article {display:block; font-family: Georgia, "Times New Roman", Times, serif; margin: 5px;}
  9 | </style>
 10 | <script language="Javascript">
 11 | var ctx;
 12 | var factorvalue = 1;
 13 | var fontfamily = "65px 'Gill Sans Ultra Bold', sans-serif";
 14 | //will default to sans-serif
 15 | function init() {
 16 |     ctx = document.getElementById('canvas').getContext('2d');
 17 |     ctx.font = fontfamily;
 18 |     ctx.save();
 19 |     dologo();
 20 | }
 21 | function dologo() {
 22 | 	var offsety = 80 ;
 23 | 	ctx.restore();
 24 | 	ctx.save();
 25 | 	ctx.clearRect(0,0,600,400);
 26 | 	ctx.scale(factorvalue,factorvalue);
 27 | 	ctx.fillText("HTML", 31,60);
 28 |     ctx.translate(0,offsety);
 29 | 
 30 | // 5 sided orange background
 31 | 
 32 | //ctx.fillStyle = "#E44D26"; Daniel's colors. I changed to values given by W3C
 33 | ctx.fillStyle = "#E34C26";
 34 | ctx.beginPath();
 35 | ctx.moveTo(39, 250);
 36 | ctx.lineTo(17, 0);
 37 | ctx.lineTo(262, 0);
 38 | ctx.lineTo(239, 250);
 39 | ctx.lineTo(139, 278);
 40 | ctx.closePath();
 41 | ctx.fill();
 42 | 
 43 | // right hand, lighter orange part of the background
 44 | //ctx.fillStyle = "#F16529";
 45 | ctx.fillStyle = "#F06529";
 46 | ctx.beginPath();
 47 | ctx.moveTo(139, 257);
 48 | ctx.lineTo(220, 234);
 49 | ctx.lineTo(239, 20);
 50 | ctx.lineTo(139, 20);
 51 | ctx.closePath();
 52 | ctx.fill();
 53 | 
 54 | // light gray, left hand side part of the five
 55 | ctx.fillStyle = "#EBEBEB";
 56 | ctx.beginPath();
 57 | ctx.moveTo(139, 113);
 58 | ctx.lineTo(98, 113);
 59 | ctx.lineTo(96, 82);
 60 | ctx.lineTo(139, 82);
 61 | ctx.lineTo(139, 51);
 62 | ctx.lineTo(62, 51);
 63 | ctx.lineTo(70, 144);
 64 | ctx.lineTo(139, 144);
 65 | ctx.closePath();
 66 | ctx.fill();
 67 | 
 68 | ctx.beginPath();
 69 | ctx.moveTo(139, 193);
 70 | ctx.lineTo(105, 184);
 71 | ctx.lineTo(103, 159);
 72 | ctx.lineTo(72, 159);
 73 | ctx.lineTo(76, 207);
 74 | ctx.lineTo(139, 225);
 75 | ctx.closePath();
 76 | ctx.fill();
 77 | 
 78 | // white, right hand side of the 5
 79 | ctx.fillStyle = "#FFFFFF";
 80 | ctx.beginPath();
 81 | ctx.moveTo(139, 113);
 82 | ctx.lineTo(139, 144);
 83 | ctx.lineTo(177, 144);
 84 | ctx.lineTo(173, 184);
 85 | ctx.lineTo(139, 193);
 86 | ctx.lineTo(139, 225);
 87 | ctx.lineTo(202, 207);
 88 | ctx.lineTo(210, 113);
 89 | ctx.closePath();
 90 | ctx.fill();
 91 | 
 92 | ctx.beginPath();
 93 | ctx.moveTo(139, 51);
 94 | ctx.lineTo(139, 82);
 95 | ctx.lineTo(213, 82);
 96 | ctx.lineTo(216, 51);
 97 | ctx.closePath();
 98 | ctx.fill();
 99 | 
100 | 
101 | }
102 | 
103 | function changescale(val) {
104 | 	factorvalue = val / 100;
105 | 	
106 | 	dologo();
107 | 	
108 | }
109 | </script>
110 | </head>
111 | <body onLoad="init();">
112 | <canvas id="canvas" width="600" height="400">
113 | Your browser does not support the canvas element .
114 | </canvas>
115 | <article>
116 | Scale percentage:  <input id="slide" type="range" min="0" max="100" value="100" onChange="changescale(this.value)" step="10"/>
117 | Note: slider treated as text field in some browsers.
118 | </article>
119 | <article>Built on <a href="http://daniemon.com/tech/html5/html5logo/">work by Daniel Davis, et al</a>, but don't blame them for the fonts. Check out the use of <em>font-family</em> in the style element and the <em>fontfamily</em> variable in the script element for safe ways to do fonts. I did the scaling. Note also use of semantic elements.</article>
120 | <footer>HTML5 Logo by <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>.
121 | </footer>
122 | </body>
123 | </html>
124 | 


--------------------------------------------------------------------------------
/ch02/collagebaseV2muted.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html >
  2 | <html>
  3 | <head>
  4 | <title>Collage, with video</title>
  5 | <meta charset="UTF-8">
  6 | <style>
  7 | canvas {position:absolute; top:80px;    
  8 |   cursor:crosshair;
  9 | }
 10 | video {display:none;}
 11 | </style>
 12 | <script type="text/javascript" src="collagedataV2.js"> </script>
 13 | <script language="Javascript">
 14 | var ctx;
 15 | 
 16 | var canvas1;
 17 | var stuff = [];
 18 | var thingInMotion;
 19 | var offsetx;
 20 | var offsety;
 21 | var tid;
 22 | var savedgco;
 23 | var images = [];
 24 | var videotext1 = "<video id=\"XXXX\"  preload=\"auto\" loop=\"loop\" autoplay muted controls> <source src=\"XXXX.webm\" type=\'video/webm; codecs=\"vp8, vorbis\"\'> ";
 25 | var videotext2="<source src=\"XXXX.mp4\" type=\'video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"\'> <source src=\"XXXX.ogv\" type=\'video/ogg; codecs=\"theora, vorbis\"\'>";
 26 | var videotext3="Your browser does not accept the video tag.</video>";
 27 | function restart(ev) {
 28 |  var v = ev.target;
 29 |  v.currentTime=0;
 30 |  v.play();
 31 | }
 32 | var videocount =0;
 33 | var okaytogo = false;
 34 | function videoloaded(ev) {
 35 | 	ctx.fillText(ev.target.id+" loaded.",400,100*videocount);
 36 | 	
 37 | 	ev.target.play();
 38 | 	videocount--;
 39 | 	if (videocount==0) {
 40 | 	 
 41 | 	 okaytogo = true;	
 42 | 	}
 43 | }
 44 | var textmsg = "Loading videos";
 45 | function init() {
 46 | 	 
 47 |     canvas1 = document.getElementById('canvas');
 48 | 	canvas1.onmousedown = function () { return false; } ;  //prevents change of cursor to default
 49 |    
 50 |    canvas1.addEventListener('dblclick',makenewitem,false);
 51 |    canvas1.addEventListener('mousedown',startdragging,false);
 52 | 	ctx = canvas1.getContext("2d");
 53 | 	savedgco = ctx.globalCompositeOperation;
 54 | 	createelements();
 55 | 	drawstuff();
 56 | 	ctx.fillText(textmsg,100,100);
 57 | 	loadid = setInterval(loading,2000);
 58 | 	ctx.strokeStyle = "blue";
 59 | 		
 60 | }
 61 | function loading() {
 62 | 	
 63 | 	if (okaytogo) {
 64 | 		clearInterval(loadid);
 65 | 		tid = setInterval(drawstuff,40);
 66 | 	}	
 67 | 	else {
 68 | 		textmsg+=".";
 69 | 		ctx.fillText(textmsg,100,100);
 70 | 	}
 71 | }
 72 | 
 73 | function createelements() {
 74 | 	
 75 | 	var name;
 76 | 	var i;
 77 | 	var type;
 78 | 	var divelement;
 79 | 	var videomarkup;
 80 | 	var velref;
 81 | 	
 82 | 	var vb;
 83 | 	var imgdummy;
 84 | 	var pic;
 85 | 	
 86 | 	for (i=0;i<mediainfo.length;i++) {
 87 | 		type = mediainfo[i].shift();  //removes 1st element from array
 88 | 	    info = mediainfo[i];
 89 | 	   
 90 | 		switch(type) {
 91 | 		 case 'video':
 92 | 		  videocount++;
 93 | 		  name = info[0];
 94 |             divelement= document.createElement("div");
 95 | 			videomarkup = videotext1+videotext2+videotext3;
 96 | 			videomarkup = videomarkup.replace(/XXXX/g,name);
 97 |  			divelement.innerHTML = videomarkup;
 98 |  			document.body.appendChild(divelement);
 99 | 			velref = document.getElementById(name);
100 | 			velref.addEventListener("ended",restart,false);
101 | 			velref.addEventListener("loadeddata",videoloaded,false);
102 | 	vb = new Videoblock(info[2],info[3],info[4],info[5],info[6],info[7],info[8],velref,info[9],info[1]); 
103 | 			stuff.push(vb);
104 | 			break;
105 | 		 case 'picture':
106 | 		  imgdummy = new Image();
107 | 		  imgdummy.src = info[4];
108 | 		  images.push(imgdummy);
109 | 		  stuff.push( new Picture(info[0],info[1],info[2],info[3],images[images.length-1]));
110 | 		 
111 | 		  break;
112 | 		 case 'heart':
113 | 		   stuff.push(new Heart(info[0],info[1],info[2],info[3],info[4]));
114 | 		   break;
115 | 		 case 'oval':
116 | 		   stuff.push(new Oval(info[0],info[1],info[2],info[3],info[4],info[5]));
117 | 		 break;
118 | 		 case 'rect':
119 | 		   stuff.push(new Rect(info[0],info[1],info[2],info[3],info[4]));
120 | 		 break;
121 | 		}
122 | 			
123 | 	 }
124 | 	
125 | }
126 | 
127 | function distsq (x1,y1,x2,y2) {
128 | 	//done to avoid taking square roots
129 |    var xd = x1 - x2;
130 |    var yd = y1 - y2;
131 |    return ((xd*xd) + (yd*yd) );
132 | }
133 | function Videoblock(sx,sy,x,y,w,h,scale,videoel,volume,angle) {
134 | 	this.sx = sx;
135 | 	this.sy = sy;
136 | 	this.x = x;
137 | 	this.y = y;
138 | 	this.w = w;
139 | 	this.h = h;
140 | 	this.videoelement = videoel;
141 | 	this.volume = volume;  
142 | 	this.draw = drawvideo;
143 | 	this.overcheck = overvideo;  //need more complex checking because of angle and scale
144 | 	this.angle = angle;
145 | 	this.cosine = Math.cos(angle);
146 | 	this.sine = Math.sin(angle);
147 | 	this.scale = scale;
148 | 	videoel.volume = 0;
149 | 	this.videoelement.play();
150 | }
151 | function overvideo (mx,my) {
152 |   //need to add code to check in rotation case and scaling
153 |   		omx = mx;
154 | 		omy = my;
155 | 		
156 |     if (this.angle!=0) {
157 | 		omx = omx-this.x;
158 | 		omy = omy - this.y;
159 | 		mx = omx*this.cosine + omy*this.sine;
160 | 		my = -omx*this.sine + omy*this.cosine;
161 | 		mx = this.x +mx;
162 | 		my = this.y + my;	
163 | 		
164 | 	}
165 | 	if (this.scale!=1) {
166 | 		//alert("prescaling mx is "+mx+" prescaling my is "+my);
167 | 		mx = mx/this.scale;
168 | 		my = my/this.scale;
169 | 		//alert("post scaling mx is "+mx+" post scaling my is "+my);	
170 | 	}
171 | 	
172 | 	if ( (mx>=this.x)&&(mx<=(this.x+this.w))&&(my>=this.y)&&(my<=(this.y+this.h))) 
173 | 
174 | 		{return true;}
175 | 
176 | 	else {return false;}	
177 | 
178 | }
179 | 
180 | function drawvideo() {
181 | 	var savedalpha = ctx.globalAlpha;
182 | 	ctx.globalCompositeOperation = "lighter";
183 | 	ctx.globalAlpha = this.alpha;
184 |    if (this.angle!=0) {
185 | 	ctx.save();
186 | 	ctx.translate(this.x,this.y);
187 | 	ctx.rotate(this.angle);
188 | 	ctx.translate(-this.x,-this.y)
189 | 	if (this.scale!=1) {
190 | 		
191 | 		ctx.scale(this.scale,this.scale); }
192 | 	ctx.drawImage(this.videoelement,this.sx,this.sy,this.w,this.h,this.x,this.y, this.w, this.h);
193 | 	
194 | 	ctx.restore();
195 | 	
196 | 	}
197 | 	else {
198 | 		if (this.scale!=1) {
199 | 			ctx.save();
200 | 			ctx.scale(this.scale,this.scale);
201 | 			
202 | 			ctx.drawImage(this.videoelement,this.sx,this.sy,this.w,this.h,this.x,this.y, this.w, this.h);
203 | 			
204 | 			ctx.restore();
205 | 			
206 | 		}
207 | 		else {
208 | 		ctx.drawImage(this.videoelement,this.sx,this.sy,this.w,this.h,this.x,this.y, this.w, this.h);
209 | 		}
210 | 	}
211 | 	ctx.globalAlpha = savedalpha;
212 | 	ctx.globalCompositeOperation = savedgco;
213 | }
214 | 
215 | function Picture(x,y,w,h,imagename) {
216 | 	this.x = x;
217 | 	this.y = y;
218 | 	this.w = w;
219 | 	this.h = h;
220 | 	this.imagename = imagename;
221 | 	this.draw = drawpic;
222 | 	this.overcheck = overrect;
223 | 	
224 | }
225 | function Heart(x,y,h,drx,color) {
226 | 	this.x = x;
227 | 	this.y = y;
228 | 	this.h = h;
229 | 	this.drx = drx;
230 | 	this.radsq = drx*drx;
231 | 	this.color = color;	
232 | 	this.draw = drawheart;
233 | 	this.overcheck = overheart;
234 | 	this.ang = .25*Math.PI;
235 | 	
236 | }
237 | function drawheart() {
238 | 	var leftctrx = this.x-this.drx;
239 | 	var rightctrx = this.x+this.drx;
240 | 	var cx = rightctrx+this.drx*Math.cos(this.ang);
241 | 	var cy = this.y + this.drx*Math.sin(this.ang);
242 | 	ctx.fillStyle = this.color;
243 | 	ctx.beginPath();
244 | 	ctx.moveTo(this.x,this.y);
245 | 	ctx.arc(leftctrx,this.y,this.drx,0,Math.PI-this.ang,true);
246 | 	ctx.lineTo(this.x,this.y+this.h);
247 | 	ctx.lineTo(cx,cy);
248 | 	ctx.arc(rightctrx,this.y,this.drx,this.ang,Math.PI,true);
249 | 	ctx.closePath();
250 | 	ctx.fill();	
251 | }
252 | function overheart(mx,my) {
253 | 	var leftctrx = this.x-this.drx;
254 | 	var rightctrx = this.x+this.drx;
255 | 	var qx = this.x-2*this.drx;
256 | 	var qy = this.y-this.drx;
257 | 	var qwidth = 4*this.drx;
258 | 	var qheight = this.drx+this.h;
259 | 	
260 | //quick test if it is in bounding rectangle	
261 | 	if (outside(qx,qy,qwidth,qheight,mx,my)) {
262 | 		
263 | 		return false;}
264 | //compare to two centers
265 | 	
266 |   if (distsq(mx,my,leftctrx,this.y)<this.radsq) return true;
267 |   if (distsq(mx,my,rightctrx,this.y)<this.radsq) return true;
268 | // if outside of circles AND less than equal to y, return false
269 |   if (my<=this.y) return false;		
270 | 	
271 | // compare to each slope
272 |  var x2 = this.x
273 |  var y2 = this.y + this.h;
274 |  var m = (this.h)/(2*this.drx);
275 | // left side
276 |  if (mx<=this.x) {
277 | 	 if (my < (m*(mx-x2)+y2)) {
278 | 		 
279 | 		 return true;}
280 | 	 else { 
281 | 	 
282 | 	 return false;}
283 |  }
284 |  else {
285 |  m = -m;
286 |  
287 |  if (my < (m*(mx-x2)+y2)) { return true}
288 |  else return false;
289 |  }
290 | }
291 | function outside(x,y,w,h,mx,my) {
292 | 	return ((mx<x) || (mx > (x+w)) || (my < y) || (my > (y+h)));	
293 | }
294 | 
295 | function drawpic() {
296 |     ctx.globalAlpha = 1.0;
297 | 	ctx.drawImage(this.imagename,this.x,this.y,this.w,this.h);	
298 | }
299 | function Oval(x,y,r,hor,ver,c) {
300 | 	this.x = x;
301 | 	this.y = y;
302 | 	this.r = r;
303 | 	this.radsq = r*r;
304 | 	this.hor = hor;
305 | 	this.ver = ver;
306 | 	this.draw = drawoval;
307 | 	this.color = c;
308 | 	this.overcheck = overoval;
309 | }
310 | function drawoval() {
311 | 	ctx.save();
312 | 	ctx.translate(this.x,this.y);
313 | 	ctx.scale(this.hor,this.ver);
314 | 	ctx.fillStyle = this.color;
315 | 	ctx.beginPath();
316 | 	ctx.arc(0,0,this.r,0,2*Math.PI,true);
317 | 	ctx.closePath();
318 | 	ctx.fill();
319 | 	ctx.restore();	
320 | }
321 | function Rect(x,y,w,h,c) {
322 | 	this.x = x;
323 | 	this.y = y;
324 | 	this.w = w;
325 | 	this.h = h;
326 | 	this.draw = drawrect;
327 | 	this.color = c;
328 | 	this.overcheck = overrect;
329 | }
330 | function overoval(mx,my) {
331 | 	//computes positions in the translated and scaled coordinate system
332 | 	var x1 = 0;  //this is this.x - this.x
333 | 	var y1 = 0;
334 | 	var x2 = (mx-this.x)/this.hor;
335 | 	var y2 = (my-this.y)/this.ver;
336 | 	if (distsq(x1,y1,x2,y2)<=(this.radsq) ){
337 | 		return true
338 | 	}
339 | 	else {return false}
340 | }
341 | function overrect (mx,my) {
342 | 	if ( (mx>=this.x)&&(mx<=(this.x+this.w))&&(my>=this.y)&&(my<=(this.y+this.h))) 
343 | 		{return true;}
344 | 	else {return false;}	
345 | }
346 | function makenewitem(ev) {
347 | 	
348 | 	var mx;
349 | 	var my;
350 | 	if ( ev.layerX ||  ev.layerX == 0) { // Firefox, ???
351 |    			mx= ev.layerX;
352 |     		my = ev.layerY;
353 |   		} else if (ev.offsetX || ev.offsetX == 0) { // Opera, ???
354 |     		mx = ev.offsetX;
355 |     		my = ev.offsetY;
356 |   		}
357 | 	var endpt = stuff.length-1;
358 | 	var item;
359 | 	for (var i=endpt;i>=0;i--) {  //reverse order
360 | 		if (stuff[i].overcheck(mx,my)) { 
361 | 		   item = clone(stuff[i]);
362 | 		   item.x +=20;
363 | 		   item.y += 20;
364 | 		   stuff.push(item);
365 | 		   break;
366 | 		}
367 | 	}
368 | 	
369 | }
370 | function clone(obj) {
371 | 	var item = new Object();
372 | 	for (var info in obj) {
373 | 		item[info] = obj[info];
374 | 	}
375 | 	return item;
376 | 	
377 | }
378 | function startdragging(ev) {
379 | 	
380 | 	var mx;
381 | 	var my;
382 | 	if ( ev.layerX ||  ev.layerX == 0) { // Firefox, ???
383 |    			mx= ev.layerX;
384 |     		my = ev.layerY;
385 |   		} else if (ev.offsetX || ev.offsetX == 0) { // Opera, ???
386 |     		mx = ev.offsetX;
387 |     		my = ev.offsetY;
388 |   		}
389 | 	var endpt = stuff.length-1;
390 | 	for (var i=endpt;i>=0;i--) {  //reverse order
391 | 		if (stuff[i].overcheck(mx,my)) { 
392 | 		offsetx = mx-stuff[i].x;
393 | 		 offsety = my-stuff[i].y;
394 | 		 //move this item on top
395 | 		 var item = stuff[i];
396 | 		 thingInMotion = stuff.length-1;
397 | 		 stuff.splice(i,1);
398 | 		 stuff.push(item);
399 | 		 canvas1.style.cursor = "pointer";   // change to finger when dragging
400 | 		 canvas1.addEventListener('mousemove',moveit,false);
401 | 		 canvas1.addEventListener('mouseup',dropit,false);
402 | 		 break;
403 | 		}
404 | 	}
405 | }
406 | function dropit(ev) {
407 | 	canvas1.removeEventListener('mousemove',moveit,false);	
408 | 	canvas1.removeEventListener('mouseup',dropit,false);
409 | 	canvas1.style.cursor = "crosshair";  //change back to crosshair
410 | }
411 | function moveit(ev) {
412 | 	var mx;
413 | 	var my;
414 | 	if ( ev.layerX ||  ev.layerX == 0) { // Firefox, ???
415 |    			mx= ev.layerX;
416 |     		my = ev.layerY;
417 |   		} else if (ev.offsetX || ev.offsetX == 0) { // Opera, ???
418 |     		mx = ev.offsetX;
419 |     		my = ev.offsetY;
420 |   		}
421 | 	stuff[thingInMotion].x = mx-offsetx; //adjust for flypaper dragging
422 | 	stuff[thingInMotion].y = my-offsety;
423 | 	
424 | }
425 | 
426 | function drawstuff() {
427 | 	ctx.clearRect(0,0,800,600);
428 | 	ctx.strokeStyle = "black";
429 | 	ctx.lineWidth = 2;
430 | 	ctx.strokeRect(0,0,800,600);
431 | 	for (var i=0;i<stuff.length;i++) {
432 | 		stuff[i].draw();
433 | 	}	
434 | }
435 | 
436 | function drawrect() {
437 |     ctx.fillStyle = this.color;
438 | 	ctx.fillRect(this.x, this.y, this.w, this.h);
439 | }
440 | 
441 | function saveasimage() {
442 | 	
443 |  try {
444 |   
445 |   window.open(canvas1.toDataURL("image/png"));}
446 |   catch(err) {
447 | 	  alert("You need to change browsers AND/OR upload the file to a server.");
448 |   }
449 |  
450 | 	
451 | }
452 | 
453 | 
454 | 
455 | function removeobj() {
456 | 	stuff.pop();
457 | 	drawstuff();
458 | }
459 | 
460 | 
461 | </script>
462 | </head>
463 | 
464 | <body onLoad="init();">
465 | Mouse down, move and mouse up to move objects. Double click for make a copy of any object.
466 | <br/>
467 | <canvas id="canvas" width="800" height="600">
468 | Your browser doesn't recognize the canvas element 
469 | </canvas>
470 | 
471 | <button onClick="saveasimage();">Open window with image (which you can save into image file) </button></br>
472 | <button onClick="removeobj();">Remove last object moved </button>
473 | 
474 | 
475 | </body>
476 | </html>
477 | 


--------------------------------------------------------------------------------
/ch02/collagedataV2.js:
--------------------------------------------------------------------------------
 1 | /* 
 2 | Information on videos, other objects used in collagebase.html
 3 | You need to produce 3 video files for each video, type mp4,ogg,webm, with names as indicated in the videoinfo array. 
 4 | The first element of each subarray indicates the type of object, that is, 'video', 'heart', 'picture', 'oval','rectangle'.
 5 | The elements for video objects are
 6 | "video", basename of video files, angle in radians, source x, source y, destination on canvas x, destination y, width, height, scale factor (x and y), volume level (0 to 1)
 7 | The angle can be used to change the orientation for clips shot on iPhone or iPads.
 8 | The source x and y, with the width and height, allows you to use only some of the source video.
 9 | 
10 | The elements for 'picture' are
11 | 'picture',x,y,w,h,imagename.
12 | 
13 | The elements for heart are
14 | 'heart',x,y,h,drx,color
15 | 
16 | The elements for oval are
17 | 'oval',x,y,r,horizontal scaling, vertical scaling, color
18 | 
19 | The elements for rectangle are
20 | 'rect',x,y, w,h,color
21 | 
22 | The element for video are
23 | 'video',videoname, angle, sourcex, sourcey, x, y, width, height, scale, volume
24 | Note: the width and height are before scaling.
25 | 
26 | */
27 | 
28 | var mediainfo=
29 | [
30 | ['heart', 300,40,100,30,'red'],
31 | 
32 | ['rect',620,400,100,150,"purple"],
33 | 
34 | ['oval',600,50,30,2,1,'green'],
35 | 
36 | ['oval',80, 500, 30, 2, 1, 'blue'],
37 | 
38 | ['video','monkeyMar18',0,0,0,1000,800,896,1198,.25,1],
39 | 
40 | ['picture',5,150, 150  , 200  ,'danielAndAnnika.jpg'],
41 | 
42 | ['picture',500,150,280,210,'threePlusDog.jpg']
43 | 
44 | 
45 | ];
46 | 
47 | 
48 | 
49 | 


--------------------------------------------------------------------------------
/ch02/danielAndAnnika.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch02/danielAndAnnika.JPG


--------------------------------------------------------------------------------
/ch02/monkeyMar18.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch02/monkeyMar18.mp4


--------------------------------------------------------------------------------
/ch02/monkeyMar18.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch02/monkeyMar18.ogv


--------------------------------------------------------------------------------
/ch02/monkeyMar18.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch02/monkeyMar18.webm


--------------------------------------------------------------------------------
/ch02/threePlusDog.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch02/threePlusDog.jpg


--------------------------------------------------------------------------------
/ch03/joshuahomerun.mp4video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch03/joshuahomerun.mp4video.mp4


--------------------------------------------------------------------------------
/ch03/joshuahomerun.theora.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch03/joshuahomerun.theora.ogv


--------------------------------------------------------------------------------
/ch03/joshuahomerun.webmvp8.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch03/joshuahomerun.webmvp8.webm


--------------------------------------------------------------------------------
/ch03/videobounceC.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <title>Video frames bounce</title>
  5 | <meta charset="UTF-8">
  6 | <style>
  7 | 
  8 | #vid {position:absolute; display:none; z-index: 0; 
  9 | 
 10 | }
 11 | #canvas {position:absolute; z-index:10; top:0px; left:0px;}
 12 | #revbtn {position:absolute; z-index:20; }
 13 | </style>
 14 |     <script type="text/javascript">
 15 | 	var ctx;
 16 | 	var cwidth ;
 17 | 	var cheight ;
 18 | 	var ballrad = 50;
 19 | 	var maskrad;
 20 | 	var ballx = 50;
 21 | 	var bally = 60;
 22 | 	var canvas1;
 23 | 	var ballvx = 2;
 24 | 	var ballvy = 4;
 25 | 	var v;
 26 | 	var videow;
 27 | 	var videoh;
 28 |    
 29 | 
 30 | 
 31 | function init(){
 32 | 	canvas1 = document.getElementById('canvas');
 33 |     ctx = canvas1.getContext('2d');
 34 | 	canvas1.width = window.innerWidth;
 35 | 	cwidth = canvas1.width;
 36 | 	canvas1.height = window.innerHeight;
 37 | 	cheight = canvas1.height;
 38 |     v = document.getElementById("vid");
 39 |     var aspect= v.videoWidth/v.videoHeight;
 40 |     v.width = Math.min(v.videoWidth,.5*cwidth);
 41 |     v.height =   v.width/aspect;
 42 |     v.height = Math.min(v.height,.5*cheight);
 43 |     v.width = aspect*v.height;
 44 |     window.onscroll = function () {
 45 | 		window.scrollTo(0,0);
 46 | 	};
 47 |     
 48 |     videow = v.width;
 49 |     videoh = v.height;
 50 | 
 51 |    
 52 | 
 53 | 	ballrad = Math.min(.5*videow,.5*videoh);
 54 | 	maskrad = .4*Math.min(videow,videoh);
 55 | 	
 56 | 	ctx.lineWidth = ballrad;
 57 |     ctx.strokeStyle ="rgb(200,0,50)";
 58 |     ctx.fillStyle="white";  //for testing
 59 | 	v.play();
 60 | 	setInterval(drawscene,50);
 61 | }
 62 | function drawscene(){
 63 |   ctx.clearRect(0,0,cwidth,cheight);  //clear whole canvas
 64 | 
 65 |   checkPosition();
 66 | 
 67 |   ctx.drawImage(v,ballx, bally, videow,videoh);  //draws rectangular frame from the video
 68 | 
 69 | 
 70 |  ctx.beginPath();
 71 |  ctx.moveTo(ballx,bally);
 72 |  ctx.lineTo(ballx+videow+2,bally);
 73 |  ctx.lineTo(ballx+videow+2,bally+.5*videoh+2);
 74 | 
 75 | ctx.lineTo(ballx+.5*videow+ballrad, bally+.5*videoh+2);
 76 | ctx.arc(ballx+.5*videow,bally+.5*videoh,ballrad,0,Math.PI,true);
 77 |  ctx.lineTo(ballx,bally+.5*videoh);
 78 |  ctx.lineTo(ballx,bally);
 79 |  ctx.fill();
 80 |  
 81 |  ctx.closePath();
 82 |  
 83 | 
 84 | ctx.beginPath();
 85 |  ctx.moveTo(ballx,bally+.5*v.height);
 86 |  ctx.lineTo(ballx,bally+v.height);
 87 |  ctx.lineTo(ballx+videow+2,bally+videoh);
 88 | 
 89 |  ctx.lineTo(ballx+videow+2,bally+.5*videoh-2);
 90 |  
 91 |  ctx.lineTo(ballx+.5*videow+ballrad,bally+.5*videoh-2);
 92 | 
 93 | 
 94 | 
 95 |  ctx.arc(ballx+.5*videow,bally+.5*videoHeight,ballrad,0,Math.PI,false);
 96 |  ctx.lineTo(ballx,bally+.5*videoh);
 97 |  
 98 |  ctx.fill();
 99 |   
100 |  
101 |  ctx.closePath();
102 | 
103 |  
104 |    
105 |    ctx.strokeRect(0,0,cwidth,cheight);  //box
106 | }
107 | 
108 | function checkPosition() {
109 | 	var nballx = ballx + ballvx+.5*videow;  //horizontal coordinate of center, after next move
110 | 	var nbally = bally + ballvy+.5*videoh;  //vertical coordinate of center, after next move
111 | 	
112 | 
113 |   if (nballx > cwidth) {
114 | 	 ballvx =-ballvx;
115 | 	 nballx = cwidth;
116 |   }
117 |   if (nballx < 0) {
118 | 	  
119 |      nballx = 0;
120 | 	 ballvx = -ballvx;
121 |   }
122 |   if (nbally > cheight) {
123 | 	 nbally = cheight;
124 | 	 ballvy =-ballvy;
125 |   }
126 |   if (nbally < 0) {
127 |     nbally = 0;
128 | 	 ballvy = -ballvy;
129 |   }
130 |   ballx = nballx-.5*videow;  //make the adjusted move, horizontally
131 |   bally = nbally-.5*videoh;  //make the adjusted move, vertically
132 | }
133 | function reverse() {
134 | 	ballvx = -ballvx;
135 | 	ballvy = -ballvy;
136 | 	
137 | }
138 | </script>
139 | </head>
140 | 
141 | <body onLoad="init();">
142 | 
143 | <video id="vid" loop="loop" preload="auto" muted>
144 | <source src="joshuahomerun.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
145 | <source src="joshuahomerun.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'>    
146 | <source src="joshuahomerun.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
147 | 
148 | Your browser does not accept the video tag.
149 |  </video>
150 | <button id="revbtn" onClick="reverse();">Reverse </button><br/> 
151 | 
152 | <canvas id="canvas" >
153 | This browser doesn't support the HTML5 canvas element.
154 | </canvas>
155 | 
156 | 
157 | </body>
158 | </html>


--------------------------------------------------------------------------------
/ch03/videobounceEwithClipPath.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <title>Video element bounce</title>
  5 | <meta charset="UTF-8">
  6 | <style>
  7 | 
  8 | #vid {position:absolute; display:none; z-index: 1; }
  9 | 
 10 | #canvas {position:absolute; z-index:10; top:0px; left:0px;}
 11 | 
 12 | #revbtn {position:absolute; z-index:20;}
 13 | </style>
 14 |     <script type="text/javascript">
 15 | 	var ctx;
 16 | 	var cwidth ;
 17 | 	var cheight ;
 18 | 	var ballrad = 50;
 19 | 	var ballx = 80;
 20 | 	var bally = 80;
 21 | 	
 22 | 	var ballvx = 2;
 23 | 	var ballvy = 4;
 24 | 	var v;
 25 | 	var videow;
 26 | 	var videoh;
 27 | 
 28 | 
 29 | 
 30 | function init(){
 31 | 	canvas1 = document.getElementById('canvas');
 32 |     ctx = canvas1.getContext('2d');
 33 | 	canvas1.width = window.innerWidth;
 34 | 	cwidth = canvas1.width;
 35 | 	canvas1.height = window.innerHeight;
 36 | 	cheight = canvas1.height;
 37 | 	window.onscroll = function () {
 38 | 		window.scrollTo(0,0);
 39 | 	};
 40 |     v = document.getElementById("vid");
 41 |   
 42 |     var aspect= v.videoWidth/v.videoHeight;
 43 |     v.width = Math.min(v.videoWidth,.5*cwidth);
 44 |     v.height =   v.width/aspect;
 45 |     v.height = Math.min(v.height,.5*cheight);
 46 |     v.width = aspect*v.height;	
 47 |     videow = v.width;
 48 |     videoh = v.height;
 49 |     
 50 |     amt = .5*Math.min(videow,videoh);
 51 |     amtS = String(amt)+"px";   
 52 |     v.style.clipPath="circle("+amtS+" at center)";
 53 |     ballrad = Math.min(.5*videow,.5*videoh);
 54 |    
 55 | 	ctx.lineWidth = ballrad;
 56 |    
 57 |     ctx.strokeStyle ="rgb(200,0,50)";
 58 |     ctx.fillStyle="white";
 59 | 
 60 |     v.style.left = String(ballx)+"px";
 61 | 	v.style.top = String(bally)+"px";
 62 | 	v.play();
 63 | 	v.style.visibility = "visible";
 64 |     v.style.display = "block";
 65 | 	ctx.strokeRect(0,0,cwidth,cheight);  //box
 66 | 	setInterval(moveVideo,50);
 67 | }
 68 | function moveVideo(){
 69 | 	
 70 |     checkPosition();
 71 |     v.style.left = String(ballx)+"px";
 72 | 	v.style.top = String(bally)+"px";
 73 | 	
 74 | }
 75 | 
 76 | function checkPosition() {
 77 | 	//var nballx = ballx + ballvx;
 78 | 	//var nbally = bally + ballvy;
 79 | 
 80 | 
 81 | 	var nballx = ballx + ballvx;
 82 | 	var nbally = bally + ballvy;
 83 | 	
 84 |   if ((nballx+videow) > cwidth) {
 85 | 	 ballvx =-ballvx;
 86 | 	 nballx = cwidth-videow;
 87 | 
 88 |   }
 89 |   if (nballx < 0) {
 90 | 	  
 91 |      nballx = 0;
 92 | 	 ballvx = -ballvx;
 93 |   }
 94 |   if ((nbally+videoh) > cheight) {
 95 | 	 nbally = cheight-videoh;
 96 | 	 ballvy =-ballvy;
 97 | 	 
 98 |   }
 99 |   if (nbally < 0) {
100 |     nbally = 0;
101 | 	 ballvy = -ballvy;
102 |   }
103 |   ballx = nballx;
104 |   bally = nbally;
105 |   
106 | }
107 | 
108 | function reverse() {
109 | 	ballvx = -ballvx;
110 | 	ballvy = -ballvy;
111 | 	
112 | }
113 | </script>
114 | </head>
115 | 
116 | <body onLoad="init();" >
117 | 
118 | <video id="vid" loop="loop" preload="auto" autoplay muted>
119 | 
120 | <source src="joshuahomerun.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'>  
121 | <source src="joshuahomerun.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>  
122 | <source src="joshuahomerun.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
123 | 
124 | Your browser does not accept the video tag.
125 |  </video>
126 | <button id="revbtn" onClick="reverse();">Reverse </button><br/> 
127 | 
128 | <canvas id="canvas" >
129 | This browser doesn't support the HTML5 canvas element.
130 | </canvas>
131 | 
132 | 
133 | </body>
134 | </html>


--------------------------------------------------------------------------------
/ch04/bx1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch04/bx1.png


--------------------------------------------------------------------------------
/ch04/mapspotlight.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <title>Spotlight </title>
  5 | <meta charset="UTF-8">
  6 | <style>
  7 | header {font-family:Georgia,"Times New Roman",serif;
  8 | 	font-size:16px;
  9 | 	display:block; }
 10 | canvas {position:absolute; top: 165px; left:0px; z-index:100;}
 11 | #place {position:absolute; top: 165px; left: 0px; z-index:1;}
 12 | 
 13 | </style>
 14 | <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
 15 |   type="text/javascript"></script>
 16 | 
 17 | <script type="text/javascript" charset="UTF-8">
 18 | var locations = [
 19 | 		[51.534467,-0.121631, "Springer Nature (Apress Publishers) London, UK"],
 20 | 		[41.04796,-73.70539,"Purchase College/SUNY, NY, USA"],
 21 | 		[35.085136,135.776585,"Kyoto, Japan"]
 22 | 		];
 23 | 		
 24 | 	
 25 | 		
 26 | var positionopts;
 27 | positionopts = {
 28 | 	enableHighAccuracy: true} ;
 29 | var candiv;
 30 | var can;
 31 | var ctx;
 32 | var pl;
 33 | 
 34 | function init() {
 35 | 	var mylat;
 36 | 	var mylong;
 37 |  candiv = document.createElement("div");
 38 |  candiv.innerHTML = ("<canvas id='canvas' width='600' height='400'>No canvas </canvas>");
 39 |  document.body.appendChild(candiv);
 40 |  can = document.getElementById("canvas");
 41 |  pl = document.getElementById("place");
 42 |   ctx = can.getContext("2d");
 43 | can.onmousedown = function () { return false; } ;  //prevents change of cursor to default
 44 |    can.addEventListener('mousemove',showshadow);
 45 |    can.addEventListener('mousedown',pushcanvasunder);
 46 |    can.addEventListener("mouseout",clearshadow);
 47 |    mylat = locations[1][0];
 48 |    mylong = locations[1][1];
 49 |    document.getElementById("first").checked="checked";
 50 |    makemap(mylat,mylong);
 51 | 
 52 | 
 53 | }
 54 | function pushcanvasunder(ev) {
 55 | 	can.style.zIndex = 1;
 56 | 	pl.style.zIndex = 100;
 57 | }
 58 | 
 59 | function clearshadow(ev) {
 60 | 	ctx.clearRect(0,0,600,400);
 61 | }
 62 | 
 63 | function showshadow(ev) {
 64 | 	var mx;
 65 | 	var my;
 66 | 	if ( ev.layerX ||  ev.layerX == 0) { // Necessary for older browsers
 67 |    			mx= ev.layerX;
 68 |     		my = ev.layerY;
 69 |   		} else if (ev.offsetX || ev.offsetX == 0) { // works with current browsers
 70 |     		mx = ev.offsetX;
 71 |     		my = ev.offsetY;
 72 |   		}
 73 |     can.style.cursor = "url('light.gif'), pointer";   // change to finger when dragging
 74 | 	//rough correction to make center of light 
 75 | 	mx = mx+10;
 76 | 	my = my + 12;
 77 | 	drawshadowmask(mx,my);
 78 | 		
 79 | }
 80 | var canvasAx = 0;
 81 | var canvasAy = 0;
 82 | var canvasBx = 600;
 83 | var canvasBy = 0;
 84 | var canvasCx = 600;
 85 | var canvasCy = 400;
 86 | var canvasDx = 0;
 87 | var canvasDy = 400;
 88 | var holerad = 50;
 89 | var grayshadow = "rgba(250,250,250,.8)";
 90 | function drawshadowmask(mx,my) {
 91 | 	ctx.clearRect(0,0,600,400);
 92 | 	ctx.fillStyle = grayshadow;
 93 | 	ctx.beginPath();
 94 |  ctx.moveTo(canvasAx,canvasAy);
 95 |  ctx.lineTo(canvasBx,canvasBy);
 96 |  ctx.lineTo(canvasBx,my);
 97 |  ctx.lineTo(mx+holerad,my);
 98 |  ctx.arc(mx,my,holerad,0,Math.PI,true);
 99 |  ctx.lineTo(canvasAx,my);
100 |  ctx.lineTo(canvasAx,canvasAy);
101 |  ctx.closePath();
102 |  ctx.fill();
103 |  //ctx.stroke();
104 |  
105 |  ctx.beginPath();
106 |  ctx.moveTo(canvasAx,my);
107 |  ctx.lineTo(canvasDx,canvasDy);
108 |  ctx.lineTo(canvasCx,canvasCy);
109 |  ctx.lineTo(canvasBx,my);
110 |  ctx.lineTo(mx+holerad,my);
111 |  ctx.arc(mx,my,holerad,0,Math.PI,false);
112 |  ctx.lineTo(canvasAx,my);
113 |  ctx.closePath();
114 |  ctx.fill();
115 | // ctx.stroke();
116 | 	
117 | }
118 | 
119 | var listener;
120 | var map;
121 | var markersArray =[];
122 | var blatlng;
123 | var myOptions;
124 | 
125 | 
126 | var rxmarker = "rx1.png";
127 | var bxmarker = "bx1.png";
128 | function makemap(mylat,mylong) {
129 | 	var marker;
130 |  blatlng = new google.maps.LatLng(mylat,mylong);
131 | // alert("latlng is "+latlng);
132 | myOptions = {
133 | 	  zoom: 12,
134 |       center: blatlng,
135 |     mapTypeId: google.maps.MapTypeId.ROADMAP
136 | 	  //disableDefaultUI: true
137 |     };
138 | map = new google.maps.Map(document.getElementById("place"), myOptions);
139 | //mark center
140 | marker = new google.maps.Marker({
141 | 									 position: blatlng,
142 | 									 title: "center",
143 | 									 icon: rxmarker,
144 | 									 map: map });
145 | 
146 | 
147 | //
148 | 	listener = google.maps.event.addListener(map, 'mouseup', function(event) {
149 | 			checkit(event.latLng);
150 | 			});
151 | 
152 | }
153 | function checkit(clatlng) {
154 | 	
155 | 	var distance = dist(clatlng,blatlng);
156 | 	//distance = Math.floor((distance+.005)*100)/100;
157 | 	distance = round(distance,2);
158 | 	var distanceString = String(distance)+" km";
159 | 	marker = new google.maps.Marker({
160 | 									 position: clatlng,
161 | 									 title: distanceString,
162 | 									 icon: bxmarker,
163 | 									 map: map });
164 | 	markersArray.push(marker);
165 |    var clat = clatlng.lat();
166 |    var clng = clatlng.lng();
167 |    clat = round(clat,4);
168 |    clng = round(clng,4);
169 | 
170 | 
171 | 	 document.getElementById("answer").innerHTML  =
172 | 	 "The distance from base to most recent marker ("+clat+", "+clng+") is "+String(distance) +" miles.";
173 | 	 //change miles to km depending on value used for R in the dist function.
174 | 	 can.style.zIndex = 100;
175 | 	 pl.style.zIndex = 1;
176 | 
177 | }
178 | function round (num,places) {
179 | 	var factor = Math.pow(10,places);
180 | 	var increment = 5/(factor*10);
181 | 	return Math.floor((num+increment)*factor)/factor;
182 | 	
183 | }
184 | 
185 |  function dist(point1, point2) {
186 | 	  //spherical law of cosines
187 | 	  //var R = 6371; // km  Need to make sure message syncs.
188 | 	  var R =  3959; // miles
189 | 	  var lat1 = point1.lat()*Math.PI/180;
190 | 	  var lat2 = point2.lat()*Math.PI/180 ;
191 | 	  var lon1 = point1.lng()*Math.PI/180;
192 | 	  var lon2 = point2.lng()*Math.PI/180;
193 | 
194 | var d = Math.acos(Math.sin(lat1)*Math.sin(lat2) +
195 |                   Math.cos(lat1)*Math.cos(lat2) *
196 |                   Math.cos(lon2-lon1)) * R;
197 |     return d;
198 | 
199 |   }
200 | 
201 | function changebase() {
202 | 	var mylat;
203 | 	var mylong;
204 | 	for(var i=0;i<locations.length;i++) {
205 | 		if (document.f.loc[i].checked) {
206 | 			mylat = locations[i][0];
207 | 			mylong = locations[i][1];
208 | 			makemap(mylat,mylong);
209 | 			document.getElementById("header").innerHTML = "Base location (small red x) is "+locations[i][2];
210 | 		}
211 | 	}
212 | 	
213 | 	return false;
214 | }
215 | </script>
216 | </head>
217 | <body onLoad="init();">
218 | <header id="header">Base location (small red x) </header>
219 | <div id="place" style="width:600px; height:400px"></div>
220 | 
221 | 
222 | <div id="answer"></div>
223 | Change base location: <br/>
224 | <form name="f" onSubmit=" return changebase();">
225 |  <input type="radio" name="loc" /> Springer Nature (Apress Publishers) London, UK<br/>
226 |  <input id="first" type="radio" name="loc" /> Purchase College/SUNY, NY, USA<br/>
227 |  <input type="radio" name="loc" /> Kyoto, Japan<br/>
228 | 
229 | <input type="submit" value="CHANGE">
230 | </form>
231 | </body>
232 | </html>
233 | 


--------------------------------------------------------------------------------
/ch04/rx1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch04/rx1.png


--------------------------------------------------------------------------------
/ch05/bx1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/bx1.png


--------------------------------------------------------------------------------
/ch05/esther.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/esther.jpg


--------------------------------------------------------------------------------
/ch05/estherT.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/estherT.mp3


--------------------------------------------------------------------------------
/ch05/estherT.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/estherT.ogv


--------------------------------------------------------------------------------
/ch05/estherT.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/estherT.wav


--------------------------------------------------------------------------------
/ch05/mapmediaquiz.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <title>Map Quiz </title>
  5 | <meta charset="UTF-8">
  6 | <style>
  7 | header {font-family:Georgia,"Times New Roman",serif;
  8 | 	font-size:20px;
  9 | 	display:block;
 10 | }
 11 | video {display:none; position:absolute; top: 60px; right: 20px;
 12 | }
 13 | audio {display:none; position:absolute; top: 60px; right: 20px;}
 14 | canvas {position:relative; top:60px}
 15 | #answer {position:relative; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px;}
 16 | 
 17 | </style>
 18 | <script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 19 | <script type="text/javascript" src="mediaquizcontent.js"> </script>
 20 | <script type="text/javascript" charset="UTF-8">
 21 | var listener;
 22 | var map;
 23 | 
 24 | var myOptions;		
 25 | var ctx;
 26 | var blatlng;
 27 | var content = [];
 28 | 
 29 | var answer;
 30 | var v;
 31 | var audioel;
 32 | var videotext1 = "<video id=\"XXXX\" loop=\"loop\" preload=\"auto\" controls=\"controls\" width=\"400\"><source src=\"XXXX.webmpv8.webm\" type=\'video/webm\'>";
 33 | 
 34 | var videotext2="<source src=\"XXXX.theora.ogv\" type=\'video/ogg\'>  <source src=\"XXXX.mp4\"  type=\'video/mp4\'>";
 35 | 
 36 | var videotext3="Your browser does not accept the video tag.</video>";
 37 | 
 38 | var audiotext1="<audio id=\"XXXX\" controls=\"controls\" preload=\"preload\"><source src=\"XXXX.ogg\" type=\"audio/ogg\" />";
 39 | var audiotext2="<source src=\"XXXX.mp3\" type=\"audio/mpeg\" /><source src=\"XXXX.wav\" type=\"audio/wav\" /></audio>";
 40 | 
 41 | var nextquestion = -1;
 42 | 
 43 | function init() {
 44 |   ctx = document.getElementById("canvas").getContext('2d');
 45 |     answer = document.getElementById("answer");
 46 | 	header = document.getElementById("header");
 47 |   loadcontent(); 
 48 |   asknewquestion();  
 49 | }
 50 | function asknewquestion() {
 51 | 	nextquestion++;
 52 | 	if (nextquestion<questions.length) {
 53 | 		header.innerHTML=questions[nextquestion];
 54 | 		
 55 | 	}
 56 | 	else {
 57 | 		header.innerHTML="No more questions.";
 58 | 		
 59 | 	}
 60 | }
 61 | function loadcontent() {
 62 | 	var divelement;
 63 | 	
 64 | 	makemap(base[0],base[1]);
 65 | 	var videomarkup;
 66 | 	var videoreference;
 67 | 	var audiomarkup;
 68 | 	var audioreference;
 69 | 	var imageobj;
 70 | 	var name;
 71 | 	var savedimagefilename;
 72 | 	
 73 | 	for (var i=0;i<precontent.length;i++) {
 74 | 		content.push(precontent[i]);
 75 | 		name = precontent[i][4];
 76 | 		switch (precontent[i][3]) {
 77 | 		case "video": 
 78 | 			divelement= document.createElement("div");
 79 | 			
 80 | 			videomarkup = videotext1+videotext2+videotext3;
 81 | 			videomarkup = videomarkup.replace(/XXXX/g,name);
 82 |  			divelement.innerHTML = videomarkup;
 83 |  			document.body.appendChild(divelement);
 84 | 			
 85 | 			videoreference = document.getElementById(name);
 86 | 			content[i][4] = videoreference;
 87 | 			break;
 88 | 		case "pictureaudio":
 89 | 			divelement = document.createElement("div");
 90 | 			
 91 | 			audiomarkup = audiotext1+audiotext2;
 92 | 			audiomarkup = audiomarkup.replace(/XXXX/g,name);
 93 | 			divelement.innerHTML = audiomarkup;
 94 | 			document.body.appendChild(divelement);
 95 | 			
 96 | 			audioreference = document.getElementById(name);
 97 | 			savedimagefilename = content[i][5];
 98 | 			content[i][5] = audioreference;
 99 | 			imageobj = new Image();
100 | 			imageobj.src= savedimagefilename;
101 | 			content[i][4] = imageobj;
102 | 			break;
103 | 		case "picture":
104 | 			imageobj = new Image();
105 | 			imageobj.src= precontent[i][4];
106 | 			content[i][4] = imageobj;
107 | 			break;
108 | 		}
109 | 	}
110 | 
111 |    
112 | }
113 | 
114 | 
115 | 
116 | 
117 | 
118 |   
119 | 
120 | 
121 | var rxmarker = "rx1.png";
122 | var bxmarker = "bx1.png";
123 | function makemap(mylat,mylong) {
124 | 	var marker;
125 |  blatlng = new google.maps.LatLng(mylat,mylong);
126 |    
127 |  myOptions = {
128 | 	  zoom: zoomlevel,
129 |       center: blatlng,
130 |       mapTypeId: google.maps.MapTypeId.ROADMAP,
131 |       
132 | 	  //disableDefaultUI: true
133 |     };
134 | map = new google.maps.Map(document.getElementById("place"), myOptions);
135 | //mark center
136 | marker = new google.maps.Marker({
137 | 									 position: blatlng,
138 | 									 title: "center",
139 | 									 icon: rxmarker,
140 | 									 map: map });
141 | 
142 | 
143 | 
144 | 	listener = google.maps.event.addListener(map, 'click', function(event) {
145 | 			checkit(event.latLng);
146 | 			});
147 | 
148 | }
149 | function eraseold() {
150 | 	if (v != undefined) {
151 | 	v.pause();
152 | 	    v.style.display = "none";  //erases last video played
153 | 	}
154 | 	if (audioel != undefined) {
155 | 	 audioel.pause();
156 | 	 audioel.style.display = "none";  //erase controls for last audio played
157 | 	}
158 | 	ctx.clearRect(0,0,300,300);
159 | 	
160 | }
161 | function checkit(clatlng) {
162 | 	var marker;
163 | 	var latlnga =new google.maps.LatLng(content[nextquestion][0],content[nextquestion][1]);
164 | 	
165 | 	var distance = dist(clatlng,latlnga);	
166 |     eraseold();
167 |     marker = new google.maps.Marker({
168 | 									 position: clatlng,
169 | 									 title: "Your answer",
170 | 									  icon: bxmarker,
171 | 									 map: map });	
172 | 	
173 | 		if (distance<maxdistance) {
174 | 	
175 | 
176 | 	switch (content[nextquestion][3]) {
177 | 	  case "video":
178 | 		answer.innerHTML=content[nextquestion][2];
179 | 		ctx.clearRect(0,0,400,400);
180 | 		
181 | 		v = content[nextquestion][4];
182 | 		v.style.display="block";
183 | 		v.currentTime = 0;
184 | 		v.play();
185 | 		
186 | 		break;
187 | 	  case "picture":
188 | 	  case "pictureaudio":
189 | 		answer.innerHTML=content[nextquestion][2];
190 | 		ctx.clearRect(0,0,400,400);
191 | 		var img1 = content[nextquestion][4];	
192 | 		var iw = img1.width;
193 | 		var ih = img1.height;
194 | 		var aspect = iw/ih;
195 | 		if (iw>=ih) {
196 |             if (iw>400){
197 |             	tw = 400;
198 |             	th = 400/aspect;
199 |             }
200 |             else {
201 |             	tw = iw;
202 |             	th = ih;
203 |             }
204 | 		}
205 | 		else {
206 | 			if (ih>400){
207 | 				th = 400;
208 | 				tw = 400*aspect;
209 | 			}
210 | 			else {
211 | 				th = ih;
212 | 				tw = iw;
213 | 			}
214 | 		}
215 | 		ctx.drawImage(img1,0,0,iw,ih,0,0,tw,th);
216 | 		
217 | 		
218 | 		if (content[nextquestion][3]=="picture") {
219 | 			break;}
220 | 		else {
221 | 		audioel = content[nextquestion][5];
222 | 		audioel.style.display="block";
223 | 		audioel.currentTime = 0;
224 | 		audioel.play();
225 | 		
226 | 		break;
227 | 		}
228 | 		
229 | 	}
230 | 	  asknewquestion();
231 | 	}
232 | 	else {
233 | 		answer.innerHTML= "Not close enough to the location.";
234 | 	}
235 | }
236 |  function dist(point1, point2) {
237 | 	  //spherical law of cosines
238 | 	  var R = 6371; // km
239 | 	  //var R =  3959; // miles
240 | 	  var lat1 = point1.lat()*Math.PI/180;
241 | 	  var lat2 = point2.lat()*Math.PI/180 ;
242 | 	  var lon1 = point1.lng()*Math.PI/180;
243 | 	  var lon2 = point2.lng()*Math.PI/180;
244 | 
245 | var d = Math.acos(Math.sin(lat1)*Math.sin(lat2) +
246 |                   Math.cos(lat1)*Math.cos(lat2) *
247 |                   Math.cos(lon2-lon1)) * R;
248 |     return d;
249 | 
250 |   }
251 | function giveup() {
252 | 	makemap(content[nextquestion][0],content[nextquestion][1]);
253 | 	eraseold();
254 | 	answer.innerHTML="Click at red x to finish this question.";
255 | }
256 | 
257 | </script>
258 | </head>
259 | <body onLoad="init();">
260 | <header id="header">Click</header>
261 | 
262 | <div id="place" style="float: left;width:50%; height:400px"></div>
263 | <button onClick="giveup();">Hint? </button>
264 | <div style="float: right;width:30%;height:400px">
265 | <div id="answer">Starting location </div>
266 | <p>  </p>
267 | 
268 | 
269 | 
270 | 
271 | 
272 | <canvas id="canvas" width="400" height="400" >
273 | Your browser doesn't recognize canvas
274 | </canvas>
275 | </div>
276 | 
277 | </body>
278 | </html>
279 | 


--------------------------------------------------------------------------------
/ch05/maze.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/maze.mp4


--------------------------------------------------------------------------------
/ch05/maze.theora.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/maze.theora.ogv


--------------------------------------------------------------------------------
/ch05/maze.webmvp8.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/maze.webmvp8.webm


--------------------------------------------------------------------------------
/ch05/mediaquizcontent.js:
--------------------------------------------------------------------------------
 1 | // JavaScript Document
 2 | 
 3 | var base= 
 4 | 		[41.049290,-73.702093,"Purchase College/SUNY"];
 5 | var zoomlevel = 13;
 6 | 
 7 | var precontent = [
 8 |    [41.19991,-73.72353,"Esther at home","pictureaudio","estherT","esther.jpg"],
 9 |    [41.049793,-73.703755,"Natural Sciences Building ","video","maze"],
10 |    [40.68992,-74.04460,"Near Statue of Liberty ","video","sfire3"],
11 |    [34.298846,132.318359,"Miyajima","picture","miyajima0.JPG"]
12 |    ];
13 |    
14 | var questions = [
15 |   "Where did Grandma Esther live?",
16 |   "Show the Lego robot navigating a maze.",
17 |   "Where are great fireworks?",
18 |   "Where is the Great Torii?"
19 | 
20 | 
21 | ];
22 | 
23 | var maxdistance = 10; 
24 | 
25 | 


--------------------------------------------------------------------------------
/ch05/miyajima0.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/miyajima0.JPG


--------------------------------------------------------------------------------
/ch05/rx1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/rx1.png


--------------------------------------------------------------------------------
/ch05/sfire3.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/sfire3.mp4


--------------------------------------------------------------------------------
/ch05/sfire3.theora.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/sfire3.theora.ogv


--------------------------------------------------------------------------------
/ch05/sfire3.webmvp8.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/sfire3.webmvp8.webm


--------------------------------------------------------------------------------
/ch05/x1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch05/x1.png


--------------------------------------------------------------------------------
/ch06/AddTo!5andTicTacToe.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch06/AddTo!5andTicTacToe.docx


--------------------------------------------------------------------------------
/ch06/addTo15JSplain.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html >
  2 | <html>
  3 | <head>
  4 | <title>Add to 15</title>
  5 | <meta charset="UTF-8">
  6 | <style>
  7 | span {position:absolute; top:180px;    
  8 |    border-style: solid; color: red; border-radius: 25px; background-color: yellow;
  9 |    padding: 5px; cursor: pointer;
 10 | }
 11 | #status { 
 12 |   color: red;
 13 |   font-size: x-large;
 14 | }
 15 | </style>
 16 | 
 17 | <script language="Javascript">
 18 | var statusref;
 19 | 
 20 | 
 21 | 
 22 | var numbers = [];   //array of canvas elements
 23 | var game = true;
 24 | var player = [];
 25 | var computer = [];
 26 | var board = [1,2,3,4,5,6,7,8,9];
 27 | 
 28 | var wedge = 50;
 29 | var startx = 15;  //pieces lined up vertically
 30 | 
 31 | 
 32 | var groups = [
 33 |   "  ",               //place holder, not used
 34 |   "3 4 8",
 35 |   "1 5 9",
 36 |   "2 6 7",
 37 |   "1 6 8",
 38 |   "3 5 7",
 39 |   "2 4 9",
 40 |   "2 5 8",
 41 |   "4 5 6"
 42 | ];
 43 | 
 44 | var occupied = [  //indexed subtracting 1
 45 |   [2, 4],
 46 |   [3, 6, 7],
 47 |   [1, 5],
 48 |   [1, 6, 8],
 49 |   [2, 5, 7, 8],
 50 |   [3, 4, 8],
 51 |   [3, 5],
 52 |   [1, 4, 7],
 53 |   [2, 6]
 54 | ];
 55 | 
 56 | var pgroupcount = [0,0,0,0,0,0,0,0,0];  //unused first slot
 57 | var cgroupcount = [0,0,0,0,0,0,0,0,0];  //unused first slot
 58 | 
 59 | function init() {
 60 |   
 61 |   setUpBoard();
 62 |   statusref=document.getElementById("status");
 63 |   
 64 | }
 65 | 
 66 | 
 67 | function smartChoice() {
 68 |  //first check for immediate win
 69 |  var boardl = board.length;
 70 |  for (var i=0;i<boardl;i++) {
 71 |     var possible = board[i];
 72 |     for (var j=0;j<occupied[possible-1].length;j++) {
 73 |       if (cgroupcount[occupied[possible-1][j]]==2) {
 74 |          return (i);  
 75 |       }
 76 |     }
 77 |   }
 78 |   // not returned, now check if need to block
 79 |   for (var i=0;i<boardl;i++) {
 80 |     var blocker = board[i];
 81 |     for (var j=0;j<occupied[blocker-1].length;j++) {
 82 |       if (pgroupcount[occupied[blocker-1][j]]==2) {
 83 |         return(i);
 84 |       }
 85 |     }
 86 |   }
 87 | // try for 2 in a row
 88 |   //see if there is a possible in a group with one computer played
 89 |   //and 0 player presence
 90 |    for (var i=0;i<boardl;i++) {
 91 |     var possible = board[i];
 92 |     for (var j=0;j<occupied[possible-1].length;j++) {
 93 |       var whatgroup = occupied[possible-1][j];
 94 |       if ((cgroupcount[whatgroup]==1)&&(pgroupcount[whatgroup]==0 )){
 95 |          return (i);  
 96 |       }
 97 |     }
 98 |   }
 99 | 
100 | 
101 | 
102 |   // if 5 is available, return its position in board
103 |   for (var i = 0;i<boardl;i++) {
104 |     if (board[i]==5) {
105 |       return (i);
106 |     }
107 |   }
108 |   //if corner available, 8,2, 6 or 4, return its position in board
109 |   //use fact that these numbers are the even ones
110 |   
111 |    for (var i = 0;i<boardl;i++) {
112 |     if (0==board[i]%2) {
113 |       return (i);
114 |     }
115 |   }
116 | 
117 |   // return random move
118 |   var ch = Math.floor(Math.random(0,boardl));
119 |   return (ch);
120 | }
121 | function computerMove() {
122 |    if (board.length<1) {
123 |      
124 |       statusref.innerHTML="Cat wins!";
125 |       
126 |       return;
127 |     }
128 |    var which = smartChoice();
129 |    
130 |    var n = board[which];
131 |    
132 |    take(n);
133 |     numbers[n-1].style.top = "150px";
134 |     numbers[n-1].removeEventListener("click",addToPlayer);
135 |    computer.push(n);
136 |    
137 |    var holder = occupied[n-1];  //holder holds groups with n
138 |   for (var i=0;i<holder.length;i++) {
139 |     cgroupcount[holder[i]]++;
140 |     if (cgroupcount[holder[i]]==3) {
141 |      statusref.innerHTML ="Computer wins "+groups[holder[i]]; 
142 |     
143 |       game = false;  //may not be necessary.
144 |       return;
145 |       
146 |     }
147 |   }
148 |   if (board.length<1) {
149 |       statusref.innerHTML="Cat wins!";
150 |       
151 |     }
152 |   else {  //continue. Turn game back on
153 |       game = true;
154 |     }
155 |   
156 |   
157 | }
158 | 
159 | 
160 | function setUpBoard() {
161 |  
162 |   var dv;
163 |   var xpos;
164 |   //create and position pieces for board
165 |   for (var i=1; i<10; i++) {
166 |     dv = document.createElement("span");
167 |     dv.addEventListener("click",addToPlayer);
168 |     dv.innerHTML = i.toString();
169 |     xpos = startx + i*wedge;
170 |     dv.style.left=xpos.toString()+"px";
171 |     dv.style.top ="240px";
172 |     document.body.appendChild(dv);
173 |     dv.n = i;
174 |     numbers.push(dv);
175 |     
176 |   } 
177 | 
178 |   
179 | }
180 | 
181 | 
182 | 
183 | function take(n) {
184 |    //"takes" the number by removing from board 
185 |    var nAt = board.indexOf(n);
186 |   
187 |   
188 |    if (nAt>-1) {
189 |       board.splice(nAt,1);  //remove that element
190 | 
191 |    }
192 |  
193 | }
194 | 
195 | function addToPlayer(ev) {
196 |    
197 |   if (game) {
198 |   var nn = ev.target.n;
199 |   ev.target.removeEventListener("click",addToPlayer);
200 |   
201 |   player.push(nn);
202 |   numbers[nn-1].style.top = "350px";
203 |   //need to remove which from board
204 |   take(nn);
205 |   var holder = occupied[nn-1];  //holder holds groups with which
206 |   for (i=0;i<holder.length;i++) {
207 |     pgroupcount[holder[i]]++;
208 |     if (pgroupcount[holder[i]]==3) {
209 |       statusref.innerHTML="Player wins "+groups[holder[i]];
210 |      
211 |       game = false;
212 |       return ;
213 |     }
214 |   }
215 |   game = false;  //temporarily stop player moves
216 |   setTimeout(computerMove,1000); //invoke computermove after a pause
217 |   
218 |   }
219 |   else {
220 |     
221 |     statusref.innerHTML="Reload for new game.";
222 |   }
223 | }
224 | 
225 | 
226 | </script>
227 | <body onLoad="init();">
228 | <h1>Player against Computer</h1><br>
229 | 
230 | Player goes first: click on number. First to have a set of 3 adding to 15 wins. Reload for new game.
231 | <p>
232 | Computer
233 | <br><br><br>
234 | </p>
235 | <hr/>
236 | Board
237 | <br><br><br><br>
238 | <hr/>
239 | Player
240 | <br><br><br><br><br>
241 | <hr/>
242 | <div id="status">
243 | </div>
244 | 
245 | 
246 | 
247 | 
248 | </body>
249 | </html>


--------------------------------------------------------------------------------
/ch07/cleftlip.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch07/cleftlip.jpg


--------------------------------------------------------------------------------
/ch07/frog.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch07/frog.jpg


--------------------------------------------------------------------------------
/ch07/origamifish.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <title>Origami fish</title>
  5 | <style>
  6 | button {font-size:large; font-family:Georgia, "Times New Roman", Times, serif;}
  7 | #directions {font-family:"Comic Sans MS", cursive;}
  8 | video {display:none; }
  9 | </style>
 10 | <script>
 11 | var dotradius = 4;
 12 | var ctx;
 13 | var cwidth;
 14 | var cheight;
 15 | var ta;
 16 | var kamiw = 4;
 17 | var kamih = 4;
 18 | var i2p = 72;
 19 | var dashlen = 8;
 20 | var dgap = 2.0;
 21 | var ddashlen = 6.0;
 22 | var ddot = 2.0;
 23 | var dratio = dashlen/(dashlen+dgap);
 24 | var ddtotal = ddashlen+3*ddot;
 25 | var ddratio1 = ddashlen/ddtotal;
 26 | var ddratio2 = (ddashlen+ddot)/ddtotal;
 27 | var ddratio3 = (ddashlen+2*ddot)/ddtotal;
 28 | 
 29 | var kamix = 10;
 30 | var kamiy = 10;
 31 | var nextstep;
 32 | function dist(x1,y1,x2,y2) {
 33 | 	var x = x2-x1;
 34 | 	var y = y2-y1;
 35 | 	return Math.sqrt(x*x+y*y);	
 36 | }
 37 | function intersect(x1,y1,x2,y2,x3,y3,x4,y4) {
 38 | 	//only works on line segments that do intersection and are not 
 39 | 	//vertical
 40 | 	var m12 = (y2-y1)/(x2-x1);
 41 | 	var m34 = (y4-y3)/(x4-x3);
 42 | 	var m = m34/m12;
 43 | 	var x = (x1-y1/m12-m*x3+y3/m12)/(1-m);
 44 | 	var y = m12*(x-x1)+y1;
 45 | 	return ([x,y]);
 46 | }
 47 | 
 48 | function init() {
 49 | canvas1 = document.getElementById("canvas");
 50 | ctx = canvas1.getContext("2d");
 51 | cwidth = canvas1.width;
 52 | cheight = canvas1.height;
 53 | ta = document.getElementById("directions");
 54 | nextstep = 0;
 55 | ctx.fillStyle = "white";
 56 | ctx.lineWidth = origwidth;
 57 | origstyle = ctx.strokeStyle;
 58 | ctx.font = "15px Georgia, Times, serif";
 59 | donext();
 60 | }
 61 | 
 62 | function directions() {
 63 | 	ctx.fillStyle = "black";
 64 | 	ctx.font = "15px Georgia, Times, serif";
 65 | 	ctx.fillText("Make valley fold", 10,20);
 66 | 	valley(200,18,300,18,"orange");
 67 | 	ctx.fillText("Make mountain fold",10,50);
 68 | 	mountain(200,48,300,48,"orange");
 69 | 	ctx.fillText("unfolded fold line",10,100);
 70 | 	skinnyline(200,98,300,98);
 71 | 	ctx.fillText("When sense of fold matters:",10,150);
 72 | 	ctx.fillText("unfolded valley fold", 10,180);
 73 | 	valley(200,178,300,178);
 74 | 	ctx.fillText("unfolded mountain fold",10,210);
 75 | 	mountain(200,208,300,208);
 76 | 	ctx.fillStyle = "white";	
 77 | }
 78 | function donext() {
 79 | 	if (nextstep>=steps.length) {
 80 | 		nextstep=steps.length-1;
 81 | 	}
 82 | 	if (v) {
 83 | 	  v.pause();
 84 | 	  v.style.display = "none"; 
 85 | 	  v = undefined;
 86 | 	  canvas1.height = 480;  //restore height
 87 | 	} //erases last video played
 88 | 	ctx.clearRect(0,0,cwidth,cheight);
 89 | 	ctx.lineWidth = origwidth;
 90 | 	steps[nextstep][0]();
 91 | 	ta.innerHTML = steps[nextstep][1];
 92 | 	nextstep++;
 93 | }
 94 | 
 95 | function goback() {
 96 | 	nextstep = nextstep -2;
 97 | 	if (nextstep<0) {
 98 | 	     nextstep = 0;
 99 | 	}
100 | 	donext();
101 | }
102 | function shortdownarrow(x,y) {
103 | 	ctx.beginPath();
104 | 	ctx.moveTo(x,y-20);
105 | 	ctx.lineTo(x,y-7);
106 | 	ctx.moveTo(x-5,y-12);
107 | 	ctx.lineTo(x,y-7);
108 | 	ctx.moveTo(x+5,y-12);
109 | 	ctx.lineTo(x,y-7);
110 | 	ctx.closePath();
111 | 	ctx.stroke();
112 | 	
113 | }
114 | function proportion(x1,y1,x2,y2,p) {
115 | 	var xs = x2-x1;
116 | 	var ys = y2-y1;
117 | 	var x = x1+ p*xs;
118 | 	var y = y1 + p* ys;
119 | 	return ([x,y]);	
120 | }
121 | function skinnyline(x1,y1,x2,y2) {
122 | 	ctx.lineWidth = 1;
123 | 	ctx.beginPath();
124 | 	ctx.moveTo(x1,y1);
125 | 	ctx.lineTo(x2,y2);
126 | 	ctx.closePath();
127 | 	ctx.stroke();	
128 | 	ctx.lineWidth = origwidth;
129 | }
130 | var origstyle;
131 | var origwidth = 2;
132 | function valley(x1,y1,x2,y2,color) {
133 | 	var px=x2-x1;
134 | 	var py = y2-y1;
135 | 	var len = dist(x1,y1,x2,y2);
136 | 	var nd = Math.floor(len/(dashlen+dgap));
137 | 	var xs = px/nd;
138 | 	var ys = py/nd;
139 | 	if (color) ctx.strokeStyle = color;
140 | 	ctx.beginPath();
141 | 	for (var n=0;n<nd;n++) {
142 | 		ctx.moveTo(x1+n*xs,y1+n*ys);
143 | 		ctx.lineTo(x1+n*xs+dratio*xs,y1+n*ys+dratio*ys);
144 | 	}
145 | 	ctx.closePath();
146 | 	ctx.stroke();
147 | 	ctx.strokeStyle = origstyle;
148 | }
149 | function mountain(x1,y1,x2,y2,color) {
150 | 	var px=x2-x1;
151 | 	var py = y2-y1;
152 | 	var len = dist(x1,y1,x2,y2);
153 | 	var nd = Math.floor(len/ddtotal);
154 | 	var xs = px/nd;
155 | 	var ys = py/nd;
156 | 	if (color) ctx.strokeStyle = color;
157 | 	ctx.beginPath();
158 | 	for (var n=0;n<nd;n++) {
159 | 		ctx.moveTo(x1+n*xs,y1+n*ys);
160 | 		ctx.lineTo(x1+n*xs+ddratio1*xs,y1+n*ys+ddratio1*ys);
161 | 		ctx.moveTo(x1+n*xs+ddratio2*xs,y1+n*ys+ddratio2*ys);
162 | 		ctx.lineTo(x1+n*xs+ddratio3*xs,y1+n*ys+ddratio3*ys);
163 | 		
164 | 	}
165 | 	ctx.closePath();
166 | 	ctx.stroke();
167 | 	ctx.strokeStyle = origstyle;
168 | }
169 | function curvedarrow(x1,y1,x2,y2, px, py) {
170 | 	var arrowanglestart;
171 | 	var arrowanglefinish; 
172 | 	var d = dist(x1,y1,x2,y2);
173 | 	var rad=Math.sqrt(4.25*d*d);
174 | 	var ctrx;
175 | 	var ctry;
176 | 	var ex;
177 | 	var ey;
178 | 	var angdel = Math.atan2(d/2,2*d);
179 | 	//angdel is .24497
180 | 	var fromhorizontal;
181 | 	ctx.strokeStyle = "red";
182 | 	ctx.beginPath();
183 | 	if (y1==y2) {
184 | 			arrowanglestart = 1.5*Math.PI-angdel;
185 | 			arrowanglefinish = 1.5*Math.PI+angdel;
186 | 			 ctrx = .5*(x1+x2) +px;
187 | 			 ctry = y1+2*d +py;
188 | 			 if (x1<x2) {
189 | 			 ctx.arc(ctrx,ctry, rad,arrowanglestart,arrowanglefinish,false);
190 | 			 fromhorizontal=2*Math.PI- arrowanglefinish;
191 | 			 ex = ctrx+rad*Math.cos(fromhorizontal);
192 | 			 ey = ctry - rad*Math.sin(fromhorizontal);
193 | 			 ctx.lineTo(ex-8,ey+8);
194 | 			 ctx.moveTo(ex,ey);
195 | 			 ctx.lineTo(ex-8,ey-8);
196 | 			 }
197 | 			 else {
198 | 				ctx.arc(ctrx,ctry, rad,arrowanglefinish,arrowanglestart,true); 
199 | 				 fromhorizontal=2*Math.PI- arrowanglestart;
200 | 			 ex = ctrx+rad*Math.cos(fromhorizontal);
201 | 			 ey = ctry - rad*Math.sin(fromhorizontal);
202 | 			 ctx.lineTo(ex+8,ey+8);
203 | 			 ctx.moveTo(ex,ey);
204 | 			 ctx.lineTo(ex+8,ey-8);
205 | 			 }
206 | 			 ctx.stroke();
207 | 			
208 | 		}
209 | 	else if (x1==x2) {
210 | 		arrowanglestart = -angdel;
211 | 			arrowanglefinish = angdel;
212 | 		 	 ctrx = x1-2*d+px;
213 | 			 ctry = .5*(y1+y2) + py;
214 | 			 if (y1<y2) {
215 | 			 ctx.arc(ctrx,ctry, rad,arrowanglestart,arrowanglefinish,false);
216 | 			 fromhorizontal=- arrowanglefinish;
217 | 			 ex = ctrx+rad*Math.cos(fromhorizontal);
218 | 			 ey = ctry - rad*Math.sin(fromhorizontal);
219 | 			 ctx.lineTo(ex-8,ey-8);
220 | 			 ctx.moveTo(ex,ey);
221 | 			 ctx.lineTo(ex+8,ey-8);
222 | 			 }
223 | 			 else {
224 | 				ctx.arc(ctrx,ctry, rad,arrowanglefinish,arrowanglestart,true); 
225 | 				 fromhorizontal=- arrowanglestart;
226 | 			 ex = ctrx+rad*Math.cos(fromhorizontal);
227 | 			 ey = ctry - rad*Math.sin(fromhorizontal);
228 | 			 
229 | 			 ctx.lineTo(ex-8,ey+8);
230 | 			 ctx.moveTo(ex,ey);
231 | 			 ctx.lineTo(ex+8,ey+8);
232 | 			 }
233 | 			 ctx.stroke();
234 | 			}
235 | 	ctx.strokeStyle = "black";	
236 | }
237 | 
238 | //specific to fish
239 | var steps= [
240 | 	[directions,"Diagram conventions"],
241 |      [showkami,"Make quarter turn."],
242 | 	[diamond1,"Fold top point to bottom point."],
243 | 	[triangleM,"Divide line into thirds and make valley folds and unfold "],
244 | 	[thirds,"Fold in half to the left."],
245 | 	[rttriangle,"Fold down the right corner to the fold marking a third. "],
246 | 	[cornerdown,"Unfold everything."],
247 | 	[unfolded,"Prepare to sink middle square by reversing folds as indicated ..."],
248 | 	[changedfolds,"note middle square sides all valley folds, some other folds changed. Flip over."],
249 | 	[precollapse,"Push sides to sink middle square."],
250 | 	[playsink,"Sink square, collapse model."],
251 | 	[littleguy,"Now fold back the right flap to center valley fold. You are bisecting the indicated angle."],
252 | 	[oneflapup,"Do the same thing to the flap on the left"],
253 | 	[bothflapsup,"Make fins by wrapping top of right flap around 1 layer and left around back layer"],
254 | 	[finsp,"Now make lips...make preparation folds"],
255 | 	[preparelips,"and turn lips inside out. Turn corners in..."],
256 | 	[showcleftlip,"...making cleft lips."],
257 | 	[lips,"Pick up fish and look down throat..."],
258 | 	[showthroat1,"Stick your finger in its mouth and move the inner folded material to one side"],
259 | 	[showthroat2,"Throat fixed."],
260 | 	[rotatefish,"Squeeze & release top and bottom to make fish's mouth close and open"],
261 | 	[playtalk,"Talking fish."]
262 | 	];
263 | 
264 | var diag = kamiw* Math.sqrt(2.0)*i2p;
265 | var ax = 10;
266 | var ay = 220;
267 | var bx = ax+ .5*diag;
268 | var by = ay - .5*diag;
269 | var cx = ax + diag;
270 | var cy = ay;
271 | var dx = bx;
272 | var dy = ay + .5*diag;
273 | var e = proportion(ax,ay,cx,cy,.333333);
274 | var ex = e[0];
275 | var ey = e[1];
276 | var f = proportion(ax,ay,cx,cy,.666666);
277 | var fx = f[0];
278 | var fy = f[1];
279 | var g = proportion(ax,ay,dx,dy,.666666);
280 | var gx = g[0];
281 | var gy = g[1];
282 | var h = proportion(cx,cy,dx,dy,.666666);
283 | var hx = h[0];
284 | var hy = h[1];
285 | var jx = ax + .5*diag;
286 | var jy = ay;
287 | var diag6 = diag/6;
288 | var gry = ay-(gy-ay);
289 | var kx = ax+diag/3;
290 | var ky = ay;
291 | var lx = kx + diag/3;
292 | var ly = ay;
293 | var mx = ax + diag/6;
294 | var innersq = Math.sqrt(2)*diag/6;
295 | var my = ay + innersq*Math.sin(Math.PI/4);
296 | var nx = ax+diag/3+diag/6;
297 | var ny = my;
298 | var px = mx;
299 | var py = dy;
300 | var rx = nx;
301 | var ry = py;
302 | var qx = kx;
303 | var qy = hy;
304 | var dkq = qy-ky;
305 | var sx = kx + (dkq/Math.cos(Math.PI/8))*Math.sin(Math.PI/8);
306 | var sy = ay;
307 | var tx = kx;
308 | var ty = qy-dist(qx,qy,lx,ly);
309 | var xxa = intersect(sx,sy,qx,qy,kx,ky,nx,ny);
310 | var xxx = xxa[0];
311 | var xxy = xxa[1];
312 | var xxlx = kx-(xxx-kx);
313 | var xxly = xxy;
314 | var slx = kx- (sx-kx);
315 | var sly = sy;
316 | var tlx = tx-5;
317 | var tly = ty;
318 | var dkt=ky-ty;
319 | var finlx = kx-dkt;
320 | var finly = ky;
321 | var finrx = kx+dkt;
322 | var finry = ky;
323 | var w = Math.cos(Math.PI/4)*dkt;
324 | var wx = kx-.5*dkt;
325 | var wy = w*Math.sin(Math.PI/4)+ky;
326 | var zx = kx+.5*dkt;
327 | var zy = wy;
328 | var plipx = px;
329 | var plipy = py-10;
330 | var rlipx = rx;
331 | var rlipy = ry-10;
332 | var plipex = px - 10;
333 | var plipey = plipy;
334 | var rlipex = rx + 10;
335 | var rlipey = rlipy;
336 | var rclipcleft1 = proportion(rlipex,rlipey,rlipx,rlipy,.5);
337 | var pclipcleft1 = proportion(plipex,plipey,plipx,plipy,.5);
338 | var rclipcleft2 = proportion(rlipex,rlipey,qx,qy,.1);
339 | var pclipcleft2 = proportion(plipex,plipey,qx,qy,.1);
340 | var rcx1 = rclipcleft1[0];
341 | var rcy1 = rclipcleft1[1];
342 | var rcx2 = rclipcleft2[0];
343 | var rcy2 = rclipcleft2[1];
344 | var pcx1 = pclipcleft1[0];
345 | var pcy1 = pclipcleft1[1];
346 | var pcx2 = pclipcleft2[0];
347 | var pcy2 = pclipcleft2[1];
348 | var v;
349 | var throat1 = new Image();
350 | throat1.src = "throat1.jpg";
351 | var throat2 = new Image();
352 | throat2.src = "throat2.jpg"
353 | var cleft = new Image();
354 | cleft.src="cleftlip.jpg";
355 | function showcleftlip() {
356 | 	ctx.drawImage(cleft,40,40);	
357 | }
358 | function showthroat1() {
359 |   ctx.drawImage(throat1,40,40);
360 | }
361 | function showthroat2() {
362 |   ctx.drawImage(throat2,40,40);
363 | }
364 | function playtalk() {
365 | 		v = document.getElementById("talk");
366 | 		v.style.display="block";
367 | 		v.currentTime = 0;
368 | 		v.play();
369 | 		
370 | 		canvas1.height = 126;  //adjusts for height of video
371 | }
372 | 
373 | function playsink() {
374 | 	v = document.getElementById("sink");		
375 | 	v.style.display="block";
376 | 	v.currentTime = 0;
377 | 	v.play();
378 | 	canvas1.height = 178;  //adjusts for height of video
379 | }
380 | 
381 | function lips() {
382 | 	ctx.fillStyle = "teal";
383 | 	ctx.beginPath();
384 | 	ctx.moveTo(finlx,finly);
385 | 	ctx.lineTo(kx,ky);
386 | 	ctx.lineTo(wx,wy);
387 | 	ctx.lineTo(finlx,finly);
388 | 	ctx.moveTo(finrx,finry);
389 | 	ctx.lineTo(kx,ky);
390 | 	ctx.lineTo(zx,zy);
391 | 	ctx.lineTo(finrx,finry);
392 | 	ctx.moveTo(mx,my);
393 | 	ctx.lineTo(kx,ky);
394 | 	ctx.lineTo(xxx,xxy);
395 | 	ctx.lineTo(qx,qy);
396 | 	ctx.lineTo(plipx,plipy);
397 | 	ctx.lineTo(mx,my);
398 | 	ctx.moveTo(xxx,xxy);
399 | 	ctx.lineTo(nx,ny);
400 | 	ctx.lineTo(rlipx,rlipy);
401 | 	ctx.lineTo(qx,qy);
402 | 	ctx.lineTo(xxx,xxy);	
403 | 	ctx.closePath();
404 | 	ctx.fill();
405 | 	ctx.stroke();
406 | 	ctx.fillStyle="white";
407 | 	ctx.beginPath();
408 | 	ctx.moveTo(qx,qy);
409 | 	ctx.lineTo(pcx2,pcy2);
410 | 	ctx.lineTo(pcx1,pcy1);
411 | 	ctx.lineTo(plipx,plipy);
412 | 	ctx.lineTo(qx,qy);
413 | 	ctx.lineTo(rcx2,rcy2);
414 | 	ctx.lineTo(rcx1,rcy1);
415 | 	ctx.lineTo(rlipx,rlipy);
416 | 	ctx.lineTo(qx,qy);
417 | 	ctx.closePath();
418 | 	ctx.fill();
419 | 	ctx.stroke();
420 | 	skinnyline(kx,ky,qx,qy);
421 | 	ctx.fillStyle="teal";
422 | }
423 | function rotatefish() {
424 | 	ctx.save();
425 | 	ctx.translate(kx,my);
426 | 	ctx.rotate(-Math.PI/2);
427 | 	ctx.translate(-kx,-my);
428 | 	lips();
429 | 	ctx.restore();
430 | }
431 | 
432 | function preparelips() {
433 | 	ctx.fillStyle="teal";
434 | 	fins();
435 | 	valley(qx,qy,rlipx,rlipy);
436 | 	valley(qx,qy,plipx,plipy);	
437 | }
438 | function finsp() {
439 | 	ctx.fillStyle="teal";
440 | 	fins();
441 | 	valley(qx,qy,rlipx,rlipy,"orange");
442 | 	valley(qx,qy,plipx,plipy,"orange");	
443 | }
444 | 
445 | function fins() {
446 | 	ctx.beginPath();
447 | 	ctx.moveTo(finlx,finly);
448 | 	ctx.lineTo(kx,ky);
449 | 	ctx.lineTo(wx,wy);
450 | 	ctx.lineTo(finlx,finly);
451 | 	ctx.moveTo(finrx,finry);
452 | 	ctx.lineTo(kx,ky);
453 | 	ctx.lineTo(zx,zy);
454 | 	ctx.lineTo(finrx,finry);
455 | 	ctx.moveTo(mx,my);
456 | 	ctx.lineTo(kx,ky);
457 | 	ctx.lineTo(xxx,xxy);
458 | 	ctx.lineTo(qx,qy);
459 | 	ctx.lineTo(px,py);
460 | 	ctx.lineTo(mx,my);
461 | 	ctx.moveTo(xxx,xxy);
462 | 	ctx.lineTo(nx,ny);
463 | 	ctx.lineTo(rx,ry);
464 | 	ctx.lineTo(qx,qy);
465 | 	ctx.lineTo(xxx,xxy);	
466 | 	ctx.closePath();
467 | 	ctx.fill();
468 | 	ctx.stroke();
469 | 	skinnyline(kx,ky,qx,qy);
470 | 	//ctx.fillText("finl", finlx,finly);
471 | 	//ctx.fillText("w",wx,wy);
472 | 	//ctx.fillText("zee",zx,zy);
473 | }
474 | function bothflapsup () {
475 | 	ctx.fillStyle="teal";
476 | 	ctx.beginPath();
477 | 	ctx.moveTo(slx,sly);
478 | 	ctx.lineTo(tlx,tly);
479 | 	ctx.lineTo(kx,ky);
480 | 	ctx.lineTo(xxlx,xxly);
481 | 	ctx.lineTo(slx,sly);
482 | 	ctx.moveTo(mx,my);
483 | 	ctx.lineTo(kx,ky);
484 | 	ctx.lineTo(sx,sy);
485 | 	ctx.lineTo(qx,qy);
486 | 	ctx.lineTo(px,py);
487 | 	ctx.lineTo(mx,my);
488 | 	ctx.moveTo(tx,ty);
489 | 	ctx.lineTo(sx,sy);
490 | 	ctx.lineTo(kx,ky);
491 | 	ctx.lineTo(tx,ty);
492 | 	ctx.moveTo(xxx,xxy);
493 | 	ctx.lineTo(nx,ny);
494 | 	ctx.lineTo(rx,ry);
495 | 	ctx.lineTo(qx,qy);
496 | 	ctx.lineTo(xxx,xxy);
497 | 	ctx.closePath();
498 | 	ctx.fill();
499 | 	ctx.stroke();
500 | 	skinnyline(kx,ky,qx,qy);
501 | 	ctx.fillText("sl",slx,sly);
502 | 	ctx.fillText("tl",tlx,tly);
503 | }
504 | function oneflapup() {
505 | 	ctx.fillStyle="teal";
506 | 	 ctx.beginPath();
507 |    ctx.moveTo(ax,ay);
508 |    ctx.lineTo(kx,ky);
509 |    ctx.lineTo(mx,my);
510 |    ctx.lineTo(ax,ay);
511 |    ctx.moveTo(kx,ky);
512 |    ctx.lineTo(sx,sy);
513 |    ctx.lineTo(qx,qy);
514 |    ctx.lineTo(px,py);
515 |    ctx.lineTo(mx,my);
516 |    ctx.lineTo(kx,ky);
517 |    ctx.moveTo(xxx,xxy);
518 |    ctx.lineTo(nx,ny);
519 |    ctx.lineTo(rx,ry);
520 |    ctx.lineTo(qx,qy);
521 |    ctx.lineTo(xxx,xxy);
522 |    ctx.moveTo(kx,ky);
523 |    ctx.lineTo(tx,ty);
524 |    ctx.lineTo(sx,sy);
525 |    ctx.lineTo(kx,ky);
526 |    ctx.closePath();
527 |    ctx.fill();
528 |    ctx.stroke();
529 |    skinnyline(qx,qy,kx,ky);
530 | }
531 | function littleguy() {
532 |    ctx.fillStyle="teal";
533 |    ctx.beginPath();
534 |    ctx.moveTo(ax,ay);
535 |    ctx.lineTo(kx,ky);
536 |    ctx.lineTo(mx,my);
537 |    ctx.lineTo(ax,ay);
538 |    ctx.moveTo(kx,ky);
539 |    ctx.lineTo(lx,ly);
540 |    ctx.lineTo(px,py);
541 |    ctx.lineTo(mx,my);
542 |    ctx.lineTo(kx,ky);
543 |    ctx.moveTo(nx,ny);
544 |    ctx.lineTo(rx,ry);
545 |    ctx.lineTo(qx,qy);
546 |    ctx.lineTo(nx,ny);
547 |    ctx.closePath();
548 |    ctx.fill();
549 |    ctx.stroke();
550 |    skinnyline(qx,qy,kx,ky);
551 |    ctx.beginPath();
552 |    ctx.arc(qx,qy,30,-.5*Math.PI,-.25*Math.PI,false);
553 |    ctx.stroke();
554 |    mountain(qx,qy,sx,sy,"orange")
555 | }
556 | 
557 | function unfolded() {
558 | 	diamond();
559 | 	valley(ax,ay,cx,cy);
560 | 	valley(ex,ey,gx,gy);
561 | 	valley(fx,fy,hx,hy);
562 | 	mountain(ex,ey,gx,gry);
563 | 	mountain(fx,fy,hx,gry);
564 | 	valley(jx,jy,dx,dy);
565 | 	mountain(jx,jy,bx,by);
566 | 	valley(ex,ey,jx,jy+diag6);
567 | 	valley(jx,jy-diag6,fx,fy);
568 | 	mountain(ex,ey,jx,jy-diag6);
569 | 	mountain(jx,jy+diag6,fx,fy);	
570 | }
571 | function precollapse() {
572 | 	diamondc();
573 | 	mountain(ax,ay,cx,cy);
574 | 	valley(ex,ey,gx,gy);
575 | 	valley(fx,fy,hx,hy);
576 | 	valley(ex,ey,gx,gry);
577 | 	valley(fx,fy,hx,gry);
578 | 	valley(jx,jy-diag6,jx,jy+diag6);
579 | 	
580 | 	mountain(jx,jy-diag6,bx,by);
581 | 	mountain(jx,jy+diag6,dx,dy);
582 | 	mountain(ex,ey,jx,jy+diag6);
583 | 	mountain(jx,jy-diag6,fx,fy);
584 | 	mountain(ex,ey,jx,jy-diag6);
585 | 	mountain(jx,jy+diag6,fx,fy);	
586 | }
587 | function changedfolds() {
588 | 	diamond();
589 | 	valley(ax,ay,cx,cy);
590 | 	mountain(ex,ey,gx,gy);
591 | 	mountain(fx,fy,hx,hy);
592 | 	mountain(ex,ey,gx,gry);
593 | 	mountain(fx,fy,hx,gry);
594 | 	mountain(jx,jy-diag6,jx,jy+diag6);
595 | 	valley(jx,jy-diag6,bx,by);
596 | 	valley(jx,jy+diag6,dx,dy);
597 | 	valley(ex,ey,jx,jy+diag6);
598 | 	valley(jx,jy-diag6,fx,fy);
599 | 	valley(ex,ey,jx,jy-diag6);
600 | 	valley(jx,jy+diag6,fx,fy);	
601 | }
602 | function triangleM() {
603 | 	triangle();
604 | 	shortdownarrow(ex,ey);
605 | 	shortdownarrow(fx,fy);
606 | 	valley(ex,ey,gx,gy,"orange");
607 | 	valley(fx,fy,hx,hy,"orange");
608 | }
609 | 
610 | function thirds() {
611 | 	triangle();
612 | 	skinnyline(ex,ey,gx,gy);
613 | 	skinnyline(fx,fy,hx,hy);
614 | 	curvedarrow(cx,cy,ax,ay,0,-20);
615 | 	valley(jx,jy,dx,dy,"orange");
616 | 	
617 | }
618 | function cornerdown() {
619 | 	rttriangle();
620 | 	ctx.clearRect(ex,ey-3, diag6+5,diag6);  //erase upper corner
621 | 	ctx.beginPath();
622 | 	ctx.moveTo(ex,ey);
623 | 	ctx.lineTo(ex+diag6,ey+diag6);
624 | 	ctx.lineTo(ex,ey+diag6);
625 | 	ctx.lineTo(ex,ey);
626 | 	ctx.closePath();
627 | 	ctx.fill();
628 | 	ctx.stroke();
629 | }
630 | 
631 | 
632 | function showkami() {
633 | 	ctx.strokeRect(kamix,kamiy,kamiw*i2p,kamih*i2p);
634 | 	}
635 | function diamond1() {
636 | 	diamond();
637 | 	valley(ax,ay,cx,cy,"orange");
638 | 	curvedarrow(bx,by,dx,dy,10,0);
639 | 	
640 | }
641 | function diamondc() {
642 | 	ctx.beginPath();
643 | 	ctx.moveTo(ax,ay);
644 | 	ctx.lineTo(bx,by);
645 | 	ctx.lineTo(cx,cy);
646 | 	ctx.lineTo(dx,dy);
647 | 	ctx.lineTo(ax,ay)
648 | 	ctx.closePath();
649 | 	ctx.fillStyle="teal";
650 | 	ctx.fill();
651 | 	ctx.stroke();
652 | 	
653 | }
654 | 
655 | function diamond() {
656 | 	ctx.beginPath();
657 | 	ctx.moveTo(ax,ay);
658 | 	ctx.lineTo(bx,by);
659 | 	ctx.lineTo(cx,cy);
660 | 	ctx.lineTo(dx,dy);
661 | 	ctx.lineTo(ax,ay)
662 | 	ctx.closePath();
663 | 	ctx.stroke();
664 | }
665 | 
666 | function triangle() {
667 |   ctx.fillStyle="teal";
668 |   ctx.beginPath();
669 |   ctx.moveTo(ax,ay);
670 |   ctx.lineTo(cx,cy);
671 |   ctx.lineTo(dx,dy);
672 |   ctx.lineTo(ax,ay);
673 |   ctx.closePath();
674 |   ctx.fill();
675 |   ctx.stroke();
676 | }
677 | function rttriangle() {
678 | 	ctx.fillStyle="teal";
679 |   ctx.beginPath();
680 |   ctx.moveTo(ax,ay);
681 |   ctx.lineTo(jx,jy);
682 |   ctx.lineTo(dx,dy);
683 |   ctx.lineTo(ax,ay);
684 |   ctx.closePath();
685 |   ctx.fill();
686 |   ctx.stroke();
687 |   valley(ex,ey,ex+diag6,ey+diag6,"orange");
688 |   skinnyline(ex,ey,gx,gy);
689 | }
690 | </script>
691 | </head>
692 | <body onLoad="init();">
693 | <video id="sink" loop="loop" preload="auto" controls="controls" width="400">
694 | <source src="sink.mp4video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
695 | <source src="sink.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
696 | <source src="sink.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'>
697 | Your browser does not accept the video tag.
698 | </video>
699 | <video id="talk" loop="loop" preload="auto" controls="controls">
700 | <source src="talk.mp4video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
701 | <source src="talk.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
702 | <source src="talk.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'>
703 | Your browser does not accept the video tag.
704 | </video>
705 | 
706 | <canvas id="canvas" width="900" height="480">
707 | Your browser does not recognize the canvas element 
708 | </canvas>
709 | <br/>
710 | <div id="directions"> Press buttons to advance or go back </div>
711 | <hr/>
712 | <button onClick="goback();" style="color: #F00">Go back </button> 
713 | <button onClick="donext();" style="color: #03F">Next step </button>
714 | </body>
715 | </html>
716 | 


--------------------------------------------------------------------------------
/ch07/origamifrog.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <title>Origami frog</title>
  5 | <style>
  6 | button {font-size:large; font-family:Georgia, "Times New Roman", Times, serif;}
  7 | #directions {font-family:"Comic Sans MS", cursive;}
  8 | </style>
  9 | <script>
 10 | var ctx;
 11 | var ta;
 12 | var buscardw = 2.0;
 13 | var buscardh = 3.5;
 14 | var i2p = 72;
 15 | var dashlen = 8;
 16 | var dgap = 2.0;
 17 | var ddashlen = 6.0;
 18 | var ddot = 2.0;
 19 | var dratio = dashlen/(dashlen+dgap);
 20 | var ddtotal = ddashlen+3*ddot;
 21 | var ddratio1 = ddashlen/ddtotal;
 22 | var ddratio2 = (ddashlen+ddot)/ddtotal;
 23 | var ddratio3 = (ddashlen+2*ddot)/ddtotal;
 24 | var busx = 10;
 25 | var busy = 10;
 26 | var nextstep;
 27 | function dist(x1,y1,x2,y2) {
 28 | 	var x = x2-x1;
 29 | 	var y = y2-y1;
 30 | 	return Math.sqrt(x*x+y*y);	
 31 | }
 32 | //specific to frog
 33 | var steps= [
 34 | 	[directions,"Diagram conventions"],
 35 |     [makebuscard,"Start with a business card..."],
 36 | 	[adiagonal1p,"...make a diagonal fold."],
 37 | 	[diagonal1,"Unfold last fold."],
 38 | 	[adiagonal1," you see one valley fold."],
 39 | 	[adiagonal2p,"Now make the opposite diagonal"],
 40 | 	[diagonal2,"Unfold last fold."],
 41 | 	[adiagonal2, "Turn over."],
 42 | 	[turnedover,"You see two mountain folds."],
 43 | 	[unfoldedp,"Bring top to ends of x to make valley at waist of X."],
 44 | 	[topdown,"Unfold last fold."],
 45 | 	[unfolded,"Press sides in to collapse into arrow..."],
 46 | 	[collapsing,"keep pressing."],
 47 | 	[arrow,"Turn over."],
 48 | 	[arrowunder,"Now to make the front legs"],
 49 | 	[prerightleg,"Turn up right flap to form leg ( this is to taste)."],
 50 | 	[preleftleg,"Turn up left flap to match."],
 51 | 	[makeleftleg,"Both front legs made."],
 52 | 	[prethinned,"Fold in sides to make frog body thinner (to taste)."],
 53 | 	[thinned,"Two more folds to go. These are soft folds."],
 54 | 	[thinned1,"Fold bottom up to top, soft crease."],
 55 | 	[foldedup,"Folded up. One more fold."],
 56 | 	[foldback,"Fold bottom back down to fold you just made, soft crease."],
 57 | 	[doneupsidedown,"Turn over ..."],
 58 | 	[showfrogpicture,"and stroke back to make frog jump!"]
 59 | 	];
 60 | var ax = busx;
 61 | var ay = busy;
 62 | var bx = busx + buscardw*i2p;
 63 | var by = busy;
 64 | var cx = bx;
 65 | var cy = busy + buscardw*i2p;
 66 | var dx = bx;
 67 | var dy = busy + buscardh*i2p;
 68 | var ex = ax;
 69 | var ey = dy;
 70 | var fx = ax;
 71 | var fy = cy;
 72 | var hx = ax;
 73 | var hy = ay + buscardw*i2p*.5;
 74 | var ix = ax + buscardw*i2p;
 75 | var iy = hy;
 76 | 
 77 | var ease = .25 * (hy-ay);
 78 | var aex = ax;
 79 | var aey = ay+ease;
 80 | var bex = bx;
 81 | var bey = ay + ease;
 82 | var hex = hx + ease;
 83 | var hey = hy + ease;
 84 | var iex = ix - ease;
 85 | var iey = iy + ease;
 86 | var midx = ax + buscardw*i2p*.5;
 87 | var midy = ay + buscardw*i2p*.5;
 88 | var gx = midx;
 89 | var gy = fy;
 90 | var rightleg = proportion(cx,cy,midx,midy,.33);
 91 | var leftleg = proportion(fx,fy,midx,midy,.33);
 92 | var rlx = rightleg[0];
 93 | var rly = rightleg[1];
 94 | var llx = leftleg[0];
 95 | var lly = leftleg[1];
 96 | var jy = midy + .5* (ey-midy);
 97 | var frog = new Image();
 98 | frog.src="frog.jpg";
 99 | 
100 | function proportion(x1,y1,x2,y2,p) {
101 | 	var xs = x2-x1;
102 | 	var ys = y2-y1;
103 | 	var x = x1+ p*xs;
104 | 	var y = y1 + p* ys;
105 | 	return ([x,y]);	
106 | }
107 | function prerightleg() {
108 | 	arrowunder();
109 | 	valley(gx,gy,rlx,rly,"green");
110 | }
111 | function makerightleg() {  //right leg from underneath
112 | 	arrowunder();
113 | 	ctx.beginPath();
114 | 	ctx.moveTo(gx,gy);
115 | 	ctx.lineTo(rlx,rly);
116 | 	var legpoint = uselawofsines(gx,gy,rlx,rly,cx,cy,1);
117 | 	ctx.lineTo(legpoint[0],legpoint[1]);
118 | 	ctx.lineTo(midx,fy); 
119 | 	ctx.closePath();
120 | 	
121 | 	ctx.fill();
122 | 	ctx.stroke();
123 | 	
124 | }
125 | function preleftleg() {
126 | 	makerightleg();
127 | 	valley(gx,gy,llx,lly,"green");
128 | }
129 | function makeleftleg() {
130 | 	makerightleg();
131 | 	ctx.beginPath();
132 | 	ctx.moveTo(gx,gy);
133 | 	ctx.lineTo(llx,lly);
134 | 	var legpoint = uselawofsines(gx,gy,llx,lly,fx,fy,-1);
135 | 	
136 | 	ctx.lineTo(legpoint[0],legpoint[1]);
137 | 	ctx.lineTo(gx,gy); 
138 | 	ctx.closePath();
139 | 	ctx.fill();
140 | 	ctx.stroke();
141 | }
142 | function uselawofsines(gx,gy, ux,uy,ox,oy,dir) {
143 | 	var d = dist(gx,gy,ox,oy);
144 | 	var sinea = (Math.sin(Math.PI/4)/dist(gx,gy,ux,uy))*dist(ux,uy,ox,oy);
145 | 	var angle = 2*Math.asin(sinea);
146 | 	var nx = gx+ dir*d*Math.cos(angle);
147 | 	var ny = gy - d*Math.sin(angle);
148 | 	return ([nx,ny]);	
149 | }
150 | function prethinned() {
151 | 	makeleftleg();
152 | 	valley(llx,lly,llx,ey,"green");
153 | 	valley(rlx,rly,rlx,dy,"green");
154 | }
155 | function thinned() {
156 | 	makeleftleg() 
157 | 	ctx.clearRect(ax-ease,lly,llx-(ax-ease),ey-ay);	
158 | 	ctx.clearRect(rlx,rly,bx+ease-rlx,dy-by);
159 | 	ctx.beginPath();
160 | 	ctx.moveTo(llx,lly);
161 | 	ctx.lineTo(llx+.5*(gx-llx),gy);
162 | 	ctx.lineTo(llx+.5*(gx-llx),ey);
163 | 	ctx.lineTo(llx,ey);
164 | 	ctx.lineTo(llx,lly);	
165 | 	ctx.moveTo(rlx,rly);
166 | 	ctx.lineTo(rlx-.5*(rlx-gx),gy);
167 | 	ctx.lineTo(rlx-.5*(rlx-gx),ey);
168 | 	ctx.lineTo(rlx,dy);
169 | 	ctx.lineTo(rlx,rly);
170 | 	ctx.fill();	
171 | 	ctx.stroke();	
172 | }
173 | function doneupsidedown() {
174 | 	thinned();
175 | 	ctx.clearRect(llx-ease,lly,2*ease+ rlx-llx, ease +dy-lly);
176 | 	
177 | 	ctx.beginPath();
178 | 	ctx.moveTo(llx,lly);
179 | 	ctx.lineTo(rlx,rly);
180 | 	ctx.lineTo(rlx,jy);
181 | 	ctx.lineTo(llx,jy);
182 | 	ctx.lineTo(llx,lly);
183 | 	ctx.closePath();
184 | 	ctx.fill();
185 | 	ctx.stroke();
186 | 	ctx.beginPath();
187 | 	ctx.moveTo(llx+.5*(gx-llx),lly);
188 | 	ctx.lineTo(llx+.5*(gx-llx),jy);
189 | 	ctx.moveTo(rlx-.5*(rlx-gx),rly);
190 | 	ctx.lineTo(rlx-.5*(rlx-gx),jy);
191 | 	ctx.closePath();
192 | 	ctx.stroke();
193 | 	
194 | }
195 | function foldback() {
196 | 	foldedup();
197 | 	valley(llx,midy+.5*(jy-midy),rlx,midy+.5*(jy-midy),"green");
198 | 	
199 | }
200 | function thinned1() {
201 | 	thinned();
202 | 	valley(llx,jy,rlx,jy,"green");
203 | 	
204 | }
205 | function foldedup() {
206 | 	ctx.beginPath();
207 | 	ctx.moveTo(llx,midy);
208 | 	ctx.lineTo(rlx,midy);
209 | 	ctx.lineTo(rlx,jy);
210 | 	ctx.lineTo(llx,jy);
211 | 	ctx.lineTo(llx,midy);
212 | 	ctx.closePath();
213 | 	ctx.fill();
214 | 	ctx.stroke();
215 | }
216 | function showfrogpicture() {
217 |   ctx.drawImage(frog,40,40);
218 | 
219 | 
220 | }
221 | function makebuscard() {
222 | ctx.strokeRect(busx,busy,buscardw*i2p,buscardh*i2p);	
223 | }
224 | function diagonal1 () {
225 | 	ctx.beginPath();
226 | 	ctx.moveTo(bx,by);
227 | 	ctx.lineTo(cx,cy);
228 | 	ctx.lineTo(dx,dy);
229 | 	ctx.lineTo(ex,ey);
230 | 	ctx.lineTo(fx,fy);
231 | 	ctx.lineTo(bx,by);
232 | 	ctx.moveTo(fx,fy);
233 | 	ctx.lineTo(cx,cy);
234 | 	ctx.closePath();
235 | 	ctx.stroke();	
236 | }
237 | function diagonal2 () {
238 | 	ctx.beginPath();
239 | 	ctx.moveTo(ax,ay);
240 | 	ctx.lineTo(cx,cy);
241 | 	ctx.lineTo(dx,dy);
242 | 	ctx.lineTo(ex,ey);
243 | 	ctx.lineTo(fx,fy);
244 | 	ctx.lineTo(ax,ay);
245 | 	ctx.moveTo(fx,fy);
246 | 	ctx.lineTo(cx,cy);
247 | 	ctx.closePath();
248 | 	ctx.stroke();	
249 | }
250 | function adiagonal1() {
251 | 	makebuscard();
252 | 	skinnyline(bx,by,fx,fy);
253 | }
254 | function adiagonal2() {
255 | 	adiagonal1();
256 | 	skinnyline(ax,ay,cx,cy);
257 | }
258 | function adiagonal1p() {
259 | 	makebuscard();
260 | 	valley(bx,by,fx,fy,"green");
261 | }
262 | function adiagonal2p() {
263 | 	adiagonal1();
264 | 	valley(ax,ay,cx,cy,"green");
265 | }
266 | function turnedover () {
267 | 	makebuscard();
268 | 	mountain(ax,ay,cx,cy);
269 | 	mountain(bx,by, fx, fy);
270 | }
271 | function topdown () {
272 | 	ctx.beginPath();
273 | 	ctx.moveTo(hx,hy);
274 | 	ctx.lineTo(ix,iy);
275 | 	ctx.lineTo(dx,dy);
276 | 	ctx.lineTo(ex,ey);
277 | 	ctx.lineTo(hx,hy);
278 | 	ctx.moveTo(fx,fy);
279 | 	ctx.lineTo(cx,cy);
280 | 	ctx.closePath();
281 | 	ctx.stroke();
282 | }
283 | function unfolded() {
284 | 	turnedover();
285 | 	valley(hx,hy,ix,iy);
286 | 	
287 | }
288 | function unfoldedp() {
289 | 	turnedover();
290 | 	valley(hx,hy,ix,iy,"green");
291 | 	
292 | }
293 | function collapsing () {
294 | 	ctx.beginPath();
295 | 	ctx.moveTo(aex,aey);
296 | 	ctx.lineTo(bex,bey);
297 | 	ctx.lineTo(iex,iey);
298 | 	ctx.lineTo(cx,cy);
299 | 	ctx.lineTo(dx,dy);
300 | 	ctx.lineTo(ex,ey);
301 | 	ctx.lineTo(fx,fy);
302 | 	ctx.lineTo(hex,hey);
303 | 	ctx.lineTo(aex,aey);
304 | 	ctx.closePath();
305 | 	ctx.stroke();
306 | 	mountain(aex,aey,midx,midy);
307 | 	mountain(midx,midy,bex,bey);
308 | 	mountain(midx,midy, fx,fy);
309 | 	mountain(midx,midy, cx,cy);
310 | 	valley(hex,hey,midx,midy);
311 | 	valley(midx,midy,iex,iey);	
312 | }
313 | function arrow() {
314 | 	ctx.beginPath();
315 | 	ctx.moveTo(midx,midy);
316 | 	ctx.lineTo(cx,cy);
317 | 	ctx.lineTo(dx,dy);
318 | 	ctx.lineTo(ex,ey);
319 | 	ctx.lineTo(fx,fy);
320 | 	ctx.lineTo(midx,midy);
321 | 	ctx.closePath();
322 | 	ctx.stroke();
323 | }
324 | function arrowunder() {
325 | 	ctx.beginPath();
326 | 	ctx.moveTo(midx,midy);
327 | 	ctx.lineTo(cx,cy);
328 | 	ctx.lineTo(dx,dy);
329 | 	ctx.lineTo(ex,ey);
330 | 	ctx.lineTo(fx,fy);
331 | 	ctx.lineTo(midx,midy);
332 | 	ctx.moveTo(fx,fy);
333 | 	ctx.lineTo(cx,cy);
334 | 	ctx.closePath();
335 | 	ctx.stroke();
336 | }
337 | 
338 | // end specific to frog
339 | 
340 | var origwidth = 2;
341 | function init() {
342 | ctx = document.getElementById("canvas").getContext("2d");
343 | ta = document.getElementById("directions");
344 | ctx.font = "15px Georgia, Times, serif";
345 | 
346 | ctx.fillStyle = "white";
347 | origstyle = ctx.strokeStyle;
348 | ctx.lineWidth = origwidth;
349 | nextstep = 0;
350 | donext();
351 | }
352 | function directions() {
353 | 	ctx.fillStyle = "black";
354 | 	ctx.fillText("Make valley fold", 10,20);
355 | 	valley(200,18,300,18,"green");
356 | 	ctx.fillText("Make mountain fold",10,50);
357 | 	mountain(200,48,300,48,"green");
358 | 	ctx.fillText("unfolded fold line",10,100);
359 | 	skinnyline(200,98,300,98);
360 | 	ctx.fillText("When sense of fold matters:",10,150);
361 | 	ctx.fillText("unfolded valley fold", 10,180);
362 | 	valley(200,178,300,178);
363 | 	ctx.fillText("unfolded mountain fold",10,210);
364 | 	mountain(200,208,300,208);
365 | 	ctx.fillStyle = "white";	
366 | }
367 | function donext() {
368 | 	if (nextstep>=steps.length) {
369 | 		nextstep=steps.length-1;
370 | 	}
371 | 	
372 | 	ctx.clearRect(0,0,900,400);
373 | 	ctx.lineWidth = origwidth;
374 | 	steps[nextstep][0]();
375 | 	ta.innerHTML = steps[nextstep][1];
376 | 	nextstep++;
377 | }
378 | function goback() {
379 | 	nextstep = nextstep -2;
380 | 	if (nextstep<0) {
381 | 	     nextstep = 0;
382 | 	}
383 | 	donext();
384 | }
385 | function skinnyline(x1,y1,x2,y2) {
386 | 	ctx.lineWidth = 1;
387 | 	ctx.beginPath();
388 | 	ctx.moveTo(x1,y1);
389 | 	ctx.lineTo(x2,y2);
390 | 	ctx.closePath();
391 | 	ctx.stroke();	
392 | 	ctx.lineWidth = origwidth;
393 | }
394 | 
395 | 
396 | function solidline(x1,y1,x2,y2) {
397 | 	ctx.beginPath();
398 | 	ctx.moveTo(x1,y1);
399 | 	ctx.lineTo(x2,y2);
400 | 	ctx.closePath();
401 | 	ctx.stroke();
402 | }
403 | var origstyle;
404 | function valley(x1,y1,x2,y2,color) {
405 | 	var px=x2-x1;
406 | 	var py = y2-y1;
407 | 	var len = dist(x1,y1,x2,y2);
408 | 	var nd = Math.floor(len/(dashlen+dgap));
409 | 	var xs = px/nd;
410 | 	var ys = py/nd;
411 | 	if (color) ctx.strokeStyle = color;
412 | 	ctx.beginPath();
413 | 	for (var n=0;n<nd;n++) {
414 | 		ctx.moveTo(x1+n*xs,y1+n*ys);
415 | 		ctx.lineTo(x1+n*xs+dratio*xs,y1+n*ys+dratio*ys);
416 | 	}
417 | 	ctx.closePath();
418 | 	ctx.stroke();
419 | 	ctx.strokeStyle = origstyle;
420 | }
421 | function mountain(x1,y1,x2,y2,color) {
422 | 	
423 | 	var px=x2-x1;
424 | 	var py = y2-y1;
425 | 	var len = dist(x1,y1,x2,y2);
426 | 	var nd = Math.floor(len/ddtotal);
427 | 	
428 | 	var xs = px/nd;
429 | 	var ys = py/nd;
430 | 	if (color) ctx.strokeStyle = color;
431 | 	ctx.beginPath();
432 | 	for (var n=0;n<nd;n++) {
433 | 		ctx.moveTo(x1+n*xs,y1+n*ys);
434 | 		ctx.lineTo(x1+n*xs+ddratio1*xs,y1+n*ys+ddratio1*ys);
435 | 		ctx.moveTo(x1+n*xs+ddratio2*xs,y1+n*ys+ddratio2*ys);
436 | 		ctx.lineTo(x1+n*xs+ddratio3*xs,y1+n*ys+ddratio3*ys);
437 | 		
438 | 	}
439 | 	ctx.closePath();
440 | 	ctx.stroke();
441 | 	ctx.strokeStyle = origstyle;
442 | }
443 | 
444 | 
445 | 
446 | 
447 | </script>
448 | </head>
449 | 
450 | <body onload="init();">
451 | <canvas id="canvas" width="900" height="400">
452 | Your browser does not recognize the canvas element 
453 | </canvas>
454 | <br/>
455 | <div id="directions"> Press buttons to advance or go back </div>
456 | <hr/>
457 | <button onClick="goback();" style="color: #F00">Go back </button> 
458 | <button onClick="donext();" style="color: #03F">Next step </button>
459 | </body>
460 | </html>
461 | 


--------------------------------------------------------------------------------
/ch07/sink.mp4video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch07/sink.mp4video.mp4


--------------------------------------------------------------------------------
/ch07/sink.theora.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch07/sink.theora.ogv


--------------------------------------------------------------------------------
/ch07/sink.webmvp8.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch07/sink.webmvp8.webm


--------------------------------------------------------------------------------
/ch07/talk.mp4video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch07/talk.mp4video.mp4


--------------------------------------------------------------------------------
/ch07/talk.theora.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch07/talk.theora.ogv


--------------------------------------------------------------------------------
/ch07/talk.webmvp8.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch07/talk.webmvp8.webm


--------------------------------------------------------------------------------
/ch07/throat1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch07/throat1.jpg


--------------------------------------------------------------------------------
/ch07/throat2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch07/throat2.jpg


--------------------------------------------------------------------------------
/ch08/barsbase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch08/barsbase.png


--------------------------------------------------------------------------------
/ch08/jigsawBars8c.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |  <meta charset="UTF-8"> 
  4 | <head>
  5 |     <title>Jigsaw Monkey bars
  6 |     </title>
  7 | <meta name="viewport" 
  8 | content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" />
  9 | 
 10 | 
 11 | <style>
 12 | #base {position:absolute; border:none; visibility: hidden; }
 13 | form {position: absolute; z-index: 200;}
 14 | body
 15 | {
 16 | 	height:100%;
 17 | 	margin: 30px;
 18 | }
 19 | video {display:none; position:absolute; z-index: 100; } 
 20 | 
 21 | 
 22 | </style>
 23 | 
 24 | <script type="text/javascript">
 25 | 
 26 | var pieces = [];
 27 | var nums;
 28 | var baseImgW;
 29 | var baseImgH;
 30 | var origW;
 31 | var origH;
 32 | var opieceW;
 33 | var opieceH;
 34 | var pieceW;
 35 | var pieceH;
 36 | var numOfRows = 2.0;
 37 | var numOfCols = 3.0;
 38 | var piecesx = [ ];  
 39 | var piecesy = [ ];	
 40 | var v;
 41 | var base;
 42 | var doingjigsaw = false;
 43 | var firstpkel;  //assumption that first piece in array is upper left corner.
 44 | var oldx;
 45 | var oldy;
 46 | 
 47 | //var formel;
 48 | var questionfel;
 49 | //var mouseDown = false;
 50 | var movingobj;
 51 | 
 52 | 
 53 | 
 54 | function init(){
 55 |   
 56 |    v = document.getElementById("bars");
 57 |    base = document.getElementById("base");
 58 |    makePieces();
 59 |    nums = pieces.length;
 60 |  
 61 |   // formel = document.getElementById("questionform"); 
 62 |   // formel.style.zIndex = 100;
 63 |    questionfel = document.getElementById("questionform");
 64 |    questionfel.style.left = "20px";
 65 |    questionfel.style.top = "600px";
 66 |    questionfel.submitbut.value = "Do jigsaw again.";
 67 |    setupGame();    
 68 | }
 69 | 
 70 | function makePieces() {
 71 | 	var i;
 72 | 	var x;
 73 | 	var y;
 74 | 	var s;
 75 | 	var sCTX;
 76 | 	origW = base.width;
 77 | 	origH = base.height;
 78 | 	//what is critical dimension
 79 | 	var ratio =Math.min(1.0,.80*window.innerWidth/origW,.80*window.innerHeight/origH);
 80 |     baseImgW = origW*ratio;
 81 |     baseImgH = origH*ratio;
 82 | 	v.width = baseImgW;
 83 |     v.height =baseImgH;
 84 | 	opieceW = origW/numOfCols;
 85 | 	opieceH = origH/numOfRows;
 86 | 	pieceW = ratio*opieceW;
 87 | 	pieceH = ratio*opieceH;
 88 |     
 89 | 	for(i=0.0;i<numOfRows;i++) {
 90 | 	  for (j=0.0;j<numOfCols;j++) {	
 91 | 		s = document.createElement('canvas');
 92 | 		s.width = pieceW;
 93 | 		s.height = pieceH;
 94 | 		s.style.position = 'absolute';
 95 | 	    sCTX = s.getContext('2d'); 
 96 | 
 97 | 		sCTX.drawImage(base,j*opieceW,i*opieceH,opieceW,opieceH,0,0,pieceW,pieceH);
 98 | 
 99 | 		document.body.appendChild(s);
100 | 
101 | 		pieces.push(s);
102 | 		x = j*pieceW +100;
103 | 		y = i*pieceH +100;
104 | 		s.style.top = String(y)+"px";
105 | 		s.style.left = String(x)+"px";
106 | 		piecesx.push(x);
107 | 		piecesy.push(y);
108 |         s.addEventListener('mousedown',startdragging);
109 |       
110 | 		s.style.visibility='visible';
111 | 	  }
112 | 	}
113 | 	firstpkel = pieces[0];
114 | 	document.body.onmouseup = release;  //confirms release of mouse button. prevents problem of one piece under another
115 | }
116 | 
117 | function endjigsaw() {
118 | 	if (doingjigsaw) {
119 | 		doingjigsaw = false;     
120 | 	    v.pause();
121 | 		v.style.display = "none";
122 | 	}
123 |     setupGame();
124 | 	return false;
125 | 	
126 | }
127 | 
128 | 
129 | function checkpositions() {
130 | 	var i;
131 | 	var x;
132 | 	var y;
133 | 	var tolerance = 10;
134 | 	var deltax = [];
135 | 	var deltay = [];
136 | 	var delx;
137 | 	var dely;
138 | 	for (i=0;i<nums;i++) {  
139 | 	  x = pieces[i].style.left;
140 | 	  y = pieces[i].style.top;
141 | 	  x = x.substr(0,x.length-2); // remove px
142 | 	  y = y.substr(0,y.length-2);
143 | 	  x = Number(x);
144 | 	  y = Number(y);
145 | 	  delx = x - piecesx[i];
146 | 	  dely = y - piecesy[i];
147 | 	  deltax.push(delx);
148 | 	  deltay.push(dely);
149 | 	}
150 | 	var averagex = doaverage(deltax);
151 | 	var averagey = doaverage(deltay);
152 | 	//check if any delta (x or y) is more than tolerance from average
153 | 	for (i=0;i<nums;i++) {
154 | 		if ((Math.abs(averagex - deltax[i])>tolerance) || (Math.abs(averagey-deltay[i])>tolerance)) {
155 | 			break;
156 | 		}
157 | 	}
158 | 	if (i<nums) {
159 | 		questionfel.feedback.value = "Keep working.";
160 | 	}
161 | 	else {
162 | 		
163 | 		questionfel.feedback.value = "GOOD!";
164 | 		for (i=0;i<nums;i++) {
165 | 			pieces[i].style.display = "none";
166 | 			
167 | 		}
168 | 		v.style.left = firstpkel.style.left;
169 | 		v.style.top = firstpkel.style.top;
170 | 		v.style.display="block";
171 | 		v.currentTime = 0;
172 | 		v.play();
173 | 	}
174 | }
175 | 
176 | function doaverage(arr) {
177 | 	var sum;
178 | 	var i;
179 | 	var n = arr.length;
180 | 	sum = 0;
181 | 	for(i=0;i<n;i++) {
182 | 	   sum += arr[i];
183 | 	}
184 | 	return (sum/n);
185 | }
186 | 
187 | function setupGame() {
188 |   var i;
189 |   var x;
190 |   var y;
191 |   var thingelem;
192 |   v.pause();
193 |   v.style.display = "none";
194 |   doingjigsaw = true;
195 |   for (i=0;i<nums;i++) {	
196 | 		x = 10+Math.floor(Math.random()*baseImgW*.9);
197 | 		y = 50+Math.floor(Math.random()*baseImgH*.9);
198 | 		thingelem = pieces[i];
199 | 		thingelem.style.top = String(y)+"px";
200 | 		thingelem.style.left = String(x)+"px";
201 | 		thingelem.style.visibility='visible';
202 | 		thingelem.style.display="inline";
203 |   }
204 |   questionfel.feedback.value = "  ";	
205 | }
206 | 
207 | 
208 | 
209 | // we let go
210 | function release(e){
211 | 	movingobj = e.release; 
212 | 	mouseDown = false;
213 | 	movingobj.removeEventListener("mousemove",moving);
214 | 	movingobj.removeEventListener("mouseup",release);
215 | 	movingobj=null;
216 | 
217 | 	checkpositions();
218 | 	
219 | };
220 |  
221 | // only move image (set mouseDown = true) when inside image
222 | function startdragging(e)
223 | {   	
224 | 	movingobj = e.target;
225 | 	
226 |     mouseDown = true;
227 |     oldx = parseInt(e.pageX);
228 |     oldy = parseInt(e.pageY);
229 |     movingobj.addEventListener("mousemove",moving);
230 |     movingobj.addEventListener("mouseup",release);
231 | };
232 |  
233 | function moving(ev)
234 | {
235 |  if((movingobj!=null) &&(mouseDown)){
236 |    newx = parseInt(ev.pageX);
237 |    newy = parseInt(ev.pageY);
238 |    delx = newx-oldx;
239 |    dely = newy-oldy;
240 |    oldx = newx;
241 |    oldy = newy;
242 |    curx = parseInt(movingobj.style.left);
243 |    cury = parseInt(movingobj.style.top);
244 |    movingobj.style.left = String(curx+delx)+"px";
245 |    movingobj.style.top = String(cury+dely)+"px"; 
246 |  }
247 | };
248 |  
249 | </script>
250 | 
251 | </head>
252 | <body id="body" onLoad="init();">  
253 | 
254 | 
255 | 
256 | 
257 | <h2> Monkey bars</h2>
258 | 
259 | <form id="questionform" name="questionform" onSubmit="return endjigsaw();" >
260 | 
261 | <input name="submitbut" type="submit" value="       " size="30"/>
262 | 
263 | Feedback: <input name="feedback" value="   " size="11" />
264 | </form>
265 | <video id="bars" controls="controls"  preload="auto" width="800"> 
266 | 	 <source src="monkeybars.mp4" > 
267 | 	 <source src="monkeybars.webm" > 
268 |      <source src="monkeybars.ogg" > 
269 |  
270 | Your browser does not accept the video tag.
271 | </video>
272 | <img src="barsBase.png" id="base" width="800px" height="420px"/>
273 | </p>
274 | </body>
275 | </html>


--------------------------------------------------------------------------------
/ch08/monkeybars.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch08/monkeybars.mp4


--------------------------------------------------------------------------------
/ch08/monkeybars.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch08/monkeybars.ogv


--------------------------------------------------------------------------------
/ch08/monkeybars.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch08/monkeybars.webm


--------------------------------------------------------------------------------
/ch09/alabama.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/alabama.gif


--------------------------------------------------------------------------------
/ch09/alaska.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/alaska.gif


--------------------------------------------------------------------------------
/ch09/arizona.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/arizona.gif


--------------------------------------------------------------------------------
/ch09/arkansas.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/arkansas.gif


--------------------------------------------------------------------------------
/ch09/california.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/california.gif


--------------------------------------------------------------------------------
/ch09/colorado.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/colorado.gif


--------------------------------------------------------------------------------
/ch09/connecticut.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/connecticut.gif


--------------------------------------------------------------------------------
/ch09/delaware.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/delaware.gif


--------------------------------------------------------------------------------
/ch09/florida.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/florida.gif


--------------------------------------------------------------------------------
/ch09/georgia.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/georgia.gif


--------------------------------------------------------------------------------
/ch09/hawaii.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/hawaii.gif


--------------------------------------------------------------------------------
/ch09/idaho.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/idaho.gif


--------------------------------------------------------------------------------
/ch09/illinois.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/illinois.gif


--------------------------------------------------------------------------------
/ch09/indiana.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/indiana.gif


--------------------------------------------------------------------------------
/ch09/iowa.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/iowa.gif


--------------------------------------------------------------------------------
/ch09/kansas.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/kansas.gif


--------------------------------------------------------------------------------
/ch09/kentucky.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/kentucky.gif


--------------------------------------------------------------------------------
/ch09/louisiana.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/louisiana.gif


--------------------------------------------------------------------------------
/ch09/maine.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/maine.gif


--------------------------------------------------------------------------------
/ch09/maryland.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/maryland.gif


--------------------------------------------------------------------------------
/ch09/massachusetts.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/massachusetts.gif


--------------------------------------------------------------------------------
/ch09/michigan.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/michigan.gif


--------------------------------------------------------------------------------
/ch09/minnesota.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/minnesota.gif


--------------------------------------------------------------------------------
/ch09/mississippi.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/mississippi.gif


--------------------------------------------------------------------------------
/ch09/missouri.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/missouri.gif


--------------------------------------------------------------------------------
/ch09/montana.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/montana.gif


--------------------------------------------------------------------------------
/ch09/nebraska.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/nebraska.gif


--------------------------------------------------------------------------------
/ch09/nevada.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/nevada.gif


--------------------------------------------------------------------------------
/ch09/newhampshire.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/newhampshire.gif


--------------------------------------------------------------------------------
/ch09/newjersey.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/newjersey.gif


--------------------------------------------------------------------------------
/ch09/newmexico.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/newmexico.gif


--------------------------------------------------------------------------------
/ch09/newyork.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/newyork.gif


--------------------------------------------------------------------------------
/ch09/northcarolina.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/northcarolina.gif


--------------------------------------------------------------------------------
/ch09/northdakota.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/northdakota.gif


--------------------------------------------------------------------------------
/ch09/ohio.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/ohio.gif


--------------------------------------------------------------------------------
/ch09/oklahoma.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/oklahoma.gif


--------------------------------------------------------------------------------
/ch09/oregon.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/oregon.gif


--------------------------------------------------------------------------------
/ch09/pennsylvania.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/pennsylvania.gif


--------------------------------------------------------------------------------
/ch09/rhodeisland.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/rhodeisland.gif


--------------------------------------------------------------------------------
/ch09/rhodeislandbig.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/rhodeislandbig.gif


--------------------------------------------------------------------------------
/ch09/southcarolina.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/southcarolina.gif


--------------------------------------------------------------------------------
/ch09/southdakota.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/southdakota.gif


--------------------------------------------------------------------------------
/ch09/statesgame.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>USA States game</title>
  5 | <style>
  6 | img {position:absolute; 
  7 | }
  8 | form {position: absolute; z-index: 10;}
  9 | body
 10 | {
 11 | 	height:100%;
 12 | 	margin: 0;
 13 | }
 14 |  #fullpage
 15 | {
 16 | 	display:block;
 17 | 	position:absolute;
 18 | 	top:0;
 19 | 	left:0;
 20 | 	width:100%;
 21 | 	height:90%;
 22 | 	overflow: hidden;
 23 | 	z-index: 1;
 24 | }
 25 | </style>
 26 | <script type="text/javascript">
 27 | var names = [
 28 |   "Illinois","Iowa","Missouri","Oregon","Michigan",
 29 |   "Indiana","Vermont","New Hampshire","Maine","South Dakota","North Dakota",
 30 |   "Ohio","Wisconsin","Kentucky","Tennessee",
 31 |   "North Carolina","South Carolina","Georgia","Alabama","Mississippi",
 32 |   "Virginia","West Virginia","Maryland","Delaware","Pennsylvania","New Jersey","New York",
 33 |   "Rhode Island", "Connecticut","Massaschusetts","Louisiana","Arkansas","Minnesota",
 34 |   "Florida","Kansas",
 35 |   "Arizona","California","Colorado","Idaho","Montana","Nebraska",
 36 |   "Nevada","New Mexico","Texas","Oklahoma","Utah","Washington","Wyoming","Hawaii","Alaska"
 37 |   ]
 38 | var states = [
 39 |   "illinois.gif",
 40 |   "iowa.gif",
 41 |   "missouri.gif",
 42 |   "oregon.gif",
 43 |   "michigan.gif",
 44 |   "indiana.gif", "vermont.gif","newhampshire.gif","maine.gif","southdakota.gif","northdakota.gif",
 45 |   "ohio.gif","wisconsin.gif","kentucky.gif","tennessee.gif",
 46 |   "northcarolina.gif","southcarolina.gif","georgia.gif","alabama.gif","mississippi.gif",
 47 |   "virginia.gif","westvirginia.gif","maryland.gif","delaware.gif",
 48 |   "pennsylvania.gif","newjersey.gif","newyork.gif",
 49 |   "rhodeislandbig.gif","connecticut.gif","massachusetts.gif","louisiana.gif","arkansas.gif","minnesota.gif",
 50 |   "florida.gif","kansas.gif",
 51 |   "arizona.gif","california.gif","colorado.gif","idaho.gif","montana.gif","nebraska.gif",
 52 |   "nevada.gif","newmexico.gif","texas.gif","oklahoma.gif","utah.gif","washington.gif","wyoming.gif","hawaii.gif","alaska.gif"
 53 |   ];
 54 | var statesx = [
 55 |   88.65,60.15,65.40,
 56 |   -81.70,90.40,
 57 |   107.40,171.95,181.00,183.00,21.10,22.60,
 58 |   121.70,78.90,103.65,99.40,
 59 |   132.20,138.95,125.45,110.45,93.90,
 60 |   138.95,138.95,151.65,171.95,144.20,174.20,147.95,
 61 |   187.75,179.35,177.60,77.40,73.65,54.15,
 62 |   115.70,32.35,
 63 |   -44.95,-86.85,-8.15,-47.20,-32.15,21.10,
 64 |   -66.70,-11.15,-4.40,22.60, -36.70,-72.50,-15.65,-300.95,-230.30
 65 |   ];
 66 | var statesy = [ 
 67 |  -26.10,-29.85,-8.45,
 68 |  -64.75,-59.05,
 69 |  -22.70,-66.00,-67.30,-85.65,-47.15,-70.30,
 70 |  -27.90,-55.30,-3.60,12.90,
 71 |  5.20,21.45,26.40,27.90,29.65,
 72 |  -13.20,-17.10,-19.85,-20.85,-36.40,-31.35,-61.30,
 73 |  -41.85,-41.85,-50.85,47.10,21.15,-72.70,
 74 |  55.45,-2.85,
 75 |  15.15,-35.75,-11.85,-76.70,-76.30,-23.85,
 76 |  -27.60,18.15,22.65,19.65,-22.35,-83.45,-41.75,31.55,-171.30
 77 |  ];	
 78 | var doingjigsaw = false;
 79 | var bodyel;
 80 | var nums = states.length;
 81 | var stateelements = [];
 82 | var questionfel;
 83 | function init(){
 84 | 	bodyelement = document.getElementById("body");
 85 |    setupgame();
 86 |   // msg = document.getElementById("msg");
 87 |    bodyel = document.getElementById("body");
 88 |    
 89 | }
 90 | 
 91 | function setupgame() {
 92 | 	var i;
 93 | 	var x;
 94 | 	var y;
 95 | 	var uniqueid;
 96 | 	var s;
 97 | 	for(i=0;i<nums;i++) {
 98 | 		uniqueid = "a"+String(i);
 99 | 		s = document.createElement('state');
100 |     	s.innerHTML = (
101 | 	      "<img src='"+states[i]+"' id='"+uniqueid+"'/>");
102 | 		document.body.appendChild(s);	  
103 | 		thingelem = document.getElementById(uniqueid);
104 | 		x = statesx[i] +310;
105 | 		y = statesy[i] + 200;
106 | 		thingelem.style.top = String(y)+"px";
107 | 		thingelem.style.left = String(x)+"px";
108 | 		stateelements.push(thingelem);
109 | 	}
110 | 	questionfel = document.getElementById("questionform");
111 | 	questionfel.style.left = "100px";
112 | 	questionfel.style.top = "500px";
113 | 	questionfel.question.value = " ";
114 | 	questionfel.feedback.value = "  ";
115 | }
116 |  function pickstate(ev) {
117 |  	var picked = Number(ev.target.id.substr(1)); 
118 | 	if (picked == choice) {
119 | 	questionfel.feedback.value = "Correct!";
120 | 	}
121 | 	else {
122 | 		questionfel.feedback.value = "Try Again.";
123 | 	}
124 |  }
125 | function spread() {
126 | 	var i;
127 | 	var x; 
128 | 	var y;
129 | 	var thingelem;
130 | 	for (i=0;i<nums-2;i++) {  //don't move alaska or hawaii
131 | 		
132 | 		x = 2.70*statesx[i] +410;
133 | 		y = 2.70*statesy[i] + 250;
134 | 		thingelem = stateelements[i];
135 | 		thingelem.style.top = String(y)+"px";
136 | 		thingelem.style.left = String(x)+"px";
137 | 	}
138 | }
139 | function restore() {
140 | 	var i;
141 | 	var x; 
142 | 	var y;
143 | 	var thingelem;
144 | 	var df;
145 | 	var lsname = "jigsaw";
146 | 	var xydata = [];
147 | 	var stringdata;
148 | 	if (doingjigsaw) {
149 | 		doingjigsaw = false;
150 | 		 d.onmousedown = "";
151 |          d.onmousemove = "";
152 |          d.onmouseup = "";
153 |          df = document.getElementById("fullpage");
154 | 		 bodyel.removeChild(df);
155 | 		 for (i=0;i<nums;i++) {
156 | 			 thingelem = stateelements[i];
157 | 			xydata.push(thingelem.style.top+"&"+thingelem.style.left);
158 | 		 }
159 | 		 stringdata = xydata.join(";");
160 | 		 try {
161 | 		   localStorage.setItem(lsname,stringdata);
162 | 	     }
163 | 		 catch(e) {
164 | 			alert("data not saved, error given: "+e); 
165 | 		 }
166 | 	}
167 | 	for (i=0;i<nums;i++) {
168 | 		x = statesx[i] +310;
169 | 		y = statesy[i] + 200;
170 | 		thingelem = stateelements[i];
171 | 		thingelem.style.top = String(y)+"px";
172 | 		thingelem.style.left = String(x)+"px";
173 | 	}
174 | }
175 | function restorepreviousjigsaw() {
176 | 	var i;
177 | 	var lsname = "jigsaw";
178 | 	var xydata;
179 | 	var stringdata;
180 | 	var ss;   //will hold combined top and left for a state
181 | 	var ssarray;
182 | 	var thingelem;
183 | 	try {
184 | 	stringdata = localStorage.getItem(lsname);
185 | 	xydata = stringdata.split(";");
186 | 	for (i=0;i<nums;i++) {
187 | 	  ss = xydata[i];
188 | 	  ssarray = ss.split("&");
189 | 	  thingelem = stateelements[i];
190 | 	  thingelem.style.top = ssarray[0];
191 | 	  thingelem.style.left = ssarray[1];
192 | 	}
193 | 	doingjigsaw = true;
194 | 	stateelements[choice].style.border="";
195 | 	d.onmousedown = startdragging;
196 |   d.onmousemove = moving;
197 |   d.onmouseup = release;
198 |   var df = document.createElement('div');
199 |   df.id = "fullpage";
200 |   bodyel.appendChild(df);
201 | 	questionfel.question.value = "";
202 | 	questionfel.submitbut.value = "Save & close jigsaw";
203 | 	questionfel.feedback.value = "  ";
204 | 	questionfel.style.zIndex = 100;}
205 | 	catch(e) {
206 | 		alert("Problem in restoring previous puzzle. Click on Do jigsaw.");}
207 | }
208 | var choice = 0;
209 | function setupfindstate(){
210 | 	var i;
211 | 	var thingelem;
212 | 	stateelements[choice].style.border="";   //removes border of last choice, if there was one
213 | 	choice = Math.floor(Math.random()*nums);
214 | 	for (i=0;i<nums;i++) {
215 | 	 thingelem = stateelements[i];
216 | 	 thingelem.addEventListener('click',pickstate,false);
217 | 	}
218 | 	var nameofstate = names[choice];
219 | 	questionfel.question.value = "Click on "+nameofstate;
220 | 	questionfel.feedback.value = "  ";
221 | 	questionfel.submitbut.value = "";
222 | }
223 | function setupidentifystate(){
224 | 	stateelements[choice].style.border="";
225 | 	stateelements[choice].style.zIndex="";
226 | 	choice = Math.floor(Math.random()*nums);
227 | 	stateelements[choice].style.zIndex="20";
228 | 	stateelements[choice].style.border="double";
229 | 	questionfel.question.value = "Type name of state with border HERE";
230 | 	questionfel.submitbut.value = "Submit name";
231 | 	questionfel.feedback.value = "  ";
232 | 	var thingelem;
233 | 	for (i=0;i<nums;i++) {
234 | 	 thingelem = stateelements[i];
235 | 	 thingelem.removeEventListener('click',pickstate,false);
236 | 	}
237 | }
238 | function checkname() {
239 | 	if (doingjigsaw) {
240 | 		restore();
241 | 	}
242 | 	else {
243 | 	var correctname = names[choice];
244 | 	var guessedname = document.questionform.question.value;
245 | 	
246 | 	if (guessedname==correctname) {
247 | 		questionfel.feedback.value = "Correct!";
248 | 	}
249 | 	else {
250 | 		questionfel.feedback.value = "Try again.";
251 | 		
252 | 	}
253 | 	return false;
254 | 	}
255 | }
256 | function checkpositions() {
257 | 	var i;
258 | 	var x;
259 | 	var y;
260 | 	var tolerance = 20;
261 | 	var deltax = [];
262 | 	var deltay = [];
263 | 	var delx;
264 | 	var dely;
265 | 	for (i=0;i<nums-2;i++) {  //doesn't check alaska or hawaii
266 | 	  x = stateelements[i].style.left;
267 | 	  y = stateelements[i].style.top;
268 | 	  x = x.substr(0,x.length-2); // remove px
269 | 	  y = y.substr(0,y.length-2);
270 | 	  x = Number(x);
271 | 	  y = Number(y);
272 | 	  delx = x - statesx[i];
273 | 	  dely = y - statesy[i];
274 | 	  deltax.push(delx);
275 | 	  deltay.push(dely);
276 | 	}
277 | 	var averagex = doaverage(deltax);
278 | 	var averagey = doaverage(deltay);
279 | 	//check if any delta (x or y) is more than tolerance from average
280 | 	for (i=0;i<nums;i++) {
281 | 		if ((Math.abs(averagex - deltax[i])>tolerance) || (Math.abs(averagey-deltay[i])>tolerance)) {
282 | 			break;
283 | 		}
284 | 	}
285 | 	if (i<nums) {
286 | 		questionfel.feedback.value = names[i]+" and maybe more out of position";
287 | 	}
288 | 	else {
289 | 		//could put in check on Hawaii and Alaska here
290 | 		questionfel.feedback.value = "GOOD";
291 | 	}
292 | }
293 | function doaverage(arr) {
294 | 	var sum;
295 | 	var i;
296 | 	var n = arr.length;
297 | 	sum = 0;
298 | 	for(i=0;i<n;i++) {
299 | 	   sum += arr[i];
300 | 	}
301 | 	return (sum/n);
302 | }
303 | function setupjigsaw() {
304 |   doingjigsaw = true;
305 | 	stateelements[choice].style.border="";
306 |   var i;
307 |   var x;
308 |   var y;
309 |   var thingelem;
310 |     for (i=0;i<nums;i++) {	
311 | 		x = 100+Math.floor(Math.random()*600);
312 | 		y = 100+Math.floor(Math.random()*320);
313 | 		thingelem = stateelements[i];
314 | 		thingelem.style.top = String(y)+"px";
315 | 		thingelem.style.left = String(x)+"px";
316 | 		thingelem.removeEventListener('click',pickstate,false);
317 |      }
318 |   d.onmousedown = startdragging;
319 |   d.onmousemove = moving;
320 |   d.onmouseup = release;
321 |   var df = document.createElement('div');
322 |   df.id = "fullpage";
323 |   bodyel.appendChild(df);
324 | 	questionfel.question.value = "";
325 | 	questionfel.submitbut.value = "Save & close jigsaw";
326 | 	questionfel.feedback.value = "  ";
327 | 	questionfel.style.zIndex = 100;
328 | }
329 | var d = document;
330 | var ie= d.all;
331 | var mouseDown = false;
332 | var curX;
333 | var curY;
334 | var adjustX;
335 | var adjustY;
336 | var movingobj;
337 | function release(e){
338 | 	mouseDown = false;
339 | 	checkpositions();
340 | };
341 | function startdragging(e)
342 | {   
343 |     var o;
344 | 	var j;
345 | 	var i;
346 | 	curX = ie ? e.clientX+d.body.scrollLeft : e.pageX;
347 | 	curY = ie ? e.clientY+d.body.scrollTop  : e.pageY;
348 | 	//determine what obj, if any, is under mouse
349 | 	for (i=0; i<nums;i++) {
350 | 		j = stateelements[i];
351 | 		o = offset(j);
352 | 		if (curX >= o.x && curX <= o.x + j.width &&
353 | 		     curY >= o.y && curY <= o.y + j.height)
354 | 			{
355 | 				break;
356 | 			}
357 | 	}
358 | 	
359 | 	if (i<nums) {
360 | 		movingobj = stateelements[i];
361 | 		//msg.innerHTML="curX is "+curX+" curY is "+curY;
362 | 		adjustX = curX- o.x;
363 | 		adjustY = curY-  o.y;
364 | 		mouseDown = true;
365 | 	}
366 | }
367 | function moving(e)
368 | {
369 | 	if (!mouseDown) return;
370 |  
371 | 	if (ie)
372 | 		draw(e.clientX+d.body.scrollLeft, e.clientY+d.body.scrollTop);
373 | 	else
374 | 		draw(e.pageX, e.pageY);
375 | }
376 | function draw(x, y)
377 | {
378 | 	var js = movingobj.style;
379 | 	js.left = (x - adjustX) + "px";
380 | 	js.top  = (y - adjustY) + "px";
381 | }
382 | function offset(obj)
383 | {
384 | 	var left = 0;
385 | 	var top  = 0;
386 | 	if (obj.offsetParent)
387 | 		do
388 | 		{
389 | 			left += obj.offsetLeft;
390 | 			top  += obj.offsetTop;
391 |         } while (obj = obj.offsetParent);
392 | 	return {x: left, y: top};
393 | }
394 |  
395 | 
396 | </script>
397 | </head>
398 | <body id="body" onLoad="init();">  
399 | <button onClick="spread();">Spread out states </button>
400 | <button onClick="restore();">Restore original /compress map </button>
401 | <button onClick="setupfindstate();">Find the state </button>
402 | <button onClick="setupidentifystate();">Name the state</button>
403 | <button onClick="setupjigsaw();">Do jigsaw</button>
404 | <button onClick="restorepreviousjigsaw();">Restore last jigsaw in process </button>
405 | <h1>USA</h1>
406 | <form id="questionform" name="questionform" onSubmit="return checkname();">
407 | State name: <input name="question" value="   " size="40"/>
408 | <input name="submitbut" type="submit" value="       " size="30"/>
409 | Feedback: <input name="feedback" value="   " size="40" />
410 | </form>
411 | </body>
412 | </html>


--------------------------------------------------------------------------------
/ch09/tennessee.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/tennessee.gif


--------------------------------------------------------------------------------
/ch09/texas.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/texas.gif


--------------------------------------------------------------------------------
/ch09/utah.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/utah.gif


--------------------------------------------------------------------------------
/ch09/vermont.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/vermont.gif


--------------------------------------------------------------------------------
/ch09/virginia.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/virginia.gif


--------------------------------------------------------------------------------
/ch09/washington.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/washington.gif


--------------------------------------------------------------------------------
/ch09/westvirginia.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/westvirginia.gif


--------------------------------------------------------------------------------
/ch09/wisconsin.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/wisconsin.gif


--------------------------------------------------------------------------------
/ch09/wyoming.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch09/wyoming.gif


--------------------------------------------------------------------------------
/ch10/barsbase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch10/barsbase.png


--------------------------------------------------------------------------------
/ch10/jigsawBars8.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |  <meta charset="UTF-8"> 
  4 | <head>
  5 |     <title>Jigsaw Monkey bars
  6 |     </title>
  7 | <meta name="viewport" 
  8 | content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" />
  9 | 
 10 | 
 11 | <style>
 12 | #base {position:absolute; border:none; visibility: hidden; }
 13 | form {position: absolute; z-index: 200;}
 14 | body
 15 | {
 16 | 	height:100%;
 17 | 	margin: 30px;
 18 | }
 19 | video {display:none; position:absolute; z-index: 100; } 
 20 | 
 21 | 
 22 | </style>
 23 | 
 24 | <script type="text/javascript">
 25 | 
 26 | var pieces = [];
 27 | var nums;
 28 | var baseImgW;
 29 | var baseImgH;
 30 | var origW;
 31 | var origH;
 32 | var opieceW;
 33 | var opieceH;
 34 | var pieceW;
 35 | var pieceH;
 36 | var numOfRows = 2.0;
 37 | var numOfCols = 3.0;
 38 | var piecesx = [ ];
 39 |   
 40 | var piecesy = [ ];	
 41 | var v;
 42 | var base;
 43 | var doingjigsaw = false;
 44 | var firstpkel;  //assumption that first piece in array is upper left corner.
 45 | 
 46 | 
 47 | var questionfel;
 48 | 
 49 | var d = document;
 50 | 
 51 | var mouseDown = false;
 52 | 
 53 | var movingobj;
 54 | 
 55 | 
 56 | 
 57 | function init(){
 58 |   
 59 |    v = document.getElementById("bars");
 60 |    base = document.getElementById("base");
 61 |    makePieces();
 62 |    nums = pieces.length;
 63 |    questionfel = document.getElementById("questionform");
 64 |    questionfel.style.left = "20px";
 65 |    questionfel.style.top = "600px";
 66 |    questionfel.submitbut.value = "Do jigsaw again.";
 67 |    setupGame();    
 68 | }
 69 | 
 70 | function makePieces() {
 71 | 	var i;
 72 | 	var x;
 73 | 	var y;
 74 | 	var s;
 75 | 	var sRef; 
 76 | 	origW = base.width;
 77 | 	origH = base.height;
 78 | 	//what is critical dimension
 79 | 	var ratio =Math.min(1.0,.80*window.innerWidth/origW,.80*window.innerHeight/origH);
 80 |     baseImgW = origW*ratio;
 81 |     baseImgH = origH*ratio;
 82 | 	v.width = baseImgW;
 83 |     v.height =baseImgH;
 84 | 	opieceW = origW/numOfCols;
 85 | 	opieceH = origH/numOfRows;
 86 | 	pieceW = ratio*opieceW;
 87 | 	pieceH = ratio*opieceH;
 88 |     
 89 | 	for(i=0.0;i<numOfRows;i++) {
 90 | 	  for (j=0.0;j<numOfCols;j++) {	
 91 | 		s = document.createElement('canvas');
 92 | 		s.width = pieceW;
 93 | 		s.height = pieceH;
 94 | 		s.style.position = 'absolute';
 95 | 		sCTX = s.getContext('2d'); 
 96 | 
 97 | 		sCTX.drawImage(base,j*opieceW,i*opieceH,opieceW,opieceH,0,0,pieceW,pieceH);
 98 | 
 99 | 		document.body.appendChild(s);
100 | 
101 | 		pieces.push(s);
102 | 		x = j*pieceW +100;
103 | 		y = i*pieceH +100;
104 | 		s.style.top = String(y)+"px";
105 | 		s.style.left = String(x)+"px";
106 | 		piecesx.push(x);
107 | 		piecesy.push(y);
108 |         s.addEventListener('mousedown',startdragging,false);
109 |         s.addEventListener("touchstart", touchHandler, true);
110 |         s.addEventListener("touchmove", touchHandler, true);
111 |         s.addEventListener("touchend", touchHandler, true);
112 |         s.addEventListener("touchcancel", touchHandler, true);
113 | 		s.style.visibility='visible';
114 | 	  }
115 | 	}
116 | 	firstpkel = pieces[0];
117 | 	document.body.onmouseup = release;  //confirms release of mouse button. prevents problem of one piece under another
118 | }
119 | 
120 | function endjigsaw() {
121 | 	var df;
122 | 	if (doingjigsaw) {
123 | 		doingjigsaw = false;
124 | 		 d.onmousedown = "";
125 |          d.onmousemove = "";
126 |          d.onmouseup = "";
127 |         
128 | 	    v.pause();
129 | 		v.style.display = "none";
130 | 	}
131 |     setupGame();
132 | 	return false;
133 | 	
134 | }
135 | 
136 | 
137 | function checkpositions() {
138 | 	var i;
139 | 	var x;
140 | 	var y;
141 | 	var tolerance = 10;
142 | 	var deltax = [];
143 | 	var deltay = [];
144 | 	var delx;
145 | 	var dely;
146 | 	for (i=0;i<nums;i++) {  
147 | 	  x = pieces[i].style.left;
148 | 	  y = pieces[i].style.top;
149 | 	  x = x.substr(0,x.length-2); // remove px
150 | 	  y = y.substr(0,y.length-2);
151 | 	  x = Number(x);
152 | 	  y = Number(y);
153 | 	  delx = x - piecesx[i];
154 | 	  dely = y - piecesy[i];
155 | 	  deltax.push(delx);
156 | 	  deltay.push(dely);
157 | 	}
158 | 	var averagex = doaverage(deltax);
159 | 	var averagey = doaverage(deltay);
160 | 	//check if any delta (x or y) is more than tolerance from average
161 | 	for (i=0;i<nums;i++) {
162 | 		if ((Math.abs(averagex - deltax[i])>tolerance) || (Math.abs(averagey-deltay[i])>tolerance)) {
163 | 			break;
164 | 		}
165 | 	}
166 | 	if (i<nums) {
167 | 		questionfel.feedback.value = "Keep working.";
168 | 	}
169 | 	else {
170 | 		
171 | 		questionfel.feedback.value = "GOOD!";
172 | 		for (i=0;i<nums;i++) {
173 | 			pieces[i].style.display = "none";
174 | 			
175 | 		}
176 | 		v.style.left = firstpkel.style.left;
177 | 		v.style.top = firstpkel.style.top;
178 | 		v.style.display="block";
179 | 		v.currentTime = 0;
180 | 		v.play();
181 | 	}
182 | }
183 | 
184 | function doaverage(arr) {
185 | 	var sum;
186 | 	var i;
187 | 	var n = arr.length;
188 | 	sum = 0;
189 | 	for(i=0;i<n;i++) {
190 | 	   sum += arr[i];
191 | 	}
192 | 	return (sum/n);
193 | }
194 | 
195 | function setupGame() {
196 | 	v.pause();
197 | 	v.style.display = "none";
198 |   doingjigsaw = true;
199 | 	
200 |   var i;
201 |   var x;
202 |   var y;
203 |   var thingelem;
204 |     for (i=0;i<nums;i++) {	
205 | 		x = 10+Math.floor(Math.random()*baseImgW*.9);
206 | 		y = 50+Math.floor(Math.random()*baseImgH*.9);
207 | 		thingelem = pieces[i];
208 | 		thingelem.style.top = String(y)+"px";
209 | 		thingelem.style.left = String(x)+"px";
210 | 		thingelem.style.visibility='visible';
211 | 		thingelem.style.display="inline";
212 | 
213 |      }
214 |   
215 | 
216 | 	
217 | 	questionfel.feedback.value = "  ";
218 | 	
219 | }
220 | 
221 | function touchHandler(event)
222 | {
223 |     var touches = event.changedTouches;
224 | 	if (touches.length>1) {
225 | 		return false;
226 | 	}
227 |    var first = touches[0];
228 |     var type = "";
229 |          switch(event.type)
230 |     {
231 |         case "touchstart": type = "mousedown"; break;
232 |         case "touchmove":  type="mousemove"; break;        
233 |         case "touchend":   type="mouseup"; break;
234 |         default: return;
235 |     }
236 |  
237 |   var simulatedEvent = new MouseEvent(type,{
238 |      
239 |     // cancelable: true,
240 |     // detail:1,
241 |      screenX: first.screenX,
242 |      screenY: first.screenY,
243 |      clientX: first.clientX,
244 |      clientY: first.clientY
245 | 
246 |   });
247 | 
248 | 
249 |     first.target.dispatchEvent(simulatedEvent);
250 |     event.preventDefault();
251 | }
252 | 
253 | 
254 | 
255 | 
256 | 
257 | // we let go
258 | function release(e){
259 | 	mouseDown = false;
260 | 	movingobj.removeEventListener("mousemove",moving,false);
261 | 	movingobj.removeEventListener("mouseup",release,false);
262 | 	movingobj=null;
263 | 	checkpositions();
264 | };
265 |  
266 | // only move image (set mouseDown = true) when inside image
267 | function startdragging(e)
268 | {   
269 | 	
270 | 	
271 | 	movingobj = e.target;
272 |     
273 |     mouseDown = true;
274 |     oldx = parseInt(e.pageX);
275 |     oldy = parseInt(e.pageY);
276 |     movingobj.addEventListener("mousemove",moving,false);
277 |     movingobj.addEventListener("mouseup",release,false);
278 | };
279 |  
280 | function moving(ev)
281 | {
282 | 
283 | 	
284 |   if((movingobj!=null) &&(mouseDown)){
285 |    newx = parseInt(ev.pageX);
286 |    newy = parseInt(ev.pageY);
287 |    delx = newx-oldx;
288 |    dely = newy-oldy;
289 |    oldx = newx;
290 |    oldy = newy;
291 |    curx = parseInt(movingobj.style.left);
292 |    cury = parseInt(movingobj.style.top);
293 |    movingobj.style.left = String(curx+delx)+"px";
294 |    movingobj.style.top = String(cury+dely)+"px";
295 |    
296 |    
297 |    
298 |  }
299 | };
300 |  
301 | </script>
302 | 
303 | </head>
304 | <body id="body" onLoad="init();">  
305 | 
306 | 
307 | 
308 | 
309 | <h2> Monkey bars</h2>
310 | 
311 | <form id="questionform" name="questionform" onSubmit="return endjigsaw();" >
312 | 
313 | <input name="submitbut" type="submit" value="       " size="30"/>
314 | 
315 | Feedback: <input name="feedback" value="   " size="11" />
316 | </form>
317 | <video id="bars" controls="controls"  preload="auto" width="800"> 
318 | 	 <source src="monkeybars.mp4" > 
319 | 	 <source src="monkeybars.webm" > 
320 |      <source src="monkeybars.ogg" > 
321 |  
322 | Your browser does not accept the video tag.
323 | </video>
324 | <img src="barsBase.png" id="base" width="800px" height="420px"/>
325 | </p>
326 | </body>
327 | </html>


--------------------------------------------------------------------------------
/ch10/monkeybars.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch10/monkeybars.mp4


--------------------------------------------------------------------------------
/ch10/monkeybars.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch10/monkeybars.ogv


--------------------------------------------------------------------------------
/ch10/monkeybars.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch10/monkeybars.webm


--------------------------------------------------------------------------------
/ch10/noodles1.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch10/noodles1.JPG


--------------------------------------------------------------------------------
/ch10/noodles2.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch10/noodles2.JPG


--------------------------------------------------------------------------------
/ch10/noodles3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch10/noodles3.jpg


--------------------------------------------------------------------------------
/ch10/noodles4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch10/noodles4.jpg


--------------------------------------------------------------------------------
/ch10/quizTabs.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>Quiz with Reward!</title>
  5 | <style>
  6 | country {position:absolute;left: 0px; top: 0px; border: 2px; border-style: double; background-color: white; margin: 5px; padding: 3px; visibility:hidden;}
  7 | 
  8 | capital {position:absolute;left: 0px; top: 0px; border: 2px; border-style: double; background-color: white; margin: 5px; padding: 3px; visibility:hidden;}
  9 | 
 10 | #vid {position:absolute; visibility:hidden; z-index: 0; max-width: 50%; height: auto;}
 11 | 
 12 | main {display:block;}
 13 | 
 14 | </style>
 15 |     <script type="text/javascript">
 16 | 	var facts = [
 17 | 	  ["China","Beijing",false],
 18 | 	  ["India","New Delhi",false],
 19 | 	  ["European Union","Brussels",false],
 20 | 	  ["United States","Washington, DC",false],
 21 | 	  ["Indonesia","Jakarta",false],
 22 | 	  ["Brazil","Brasilia",false],
 23 | 	  ["Russia","Moscow",false],
 24 | 	  ["Japan","Tokyo",false],
 25 | 	  ["Mexico","Mexico City",false],
 26 | 	  ["Germany","Berlin",false],
 27 | 	  ["Turkey","Ankara",false],
 28 | 	  ["France","Paris",false],
 29 | 	  ["United Kingdom","London",false],
 30 | 	  ["Italy","Rome",false],
 31 | 	  ["South Africa","Pretoria",false],
 32 | 	  ["South Korea","Seoul",false],
 33 | 	  ["Argentina","Buenos Aires",false],
 34 | 	  ["Canada","Ottawa",false],
 35 | 	  ["Saudi Arabia","Riyadh",false],
 36 | 	  ["Australia","Canberra",false]
 37 | 	  ];
 38 | 
 39 | 	var thingelem;
 40 | 	var nq = 4;  //number of questions asked in a game
 41 | 	var elementinmotion;
 42 | 	var makingmove = false;
 43 | 	var inbetween = 150;
 44 | 	var col1 = 0;
 45 | 	var row1;
 46 | 	var rowsize = 60;
 47 | 	var slots = new Array(nq);
 48 | 	
 49 | 
 50 | 	
 51 | function init(){
 52 |    row1= .6* window.innerHeight;
 53 |    setupgame();  
 54 | } 
 55 | 
 56 | function setupgame() {
 57 | 
 58 | 	var i;
 59 | 	var c;
 60 | 	var s;
 61 | 	var mx = col1;
 62 | 	var my = row1;
 63 | 	var d;
 64 | 	var uniqueid;
 65 | 	// mark all facts as not being used.
 66 | 	for (i=0;i<facts.length;i++) {
 67 | 		facts[i][2] = false;	
 68 | 	}
 69 | 	for (i=0;i<nq;i++) {
 70 | 		slots[i] = -100;
 71 | 	}
 72 | 	for(i=0;i<nq;i++) {
 73 | 
 74 | 		do {c = Math.floor(Math.random()*facts.length);}
 75 | 		while (facts[c][2]==true) //keep doing while a fact has been taken
 76 | 		facts[c][2]=true;  
 77 | 		uniqueid = "c"+String(c);
 78 | 		
 79 | 		d = document.createElement('country');
 80 |     	d.innerHTML = (
 81 | 	      "<country tabIndex='"+String(2+i)+"'  id='"+uniqueid+"'>country name</country>");
 82 | 		
 83 | 		document.body.appendChild(d);
 84 | 		thingelem = document.getElementById(uniqueid);
 85 | 		thingelem.textContent=facts[c][0];
 86 | 
 87 | 		thingelem.style.top = String(my)+"px";
 88 | 		thingelem.style.left = String(mx)+"px";
 89 | 		
 90 | 		
 91 | 		thingelem.addEventListener('click',pickelement,false);
 92 | 		thingelem.addEventListener('keyup',pickelement,false);
 93 | 		thingelem.style.visibility="visible";
 94 | 		//now do capital 
 95 | 		uniqueid = "p"+String(c);
 96 | 
 97 | 		d = document.createElement('capital');
 98 |     	d.innerHTML = (
 99 | 	      "<capital tabIndex='0' id='"+uniqueid+"'>capital name</capital>");  
100 | 	      //will change tabIndex
101 | 		document.body.appendChild(d);	  
102 | 		thingelem = document.getElementById(uniqueid);
103 | 		thingelem.textContent=facts[c][1];
104 | 		// put this thing in random choice from empty slots
105 | 		do {s = Math.floor(Math.random()*nq);}
106 | 		while (slots[s]>=0)   //keep doing while a slot has been taken
107 | 		slots[s]=c;  
108 | 	    thingelem.tabIndex = String(6+s);
109 | 	    
110 | 		thingelem.style.top = String(row1+s*rowsize)+"px";
111 | 		thingelem.style.left = String(col1+inbetween)+"px";
112 | 		thingelem.addEventListener('click',pickelement,false);
113 | 		thingelem.addEventListener('keyup',pickelement,false);
114 | 		thingelem.style.visibility="visible";
115 | 		my +=rowsize;
116 | 	}
117 | 	document.f.score.value = "0";
118 | 
119 | 	return false;
120 | }
121 | 
122 |  function pickelement(ev) {
123 | 
124 |  	 if (ev.keyCode ===9) {return;}
125 | 	 var thisx; 
126 | 	 var thisxn;
127 | 	 var sc;
128 | 	 if (makingmove) {
129 | 		 if (this==elementinmotion) {
130 | 			 elementinmotion.style.backgroundColor = "white";
131 | 			 makingmove = false;
132 | 			 return;
133 | 		 }
134 | 		 thisx= this.style.left; 
135 | 	 	thisx = thisx.substring(0,thisx.length-2);  //remove the px
136 | 		thisxn = Number(thisx) + 90;
137 | 		 elementinmotion.style.left = String(thisxn)+"px";
138 | 		 elementinmotion.style.top = this.style.top;
139 | 		 makingmove = false;
140 | 		 if (this.id.substring(1)==elementinmotion.id.substring(1)) {
141 | 			 elementinmotion.style.backgroundColor = "gold";
142 | 			 this.style.backgroundColor = "gold";
143 | 			 document.f.out.value = "RIGHT";
144 | 			 sc = 1+Number(document.f.score.value);
145 | 			 document.f.score.value = String(sc);
146 | 			 if (sc==nq) {
147 | 				v = document.getElementById("vid");
148 | 				v.style.top = String(row1+4*rowsize+20)+"px";
149 | 				v.style.visibility = "visible";
150 | 				v.style.zIndex="10000";
151 | 				v.play();
152 | 						 }
153 | 			 }
154 | 		 else {
155 | 			 document.f.out.value = "WRONG";
156 | 			 elementinmotion.style.backgroundColor = "white";
157 | 			 }
158 | 	 }
159 | 	 else {
160 | 		makingmove = true; 
161 | 		elementinmotion = this; 
162 | 		elementinmotion.style.backgroundColor = "tan";
163 | 	 }
164 |  }
165 | 
166 | 
167 | </script>
168 | </head>
169 | <body onLoad="init();">  
170 | <main tabIndex="1">	
171 | <h1>G20 Countries and Capitals </h1><br/>
172 | 
173 | This is a quiz for matching country and capital. There are 4 countries and 4 capitals.
174 | Click (or tab and then press enter) to pick a country or capital and then click (or tab and then press enter) on corresponding capital or country. There will be a video (with sound) 
175 | if you match all 4. 
176 | 
177 | You can tab through everything repeated times.
178 | <br/>
179 | Reload for new game.
180 | <br/>
181 | 
182 | <form name="f" >
183 | Action: <input name="out" type="text" value="RIGHT OR WRONG"/><br/>
184 | Score: <input name="score" type="text" value="0"/>
185 | </form>
186 | </main>
187 | 
188 | 
189 | <video id="vid" controls="controls"  preload="auto" width="50%" alt="Fireworks video"> 
190 | <source src="sfire3.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'> 
191 | <source src="sfire3.mp4"> 
192 | <source src="sfire3.theora.ogv" type='video/ogg; codecs="theora, vorbis"'> 
193 | 
194 | Your browser does not accept the video tag.
195 |  </video>
196 | </body>
197 | </html>


--------------------------------------------------------------------------------
/ch10/sfire3.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch10/sfire3.mp4


--------------------------------------------------------------------------------
/ch10/sfire3.theora.ogv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch10/sfire3.theora.ogv


--------------------------------------------------------------------------------
/ch10/sfire3.webmvp8.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/html-js-projs/48a8379562ead04933093ebb335d804a8d37b40f/ch10/sfire3.webmvp8.webm


--------------------------------------------------------------------------------
/ch10/uncoverNoodles.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 | <title>Reveal next</title>
  5 | <meta name="viewport"
  6 | content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" />
  7 | <meta charset="UTF-8">
  8 | <style>
  9 | body {
 10 | 	 font-family: Garamond, serif;
 11 | 	 font-size: 24px;
 12 | 	 overflow: hidden;
 13 |       }
 14 | div#images {display:none;}
 15 | </style>
 16 | 
 17 | <script>
 18 | var ctx;
 19 | var fudge = 40;
 20 | var canvas;
 21 | var pwidth;
 22 | var pheight;
 23 | var cwidth;
 24 | var cheight;
 25 | var current = 0;
 26 | var prev = 3;
 27 | var next = 1;
 28 | var rect;
 29 | var revealflag = false;
 30 | var lastdrawn;
 31 | var lasty;
 32 | var moving = false;
 33 | var canvases = [];
 34 | var fontsz = ["14px","16px","18px","20px","24px"];
 35 | 
 36 | function init() {
 37 |   var fs;
 38 |   canvas=document.getElementById("canvas");
 39 |   bodyel = document.getElementById("body");
 40 |   
 41 |   ctx = canvas.getContext("2d");
 42 |   ctx.font = "24px serif";
 43 |   cwidth = window.innerWidth;
 44 |   cheight = window.innerHeight;
 45 |   fs = Math.floor (cwidth/200);
 46 |   fs = Math.min(fs,4);
 47 |   bodyel.style.fontSize = fontsz[fs];
 48 |   canvas.width = cwidth;
 49 |   canvas.height= cheight;
 50 |   rect = canvas.getBoundingClientRect();
 51 |   var noOfImgs = document.getElementsByTagName('img').length;
 52 |   
 53 |   setupimages("noodles", noOfImgs);
 54 |   canvas.addEventListener("mousedown",startreveal,true);
 55 |   canvas.addEventListener("touchstart", touchHandler, true);
 56 |   canvas.addEventListener("touchmove", touchHandler, true);
 57 |   canvas.addEventListener("touchend", touchHandler, true);
 58 |   canvas.addEventListener("touchcancel", touchHandler, true);
 59 |   ctx.drawImage(canvases[0],0,0);
 60 |   current = 0;
 61 |   prev = 3;  //these are indexing into canvases array
 62 |   next = 1;
 63 | }
 64 | 
 65 | function setupimages (base, lim){
 66 |   var dref;
 67 |   var can;
 68 |   var canctx;
 69 |   canvases = [];  
 70 |   var img;
 71 |   dref = document.getElementById("dummy");
 72 |    
 73 |   if (dref.naturalWidth) {
 74 |        dref.width = dref.naturalWidth;
 75 |        pratio = dref.naturalHeight / dref.naturalWidth;
 76 |    }
 77 |    else {   
 78 |         pratio = dref.height /dref.width;
 79 |    }
 80 |   
 81 |    dref.width = Math.min(dref.width,cwidth-fudge);
 82 |    dref.height = pratio * dref.width;
 83 |    dref.height = Math.min(dref.height,cheight-fudge);
 84 |    dref.width = dref.height * (1/pratio);
 85 |    pwidth = dref.width;
 86 |    pheight = dref.height;
 87 |   for(var i=1;i<=lim;i++){  //names of image files use 1,2,3,4
 88 |     img = new Image();
 89 | 	  img.width = pwidth;
 90 |     img.height = pheight;
 91 |     img.src=base+String(i)+".jpg";
 92 |     can = document.createElement("canvas");
 93 |     can.width = cwidth;
 94 |     can.height = cheight;
 95 |     canctx = can.getContext('2d');
 96 |     canctx.drawImage(img,0,0,pwidth,pheight);
 97 |     canvases.push(can); 
 98 |   }
 99 | }
100 | 
101 | 
102 | function touchHandler(event)
103 | {
104 |   var touches = event.changedTouches;
105 |   if (touches.length>1) {
106 |     return false;
107 |   }
108 |   var first = touches[0];
109 |   var type = "";
110 |   switch(event.type)
111 |     {
112 |         case "touchstart": type = "mousedown"; break;
113 |         case "touchmove":  type="mousemove"; break;
114 |         case "touchend":   type="mouseup"; break;
115 |         default: return;
116 |     }
117 |  
118 |  
119 |   var simulatedEvent = new MouseEvent(type,{
120 |      //cancelable: true,
121 |      screenX: first.screenX,
122 |      screenY: first.screenY,
123 |      clientX: first.clientX,
124 |      clientY: first.clientY
125 |   });
126 | 
127 |     first.target.dispatchEvent(simulatedEvent);
128 |     event.preventDefault();
129 | }
130 | 
131 | function getCoords(ev){   
132 |     var mx;
133 |     var my;
134 |     mx = ev.clientX-rect.left;
135 |     my = ev.clientY-rect.top;
136 |     return [mx,my];
137 | }
138 | 
139 | function startreveal(ev){
140 |    var startxy = getCoords(ev);
141 |    if (startxy[0]>pwidth) return;
142 |    if (staryxy[1]>pheight) return;
143 |    lasty = Math.max(startxy[1],fudge);
144 |    canvas.addEventListener("mousemove",revealing,true);
145 |    canvas.addEventListener("mouseup",stopreveal,true);
146 |    canvas.removeEventListener("mousedown",startreveal,true);
147 |    revealflag = true;
148 |    
149 |  }
150 |  
151 |  function revealing(ev){
152 |   
153 |   var slice;
154 |   var curxy;
155 |   if (!revealflag) return;
156 |   curxy = getCoords(ev);
157 |   cury = curxy[1];
158 |  
159 |   if (moving){
160 |     if (cury>=lasty){
161 |       if (cury<(pheight-fudge)){
162 |         slice = Math.max(1,cury-lasty);  //minimum slice
163 |         ctx.drawImage(canvases[next],0,lasty,pwidth,slice,0,lasty,pwidth,slice);
164 |         lastdrawn = next;
165 |         lasty = cury;
166 |         }
167 |         else {
168 |          lastdrawn = next;
169 |          stopreveal(ev);  // ev passed to be consist with being eventhandler
170 |         }
171 |       }   //closes cury>lasty
172 |     else {
173 |       if (cury>fudge){
174 |          slice = Math.max(1,lasty-cury);  //set minimum slice
175 |          ctx.drawImage(canvases[prev],0,cury,pwidth,slice,0,cury,pwidth,slice);
176 |          lastdrawn = prev;
177 |          lasty = cury;
178 |          
179 |       }
180 |       else {
181 |          lastdrawn = prev;
182 |          stopreveal(ev);
183 |       }
184 |     }  //closes else for cury>lasty
185 |   }  //closes if moving
186 |   else {   //first move
187 |     moving = true;
188 |     if (cury>=lasty){
189 |        prev = current;
190 |         if (cury<(pheight-fudge)){
191 |         slice = Math.max(1,cury-lasty);  //set minimum slice
192 |         ctx.drawImage(canvases[next],0,lasty,pwidth,slice,0,lasty,pwidth,slice);
193 |         lastdrawn = next;
194 |         lasty = cury;
195 |         }
196 |         else {
197 |          lastdrawn = next;
198 |          stopreveal(ev);  // ev passed to be consist with being eventhandler
199 |         }
200 |       }  //closes cury>lasty for moving false
201 |     else {
202 |       next = current;
203 |       if (cury>fudge){
204 |          slice = Math.max(1,lasty-cury);  //set minimum slice
205 |          ctx.drawImage(canvases[prev],0,cury,pwidth,slice,0,cury,pwidth,slice);
206 |          lastdrawn= prev;
207 |          lasty = cury;
208 |       }
209 |       else {
210 |          lastdrawn = prev;
211 |          stopreveal(ev);
212 |       }  // closes else for if cury?fudge
213 |     }  //closes else for cury>lasty
214 |   }  //closes else for if moving
215 | }  //closes function
216 | 
217 | function stopreveal(ev) {
218 |  
219 |   revealflag = false;
220 |   moving = false;
221 |  
222 |   ctx.drawImage(canvases[lastdrawn],0,0);
223 |   current = lastdrawn;
224 |   next = current+1;
225 |   if (next==canvases.length) next = 0;
226 |   prev = current-1;
227 |   if (prev<0) prev=canvases.length-1;
228 |   canvas.removeEventListener("mousemove",revealing,true);
229 |   canvas.removeEventListener("mouseup",stopreveal,true);
230 |   canvas.addEventListener("mousedown",startreveal,true);
231 | }
232 | 
233 | </script>
234 |   <body id="body" onload="init();" onresize="init();">
235 | 
236 |     Mouse/touch down, slowly drag mouse/finger down or up the photo, then mouse/touch up.
237 |  <canvas id="canvas" width="100%" height="50%" >
238 |  	Your browser doesn't support canvas
239 |  </canvas>
240 | <div id="images">
241 |  <img src="noodles1.jpg" id="dummy"/>
242 |  <img src="noodles2.jpg">
243 |  <img src="noodles3.jpg">
244 |  <img src="noodles4.jpg">
245 |  </div>
246 |   </body>
247 |  </html>
248 | 


--------------------------------------------------------------------------------
/errata.md:
--------------------------------------------------------------------------------
 1 | # Errata for *Book Title*
 2 | 
 3 | On **page xx** [Summary of error]:
 4 |  
 5 | Details of error here. Highlight key pieces in **bold**.
 6 | 
 7 | ***
 8 | 
 9 | On **page xx** [Summary of error]:
10 |  
11 | Details of error here. Highlight key pieces in **bold**.
12 | 
13 | ***


--------------------------------------------------------------------------------