Context Navigation

index.html @ 17619

Revision 17619, 53.8 kB (checked in by amachang, 5 years ago)
ちょっとした修正
Property svn:mime-type set to `text/html`

Line
1	<!DOCTYPE html>
2	<html>
3	<head>
4	<meta charset=utf-8>
5	<title>JavaScript でテトリスみたいなゲームを作ろう！ - セキュリティ＆プログラミングキャンプ JavaScript 入門講座資料</title>
6	<style type="text/css">
7	strong {
8	font-weight: bold;
9	color: #008;
10	}
11
12	body {
13	line-height: 1.5;
14	}
15
16
17	p, address {
18	margin: 1em;
19	}
20
21	pre {
22	margin: 1em;
23	font-family: monospace;
24	padding: 1em;
25	border: gray 5px solid;
26	background: #ddd;
27	}
28
29	blockquote {
30	margin: 0.5em;
31	padding: 1em;
32	background: #ddd;
33	}
34
35	h1 {
36	font-size: 4em;
37	color: #008;
38	}
39
40	@media print {
41	strong {
42	text-decoration: underline;
43	}
44	}
45
46	h2, h3, h4, h5, h6 {
47	page-break-before: always;
48	margin-top: 2em;
49	padding-left: 0.4em;
50	border-bottom: 2px #008 solid;
51	border-left: 0.5em #008 solid;
52	}
53	</style>
54	<script type="text/javascript">
55	// <![CDATA[
56
57	function html(elm) {
58	elm = elm.parentNode;
59	while (elm = elm.previousSibling) {
60	if (elm.nodeName.toLowerCase() == 'pre') {
61	var code = elm.textContent \|\| elm.innerText;
62	var d = window.open().document;
63	d.write(code);
64	d.close();
65	break;
66	}
67	}
68	}
69	function js(elm) {
70	elm = elm.parentNode;
71	while (elm = elm.previousSibling) {
72	if (elm.nodeName.toLowerCase() == 'pre') {
73	var code = elm.textContent \|\| elm.innerText;
74	var div = document.createElement('div');
75	div.appendChild(document.createTextNode(code));
76	var codeEscaped = div.innerHTML;
77
78	var d = window.open().document;
79	d.write('\
80	<!DOCTYPE html>\n\
81	<html>\n\
82	<head>\n\
83	<meta charset=utf-8>\n\
84	<title>Sample</title>\n\
85	</head>\n\
86	<body>\n\
87	\n\
88	<pre>\n\
89	' + codeEscaped + '\n\
90	</pre>\n\
91	\n\
92	<script type="text/javascript">\n\
93	' + code + '\n\
94	</s'+'cript>\n\
95	\n\
96	</body>\n\
97	</html>');
98	d.close();
99	break;
100	}
101	}
102	}
103	window.onload = function() {
104	var elmNav = document.getElementById('nav');
105	var elmSection = document.getElementById('article');
106
107	(function(elmSection, elmList, id) {
108	var count = 1;
109	var child = elmSection.firstChild;
110	var elmSubList = document.createElement('ul');
111	elmList.appendChild(elmSubList);
112	do {
113	var tagName = child.nodeName.toLowerCase();
114	if (tagName == 'div') {
115	child.id = id + '.' + (count++);
116	var elmLi = document.createElement('li');
117	elmSubList.appendChild(elmLi);
118	var elmA = document.createElement('a');
119	elmLi.appendChild(elmA);
120	elmA.href="#" + child.id;
121	var headerTagNames = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
122	for (var i = 0; i < headerTagNames.length; i ++) {
123	var elmsHeader = child.getElementsByTagName(headerTagNames[i]);
124	if (elmsHeader.length) {
125	var elmHeader = elmsHeader[0];
126
127	var elmPToc = document.createElement('p')
128	var elmAToc = document.createElement('a');
129	elmAToc.innerHTML = '目次へ戻る';
130	elmAToc.href = "#nav";
131	elmPToc.appendChild(elmAToc);
132	elmHeader.parentNode.parentNode.insertBefore(elmPToc, elmHeader.parentNode);
133
134	elmA.appendChild(document.createTextNode(child.id.replace(/^section\./, '') + ' '));
135	elmA.appendChild(document.createTextNode(elmHeader.firstChild.nodeValue));
136	elmHeader.insertBefore(document.createTextNode(child.id.replace(/^section\./, '') + ' '), elmHeader.firstChild);
137	break;
138	}
139	}
140	arguments.callee(child, elmSubList, child.id);
141	}
142	} while(child = child.nextSibling);
143	})(elmSection, elmNav, 'section');
144	};
145	// ]]>
146	</script>
147	</head>
148	<body>
149	<div id="header">
150	<h1>JavaScript でテトリスみたいなゲームを作ろう！</h1>
151	<address>
152	Author: amachang <<a href="mailto:seijro@gmail.com">seijro@gmail.com</a>><br />
153	Weblog: <a href="http://d.hatena.ne.jp/amachang/">http://d.hatena.ne.jp/amachang/</a>
154	</address>
155	</div>
156
157	<div id="nav">
158	<h2>目次</h2>
159	<!-- Auto generation -->
160	</div>
161
162	<div id="article">
163	<div>
164	<h2>HTML とは</h2>
165	<p>
166	HTML とは、誤解を恐れずに言ってしまうとウェブページ（ホームページ）を作るために使われている言語です。
167	例えば、以下のようなものが HTML です。
168	</p>
169
170	<pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
171	"http://www.w3.org/TR/html4/strict.dtd">
172	<html lang="ja">
173	<head>
174	<title>タイトル</title>
175	</head>
176	<body>
177
178	<h1>見出し</h1>
179	<p>
180	本文本文本文本文本文本文本文本文本文本文本文本文本文本文
181	本文本文<a href="hoge.html">ハイパーリンク</a>本文
182	本文本文本文本文本文本文本文本文本文本文本文本文本文本文
183	</p>
184	</body>
185
186	</html></code></pre>
187	<p>
188	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
189	</p>
190	<p>
191	イメージ湧きましたか？
192	</p>
193	<p>
194	では、何故 HTML というものが必要なのでしょうか。
195	言い方を変えると「シンプルテキストとの違いは？」なんなのでしょうか。
196	それは、二つあります。
197	</p>
198	<ul>
199	<li>ハイパーリンクを張ることができる</li>
200	<li>文章を構造化することができる</li>
201	</ul>
202	<div>
203	<h3>ハイパーリンクとは</h3>
204	<p>
205	ハイパーリンクとは<a href=".">こういったテキストのこと</a>、つまり単語をポチっと押して別の文章に飛ぶ仕組みです。
206	</p>
207	<p>
208	ハイパーテキスト以前の文章では、関連する事柄を知りたいときに、
209	その文章に付属する参考文献の章などを調べなければいけませんでした。
210	それがあたりまえだったのです。
211	ハイパーリンクはとてつもなく画期的な仕組みだったのです。
212	</p>
213	<p>
214	また、文章中にハイパーリンクを含んだ文章を、ハイパーテキストといいます。
215	HyperText Markup Language というのは、元々そういう意味だったんですね。
216	</p>
217	<p>
218	以下に、ハイパーリンクを張っている HTML の例を示します。
219	</p>
220	<pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><title>タイトル</title></head><body>
221
222	<p>
223	<a href="programming.html">プログラミング</a>ってどんなことだと思いますか？
224	一番想像しやすい例をあげると、「ゲームを作る作業」は
225	<a href="programming.html">プログラミング</a>ですよね。
226	そんなイメージありませんか？
227	僕も、最初に「<a href="programming.html">プログラミング</a>ってどんなこと？」で想像したのは
228	「ゲームとか<a href="excel.html">エクセル</a>みたいなのを作ること！」でした。
229	</p>
230
231	</body></html></code></pre>
232	<p>
233	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
234	</p>
235	<p>
236	簡単ですね！
237	</p>
238	</div>
239	<div>
240	<h3>文章を構造化するとは</h3>
241	<p>
242	文章を構造化するとは、段落や見出しなどの「テキストの文章内における役割」を文章中に持たせることです。
243	</p>
244	<p>
245	たとえば、以下のような文章があったとします。
246	</p>
247	<pre><code> 今日買ったもの
248
249	今日買ったものは、以下の通りです。
250
251	- りんご
252	- みかん
253	- にんじん</code></pre>
254	<p>
255	もし、この文章を見たのが人間ならば、どこが見出しで、どこが段落で、どこが箇条書きかなどの文章の構造が分かると思います。
256	しかし、それは機械からは分かりません。
257	</p>
258	<p>
259	インターネット上に置いた文章は、人間だけが読むものではありません。
260	検索エンジンなど、様々なプログラムがインターネット上に置いた文章を読む可能性があります。
261	</p>
262	<p>
263	では、この文章を HTML を使って構造化してみましょう。
264	</p>
265	<pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
266	<html lang="ja">
267	<head>
268	<title>今日買ったもの</title>
269	</head>
270	<body>
271	<h1>今日買ったもの</h1>
272	<p>
273	今日買ったものは、以下の通りです。
274	</p>
275	<ul>
276	<li>りんご</li>
277	<li>みかん</li>
278	<li>にんじん</li>
279	</ul>
280	</body>
281	</html></code></pre>
282	<p>
283	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
284	</p>
285	<p>
286	簡単ですね！
287	</p>
288	</div>
289
290	<div>
291	<h3>HTML の様々な仕様</h3>
292	<p>
293	HTML の仕様には、以下のように様々なものがあります。
294	</p>
295	<ul>
296	<li><a href="http://www.w3.org/TR/html401/">HTML 4.01</a></li>
297	<li><a href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a></li>
298	<li><a href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a></li>
299	<li><a href="http://www.w3.org/TR/xhtml2/">XHTML 2.0</a></li>
300	<li><a href="http://whatwg.org/html5">HTML5</a></li>
301	<li>その他多数</li>
302	</ul>
303	<p>
304	「どの仕様が正しい」ということはないですが、最近では HTML 4.01 や XHTML 1.0 や XHTML 1.1 が使われることが多いです。
305	なお、この講座では以降 HTML5 という策定中の仕様を使います。
306	</p>
307	</div>
308	</div>
309
310	<div>
311	<h2>JavaScript とは</h2>
312	<p>
313	JavaScript とは、「HTML に動きを付けるためのプログラミング言語」です。
314	今では Opera, Firefox, Safari, IE で JavaScript （または、 JavaScript 互換）の言語を使うことができます。
315	</p>
316	<p>
317	JavaScript は、 script 要素の中（<script type="text/javascript"> と </script>の間）に記述します。
318	特に head 要素の中に書く必要はありませんが、慣例的に head 要素の中に書かれることが多いです。
319	</p>
320	<pre><code><!DOCTYPE html>
321	<html>
322	<head>
323	<meta charset=utf-8>
324	<title>Sample</title>
325
326	<strong><script type="text/javascript"></strong>
327	<strong>alert("Hello, world!");</strong>
328	<strong></script></strong>
329
330	</head>
331	<body>
332	<p>Hello, world!</p>
333	</body>
334	</html></code></pre>
335	<p>
336	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
337	</p>
338	<p>
339	動きましたか？ alert( ... ) の中に書いた値が表示されたんですね！
340	なんとなく分かった感じになってください！
341	</p>
342	</div>
343
344	<div>
345	<h2>JavaScript で HTML を書き換えてみよう(1)</h2>
346	<pre><code><!DOCTYPE html>
347	<html>
348	<head>
349	<meta charset=utf-8>
350	<title>Sample</title>
351	<script type="text/javascript">
352
353	<strong>function main() {</strong>
354	<strong>var elm = document.getElementById("target");</strong>
355	<strong>elm.innerHTML = "Hello, <strong>JavaScript!</strong>";</strong>
356	<strong>}</strong>
357
358	</script>
359	</head>
360
361	<body <strong>onload="main()"</strong>>
362	<p <strong>id="target"</strong>>Hello, world!</p>
363	</body>
364	</html></code></pre>
365	<p>
366	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
367	</p>
368	</div>
369
370	<div>
371	<h2>JavaScript で HTML を書き換えてみよう(2)</h2>
372	<pre><code><!DOCTYPE html>
373	<html>
374	<head>
375	<meta charset=utf-8>
376	<title>Sample</title>
377	<script type="text/javascript">
378
379	function main() {
380	var elm = document.getElementById('target');
381	elm.innerHTML = 'Hello, <strong>JavaScript!</strong>';
382	}
383
384	</script>
385	</head>
386
387	<strong><body></strong>
388	<p id="target">Hello, world!</p>
389	<strong><input type="button" value="click" onclick="main()" /></strong>
390	</body>
391	</html></code></pre>
392	<p>
393	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
394	</p>
395	</div>
396
397	<div>
398	<h2>足し算をやってみよう！</h2>
399	<pre><code><!DOCTYPE html>
400	<html>
401	<head>
402	<meta charset=utf-8>
403	<title>Sample</title>
404	<script type="text/javascript">
405
406	function main() {
407	var elmTarget = document.getElementById('target');
408	<strong>var elmValue0 = document.getElementById('value0');</strong>
409	<strong>var elmValue1 = document.getElementById('value1');</strong>
410
411	elmTarget.innerHTML = <strong>parseInt(elmValue0.value)</strong> +
412	<strong>parseInt(elmValue1.value);</strong>
413	}
414
415	</script>
416	</head>
417
418	<body>
419	<p id="target">Hello, world!</p>
420	<strong><input id="value0" type="text" value="100" /></strong>
421	<strong>+</strong>
422	<strong><input id="value1" type="text" value="200" /></strong>
423	<input type="button" value="click" onclick="main()" />
424	</body>
425	</html></code></pre>
426	<p>
427	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
428	</p>
429	</div>
430
431	<div>
432	<h2>四角を書いてみよう</h2>
433	<pre><code><!DOCTYPE html>
434	<html>
435	<head>
436	<meta charset=utf-8>
437	<title>Sample</title>
438	<script type="text/javascript">
439
440	function main() {
441	var elmTarget = document.getElementById('target');
442	<strong>var ctx = elmTarget.getContext('2d');</strong>
443
444	<strong>ctx.fillStyle = 'rgb(255, 0, 0)';</strong>
445	<strong>ctx.fillRect(0, 0, 20, 20);</strong>
446	}
447
448	</script>
449	</head>
450
451	<body>
452	<strong><canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas></strong>
453	<input type="button" value="click" onclick="main()" />
454	</body>
455	</html></code></pre>
456	<p>
457	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
458	</p>
459	</div>
460	<div>
461	<h2>四角を書いたり消したりしてみよう！</h2>
462	<pre><code><!DOCTYPE html>
463	<html>
464	<head>
465	<meta charset=utf-8>
466	<title>Sample</title>
467	<script type="text/javascript">
468	<strong>var ctx;</strong>
469
470	<strong>function load() {</strong>
471	var elmTarget = document.getElementById('target');
472	ctx = elmTarget.getContext('2d');
473	ctx.fillStyle = 'rgb(255, 0, 0)';
474	<strong>}</strong>
475
476	<strong>function paint() {</strong>
477	ctx.fillRect(10, 10, 20, 20);
478	<strong>}</strong>
479
480	<strong>function clean() {</strong>
481	<strong>ctx.clearRect(0, 0, 200, 400);</strong>
482	<strong>}</strong>
483	</script>
484	</head>
485
486	<body <strong>onload="load()"</strong>>
487	<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
488	<input type="button" value="paint" <strong>onclick="paint()"</strong> />
489	<input type="button" value="clear" <strong>onclick="clean()"</strong> />
490	</body>
491	</html></code></pre>
492	<p>
493	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
494	</p>
495	</div>
496
497	<div>
498	<h2>配列をブロックに変換してみよう</h2>
499	<pre><code><!DOCTYPE html>
500	<html>
501	<head>
502	<meta charset=utf-8>
503	<title>Sample</title>
504	<script type="text/javascript">
505	var ctx;
506	<strong>var block = [</strong>
507	<strong>[1,1],</strong>
508	<strong>[0,1],</strong>
509	<strong>[0,1]</strong>
510	<strong>];</strong>
511
512	function load() {
513	var elmTarget = document.getElementById('target');
514	ctx = elmTarget.getContext('2d');
515	ctx.fillStyle = 'rgb(255, 0, 0)';
516	}
517
518	function paint() {
519	<strong>for (var y = 0; y < block.length; y ++) {</strong>
520	<strong>for (var x = 0; x < block[y].length; x ++) {</strong>
521	<strong>if (block[y][x]) {</strong>
522	<strong>ctx.fillRect(x * 20, y * 20, 20, 20);</strong>
523	<strong>}</strong>
524	<strong>}</strong>
525	<strong>}</strong>
526	}
527
528	function clean() {
529	ctx.clearRect(0, 0, 200, 400);
530	}
531	</script>
532	</head>
533
534	<body onload="load()">
535	<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
536	<input type="button" value="paint" onclick="paint()" />
537	<input type="button" value="clear" onclick="clean()" />
538	</body>
539	</html></code></pre>
540	<p>
541	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
542	</p>
543	</div>
544
545	<div>
546	<h2>ブロックを動かしてみよう</h2>
547	<pre><code><!DOCTYPE html>
548	<html>
549	<head>
550	<meta charset=utf-8>
551	<title>Sample</title>
552	<script type="text/javascript">
553	var ctx;
554	var block = [
555	[1,1],
556	[0,1],
557	[0,1]
558	];
559	<strong>var posx = 0, posy = 0;</strong>
560
561	function load() {
562	var elmTarget = document.getElementById('target');
563	ctx = elmTarget.getContext('2d');
564	ctx.fillStyle = 'rgb(255, 0, 0)';
565	}
566
567	function paint() {
568	<strong>ctx.clearRect(0, 0, 200, 400);</strong>
569	for (var y = 0; y < block.length; y ++) {
570	for (var x = 0; x < block[y].length; x ++) {
571	if (block[y][x]) {
572	ctx.fillRect(<strong>(x + posx)</strong> * 20, <strong>(y + posy)</strong> * 20, 20, 20);
573	}
574	}
575	}
576	<strong>posy = posy + 1;</strong>
577	}
578	</script>
579	</head>
580
581	<body onload="load()">
582	<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
583	<strong><input type="button" value="paint" onclick="paint()" /></strong>
584	</body>
585	</html></code></pre>
586	<p>
587	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
588	</p>
589	</div>
590
591	<div>
592	<h2>ブロックを自動で動かしてみよう</h2>
593	<pre><code><!DOCTYPE html>
594	<html>
595	<head>
596	<meta charset=utf-8>
597	<title>Sample</title>
598	<script type="text/javascript">
599	var ctx;
600	var block = [
601	[1,1],
602	[0,1],
603	[0,1]
604	];
605	var posx = 0, posy = 0;
606
607	function load() {
608	var elmTarget = document.getElementById('target');
609	ctx = elmTarget.getContext('2d');
610	ctx.fillStyle = 'rgb(255, 0, 0)';
611
612	<strong>setInterval(paint, 200);</strong>
613	}
614
615	function paint() {
616	ctx.clearRect(0, 0, 200, 400);
617	for (var y = 0; y < block.length; y ++) {
618	for (var x = 0; x < block[y].length; x ++) {
619	if (block[y][x]) {
620	ctx.fillRect((x + posx) * 20, (y + posy) * 20, 20, 20);
621	}
622	}
623	}
624	posy = posy + 1;
625	}
626	</script>
627	</head>
628
629	<body onload="load()">
630	<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
631	</body>
632	</html></code></pre>
633	<p>
634	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
635	</p>
636	</div>
637
638	<div>
639	<h2>配列の描画を関数にする</h2>
640	<pre><code><!DOCTYPE html>
641	<html>
642	<head>
643	<meta charset=utf-8>
644	<title>Sample</title>
645	<script type="text/javascript">
646	var ctx;
647	var block = [
648	[1,1],
649	[0,1],
650	[0,1]
651	];
652	var posx = 0, posy = 0;
653
654	function load() {
655	var elmTarget = document.getElementById('target');
656	ctx = elmTarget.getContext('2d');
657	ctx.fillStyle = 'rgb(255, 0, 0)';
658
659	setInterval(paint, 200);
660	}
661
662	<strong>function paintMatrix(matrix, offsetx, offsety) {</strong>
663	for (var y = 0; y < <strong>matrix</strong>.length; y ++) {
664	for (var x = 0; x < <strong>matrix</strong>[y].length; x ++) {
665	if (<strong>matrix</strong>[y][x]) {
666	ctx.fillRect((x + <strong>offsetx</strong>) * 20, (y + <strong>offsety</strong>) * 20, 20, 20);
667	}
668	}
669	}
670	<strong>}</strong>
671
672	function paint() {
673	ctx.clearRect(0, 0, 200, 400);
674	<strong>paintMatrix(block, posx, posy);</strong>
675	posy = posy + 1;
676	}
677	</script>
678	</head>
679
680	<body onload="load()">
681	<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
682	</body>
683	</html></code></pre>
684	<p>
685	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
686	</p>
687	</div>
688
689	<div>
690	<h2>全体のエリアの配列を作る</h2>
691	<pre><code><!DOCTYPE html>
692	<html>
693	<head>
694	<meta charset=utf-8>
695	<title>Sample</title>
696	<script type="text/javascript">
697	var ctx;
698	var block = [
699	[1,1],
700	[0,1],
701	[0,1]
702	];
703	var posx = 0, posy = 0;
704	<strong>var map, mapWidth = 10, mapHeight = 20;</strong>
705
706	function load() {
707	var elmTarget = document.getElementById('target');
708	ctx = elmTarget.getContext('2d');
709
710	<strong>map = [];</strong>
711	<strong>for (var y = 0; y < mapHeight; y++) {</strong>
712	<strong>map[y] = [];</strong>
713	<strong>for (var x = 0; x < mapWidth; x++) {</strong>
714	<strong>map[y][x] = 0;</strong>
715	<strong>}</strong>
716	<strong>}</strong>
717
718	setInterval(paint, 200);
719	}
720
721	function paintMatrix(matrix, offsetx, offsety<strong>, color</strong>) {
722	<strong>ctx.fillStyle = color;</strong>
723	for (var y = 0; y < matrix.length; y ++) {
724	for (var x = 0; x < matrix[y].length; x ++) {
725	if (matrix[y][x]) {
726	ctx.fillRect((x + offsetx) * 20, (y + offsety) * 20, 20, 20);
727	}
728	}
729	}
730	}
731
732	function paint() {
733	ctx.clearRect(0, 0, 200, 400);
734	<strong>paintMatrix(map, 0, 0, 'rgb(128, 128, 128)');</strong>
735	paintMatrix(block, posx, posy, <strong>'rgb(255, 0, 0)'</strong>);
736	posy = posy + 1;
737	}
738	</script>
739	</head>
740
741	<body onload="load()">
742	<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
743	</body>
744	</html></code></pre>
745	<p>
746	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
747	</p>
748	</div>
749
750	<div>
751	<h2>ブロックがエリアに溜まるようにする</h2>
752	<pre><code><!DOCTYPE html>
753	<html>
754	<head>
755	<meta charset=utf-8>
756	<title>Sample</title>
757	<script type="text/javascript">
758	var ctx;
759	var block = [
760	[1,1],
761	[0,1],
762	[0,1]
763	];
764	var posx = 0, posy = 0;
765	var map, mapWidth = 10, mapHeight = 20;
766
767	function load() {
768	var elmTarget = document.getElementById('target');
769	ctx = elmTarget.getContext('2d');
770
771	map = [];
772	for (var y = 0; y < mapHeight; y++) {
773	map[y] = [];
774	for (var x = 0; x < mapWidth; x++) {
775	map[y][x] = 0;
776	}
777	}
778	setInterval(paint, 200);
779	}
780
781	function paintMatrix(matrix, offsetx, offsety, color) {
782	ctx.fillStyle = color;
783	for (var y = 0; y < matrix.length; y ++) {
784	for (var x = 0; x < matrix[y].length; x ++) {
785	if (matrix[y][x]) {
786	ctx.fillRect((x + offsetx) * 20, (y + offsety) * 20, 20, 20);
787	}
788	}
789	}
790	}
791
792	<strong>function check(map, block, offsetx, offsety) {</strong>
793	<strong>if (offsetx < 0 \|\| offsety < 0 \|\|</strong>
794	<strong>mapHeight < offsety + block.length \|\|</strong>
795	<strong>mapWidth < offsetx + block[0].length) {</strong>
796	<strong>return false;;</strong>
797	<strong>}</strong>
798	<strong>for (var y = 0; y < block.length; y ++) {</strong>
799	<strong>for (var x = 0; x < block[y].length; x ++) {</strong>
800	<strong>if (block[y][x] && map[y + offsety][x + offsetx]) { </strong>
801	<strong>return false;</strong>
802	<strong>}</strong>
803	<strong>}</strong>
804	<strong>}</strong>
805	<strong>return true;</strong>
806	<strong>}</strong>
807	<strong></strong>
808	<strong>function mergeMatrix(map, block, offsetx, offsety) {</strong>
809	<strong>for (var y = 0; y < mapHeight; y ++) {</strong>
810	<strong>for (var x = 0; x < mapWidth; x ++) {</strong>
811	<strong>if (block[y - offsety] && block[y - offsety][x - offsetx]) {</strong>
812	<strong>map[y][x]++;</strong>
813	<strong>}</strong>
814	<strong>}</strong>
815	<strong>}</strong>
816	<strong>}</strong>
817
818	function paint() {
819	ctx.clearRect(0, 0, 200, 400);
820	paintMatrix(map, 0, 0, 'rgb(128, 128, 128)');
821	paintMatrix(block, posx, posy, 'rgb(255, 0, 0)');
822
823	if (<strong>check(map, block, posx, posy + 1)</strong>) {
824	posy = posy + 1;
825	}
826	else {
827	<strong>mergeMatrix(map, block, posx, posy);</strong>
828	<strong>posx = 0; posy = 0;</strong>
829	}
830	}
831	</script>
832	</head>
833
834	<body onload="load()">
835	<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
836	</body>
837	</html></code></pre>
838	<p>
839	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
840	</p>
841	</div>
842
843	<div>
844	<h2>左右下に動かす</h2>
845	<pre><code><!DOCTYPE html>
846	<html>
847	<head>
848	<meta charset=utf-8>
849	<title>Sample</title>
850	<script type="text/javascript">
851	var ctx;
852	var block = [
853	[1,1],
854	[0,1],
855	[0,1]
856	];
857	var posx = 0, posy = 0;
858	var map, mapWidth = 10, mapHeight = 20;
859
860	function load() {
861	var elmTarget = document.getElementById('target');
862	ctx = elmTarget.getContext('2d');
863
864	map = [];
865	for (var y = 0; y < mapHeight; y++) {
866	map[y] = [];
867	for (var x = 0; x < mapWidth; x++) {
868	map[y][x] = 0;
869	}
870	}
871	setInterval(paint, 200);
872	}
873
874	function paintMatrix(matrix, offsetx, offsety, color) {
875	ctx.fillStyle = color;
876	for (var y = 0; y < matrix.length; y ++) {
877	for (var x = 0; x < matrix[y].length; x ++) {
878	if (matrix[y][x]) {
879	ctx.fillRect((x + offsetx) * 20, (y + offsety) * 20, 20, 20);
880	}
881	}
882	}
883	}
884
885	function check(map, block, offsetx, offsety) {
886	if (offsetx < 0 \|\| offsety < 0 \|\|
887	mapHeight < offsety + block.length \|\|
888	mapWidth < offsetx + block[0].length) {
889	return false;;
890	}
891	for (var y = 0; y < block.length; y ++) {
892	for (var x = 0; x < block[y].length; x ++) {
893	if (block[y][x] && map[y + offsety][x + offsetx]) {
894	return false;
895	}
896	}
897	}
898	return true;
899	}
900
901	function mergeMatrix(map, block, offsetx, offsety) {
902	for (var y = 0; y < mapHeight; y ++) {
903	for (var x = 0; x < mapWidth; x ++) {
904	if (block[y - offsety] && block[y - offsety][x - offsetx]) {
905	map[y][x]++;
906	}
907	}
908	}
909	}
910
911	function paint() {
912	ctx.clearRect(0, 0, 200, 400);
913	paintMatrix(block, posx, posy, 'rgb(255, 0, 0)');
914	paintMatrix(map, 0, 0, 'rgb(128, 128, 128)');
915
916	if (check(map, block, posx, posy + 1)) {
917	posy = posy + 1;
918	}
919	else {
920	mergeMatrix(map, block, posx, posy);
921	posx = 0; posy = 0;
922	}
923	}
924
925	<strong>function key(keyCode) {</strong>
926	<strong>switch (keyCode) {</strong>
927	<strong>case 39:</strong>
928	<strong>if (!check(map, block, posx + 1, posy)) {</strong>
929	<strong>return;</strong>
930	<strong>}</strong>
931	<strong>posx = posx + 1;</strong>
932	<strong>break;</strong>
933	<strong>case 37:</strong>
934	<strong>if (!check(map, block, posx - 1, posy)) {</strong>
935	<strong>return;</strong>
936	<strong>}</strong>
937	<strong>posx = posx - 1;</strong>
938	<strong>break;</strong>
939	<strong>case 40:</strong>
940	<strong>var y = posy;</strong>
941	<strong>while (check(map, block, posx, y)) { y++; }</strong>
942	<strong>posy = y - 1;</strong>
943	<strong>break;</strong>
944	<strong>default:</strong>
945	<strong>return;</strong>
946	<strong>}</strong>
947	<strong>ctx.clearRect(0, 0, 200, 400);</strong>
948	<strong>paintMatrix(block, posx, posy, 'rgb(255, 0, 0)');</strong>
949	<strong>paintMatrix(map, 0, 0, 'rgb(128, 128, 128)');</strong>
950	<strong>}</strong>
951
952	</script>
953	</head>
954
955	<body onload="load()" <strong>onkeydown="key(event.keyCode)"</strong>>
956	<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
957	</body>
958	</html></code></pre>
959	<p>
960	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
961	</p>
962	</div>
963
964	<div>
965	<h2>回転させる</h2>
966	<pre><code><!DOCTYPE html>
967	<html>
968	<head>
969	<meta charset=utf-8>
970	<title>Sample</title>
971	<script type="text/javascript">
972	var ctx;
973	var block = [
974	[1,1],
975	[0,1],
976	[0,1]
977	];
978	var posx = 0, posy = 0;
979	var map, mapWidth = 10, mapHeight = 20;
980
981	function load() {
982	var elmTarget = document.getElementById('target');
983	ctx = elmTarget.getContext('2d');
984
985	map = [];
986	for (var y = 0; y < mapHeight; y++) {
987	map[y] = [];
988	for (var x = 0; x < mapWidth; x++) {
989	map[y][x] = 0;
990	}
991	}
992	setInterval(paint, 200);
993	}
994
995	function paintMatrix(matrix, offsetx, offsety, color) {
996	ctx.fillStyle = color;
997	for (var y = 0; y < matrix.length; y ++) {
998	for (var x = 0; x < matrix[y].length; x ++) {
999	if (matrix[y][x]) {
1000	ctx.fillRect((x + offsetx) * 20, (y + offsety) * 20, 20, 20);
1001	}
1002	}
1003	}
1004	}
1005
1006	function check(map, block, offsetx, offsety) {
1007	if (offsetx < 0 \|\| offsety < 0 \|\|
1008	mapHeight < offsety + block.length \|\|
1009	mapWidth < offsetx + block[0].length) {
1010	return false;;
1011	}
1012	for (var y = 0; y < block.length; y ++) {
1013	for (var x = 0; x < block[y].length; x ++) {
1014	if (block[y][x] && map[y + offsety][x + offsetx]) {
1015	return false;
1016	}
1017	}
1018	}
1019	return true;
1020	}
1021
1022	function mergeMatrix(map, block, offsetx, offsety) {
1023	for (var y = 0; y < mapHeight; y ++) {
1024	for (var x = 0; x < mapWidth; x ++) {
1025	if (block[y - offsety] && block[y - offsety][x - offsetx]) {
1026	map[y][x]++;
1027	}
1028	}
1029	}
1030	}
1031
1032	function paint() {
1033	ctx.clearRect(0, 0, 200, 400);
1034	paintMatrix(block, posx, posy, 'rgb(255, 0, 0)');
1035	paintMatrix(map, 0, 0, 'rgb(128, 128, 128)');
1036
1037	if (check(map, block, posx, posy + 1)) {
1038	posy = posy + 1;
1039	}
1040	else {
1041	mergeMatrix(map, block, posx, posy);
1042	posx = 0; posy = 0;
1043	}
1044	}
1045
1046	<strong>function rotate(block) {</strong>
1047	<strong>var rotated = [];</strong>
1048	<strong>for (var x = 0; x < block[0].length; x ++) {</strong>
1049	<strong>rotated[x] = [];</strong>
1050	<strong>for (var y = 0; y < block.length; y ++) {</strong>
1051	<strong>rotated[x][block.length - y - 1] = block[y][x];</strong>
1052	<strong>}</strong>
1053	<strong>}</strong>
1054	<strong>return rotated;</strong>
1055	<strong>}</strong>
1056
1057	function key(keyCode) {
1058	switch (keyCode) {
1059	<strong>case 38:</strong>
1060	<strong>if (!check(map, rotate(block), posx, posy)) {</strong>
1061	<strong>return;</strong>
1062	<strong>}</strong>
1063	<strong>block = rotate(block);</strong>
1064	<strong>break;</strong>
1065	case 39:
1066	if (!check(map, block, posx + 1, posy)) {
1067	return;
1068	}
1069	posx = posx + 1;
1070	break;
1071	case 37:
1072	if (!check(map, block, posx - 1, posy)) {
1073	return;
1074	}
1075	posx = posx - 1;
1076	break;
1077	case 40:
1078	var y = posy;
1079	while (check(map, block, posx, y)) { y++; }
1080	posy = y - 1;
1081	break;
1082	default:
1083	return;
1084	}
1085	ctx.clearRect(0, 0, 200, 400);
1086	paintMatrix(block, posx, posy, 'rgb(255, 0, 0)');
1087	paintMatrix(map, 0, 0, 'rgb(128, 128, 128)');
1088	}
1089
1090	</script>
1091	</head>
1092
1093	<body onload="load()" onkeydown="key(event.keyCode)">
1094	<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
1095	</body>
1096	</html></code></pre>
1097	<p>
1098	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
1099	</p>
1100	</div>
1101
1102	<div>
1103	<h2>揃ったら消す</h2>
1104	<pre><code><!DOCTYPE html>
1105	<html>
1106	<head>
1107	<meta charset=utf-8>
1108	<title>Sample</title>
1109	<script type="text/javascript">
1110	var ctx;
1111	var block = [
1112	[1,1],
1113	[0,1],
1114	[0,1]
1115	];
1116	var posx = 0, posy = 0;
1117	var map, mapWidth = 10, mapHeight = 20;
1118
1119	function load() {
1120	var elmTarget = document.getElementById('target');
1121	ctx = elmTarget.getContext('2d');
1122
1123	map = [];
1124	for (var y = 0; y < mapHeight; y++) {
1125	map[y] = [];
1126	for (var x = 0; x < mapWidth; x++) {
1127	map[y][x] = 0;
1128	}
1129	}
1130	setInterval(paint, 200);
1131	}
1132
1133	function paintMatrix(matrix, offsetx, offsety, color) {
1134	ctx.fillStyle = color;
1135	for (var y = 0; y < matrix.length; y ++) {
1136	for (var x = 0; x < matrix[y].length; x ++) {
1137	if (matrix[y][x]) {
1138	ctx.fillRect((x + offsetx) * 20, (y + offsety) * 20, 20, 20);
1139	}
1140	}
1141	}
1142	}
1143
1144	function check(map, block, offsetx, offsety) {
1145	if (offsetx < 0 \|\| offsety < 0 \|\|
1146	mapHeight < offsety + block.length \|\|
1147	mapWidth < offsetx + block[0].length) {
1148	return false;;
1149	}
1150	for (var y = 0; y < block.length; y ++) {
1151	for (var x = 0; x < block[y].length; x ++) {
1152	if (block[y][x] && map[y + offsety][x + offsetx]) {
1153	return false;
1154	}
1155	}
1156	}
1157	return true;
1158	}
1159
1160	function mergeMatrix(map, block, offsetx, offsety) {
1161	for (var y = 0; y < mapHeight; y ++) {
1162	for (var x = 0; x < mapWidth; x ++) {
1163	if (block[y - offsety] && block[y - offsety][x - offsetx]) {
1164	map[y][x]++;
1165	}
1166	}
1167	}
1168	}
1169
1170	<strong>function clearRows(map) {</strong>
1171	<strong>for (var y = 0; y < mapHeight; y ++) {</strong>
1172	<strong>var full = true;</strong>
1173	<strong>for (var x = 0; x < mapWidth; x ++) {</strong>
1174	<strong>if (!map[y][x]) {</strong>
1175	<strong>full = false;</strong>
1176	<strong>}</strong>
1177	<strong>}</strong>
1178	<strong>if (full) {</strong>
1179	<strong>map.splice(y, 1);</strong>
1180	<strong>var newRow = [];</strong>
1181	<strong>for (var i = 0; i < mapWidth; i ++) {</strong>
1182	<strong>newRow[i] = 0;</strong>
1183	<strong>}</strong>
1184	<strong>map.unshift(newRow);</strong>
1185	<strong>}</strong>
1186	<strong>}</strong>
1187	<strong>}</strong>
1188
1189	function paint() {
1190	ctx.clearRect(0, 0, 200, 400);
1191	paintMatrix(block, posx, posy, 'rgb(255, 0, 0)');
1192	paintMatrix(map, 0, 0, 'rgb(128, 128, 128)');
1193
1194	if (check(map, block, posx, posy + 1)) {
1195	posy = posy + 1;
1196	}
1197	else {
1198	mergeMatrix(map, block, posx, posy);
1199	<strong>clearRows(map);</strong>
1200	posx = 0; posy = 0;
1201	}
1202	}
1203
1204	function rotate(block) {
1205	var rotated = [];
1206	for (var x = 0; x < block[0].length; x ++) {
1207	rotated[x] = [];
1208	for (var y = 0; y < block.length; y ++) {
1209	rotated[x][block.length - y - 1] = block[y][x];
1210	}
1211	}
1212	return rotated;
1213	}
1214
1215	function key(keyCode) {
1216	switch (keyCode) {
1217	case 38:
1218	if (!check(map, rotate(block), posx, posy)) {
1219	return;
1220	}
1221	block = rotate(block);
1222	break;
1223	case 39:
1224	if (!check(map, block, posx + 1, posy)) {
1225	return;
1226	}
1227	posx = posx + 1;
1228	break;
1229	case 37:
1230	if (!check(map, block, posx - 1, posy)) {
1231	return;
1232	}
1233	posx = posx - 1;
1234	break;
1235	case 40:
1236	var y = posy;
1237	while (check(map, block, posx, y)) { y++; }
1238	posy = y - 1;
1239	break;
1240	default:
1241	return;
1242	}
1243	ctx.clearRect(0, 0, 200, 400);
1244	paintMatrix(block, posx, posy, 'rgb(255, 0, 0)');
1245	paintMatrix(map, 0, 0, 'rgb(128, 128, 128)');
1246	}
1247
1248	</script>
1249	</head>
1250
1251	<body onload="load()" onkeydown="key(event.keyCode)">
1252	<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
1253	</body>
1254	</html></code></pre>
1255	<p>
1256	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
1257	</p>
1258	</div>
1259
1260	<div>
1261	<h2>ランダムなブロックを出す</h2>
1262	<pre><code><!DOCTYPE html>
1263	<html>
1264	<head>
1265	<meta charset=utf-8>
1266	<title>Sample</title>
1267	<script type="text/javascript">
1268	var ctx;
1269	<strong>var blocks = [</strong>
1270	<strong>[</strong>
1271	<strong>[1,1],</strong>
1272	<strong>[0,1],</strong>
1273	<strong>[0,1]</strong>
1274	<strong>],</strong>
1275	<strong>[</strong>
1276	<strong>[1,1],</strong>
1277	<strong>[1,0],</strong>
1278	<strong>[1,0]</strong>
1279	<strong>],</strong>
1280	<strong>[</strong>
1281	<strong>[1,1],</strong>
1282	<strong>[1,1]</strong>
1283	<strong>],</strong>
1284	<strong>[</strong>
1285	<strong>[1,0],</strong>
1286	<strong>[1,1],</strong>
1287	<strong>[1,0]</strong>
1288	<strong>],</strong>
1289	<strong>[</strong>
1290	<strong>[1,0],</strong>
1291	<strong>[1,1],</strong>
1292	<strong>[0,1]</strong>
1293	<strong>],</strong>
1294	<strong>[</strong>
1295	<strong>[0,1],</strong>
1296	<strong>[1,1],</strong>
1297	<strong>[1,0]</strong>
1298	<strong>],</strong>
1299	<strong>[</strong>
1300	<strong>[1],</strong>
1301	<strong>[1],</strong>
1302	<strong>[1],</strong>
1303	<strong>[1]</strong>
1304	<strong>]</strong>
1305	<strong>];</strong>
1306	<strong></strong>
1307	<strong>var block = blocks[Math.floor(Math.random() * blocks.length)];</strong>
1308	var posx = 0, posy = 0;
1309	var map, mapWidth = 10, mapHeight = 20;
1310
1311	function load() {
1312	var elmTarget = document.getElementById('target');
1313	ctx = elmTarget.getContext('2d');
1314
1315	map = [];
1316	for (var y = 0; y < mapHeight; y++) {
1317	map[y] = [];
1318	for (var x = 0; x < mapWidth; x++) {
1319	map[y][x] = 0;
1320	}
1321	}
1322	setInterval(paint, 200);
1323	}
1324
1325	function paintMatrix(matrix, offsetx, offsety, color) {
1326	ctx.fillStyle = color;
1327	for (var y = 0; y < matrix.length; y ++) {
1328	for (var x = 0; x < matrix[y].length; x ++) {
1329	if (matrix[y][x]) {
1330	ctx.fillRect((x + offsetx) * 20, (y + offsety) * 20, 20, 20);
1331	}
1332	}
1333	}
1334	}
1335
1336	function check(map, block, offsetx, offsety) {
1337	if (offsetx < 0 \|\| offsety < 0 \|\|
1338	mapHeight < offsety + block.length \|\|
1339	mapWidth < offsetx + block[0].length) {
1340	return false;
1341	}
1342	for (var y = 0; y < block.length; y ++) {
1343	for (var x = 0; x < block[y].length; x ++) {
1344	if (block[y][x] && map[y + offsety][x + offsetx]) {
1345	return false;
1346	}
1347	}
1348	}
1349	return true;
1350	}
1351
1352	function mergeMatrix(map, block, offsetx, offsety) {
1353	for (var y = 0; y < mapHeight; y ++) {
1354	for (var x = 0; x < mapWidth; x ++) {
1355	if (block[y - offsety] && block[y - offsety][x - offsetx]) {
1356	map[y][x]++;
1357	}
1358	}
1359	}
1360	}
1361
1362	function clearRows(map) {
1363	for (var y = 0; y < mapHeight; y ++) {
1364	var full = true;
1365	for (var x = 0; x < mapWidth; x ++) {
1366	if (!map[y][x]) {
1367	full = false;
1368	}
1369	}
1370	if (full) {
1371	map.splice(y, 1);
1372	var newRow = [];
1373	for (var i = 0; i < mapWidth; i ++) {
1374	newRow[i] = 0;
1375	}
1376	map.unshift(newRow);
1377	}
1378	}
1379	}
1380
1381	function paint() {
1382	ctx.clearRect(0, 0, 200, 400);
1383	paintMatrix(block, posx, posy, 'rgb(255, 0, 0)');
1384	paintMatrix(map, 0, 0, 'rgb(128, 128, 128)');
1385
1386	if (check(map, block, posx, posy + 1)) {
1387	posy = posy + 1;
1388	}
1389	else {
1390	mergeMatrix(map, block, posx, posy);
1391	clearRows(map);
1392	posx = 0; posy = 0;
1393	<strong>block = blocks[Math.floor(Math.random() * blocks.length)];</strong>
1394	}
1395	}
1396
1397	function rotate(block) {
1398	var rotated = [];
1399	for (var x = 0; x < block[0].length; x ++) {
1400	rotated[x] = [];
1401	for (var y = 0; y < block.length; y ++) {
1402	rotated[x][block.length - y - 1] = block[y][x];
1403	}
1404	}
1405	return rotated;
1406	}
1407
1408	function key(keyCode) {
1409	switch (keyCode) {
1410	case 38:
1411	if (!check(map, rotate(block), posx, posy)) {
1412	return;
1413	}
1414	block = rotate(block);
1415	break;
1416	case 39:
1417	if (!check(map, block, posx + 1, posy)) {
1418	return;
1419	}
1420	posx = posx + 1;
1421	break;
1422	case 37:
1423	if (!check(map, block, posx - 1, posy)) {
1424	return;
1425	}
1426	posx = posx - 1;
1427	break;
1428	case 40:
1429	var y = posy;
1430	while (check(map, block, posx, y)) { y++; }
1431	posy = y - 1;
1432	break;
1433	default:
1434	return;
1435	}
1436	ctx.clearRect(0, 0, 200, 400);
1437	paintMatrix(block, posx, posy, 'rgb(255, 0, 0)');
1438	paintMatrix(map, 0, 0, 'rgb(128, 128, 128)');
1439	}
1440
1441	</script>
1442	</head>
1443
1444	<body onload="load()" onkeydown="key(event.keyCode)">
1445	<canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas>
1446	</body>
1447	</html></code></pre>
1448	<p>
1449	<a onclick="html(this)" href="javascript:void(0)">サンプル</a>
1450	</p>
1451	</div>
1452
1453
1454	</div>
1455
1456
1457	<div id="footer">
1458	<p>This document is in the public domain.</p>
1459	</div>
1460	</body>
1461	</html>

Note: See TracBrowser for help on using the browser.

Context Navigation

root/docs/amachang/20080813-procamp2008/index.html @ 17619

Download in other formats: