Ｊａｖａ Ｓｃｒｉｐｔの解説
８．ゲームの作り方（その２）
ゲームに必要なマウスの操作について解説します。
１．マウスをクリックすると絵が変わる
クリックすると絵が変わります。もう一度クリックすると元に戻ります。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例１＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
cnt=new Array(8);
img0=new Image(48,48);img1=new Image(48,48);
img0.src="../game2/back1.gif";img1.src="../game2/peke1.gif";
var i;
cnt[0]=1,cnt[1]=1,cnt[2]=1,cnt[3]=1,cnt[4]=1,cnt[5]=1,cnt[6]=1,cnt[7]=1;
function disp(){
for (i=0; i<8; i++){
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ"＜A HREF='JavaScript:draw("+i+")'＞＜IMG SRC='../game2/back1.gif' BORDER=0 WIDTH=48 HEIGHT=48＞＜/A＞");}
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜BR＞");
}
function draw(n){
if (cnt[n]<0) {ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[ｎ]．ｓｒｃ＝ｉｍｇ０．ｓｒｃ；}
if (cnt[n]>0) {ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[ｎ]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；}
cnt[n]=cnt[n]*(-1)
}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｄｉｓｐ（）；
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例１表示 ここをクリックして下さい。例が表示されます。
＜解説＞
１）パラメータ
cnt=new Array(8);cnt[0]=1,cnt[1]=1,cnt[2]=1,．．．
ｃｎｔを８個の配列にします。
画像を表示する場所が０から７まで８カ所あります。それぞれの場所でどちらの画像を表示するか決める変数
としてｃｎｔを使います。ｃｎｔ[0]は０番目の場所，ｃｎｔ[7]最後の７番目の場所に対応します。
２）function disp(){
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ"＜A HREF='JavaScript:draw("+i+")'＞＜IMG SRC='../game2/back1.gif' BORDER=0 WIDTH=48 HEIGHT=48＞＜/A＞");}
画像を８枚表示します。これは１行で書いて下さい。
＜A HREF='JavaScript:draw("+i+")'＞これが大事な部分です。
画像（ｂａｃｋ１）をクリックするとＪａｖａＳｃｒｉｐｔのｄｒａｗという関数が動きます。引数としてクリックされた場所の数字が渡されます。
３）function draw(n){
クリックされた場所が例えば３番目とすればｃｎｔ[3]は初期条件１ですからｉｍｇ１の画像（絵）を表示して，
ｃｎｔ[3]＝−１とします。
もう一度，３番目がクリックされるとｃｎｔ[3]＝−１ですので，ｉｍｇ０（背景）が表示されてｃｎｔ[3]＝１となります。
これでクリックされる毎に絵と背景が交互に表示されます。
これなどは，神経衰弱ゲームに応用できます。
２．マウスの矢印がきただけで絵が変わる
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例２＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
cnt=new Array(8);
img0=new Image(48,48);img1=new Image(48,48);
img0.src="../game2/back1.gif";img1.src="../game2/peke1.gif";
var i;
cnt[0]=1,cnt[1]=1,cnt[2]=1,cnt[3]=1,cnt[4]=1,cnt[5]=1,cnt[6]=1,cnt[7]=1;
function disp(){
for (i=0; i<8; i++){
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（"＜A HREF='JavaScript:' onMouseOver='draw("+i+")'＞＜IMG SRC='../game2/back1.gif' BORDER=0 WIDTH=48 HEIGHT=48＞＜/A＞");}
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜BR＞");
}
function draw(n){
if (cnt[n]<0) {ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[ｎ]．ｓｒｃ＝ｉｍｇ０．ｓｒｃ；}
if (cnt[n]>0) {ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[ｎ]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；}
cnt[n]=cnt[n]*(-1)
}
}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｄｉｓｐ（）；
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例２表示 ここをクリックして下さい。例が表示されます。
＜解説＞
１）例１との違い
＜A HREF='JavaScript:' onMouseOver='draw("+i+")'＞
この部分が例１と違います。onMouseOverとは，マウスがくればｄｒａｗ関数を実行します。
マウスの矢印がきただけで，絵が変わります。
３．マウスでボタン操作して絵の移動
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例３＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
img0=new Image(48,48);img1=new Image(48,48);
img0.src="../game2/back1.gif";img1.src="../game2/peke1.gif";
var i;
var x=3;
function disp(){
for (i=0; i<8; i++){
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（"＜IMG SRC='../game2/back1.gif' BORDER=0 WIDTH=48 HEIGHT=48＞"）;}
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（"＜BR＞"）;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[３]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；
}
function LEFT(fm){
if (x==0) {return;}
if (x>0) {
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[x-1]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[x]．ｓｒｃ＝ｉｍｇ０．ｓｒｃ；
x=x-1;
}}
function RIGHT(fm){
if (x==7) {return ;}
if (x<7) {
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[x]．ｓｒｃ＝ｉｍｇ０．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[x+1]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；
x=x+1;
}}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｄｉｓｐ（）；
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜FORM NAME="MyForm"＞
＜＝＜INPUT TYPE="button" VALUE="左方向" onClick="LEFT(this)"＞
＜INPUT TYPE="button" VALUE="右方向" onClick="RIGHT(this)"＞＝＞＜/FORM＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例３表示 ここをクリックして下さい。例が表示されます。
＜解説＞
１）function disp(){
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[３]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；
８枚の背景を表示して，３番のところに絵を表示します。
２）function LEFT(fm){
左への移動
ｘは，絵の場所です。０から７番まであります。
1.if (x==0) {return;}
左端は０番ですから左端までくれば，ボタンが押されても何もしません。
2.if (x>0) {
ｘが１以上で，絵の移動をします。
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[x-1]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[x]．ｓｒｃ＝ｉｍｇ０．ｓｒｃ；
例えば初期値ｘ＝３の状態からボタンが押されれば，２番の所に絵を表示して，３番目は背景に変えます。
x=x-1;
１個移動したので，ｘを１減じます。
３）function RIGHT(fm){
右への移動
if (x==7) {return ;}
右端は７番目ですので，ｘ＝７の時は何もしません。
if (x<7) {
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[x]．ｓｒｃ＝ｉｍｇ０．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[x+1]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；
例えば初期値ｘ＝３の状態からボタンが押されれば，３番目は背景に変えて，４番の所に絵を表示します。
x=x+1;
このようにして，ボタンが押されれば絵が右や左に移動します。
娯楽室の各部屋
