ゼロからわかる JavaScript 超 入 門 たのしいプログラミング 河 西 朝 雄 著 技 術 評 論 社 の 補 足 記 事 すでに 紙 媒 体 で 出 版 した 上 記 著 作 に 関 し 頁 数 の 関 係 から 載 せられなかった 以 下 の 内 容 を 提 供 します 10 章 各 種 Visual ツールを 作 ってみよう 11 章 最 終 課 題 ( 各 種 ゲーム) 原 稿 としては 2009 年 の 脱 稿 時 にできていてお 蔵 入 りしていたものをここで 公 開 することと します 2012 年 12 月 河 西 朝 雄 本 書 の 一 部 または 全 部 を 著 作 権 法 の 定 める 範 囲 を 超 え 無 断 で 複 写 複 製 転 載 あるい はファイルに 落 とすことを 禁 じます 本 書 に 記 載 された 内 容 は 情 報 の 提 供 のみを 目 的 としています したがって 本 書 を 用 い た 運 用 は 必 ずお 客 様 自 身 の 責 任 と 判 断 によって 行 ってください これらの 情 報 の 運 用 の 結 果 について 著 者 はいかなる 責 任 も 負 いません 2012 河 西 朝 雄
10 章 各 種 Visual ツールを 作 ってみよう 実 際 の Web ページで 見 かける 各 種 Visual ツールの 作 り 方 を 説 明 します <input>タグで 作 るボタンでなく イメージを 使 った Visual ボタン ある 領 域 にマウス が 入 ったらその 領 域 の 色 が 変 わる 地 図 月 単 位 のカレンダー ページを 切 り 替 えるタブな どです 本 書 の1 章 ~7 章 はプログラミングの 初 心 者 が 視 覚 的 に 興 味 のある 題 材 を 使 って 効 率 よ く JavaScript や DynamicHTML の 技 術 を 学 べるような 構 成 になっています このため DynamicHTML の 使 い 方 (ラケットゲーム ドットアートなど)としては 特 殊 な 部 類 に 入 ります この 章 で 説 明 する 内 容 は Web ページに 応 用 できる 本 来 の DynamicHTML の 内 容 となっています 特 にタブの 例 はスタイルシートの 各 プロパティを 最 も 豊 富 に 使 っていま す
10-1 Visual ボタン バーを3つのイメージ(normalbar.png,prevbar.png,nextbar.png)で 切 り 替 えます 前 の 写 真 部 センター 部 次 の 写 真 部 は 1 つのイメージに 収 まっているので 各 部 の 領 域 を 判 定 する 場 合 は onmouseover イベントでなく onmousemove イベントで 行 います イメー ジ 外 に 出 た 場 合 は onmouseout イベントで 行 います normalbar.png prevbar.png nextbar.png 例 題 10-1 バーへマウスが 入 ったときその 位 置 で 前 の 写 真 領 域 か 次 の 写 真 領 域 かで 対 応 す るバーを 表 示 します <html> <head> <script type="text/javascript"> function over(event) var obj=document.getelementbyid("bar"); if (event.clientx<242) //100+142 1 obj.src="prevbar.png"; else if (event.clientx>432) //100+332 2 obj.src="nextbar.png"; else 3 obj.src="normalbar.png"; function out() 4 var obj=document.getelementbyid("bar"); obj.src="normalbar.png"; </script> </head> <body> <img id="bar" src="normalbar.png" onmousemove="over(event)" onmouseout="out()"
style="position:absolute;left:100;top:50"> </body> </html> 1マウス 位 置 が 前 の 写 真 位 置 のとき 2マウス 位 置 が 次 の 写 真 位 置 のとき 3それ 以 外 の 位 置 のとき 4マウスがバーから 離 れたとき 練 習 問 題 10-1 バーのクリックで 前 の 写 真 次 の 写 真 を 表 示 しなさい 写 真 のファイル 名 は 配 列 photo に 格 納 するものとする 写 真 番 号 を Number, 写 真 の 枚 数 を Max で 管 理 する <html> <head> <script type="text/javascript"> var Number=0,Max=4; var photo=new Array("balloon.jpg","flower.jpg","hikari.jpg","matsuri.jpg","sakura.jpg"); function next(event) if (event.clientx<242) Number--; else if (event.clientx>432) Number++; if (Number<0) Number=Max; if (Number>Max) Number=0; var obj=document.getelementbyid("srcimg"); obj.src=photo[number]; function over(event) var obj=document.getelementbyid("bar");
if (event.clientx<242) //100+142 obj.src="prevbar.png"; else if (event.clientx>432) //100+332 obj.src="nextbar.png"; else obj.src="normalbar.png"; function out() var obj=document.getelementbyid("bar"); obj.src="normalbar.png"; </script> </head> <body> <img id="bar" src="normalbar.png" onclick="next(event)" onmousemove="over(event)" onmouseout="out()" style="position:absolute;left:100;top:50"> <img src="balloon.jpg" id="srcimg" style="position:absolute;left:120;top:100;width:400;height:300"> </body> </html>
10-2 地 図 地 図 を 領 域 で 分 け その 領 域 にマウスが 入 ったらその 領 域 の 色 を 変 えるようにします 例 題 10-2 日 本 地 図 を 北 海 道 から 九 州 沖 縄 の9つの 領 域 に 分 け その 領 域 の 色 を 変 えた 地 図 map1.png~map9.png と どこも 色 が 変 わっていない 地 図 map0.png を 用 意 します <html> <head> <script type="text/javascript"> function disp(event) var x=event.clientx; var y=event.clienty; var obj=document.getelementbyid("map"); if (290<x && x<380 && 10<y && y<80) 1 obj.src="map1.png"; else if (260<x && x<300 && 90<y && y<155) 2 obj.src="map2.png"; else if (230<x && x<260 && 164<y && y<200) obj.src="map3.png"; else if (200<x && x<230 && 150<y && y<180) obj.src="map4.png"; else if (188<x && x<222 && 174<y && y<203) obj.src="map5.png"; else if (160<x && x<177 && 160<y && y<200) obj.src="map6.png"; else if (95<x && x<150 && 160<y && y<180) obj.src="map7.png"; else if (115<x && x<145 && 185<y && y<205) obj.src="map8.png"; else if (60<x && x<90 && 170<y && y<220) obj.src="map9.png"; else 3 obj.src="map0.png"; </script> </head>
<body> <img id="map" src="map0.png" style="position:absolute;left:0;top:0" onmousemove="disp(event)"> </body> </html> 1 北 海 道 の 領 域 のとき 2 東 北 の 領 域 のとき 3どこの 領 域 にも 入 らないとき 練 習 問 題 10-2 例 題 10-2 は 地 図 の 配 置 位 置 をクライアント 画 面 の(0,0)と 仮 定 してプログラムにしてい ましたが 地 図 の 配 置 位 置 に 依 存 しないで 領 域 の 判 定 ができるようにしなさい 地 図 の 配 置 位 置 の top,left を 取 得 し そこからの 位 置 で 領 域 の 判 定 を 行 う <html> <head> <script type="text/javascript"> function disp(event) var x=event.clientx; var y=event.clienty; var obj=document.getelementbyid("map"); var top=parseint(obj.style.top); var left=parseint(obj.style.left); if (left+290<x && x<left+380 && top+10<y && y<top+80) obj.src="map1.png"; else if (left+260<x && x<left+300 && top+90<y && y<top+155) obj.src="map2.png"; else if (left+230<x && x<left+260 && top+164<y && y<top+200) obj.src="map3.png";
else if (left+200<x && x<left+230 && top+150<y && y<top+180) obj.src="map4.png"; else if (left+188<x && x<left+222 && top+174<y && y<top+203) obj.src="map5.png"; else if (left+160<x && x<left+177 && top+160<y && y<top+200) obj.src="map6.png"; else if (left+95<x && x<left+150 && top+160<y && y<top+180) obj.src="map7.png"; else if (left+115<x && x<left+145 && top+185<y && y<top+205) obj.src="map8.png"; else if (left+60<x && x<left+90 && top+170<y && y<top+220) obj.src="map9.png"; else obj.src="map0.png"; </script> </head> <body> <img id="map" src="map0.png" style="position:absolute;left:100;top:50" onmousemove="disp(event)"> </body> </html>
10-3 カレンダー カレンダーを 作 るには 次 のような 手 順 で 考 えます 1 月 の 1 日 の 曜 日 を 調 べる week に 0( 日 )~6( 土 )が 得 られる var Year=today.getFullYear(); var Month=today.getMonth(); var day=new Date(Year,Month,1); var week=day.getday(); 2 閏 年 か 調 べる if ((Year % 4)==0 && (Year % 100)!=0 (Year % 400)==0) mt[1]=29; else mt[1]=28; 3カレンダーとして 表 示 次 のような calendar.png 上 に 1~31 を 表 示 する 表 示 位 置 は1 で 求 めた week の 値 を 開 始 位 置 として 使 う 例 題 10-3 今 日 の 月 のカレンダーを 作 ります <html> <head> <script type="text/javascript"> function mannen() var mt=new Array(31,28,31,30,31,30,31,31,30,31,30,31); var i,x,y,tag=""; var today=new Date(); var Year=today.getFullYear(); var Month=today.getMonth(); var day=new Date(Year,Month,1); 1 var week=day.getday(); 2
if ((Year % 4)==0 && (Year % 100)!=0 (Year % 400)==0) 3 mt[1]=29; else mt[1]=28; tag+="<font size='3' style='position:absolute;left:60;top:20'>"+year+" 年 "+(Month+1)+" 月 </font>"; 4 x=week*40+45;y=65; 5 for (i=1;i<=mt[month];i++) 6 tag+="<font size='3' style='position:absolute;left:"+x+";top:"+y+"'>"+i+"</font>"; 7 x+=40; 8 if ((week+i)%7==0) 9 x=45; y+=40; var obj=document.getelementbyid("calendar"); obj.innerhtml=tag; 10 </script> </head> <body onload="mannen()"> <img src="leftbtn.png" style="position:absolute;left:40;top:18"> <img src="rightbtn.png" style="position:absolute;left:160;top:18"> <img id="n1" src="calendar.png" style="position:absolute;left:40;top:40"> <div id="calendar"></div> </body> </html>
1Year 年 Month 月 1 日 の Date オブジェクトの 作 成 2Year 年 Month 月 1 日 の 曜 日 (0: 日 ~6: 土 )の 取 得 3 閏 年 なら2 月 の 日 を 29 にする 4 年 月 の 表 示 Month は 0(1 月 )~11(12 月 )の 値 なので +1 した 値 を 表 示 51 日 の 表 示 位 置 を x,y に 設 定 61 日 から 月 の 終 わりの 日 まで 繰 り 返 す 7 日 を 示 す 数 字 を(x,y) 位 置 に 表 示 8 表 示 位 置 を 横 に 進 める 9 土 曜 日 なら 次 の 行 先 頭 に 移 す 10tag に 追 加 してきた HTML タグを<div>タグの 内 部 HTML として 置 き 換 える 練 習 問 題 9-3 左 ボタンで 前 の 月 を 表 示 し 右 ボタンで 次 の 月 を 表 示 できるようにしなさい これに 伴 い 今 日 の 月 を 表 示 する 場 合 init 関 数 を 最 初 に 呼 び 出 し Year と Month を 求 める back 関 数 で 月 を 前 に 戻 し next 関 数 で 月 を 次 に 進 める <head> <script type="text/javascript"> var Year,Month; function init() var today=new Date(); Year=today.getFullYear(); Month=today.getMonth(); mannen(); function back() if (Month==0)
Year--; Month=11; else Month--; mannen(); function next() if (Month==11) Year++; Month=0; else Month++; mannen(); function mannen() var mt=new Array(31,28,31,30,31,30,31,31,30,31,30,31); var i,x,y,tag=""; var day=new Date(Year,Month,1); var week=day.getday(); if ((Year % 4)==0 && (Year % 100)!=0 (Year % 400)==0) mt[1]=29; else mt[1]=28; tag+="<font size='3' style='position:absolute;left:60;top:20'>"+year+" 年 "+(Month+1)+" 月 </font>"; x=week*40+45;y=65; for (i=1;i<=mt[month];i++) tag+="<font size='3' style='position:absolute;left:"+x+";top:"+y+"'>"+i+"</font>"; x+=40;
if ((week+i)%7==0) x=45; y+=40; var obj=document.getelementbyid("calendar"); obj.innerhtml=tag; </script> </head> <body onload="init()"> <img src="leftbtn.png" style="position:absolute;left:40;top:18" onclick="back()"> <img src="rightbtn.png" style="position:absolute;left:160;top:18" onclick="next()"> <img id="n1" src="calendar.png" style="position:absolute;left:40;top:40"> <div id="calendar"></div> </body> </html>
10-4 タブ タブのクリックでページを 切 り 替 えます タブは<a>タグ ページは<div>タグにスタイ ルシートを 指 定 して 作 ります スタイルシートは<style type="text/css">~</style>に 記 述 します a の 中 に<a>タグのスタイルシートを div の 中 に<div>タグのスタイルシートを 記 述 し ます さらに a.tab1 の 中 に 指 定 したスタイルシートは<a class="tab1">のように class を 指 定 した 個 々の<a>タグに 適 用 されます スタイルシートの 各 プロパティの 意 味 は 以 下 の 通 りです display: 表 示 方 法 block,inline,list-item,none overflow:オーバーフローした 内 容 の 表 示 方 法 none,clip,scroll clear: 文 字 の 回 り 込 みのクリア none,left,right,both float: 文 字 の 回 り 込 み left,right,none text-align:テキストの 配 置 left,right,center,justify border: 枠 の 幅 スタイル 色 padding: 枠 と 内 容 の 上 右 下 左 間 隔 color: 文 字 色 background-color: 背 景 色 width:スタイルシートの 幅 height:スタイルシートの 高 さ 指 定 する 長 さの 単 位 は 以 下 が 指 定 できます em 使 用 されている 文 字 の 高 さ pt ポイント px ピクセル 例 題 10-4 タブのクリックでページを 切 り 替 える 関 数 change を 作 ります タブ 上 にマウスが 入 ると ハンドマークにするために<a>タグを 用 いているのですが <a>タグのクリックでリンク 先 にジャンプさせないために onclick イベントの 呼 び 出 しを 行 った 後 の return false; は 必 要 です <html> <head> <script type="text/javascript"> function change(tab) 1 document.getelementbyid("tab1").style.display="none"; document.getelementbyid("tab2").style.display="none";
document.getelementbyid(tab).style.display="block"; </script> <style type="text/css"> a 2 display:block;width:5em;float:left; padding:3px;text-align:center;color:white; a.tab1 background-color:blue; 3 a.tab2 background-color:green; div 4 width:400px;height:150px;clear:left;overflow:scroll; div.page1 border:2px solid blue; 5 div.page2 border:2px solid green; </style> </head> <body onload="change('tab1')"> <a href="" class="tab1" onclick="change('tab1');return false;">エンタメ</a> 6 <a href="" class="tab2" onclick="change('tab2');return false;">スポーツ</a> <div id="tab1" class="page1"> 7 エンタメ 情 報 </div> <div id="tab2" class="page2"> スポーツ 情 報 </div> </body> </html> 1クリックしたタブのページだけを 表 示 する 関 数 display プロパティが block のページだ
けが 表 示 される 他 のページの display プロパティを none にすることで そのページの 縦 横 サイズは 0 になるので 複 数 のページを 同 じ 位 置 に 重 ね 合 わせることができる 2タブの 共 通 形 状 float:left の 指 定 でタブを 横 に 配 置 できる 3 各 タブの 個 々の 形 状 ( 背 景 色 ) 4ページの 共 通 形 状 clear:left で 横 表 示 をクリアしてタブの 下 に 配 置 することができる 5 各 ページの 個 々の 形 状 ( 枠 の 色 ) 6タブを2つ 配 置 7ページを2つ 配 置 練 習 問 題 10-4 タブを 3 つに 増 やしなさい タブの 色 は olive とする <html> <head> <script type="text/javascript"> function change(tab) document.getelementbyid("tab1").style.display="none"; document.getelementbyid("tab2").style.display="none"; document.getelementbyid("tab3").style.display="none"; document.getelementbyid(tab).style.display="block"; </script> <style type="text/css"> a display:block;width:5em;float:left; padding:3px;text-align:center;color:white; a.tab1 background-color:blue; a.tab2 background-color:green; a.tab3 background-color:olive; div width:400px;height:150px;clear:left;overflow:scroll; div.page1 border:2px solid blue; div.page2 border:2px solid green; div.page3 border:2px solid olive; </style> </head>
<body onload="change('tab1')"> <a href="" class="tab1" onclick="change('tab1');return false;">エンタメ</a> <a href="" class="tab2" onclick="change('tab2');return false;">スポーツ</a> <a href="" class="tab3" oncclick="change('tab3');return false;">グルメ</a> <div id="tab1" class="page1"> エンタメ 情 報 </div> <div id="tab2" class="page2"> スポーツ 情 報 </div> <div id="tab3" class="page3"> グルメ 情 報 </div> </body> </html>
章 末 問 題 10-1 ツールバーのイメージを3 領 域 に 区 分 し 各 領 域 にマウスが 入 れば カーソルをハンド マークにし ページに 表 示 する 内 容 を 領 域 に 合 わせて 変 えなさい 領 域 のイメージ 内 のx 座 標 は 5,29,53 とし 幅 は 20 とする イメージの 配 置 位 置 (left,top)から 領 域 の 範 囲 を 計 算 する 5 29 53 <head> <script type="text/javascript"> function disp(event) var map=document.getelementbyid("map"); var page=document.getelementbyid("page"); var left=parseint(map.style.left); var top=parseint(map.style.top); var x=event.clientx; var y=event.clienty; if (left+5<x && x<left+25) map.style.cursor="hand"; page.innerhtml=" 記 事 1"; else if (left+29<x && x<left+49) map.style.cursor="hand"; page.innerhtml=" 記 事 2"; else if (left+53<x && x<left+73) map.style.cursor="hand"; page.innerhtml=" 記 事 3"; else map.style.cursor="default"; page.innerhtml="";
if (y<=top+2 top+28<=y) // 上 下 に 離 れたとき map.style.cursor="default"; page.innerhtml=""; </script> </head> <body> <img id="map" src="toolbar.png" style="position:absolute;left:20;top:10" onmousemove="disp(event)"> <div id="page" style="position:absolute;left:20;top:38;width:400;height=200; border-style:solid;border-color:blue;border-width:1;padding:2 2 2 2"></div> </body> </html> 章 末 問 題 10-2 テキストボックスに 入 力 した 名 前 と 一 致 する 人 のデータを 検 索 して 表 示 します テキス トボックスに 適 用 するスタイルシートを.box に 記 述 し 結 果 を 表 示 する 領 域 に 適 用 する スタイルシートを.page に 記 述 します 会 員 のデータは2 次 元 配 列 girl[][]に 名 前 住 所 年 齢 血 液 型 が 格 納 されています オブジェクトの 上 をマウスが 通 過 したときにハンドマークにする 簡 単 な 方 法 は onmouseover="this.style.cursor='hand'" です <html> <head> <style type="text/css">.box width:100;height:24; border-style:solid;border-color:blue;border-width:1; background-color:#ffe0ff;
font-size:18;.page width:276;height=150; border-style:solid;border-color:blue;border-width:1; padding:2 2 2 2; </style> <script type="text/javascript"> function search() var girl=new Array(3); girl[0]=new Array(" 新 垣 ゆう"," 新 宿 区 1-2-1","18 才 ","A 型 "); girl[1]=new Array(" 長 沢 みちる"," 千 代 田 区 1-2-1","22 才 ","B 型 "); girl[2]=new Array(" 綾 瀬 はるな", " 港 区 1-2-1","19 才 ","O 型 "); var namae=document.getelementbyid("namae"); var result=document.getelementbyid("result"); for (var i=0;i<girl.length;i++) if (girl[i][0]==namae.value) result.innerhtml=" 名 前 :"+girl[i][0]+"<br>"+ " 住 所 :"+girl[i][1]+"<br>"+ " 年 齢 :"+girl[i][2]+"<br>"+ " 血 液 型 :"+girl[i][3]+"<br>"; return; result.innerhtml=" 見 つかりませんでした<br>"; </script> </head> <body> <form style="position:absolute;top:10;left:10"> <div style="position:absolute;top:4;left:0;width:40"> 会 員 </div> <input id="namae" class="box" type="text" style="position:absolute;top:0;left:40"> <img src="searchbar.png" style="position:absolute;top:0;left:140" onmouseover="this.style.cursor='hand'" onclick="search()">
<div id="result" class="page" style="position:absolute;left:0;top:26;"></div> </form> </body> </html>
11 章 最 終 課 題 ( 各 種 ゲーム) 9 章 のリバーシゲームで 実 用 的 なプログラムを 作 るスキルが 付 いたと 思 います この 章 ではさらに 自 分 で 考 えて 実 用 的 に 使 えるプログラムを 作 るためのヒントとなるサンプル として ブロックくずし マインスイーパー 迷 路 の3 例 題 を 説 明 します ブロックくずしは6 章 のラケットゲームを 元 にそこにブロックを 置 きます マインスー パーは 練 習 問 題 7-2 リバーシーゲームのマスを 開 ける 手 法 を 応 用 します 迷 路 はここま で 説 明 しなかったテクニックがいくつかあります マインスーパーと 迷 路 では 再 帰 を 使 用 しています 発 展 課 題 は 各 例 題 に 対 し 追 加 または 変 更 された 箇 所 ( 赤 色 )とその 周 辺 部 のみを 掲 載 しています プログラムの 全 リストは 技 術 評 論 社 の 以 下 の Web ページで 入 手 することがで きます
11-1 ブロックくずし 6 章 のラケットゲームにブロックを 置 いたブロックくずしを 作 ります ブロックを 4 6 個 配 置 し ブロックの 情 報 (0:なし 1:あり)を 2 次 元 配 列 M[][]に 格 納 します ブロックの 高 さを 10 幅 を 40 とし 配 置 開 始 位 置 を(100,100)からy 方 向 は 20 x 方 向 は 50 単 位 で 配 置 します ボールの 位 置 を By,Bx とすると その 位 置 にあるブロックに 対 応 する 配 列 の 添 字 i,j は 次 式 で 得 られます 次 式 では By,Bx が 100 未 満 の 場 合 も i,j が 0 になってしまい ブロックの ないところでもあると 判 断 されてしまうので if 文 で By,Bx は 100 以 上 という 条 件 を 付 け てあります i=parseint((by-100)/20);// ボール 位 置 から ブロックの 位 置 を 計 算 する j=parseint((bx-100)/50); if (100<=Bx && 100<=By && 0<=i && i<=3 && 0<=j && j<=5 && M[i][j]==1) // ブロックがあれば ボールが 上 に 移 動 している 場 合 と 下 に 移 動 している 場 合 でブロックに 当 たったと 判 定 す る 位 置 は 異 なります 正 確 に 判 定 するにはもう 少 し 細 かな 条 件 を 付 ける 必 要 がありますが ここでは 大 ざっぱな 判 定 をしています block1.html <html> <head> <script type="text/javascript"> var By=200,Bx=100,Dy=10,Dx=10; // ボール 位 置 と 移 動 量 var Ry=400,Rx=200; // ラケットの 位 置 var Point=0,BallN=3,TimeID; // 得 点 ボール 残 数 タイム ID var M=new Array(4); // ブロック 情 報 配 列 function move() var i,j,n; TimeID=setTimeout("move()",100); var ball=document.getelementbyid("ball"); By+=Dy;Bx+=Dx; ball.style.top=by;ball.style.left=bx; if (Bx<=50 Bx+10>=450) Dx=-Dx; if (By<=50 (Rx-25-10<=Bx && Bx<=Rx-25+50 && By+10==Ry))
Dy=-Dy; i=parseint((by-100)/20); // ボール 位 置 から ブロックの 位 置 を 計 算 する j=parseint((bx-100)/50); if (100<=Bx && 100<=By && 0<=i && i<=3 && 0<=j && j<=5 && M[i][j]==1) // ブロックがあれば n=i*6+j; // ブロックの ID を 求 める document.getelementbyid("block"+n).style.visibility="hidden"; // 非 表 示 にする M[i][j]=0; // 配 列 情 報 を 0 にすることで ブロックな し 状 態 を 示 す Dy=-Dy; Point+=10; // 得 点 の 加 算 と 表 示 document.getelementbyid("pointmsg").value=point+" 点 "; if (By>420) BallN--; // ボールの 残 数 を 減 らす document.getelementbyid("ballmsg").value=" 残 り"+BallN+" 個 "; cleartimeout(timeid); // ボールを 停 止 する if (BallN>0) Bx=parseInt(Math.random()*30)*10+50;By=200; settimeout("move()",1000); //1 秒 後 に 再 開 function racket(event) var bar=document.getelementbyid("bar"); Rx=event.clientX; if (50<=Rx-25 && Rx+25<=450) bar.style.left=rx-25; function init() var i,j,n=0,tag=""; var block=document.getelementbyid("block"); window.resizeto(550,700); // ウィンドウサイズを 変 更
for (i=100;i<=160;i+=20) // ブロックの 配 置 for (j=100;j<=350;j+=50) tag+="<img id='block"+n+"' src='blockbar.png' style='position:absolute;left:"+j+";top:"+i+"'>"; n++; block.innerhtml=tag; for (i=0;i<4;i++) // 4 行 6 列 のブロックの 情 報 を 表 す 2 次 元 配 列 M[i]=new Array(6); for (j=0;j<6;j++) M[i][j]=1; // i 行 j 列 のブロックがあれば 1 Bx=parseInt(Math.random()*30)*10+50;By=200; move(); </script> </head> <body onmousemove="racket(event)"> <form style="position:absolute;left:180;top:20"> <input name="ballmsg" type="text" size="10" value=" 残 り 3 個 "> <input name="pointmsg" type="text" size="10" value="0 点 "> </form> <img src="wall.png" style="position:absolute;left:46;top:46"> <img id="ball" src="ball.png" style="position:absolute;left=-10;top=0"> <img id="bar" src="bar.png" style="position:absolute;left:200;top:400" onclick="init()"> <div id="block"></div> </body> </html>
発 展 課 題 次 の 機 能 を 追 加 しなさい ボールが 下 に 移 動 しているときにブロックに 当 たったという 判 断 をブロックの 直 前 位 置 にしなさい Dy が 正 のときは 配 列 の 仮 想 位 置 を y 方 向 に-10 した 位 置 とする 全 面 クリア(Point が 240 の 倍 数 )するたびにブロックを 再 表 示 し タイムアウト 時 間 を -20 にしてボールの 移 動 スピードを 速 くする block2.html var Level=100; function move() var i,j,n; TimeID=setTimeout("move()",Level); var ball=document.getelementbyid("ball"); By+=Dy;Bx+=Dx; ball.style.top=by;ball.style.left=bx; if (Bx<=50 Bx+10>=450) Dx=-Dx; if (By<=50 (Rx-25-10<=Bx && Bx<=Rx-25+50 && By+10==Ry)) Dy=-Dy; if (Dy<0) i=parseint((by-100)/20); // ボール 位 置 から ブロックの 位 置 を 計 算 する else i=parseint((by-90)/20); j=parseint((bx-100)/50); if (100<=Bx && 90<=By && 0<=i && i<=3 && 0<=j && j<=5 &&
M[i][j]==1) // ブロックがあれば n=i*6+j; // ブロックの ID を 求 める document.getelementbyid("block"+n).style.visibility="hidden"; // 非 表 示 にする M[i][j]=0; // 配 列 情 報 を 0 にすることで ブロックな し 状 態 を 示 す Dy=-Dy; Point+=10; // 得 点 の 加 算 と 表 示 document.getelementbyid("pointmsg").value=point+" 点 "; if (Point%240==0) cleartimeout(timeid); Bx=parseInt(Math.random()*30)*10+50;By=200; Dy=10; if (Level>=40) Level-=20 init(); if (By>420) BallN--; // ボールの 残 数 を 減 らす document.getelementbyid("ballmsg").value=" 残 り"+BallN+" 個 "; cleartimeout(timeid); // ボールを 停 止 する if (BallN>0) Bx=parseInt(Math.random()*30)*10+50;By=200; settimeout("move()",1000); //1 秒 後 に 再 開
11-2 マインスイーパー おなじみのマインスイーパーを 作 ります ここで 作 るゲームは 以 下 のような 内 容 です クリックした 位 置 に 機 雷 があれば すべて 機 雷 を 表 示 し 機 雷 でないならその 位 置 だけ 開 きます マスを 開 けるところは 練 習 問 題 7-2 リバーシーゲームと 同 じ 要 領 です 発 展 問 題 で 接 近 度 数 0 のマスを 開 く 再 帰 関 数 visit を 作 ります minesweeper は( 機 雷 除 去 の) 掃 海 艇 または 地 雷 除 去 装 置 の 意 味 です 配 列 M[][]に 機 雷 の 情 報 機 雷 の 接 近 度 数 を 格 納 します (1,1)-(N,N)を 実 際 のマスと 対 応 させます 配 列 の 外 枠 要 素 は visit 関 数 で 再 帰 呼 び 出 しを 行 う 際 に 配 列 の 外 に 進 まない ようにするためのものです このように 配 列 の 範 囲 を 越 えて 探 索 を 行 なわないように 見 張 りをしているものを 番 兵 と 呼 びます 配 列 M[][]には 機 雷 があれば-1 外 枠 要 素 は-2 それ 以 外 の 要 素 はその 要 素 の 隣 接 すると ころに 機 雷 がある 個 数 ( 接 近 度 数 )を 格 納 します 例 えば M[3][1]の 要 素 は 機 雷 が 2 個 隣 接 しているので 2 となります 隣 接 する 機 雷 がないところは 0 となります マスを 開 いたときに 表 示 するイメージは 接 近 度 数 0,1,2 に 対 し num0.png,num1.png,num2.png を 使 い ま す num1.png 以 後 は 数 字 入 り で す が num0.png は 数 字 は 入 っていません 機 雷 の 接 近 度 数 をカウントアップする 関 数 count 機 雷 の 接 近 度 数 を 示 す 数 値 は 機 雷 を 中 心 とする 周 辺 8 箇 所 を+1 することでカウントア ップして 求 めます このときその 周 辺 8 箇 所 の 中 で 機 雷 のある 要 素 と 外 枠 の 要 素 はカウン トアップしません mine1.html <html> <head> <script type="text/javascript"> var N,Bomb,W=20; // マスの 数 機 雷 の 数 マスのサイズ var M; function yx(event) // クリックイベント 処 理 関 数 var y,x,n,obj; y=math.floor((event.clienty-50)/w+1); x=math.floor((event.clientx-50)/w+1); if (M[y][x]==-2) return; // visit で 訪 問 してあれば 戻 る n=(y-1)*n+(x-1); obj=document.getelementbyid("img"+n); if (M[y][x]==-1) // 機 雷 のときは 全 ての 機 雷 を 表 示 for (i=1;i<=n;i++)
for (j=1;j<=n;j++) if (M[i][j]==-1) n=(i-1)*n+(j-1); obj=document.getelementbyid("img"+n); obj.src="bomb.png"; else obj.src="num"+m[y][x]+".png"; // 機 雷 でないとき function count() // 接 近 度 数 カウント 関 数 var i,j; for (i=1;i<=n;i++) for (j=1;j<=n;j++) if (M[i][j]==-1) for (dx=-1;dx<=1;dx++) for (dy=-1;dy<=1;dy++) if ((dx!=0 dy!=0) && (M[i+dy][j+dx]!=-1 && M[i+dy][j+dx]!=-2)) M[i+dy][j+dx]++; function init() var i,j,x,y,n=0,tag=""; var mine=document.getelementbyid("mine"); N=parseInt(document.getElementById("level").value); // parseint 必 要 Bomb=N; for (y=50;y<50+w*n;y+=w)
for (x=50;x<50+w*n;x+=w) tag+="<img src='sea.png' id='img"+n+"' style='position:absolute;left:"+x+";top:"+y+"' onclick='yx(event)'>"; n++; mine.innerhtml=tag; M=new Array(N+2); for (i=0;i<n+2;i++) M[i]=new Array(N+2); for (j=0;j<=n+1;j++) if (i==0 i==n+1 j==0 j==n+1) M[i][j]=-2; // 外 枠 要 素 番 兵 else M[i][j]=0; for (i=0;i<bomb;i++) // y,x 位 置 のマスに 機 雷 を 最 大 で Bomb 個 置 く x=math.floor(math.random()*n+1); y=math.floor(math.random()*n+1); M[y][x]=-1; count(); </script> </head> <body> <form style="position:absolute;left:50;top:10"> マスの 数 <input id="level" type="text" size="4"> <input type="button" value=" 表 示 " onclick="init()"> </form> <div id="mine"></div> </body> </html> 発 展 課 題 接 近 度 数 0 のマスをクリックしたらそれにつながる 全 ての 接 近 度 数 0 のマスを 開 く 関 数
visit を 作 りなさい 8-2 の 3. 閉 路 の 探 索 の vist 関 数 を 元 に 作 ります 上 下 左 右 に 進 む 方 向 のマスの 内 容 が 0 なら 再 帰 的 に 訪 問 します 訪 問 した 印 として-2 を 置 きます mine2.html function visit(i,j) // 接 近 度 数 0 のマスを 開 ける 関 数 var n,obj; n=(i-1)*n+(j-1); obj=document.getelementbyid("img"+n); obj.src="num"+m[i][j]+".png"; M[i][j]=-2; // 訪 問 した 印 if (M[i][j+1]==0) visit(i,j+1); // 右 位 置 への 訪 問 if (M[i+1][j]==0) visit(i+1,j); // 下 位 置 への 訪 問 if (M[i][j-1]==0) visit(i,j-1); // 左 位 置 への 訪 問 if (M[i-1][j]==0) visit(i-1,j); // 上 位 置 への 訪 問 function yx(event) // クリックイベント 処 理 関 数 if (M[y][x]==-2) return; // visit で 訪 問 してあれば 戻 る n=(y-1)*n+(x-1); obj=document.getelementbyid("img"+n); if (M[y][x]==-1) // 機 雷 のときは 全 ての 機 雷 を 表 示 else if (M[y][x]==0) visit(y,x); // 接 近 度 数 0 のマスのときの 処 理 else obj.src="num"+m[y][x]+".png"; // 接 近 度 数 1 以 上 のマスのときの 処 理
11-3 迷 路 縦 NY 横 NX の 各 マスに 迷 路 配 列 M[][] を 対 応 させ その 各 要 素 に 上 壁 の 有 無 右 壁 の 有 無 訪 問 の 有 無 の3つの 情 報 を 持 たせます (i,j) 位 置 から 進 む 方 向 を 乱 数 で1: 右 2; 下 3 左 4 上 の 中 から 選 択 し 1マス 進 む ことにします その 方 向 に 進 めるかは そのマスがまだ 未 訪 問 である 場 合 とします これ を 進 む 方 向 がなくなるまで 再 帰 的 に 繰 り 返 します 全 てのマスに 上 壁 右 壁 をつけて 置 き 進 む 方 向 の 壁 を 取 り 去 るという 方 法 で 迷 路 を 作 ります 通 過 に 伴 う 壁 の 取 り 崩 しは 次 の 要 領 で 行 います 1 右 へ 進 む 場 合 は 今 いる 位 置 の 右 壁 をとる 2 下 へ 進 む 場 合 は 進 む 位 置 の 上 壁 をとる 3 左 へ 進 む 場 合 は 進 む 位 置 の 右 壁 をとる 4 上 へ 進 む 場 合 は 今 いる 位 置 の 上 壁 をとる 具 体 的 には たとえば M[i][j] 位 置 の 右 壁 をとるには 次 のようにします M[i][j]&=0xd; 第 1 ビット 0x0d のビットパターンは 1101 で これとの AND をとることにより 第 1ビットだけ を 0 にすることができます 迷 路 配 列 の 初 期 値 は 外 壁 に 番 兵 の 15( 再 トライ 禁 止 訪 問 済 み 右 壁 あり 上 壁 あり) を 置 き 各 マスには 3( 未 訪 問 右 壁 あり 上 壁 あり)を 置 きます 壁 の 長 さを W 迷 路 の 左 上 隅 位 置 を(0,0) 迷 路 の 入 り 口 と 出 口 の 配 列 要 素 を(Si,Sj)と (Ei,Ej)とします 配 列 に i,j 位 置 に 対 応 するマスの y,x 位 置 は 以 下 の 式 で 得 られます y=(i-1)*w; x=(j-1)*w; この y,x 位 置 に M[i][j] & 1 が 真 なら 上 壁 イメージ(upwall.png)を M[i][j] & 2 が 真 なら 右 壁 イメージ(rightwall.png)を 配 置 します キー 入 力 で 迷 路 をたどります 経 路 を 示 す 直 線 は id を h0~h99 v0~v99 まで 付 けた 水 平 線 イメージ(hline.png)と 垂 直 線 イメージ(vline.png)を 使 って 描 画 します 右 に 移 動 するときは oldy,oldx 位 置 に hline.png を 配 置 してから oldx を+20 します 左 に 移 動 するときは oldx を-20 した 後 でその 位 置 に hline.png を 配 置 します キー 入 力 イベント キー 入 力 イベント 処 理 は onkeypress アトリビュートに 指 定 します 矢 印 キーはキーイベントを 取 得 できないので E( 上 ) S( 左 ) D( 右 ) X( 下 )キーを 使 います 入 力 されたキーのコードは event.keycode で 得 られます E は 115 S は 100
D は 101 X は 120 という 値 になります E S D X ビット 演 算 子 プログラミング 言 語 では 人 間 の 感 覚 に 合 わせて 10 進 数 で 表 しますすが 実 はコンピュ ータの 世 界 では 2 進 数 が 基 本 になっていてます 2 進 数 は 0 と 1 で 表 します 2 進 数 4 桁 の 数 値 に 対 応 する 10 進 数 値 16 進 数 値 を 表 11-1 に 示 します 2 進 数 4 桁 が 16 進 数 1 桁 に 対 応 します JavaScript では 16 進 数 値 を 示 すのに 先 頭 に 0x を 付 け 0xd のように 表 します 表 11-1 2 進 数 10 進 数 16 進 数 の 関 係 2 進 数 10 進 数 16 進 数 0000 0 0 0001 1 1 0010 2 2 0011 3 3 0100 4 4 0101 5 5 0110 6 6 0111 7 7 1000 8 8 1001 9 9 1010 10 a 1011 11 b 1100 12 c 1101 13 d 1110 14 e 1111 15 f ビット 演 算 子 は 数 値 を 2 進 表 現 したときの 1 または 0 の 各 ビットごとの 論 理 演 算 を 行 います 論 理 演 算 には AND OR があります ビット a と b を AND,OR した 結 果 ( 真 理 値 表 ) を 表 11-2 に 示 します JavaScript では AND 演 算 を& 演 算 子 OR 演 算 を 演 算 子 で 行 いま す 表 11-2 AND と OR の 真 理 値 表 AND( 論 理 積 )
a b a&b 0 0 0 0 1 0 1 0 0 1 1 1 OR( 論 理 和 ) a b A b 0 0 0 0 1 1 1 0 1 1 1 1 たとえばある 数 と 0x0d との AND をとることの 効 果 を 考 えてみましょう 0x0d は 2 進 数 で 表 すと 1101 となります ある 数 がたとえば 1011 と 1110 の 場 合 につい て 0x0d と AND をとると 以 下 のようになります つまり 1101 と AND をとること は 1101 の 0 の 位 置 に 対 応 するビットを 強 制 的 に 0 にすることになります このよ うな 操 作 をマスクと 呼 びます 1011 1110 & 1101 & 1101 1001 1100 強 制 的 に 0 にされる 強 制 的 に 0 にされる maze1.html <html> <head> <script type="text/javascript"> var NY,NX,Si,Sj,Ei,Ej; // マスの 縦 と 横 入 口 位 置 出 口 位 置 var W=20; // 壁 の 長 さ var M; // 迷 路 配 列 var oldy,oldx,h,v; // 移 動 の 前 の 位 置 水 平 線 と 垂 直 線 の id 番 号 function move(event) var obj,mouse; if (event.keycode==115) oldx-=20;// 左 obj=document.getelementbyid("h"+h);h++; obj.style.top=oldy;obj.style.left=oldx;
else if (event.keycode==100) // 右 obj=document.getelementbyid("h"+h);h++; obj.style.top=oldy;obj.style.left=oldx; oldx+=20; else if (event.keycode==101) oldy-=20;// 上 obj=document.getelementbyid("v"+v);v++; obj.style.top=oldy;obj.style.left=oldx; else if (event.keycode==120)// 下 obj=document.getelementbyid("v"+v);v++; obj.style.top=oldy;obj.style.left=oldx; oldy+=20; mouse=document.getelementbyid("mouse"); mouse.style.top=oldy-5;mouse.style.left=oldx-5; function genmaze(i,j) // 迷 路 の 作 成 var n; M[i][j] =4; while (M[i][j+1]==3 M[i+1][j]==3 M[i][j-1]==3 M[i-1][j]==3) n=math.floor(math.random()*4)+1; if (n==1 && M[i][j+1]==3) M[i][j]&=0xd; genmaze(i,j+1); else if(n==2 && M[i-1][j]==3) M[i][j]&=0xe; genmaze(i-1,j); else if(n==3 && M[i][j-1]==3) M[i][j-1]&=0xd; genmaze(i,j-1);
else if(n==4 && M[i+1][j]==3) M[i+1][j]&=0xe; genmaze(i+1,j); function meiro() var i,j,tag=""; var maze=document.getelementbyid("maze"); NY=parseInt(document.getElementById("NY").value); NX=parseInt(document.getElementById("NX").value); Si=1;Sj=1;Ei=NY;Ej=NX; oldy=10;oldx=10;h=0;v=0; M=new Array(NY+2); for (i=0;i<ny+2;i++) M[i]=new Array(NX+2); for (i=0;i<ny+2;i++) for (j=0;j<nx+2;j++) if (i==0 j==0 i==ny+1 j==nx+1) M[i][j]=15; else M[i][j]=3; genmaze(ei,ej); M[Ei][Ej]&=0xd; for (i=1;i<=ny;i++) for (j=1;j<=nx;j++) x=(j-1)*w; y=(i-1)*w; if (M[i][j] & 1) tag+="<img style='position:absolute;left:"+x+";top:"+y+"'>"; src='upwall.png'
if (M[i][j] & 2) tag+="<img src='rightwall.png' style='position:absolute;left:"+(x+w)+";top:"+y+"'>"; tag+="<img src='mazeh.png' style='position:absolute;left:0;top:"+(ny*20)+";height:1;width:"+(nx*20)+"'>"; // 下 壁 tag+="<img src='mazev.png' style='position:absolute;left:0;top:20;width:1;height:"+(ny*20-20)+"'>"; // 左 壁 for (i=0;i<100;i++) tag+="<img "+"id='h"+i+"'"+" src='hline.png' style='position:absolute;left:-40;top:0'>"; tag+="<img "+"id='v"+i+"'"+" src='vline.png' style='position:absolute;left:-40;top:0'>"; tag+="<img id='mouse' src='mouse.png' style='position:absolute;left:5;top:5'>"; maze.innerhtml=tag; </script> </head> <body onkeypress="move(event)"> <form style="position:absolute;left:20;top:10"> 横 <input id="nx" type="text" size="5"> 縦 <input id="ny" type="text" size="3"> <input type="button" value=" 迷 路 " onclick="meiro()"> </form> <div id="maze" style="position:absolute;left:20;top:40"></div> </body> </html>
発 展 課 題 先 の 例 題 では 壁 を 突 き 抜 けて 進 んでしまうので 次 の 機 能 を 追 加 しなさい 進 めない 位 置 を 判 定 たとえば 左 に 進 場 合 はその 位 置 (i,j)の 左 のマスの 右 壁 の 有 無 を 調 べることになるので (M[i][j-1]&2)==0 なら 右 壁 が 無 いことになります 逆 戻 りしたら 消 す M[][]と 同 じ 2 次 元 配 列 G[][]を 用 意 し そこに 直 線 を 描 いたかどうかの 情 報 ( 描 いた 線 の id 名 )を 与 えます 描 いていないところは 0 を 置 きます たとえば 左 に 進 場 合 はその 位 置 (i,j)の 左 のマスの G[i][j-1]が 0 なら 水 平 線 を 描 き 0 でないなら その id 名 の 水 平 線 を 隠 します maze2.html var M,G; // 迷 路 配 列 var oldy,oldx,h,v; // 移 動 の 前 の 位 置 水 平 線 と 垂 直 線 の id 番 号 function move(event) var obj,mouse,i,j; i=parseint((oldy+10)/20);j=parseint((oldx+10)/20); if (event.keycode==115 && (M[i][j-1]&2)==0) oldx-=20;// 左 if (G[i][j-1]==0) // 線 を 引 く 時 は 移 動 先 の 配 列 G[i][j-1]="h"+H; obj=document.getelementbyid("h"+h);h++; obj.style.top=oldy;obj.style.left=oldx; else obj=document.getelementbyid(g[i][j]); obj.style.visibility="hidden"; G[i][j]=0; // 消 すときは 今 いる 位 置 の 配 列
if (event.keycode==100 && (M[i][j]&2)==0)// 右 if (G[i][j+1]==0) G[i][j+1]="h"+H; obj=document.getelementbyid("h"+h);h++; obj.style.top=oldy;obj.style.left=oldx; else obj=document.getelementbyid(g[i][j]); obj.style.visibility="hidden"; G[i][j]=0; oldx+=20; if (event.keycode==101 && (M[i][j]&1)==0)// 上 oldy-=20; if (G[i-1][j]==0) G[i-1][j]="v"+V; obj=document.getelementbyid("v"+v);v++; obj.style.top=oldy;obj.style.left=oldx; else obj=document.getelementbyid(g[i][j]); obj.style.visibility="hidden"; G[i][j]=0; if (event.keycode==120 && (M[i+1][j]&1)==0)// 下 if (G[i+1][j]==0) G[i+1][j]="v"+V; obj=document.getelementbyid("v"+v);v++; obj.style.top=oldy;obj.style.left=oldx; else obj=document.getelementbyid(g[i][j]);
obj.style.visibility="hidden"; G[i][j]=0; oldy+=20; mouse=document.getelementbyid("mouse"); mouse.style.top=oldy-5;mouse.style.left=oldx-5; function meiro() M=new Array(NY+2); G=new Array(NY+2); for (i=0;i<ny+2;i++) M[i]=new Array(NX+2); G[i]=new Array(NX+2); for (i=0;i<ny+2;i++) for (j=0;j<nx+2;j++) if (i==0 j==0 i==ny+1 j==nx+1) M[i][j]=15; else M[i][j]=3; G[i][j]=0; G[1][1]=1; // 始 点 用 特 殊 処 理