- ベストアンサー
文字を隠すゲーム２
ゲームを作っています。 ２０種のことわざからランダムに１つが選ばれて、 テーブルに表示。 テーブルは５０セル用意されており、 １文字につき１セルずつつかいます。 テーブルに表示する際ですが、文字は表示されず、隠されています。 セルをクリックすると文字が表示されて、 文字数の半分の数が見えたところで ”ことわざを推測してください”という質問のプロンプトをだし ユーザーに答えさせるというゲームです。 クリックすると文字が表示 という点でonclickを使うのですが、 現在、「文字が半分現れたら」という条件をいかにしてjavascriptで表現するかに困っています。 「onclickのイベントが行われた回数を表示して、その数が半分になるまでクリックできる」といった表現があるのでしょうか？ どなたかわかるかたがいらっしゃれば、アドバイスをいただけないでしょうか。よろしくお願いします。
- ilnmfay
- お礼率75% (137/181)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞「onclickのイベントが行われた回数を表示して、その数が半分になるまでクリックできる」といった表現があるのでしょうか？ 表現というのがわかりませんが、まんまその通りです。 半分になるまでクリックできる＝半分になったらクリックしても意味が無いようにすればいいのでは？ onclickされるごとにカウンタを増やして全文字数/2と比較すればいいと思います。 count = 0; function click_event() { if( count > 文字数/2 ) { prompt("ことわざを推測してください。"); } else { // 表示した文字数が半分に満たないときの処理 count++; } }
その他の回答 (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がうまく動いてくれません。 どこが悪いのかわからないのですが よろしければ コードをみてもらえませんか？ また別の質問として 立ち上げます。そのときにコードと一緒に。 ありがとうございました。