Q&A
>javaで作成中の
JavaとJavaScriptは全く別物なので確実に使い分けてください。
javaScriptで作成中のオセロゲームがうまく動作しない
現在javascriptで簡単なオセロゲームを作っています。
駒の置き合いはできて、駒の数を集計し勝敗を決めるシステムを作ろうとしたところ、今まで表示されていた画像諸々消えてしまいボタンだけが残ってしまいました。
発生している問題・エラーメッセージ
Uncaught SyntaxError: Invalid or unexpected token Uncaught ReferenceError: init is not defined
該当のソースコード
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var Flag=true; // 白黒手番フラグ var M=[[0,0,0,0,0,0,0,0,0,0], // 盤面情報配列 [0,0,0,0,0,0,0,0,0,0], // 0:駒無し [0,0,0,0,0,0,0,0,0,0], // 1:白駒 [0,0,0,0,0,0,0,0,0,0], // 2:黒駒 [0,0,0,0,1,2,0,0,0,0], [0,0,0,0,2,1,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0]]; function ok(y,x) // 置けるか調べる関数 { var ry,rx,dy,dx; if (Flag) M[y][x]=2; // 黒を置く else M[y][x]=1; // 白を置く for (dx=-1;dx<=1;dx++){ for (dy=-1;dy<=1;dy++){ if (!(dx==0 && dy==0) && M[y][x]!=[y+dy][x+dx]){ rx=x;ry=y; while (1<=rx && rx<=8 && 1<=ry && ry<=8 && M[ry][rx]!=0 ){ rx+=dx;ry+=dy; if (M[y][x]==M[ry][rx]){ return true; } } } } } M[y][x]=0; // 駒のない状態に戻す return false; } function yx(event) //クリックイベント処理関数 { var y,x,n,obj,ban; y=Math.floor(event.clientY/50); x=Math.floor(event.clientX/50); n=(y-1)*8+(x-1); obj=document.getElementById("img"+n); ban=document.getElementById("img64"); if (M[y][x]==0 && ok(y,x)) { obj.src="black.jpg"; M[y][x]=2; reverse(y,x); Flag=!Flag; ban.src="white.jpg"; setTimeout("computer()",3000); // コンピュータの手 } else if (M[y][x]==1){ // 白駒 obj.src="black.jpg"; M[y][x]=2; } else if (M[y][x]==2){ // 黒駒 obj.src="white.jpg"; M[y][x]=1; } } function init() // 盤面初期化関数 { var y,x,img,n=0,tag=""; for (y=50;y<=50*8;y+=50){ for (x=50;x<=50*8;x+=50){ if (n==27 || n==36){ // 白い駒 img="<img src='white.jpg'"; } else if (n==28 || n==35){ // 黒い駒 img="<img src='black.jpg'"; } else { // 駒無し img="<img src='green.jpg'"; } tag+=img+" id='img"+n+"' style='position:absolute;left:"+x+"px;top:"+y+"px' onClick='yx(event)' />"; n++; } } tag+="<img id='img64' src='black.jpg' style='position:absolute;left:500px;top:50px' />"; document.getElementById("canvas").innerHTML=tag; } function reverse(y,x) // 自動反転関数 { var ry,rx,dy,dx,n,obj; for (dx=-1;dx<=1;dx++){ for (dy=-1;dy<=1;dy++){ if (!(dx==0 && dy==0) && M[y][x]!=M[y+dy][x+dx]){ ry=y;rx=x; while (1<=rx && rx<=8 && 1<=ry && ry<=8 && M[ry][rx]!=0){ ry+=dy;rx+=dx; if (M[y][x]==M[ry][rx]){ // 同じ色の駒 ry-=dy;rx-=dx; // 1つ戻す while (!(x==rx && y==ry)){ n=(ry-1)*8+(rx-1); obj=document.getElementById("img"+n); if (M[ry][rx]==1){ // 白なら黒に obj.src="black.jpg"; M[ry][rx]=2; } else { // 黒なら白に obj.src="white.jpg"; M[ry][rx]=1; } ry-=dy;rx-=dx; // 逆戻り } break; } } } } } } function computer() // コンピュータの手関数 { var i,y,x,n,obj,ban,max=0; for (y=1;y<=8;y++){ for (x=1;x<=8;x++){ if (M[y][x]==0 && ok(y,x)){ M[y][x]=1; // 仮に置く n=check(y,x); if (n>max){ max=n; yy=y;xx=x; } M[y][x]=0; // 戻す } } } if (max!=0){ n=(yy-1)*8+(xx-1); obj=document.getElementById("img"+n); obj.src="white.jpg"; M[yy][xx]=1; reverse(yy,xx); } ban=document.getElementById("img64"); ban.src="black.jpg"; Flag=!Flag; } function check(y,x) // y,x位置に置いたときにひっくり返せる数を求める関数 { var dy,dx,ry,rx,n=0; for (dx=-1;dx<=1;dx++){ for (dy=-1;dy<=1;dy++){ if (!(dx==0 && dy==0) && M[y][x]!=M[y+dy][x+dx]){ ry=y;rx=x; while (1<=rx && rx<=8 && 1<=ry && ry<=8 && M[ry][rx]!=0){ ry+=dy;rx+=dx; if (M[y][x]==M[ry][rx]){ // 同じ色の駒 ry-=dy;rx-=dx; // 1つ戻す while (!(x==rx && y==ry)){ n++; ry-=dy;rx-=dx; // 逆戻り } break; } } } } } return n; } function judge(){ var x,y,white=0,black=0; for(y=1;y<=8;y++){ for(x=1;x<=8;x++){ if (M[y][x].equals("1")) white++; else if (M[y][x].equals("2")) black++; } } if (black == white) { document.getElementById("draw").src="DRAW.jpg"; draw.style.visibility="visible"; } else if (black > white) { document.getElementById("winblack").src="winnerBLACK.jpg"; black.style.visibility="visible"; } else { document.getElementById("winwhite").src="winnerWHITE.jpg"; white.style.visibility="visible"; } } </script> </head> <body> <input type="button" value="GAMESET" onClick="judge()" style="position:absolute;left:210px;top:460px" /> <div id="canvas"> </div> <img id="winwhite" src="winnerWHITE.jpg" style="position:absolute;left:150px;top:200px;visibility:hidden" /> <img id="draw" src="DRAW.jpg" style="position:absolute;left:150px;top:200px;visibility:hidden" /> <img id="winblack" src="winnerBLACK.jpg" style="position:absolute;left:150px;top:200px;visibility:hidden" /> <script type="text/javascript"> init(); </script> </body> </html>
試したこと
画像のコードで問題になりうるところは見受けられませんでした。
補足情報（FW/ツールのバージョンなど）
MonacaCloudIDEで作成しています。プレビュータブの機種はAndroidのGalaxyS8(1440×2960)です。
ご指摘有難う御座います。誤解を招くような説明をしてしまい申し訳ありません。
いえ謝ってほしいわけではなく、確実な表現を心がけないとご自身が損するだけなので。
失礼しました。teratailを利用するのはこれが初めてでして、回答をして下さる方々にわかりやすく伝えることが一番重要なことにも関わらず、不確実な表現力のままで質問を投稿してしまいました。以後このようなことを繰り返さないよう細心の注意を払います。
そこまでかしこまらなくても、構えなくても
指摘されたら質問内容を調整すれば良いだけかと思います。
内容により必要な情報は違いますし、人によってもほしい情報は違います。
はじめから全て完璧にできるなら質問はしていないと思います。
ひとまず自身の持っている情報や分かっていることを要約せず省略せず書いておけば大抵はなんとかなります。
細かいところは言われないと気づかないこともあるでしょうしね
回答2件
0
自分の端末で試してみて表示が少し変わった（出ない→画像なしのアイコン）
のでinit()のimg変数を初期化してみてはどうでしょうか？
JavaScript
1 var y,x,img="",n=0,tag="";
投稿2020/10/12 08:40
総合スコア83
Gak様、Lhankor_Mhy様のご指摘のもと、画像が表示されないという問題は解決したのですが、今度はボタンを押しても集計の処理に移らないという問題が発生しました。重ね重ねの質問になってしまい申し訳ありません。もし他に問題がある箇所があれば指摘して下さると大変嬉しいです。
試したところ、以下のエラーが出ました。
集計の処理には移っていますが、エラーが発生してます。
M[][]に対する比較の記述が間違っているようです。
test.html:171 Uncaught TypeError: M[y][x].equals is not a function
at judge (aaa.html:171)
at HTMLInputElement.onclick (aaa.html:191)
M[y][x].equalsの.equalsを==に変えたところ上手く動作しました！皆さん、ご丁寧な回答を誠に有難う御座いました!
0
ベストアンサー
typoではありませんか？
js
1document.getElementById("winblack").src="winnerBLACK.jpg";\ 2 ^これ。
投稿2020/10/12 08:25
総合スコア36960
あなたの回答
tips
プレビュー
