- ベストアンサー
文字を隠すゲーム２
ゲームを作っています。 ２０種のことわざからランダムに１つが選ばれて、 テーブルに表示。 テーブルは５０セル用意されており、 １文字につき１セルずつつかいます。 テーブルに表示する際ですが、文字は表示されず、隠されています。 セルをクリックすると文字が表示されて、 文字数の半分の数が見えたところで ”ことわざを推測してください”という質問のプロンプトをだし ユーザーに答えさせるというゲームです。 クリックすると文字が表示 という点でonclickを使うのですが、 現在、「文字が半分現れたら」という条件をいかにしてjavascriptで表現するかに困っています。 「onclickのイベントが行われた回数を表示して、その数が半分になるまでクリックできる」といった表現があるのでしょうか？ どなたかわかるかたがいらっしゃれば、アドバイスをいただけないでしょうか。よろしくお願いします。
- ilnmfay
- お礼率75% (137/181)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは （？＿？）自身のでは自分のもご提示していただいたソースも動くのですが・・・(htmlファイルにしてるからかな～？） それはさておきちょっと見てみました（＾＾） ご提示のソースではテーブルのセルが50個あって終わりの方、何個か色表示されなかった（＞＜） その下にも空白のセルがあるみたいですが・・・ また左半分だけopenできて右半分はダブクリで1個ずつopenされる セルの中身は全部『undefined』 string1[4] = "A cat has nine lives."; のように指定してやると5([ ]+1)番目のセルに全部書き出される・・・質問者様もこのような状態で？ また動かないかもしれないですけど（－－；） case6～19は文字数のため省略してます <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><title></title></head><body onload="setEvent();"> <script language="JavaScript"> <!-- if (document.getElementById){ document.write ("<style type='text/cs\s'>"); document.write ("<!--"); document.write ("span{color:lavender;background-color:lavender;"); document.write ("border:2px ridge ivory;cursor:hand;cursor:pointer;}"); document.write ("-->"); document.write ("</style>"); } //--> <!-- var a = Math.random() *100 ; var b = Math.ceil(a); switch(b%20){ case 0 : string1 = new String("A bad cause requires many words."); break; case 1 : string1 = new String("A book is like a garden carried in the pocket."); break; case 2 : string1 = new String("A bird in the hand is worth two in a bush."); break; case 3 : string1 = new String("A broken hand works, but not a broken heart."); break; case 4 : string1 = new String("A cat has nine lives."); break; case 5 : string1 = new String("Friendship is a furrow in the sand."); break; } function setEvent(){ if (!document.getElementById) return; var elms = document.getElementsByTagName("span"); for(i = 0; i < elms.length; i++){ elms[i].onclick=show; } } function show(e){ if(window.event) obj =window.event.srcElement; else if(e) obj = e.currentTarget; obj.style.backgroundColor="ivory"; obj.style.color="black"; } function hide(e){ if(window.event) obj =window.event.srcElement; else if(e) obj = e.currentTarget; obj.style.backgroundColor="lavender"; obj.style.color="lavender"; } cnt=0; m=Math.floor(string1.length/2); function strFade() { cnt++; if(cnt >= m) { proverb = prompt("諺を予想してください",""); if(proverb == string1) alert("正解！！"); else alert("残念！！もう一文字開けてみてください"); } } document.write("<table border=4>") document.write("<tr>"); for(var i=0;i<string1.length;i++) { document.write("<td onClick=strFade()><span>" +string1.charAt(i)+"</span></td>"); } document.write("</tr></table>"); --> </script> </body></html> ただまだいくつか問題があって スペースの部分は色反転しない スペースも文字数と考えられて必要以上に文字を開くようになる 正解しても更新ソースが無いのでそのまま 同じ場所や少しずれた位置でクリックしても回数が増える 『i』『l』など幅の短い文字はクリックしづらい という点を改善しないといけないのですが・・・ 下2つはもう一段セルを作ってボタンなどを作ってクリックしたら"display:none;"にするとかの方法で何とかなりそうですが・・・ セルの幅が増えると色反転の見た目が悪くなります（＞＜）
お礼
回答ありがとうございます。 だいぶ改良したのですが、 count がうまく動いてくれません。 あと、回答者さんのコードをコピペしたのですがまただめでした。 もう一度、別の質問として立ち上げるのでよければ、そこで改良版のコードを見ていただけないでしょうか。 よろしくお願いします。
お礼
回答ありがとうございます。 やってみたのですが、countがうまく動いてくれません。 どこが悪いのかわからないのですが よろしければ コードをみてもらえませんか？ また別の質問として 立ち上げます。そのときにコードと一緒に。 ありがとうございました。