メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

【Javascript】じゃんけんプログラム

newwebweb
2chのまとめ見ていたら、役に立つプログラムつくってみたいなー
ってニュアンスのスレがまとめられていたんですよ。
レスしてる人が、じゃんけんから作ってみたらーとか言ってたので、
おしおらもじゃんけん作ってみるかと思って作ってみました。

作ってみて思ったのは相手を”つくんなきゃいけないんだな”って思いました。
まぁ作る相手なんて大したこと無いんだけれど、相手作ってんだなーって思いました。

HTMLを作る

まずユーザー側が何を出すか選択できるように
ラジオボタンを3つ作ります。


<html>
     <head>
     </head>
     <body>
          <form id="betform">
               <input type="radio" name="bet" value="1">goo
               <input type="radio" name="bet" value="2">pa
               <input type="radio" name="bet" value="3">choki
          </form>
     </body>

</html>


イベントを登録する

次にクリック時で動作するようにイベントを登録します。


          window.onload = function(){
               var el = document.getElementsByName("bet")
               for (var i in el) {
                    if(i != "item" && i != "length") {
                         el[i].addEventListener("click",act,true)
                    }
               }
          };

こんな感じです。

userの行動を記録する

自分がじゃんけんで選択した指を記録しておきます。



               var el = document.getElementsByName("bet")
               var user
               var enemy

               var userAct
               var enemyAct


               userAct = function () {
                         for (var i in el) {
                              if(i != "item" && i != "length") {
                                   if(el[i].checked)
                                   {
                                        user = el[i].value
                                   }
                              }
                         }
                         return user
                    }
               
               user = userAct()

相手の行動を作る

相手の行動を作成します。

               


                enemyAct = function() {
                    enemy = Math.floor(Math.random() * (100 - 0) + 1);

                    if(enemy < 30) {
                         enemy = "goo"
                    } else if(enemy > 30 && enemy < 50) {
                         enemy = "pa"
                    } else {
                         enemy = "choki"
                    }
                    return enemy
               }

               enemy = enemyAct()

適当に乱数を作って、この乱数の範囲で条件を設定してます。
でもこういう作り方より、Math.randomに3をかけて乱数作って
それをMath.floorする人を良く見ます。

なので、そっちのが一般的だと思います。

相手の行動から結果を作る

というわけで最後のプログラムです。

                playGame = function() {
                    if((enemy == "goo" && user == 1) || (enemy == "pa" && user == 2) || (enemy == "choki" && user == 3)) {
                         alert("相手は"+enemy+"おあいこ")
                    } else if((enemy == "goo" && user == 2) || (enemy == "pa" && user == 3) || (enemy == "choki" && user == 1)) {
                         alert("相手は"+enemy+"あなたの勝ち")
                    } else {
                         alert("相手は"+enemy+"あなたの負け")
                    }                    
               }

               playGame()

なんでやねーーーんって言われそうですけど、僕これしか思いつきませんでした。
優しい人優しく教えて下さい。なんか凄い決め打ちな感じなので、
あんまり良くないと思います。時間ある時に勉強しておきます。

あ、でも一応動くはずですよ!
まじでーって思った人はソース乗っけとくので、HTMLにでも貼って下さい。



<html>
     <head>
     <script>


          window.onload = function(){
               var el = document.getElementsByName("bet")
               for (var i in el) {
                    if(i != "item" && i != "length") {
                         el[i].addEventListener("click",act,false)
                    }
               }
          };


          function act() {
               
               var el = document.getElementsByName("bet")
               var user
               var enemy

               var userAct
               var enemyAct

               userAct = function () {
                         for (var i in el) {
                              if(i != "item" && i != "length") {
                                   if(el[i].checked)
                                   {
                                        user = el[i].value
                                   }
                              }
                         }
                         return user
                    }
               
               user = userAct()

               enemyAct = function() {
                    enemy = Math.floor(Math.random() * (100 - 0) + 1);
                    console.log(enemy)
                    if(enemy < 30) {
                         enemy = "goo"
                    } else if(enemy > 30 && enemy < 50) {
                         enemy = "pa"
                    } else {
                         enemy = "choki"
                    }
                    return enemy
               }

               enemy = enemyAct()

               playGame = function() {
                    if((enemy == "goo" && user == 1) || (enemy == "pa" && user == 2) || (enemy == "choki" && user == 3)) {
                         alert("相手は"+enemy+"おあいこ")
                    } else if((enemy == "goo" && user == 2) || (enemy == "pa" && user == 3) || (enemy == "choki" && user == 1)) {
                         alert("相手は"+enemy+"あなたの勝ち")
                    } else {
                         alert("相手は"+enemy+"あなたの負け")
                    }                    
               }

               playGame()

          }


     </script>
     </head>
     <body>
          <form id="betform">
               <input type="radio" name="bet" value="1">goo
               <input type="radio" name="bet" value="2">pa
               <input type="radio" name="bet" value="3">choki
          </form>
     </body>

</html>



関連記事

コメントをお待ちしております