<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="janken.css"> <title>じゃんけん</title> <style> body { background-size: cover; background: url(%E8%83%8C%E6%99%AF.png) center center / cover no-repeat fixed; } </style> </head> <body> <header> <h1>じゃんけん</h1> </header> <main> <ul> <div id="gu_btn"><img src="gg.png"></div> <div id="cho_btn"><img src="chichi.png"></div> <div id="par_btn"><img src="pa.png"></div> </ul> <div id="pc">コンピュータの出した手は?</div> <div id="kekka">ここに結果を表示します</div> <div id="scoreBoard">あ</div> </main> <footer></footer> <script> var count = { pc: 0, me: 0, }; //************************************************ //ここから下に記述 //----------------------------------------- //1.乱数関数は以下に記述[関数はイベントの外に記述、覚えておきましょう!] //----------------------------------------- function rand() { var val = Math.floor(Math.random() * 3 + 1); //関数化する! return val; } //----------------------------------------- //グーのClickイベントはいかに記述 //----------------------------------------- var gu_btn = document.querySelector("#gu_btn"); gu_btn.onclick = function() { $r = rand(); //if=1=パー 2=グー 3=チョキ if ($r == 1) { document.querySelector("#kekka").innerHTML = "PCの勝ち"; document.querySelector("#pc").innerHTML = "パー"; count["pc"]++; } if ($r == 2) { document.querySelector("#kekka").innerHTML = "引き分け"; document.querySelector("#pc").innerHTML = "グー"; } if ($r == 3) { document.querySelector("#kekka").innerHTML = "私の勝ち"; document.querySelector("#pc").innerHTML = "チョキ"; count["me"]++; } document.querySelector("#scoreBoard").innerHTML = "PC:" + count["pc"] + " : 私" + count["me"]; }; //----------------------------------------- //チョキのClickイベントはいかに記述 //----------------------------------------- var cho_btn = document.querySelector("#cho_btn"); cho_btn.onclick = function() { $r = rand(); //if=1=パー 2=グー 3=チョキ if ($r == 1) { document.querySelector("#kekka").innerHTML = "私の勝ち"; document.querySelector("#pc").innerHTML = "パー"; count["me"]++; } if ($r == 2) { document.querySelector("#kekka").innerHTML = "PCの勝ち"; document.querySelector("#pc").innerHTML = "グー"; count["pc"]++; } if ($r == 3) { document.querySelector("#kekka").innerHTML = "引き分け"; document.querySelector("#pc").innerHTML = "チョキ"; } document.querySelector("#scoreBoard").innerHTML = "PC:" + count["pc"] + " : 私" + count["me"]; }; //----------------------------------------- //パーのClickイベントはいかに記述 //----------------------------------------- var par_btn = document.querySelector("#par_btn"); par_btn.onclick = function() { $r = rand(); //if=1=パー 2=グー 3=チョキ if ($r == 1) { document.querySelector("#kekka").innerHTML = "引き分け"; document.querySelector("#pc").innerHTML = "パー"; } if ($r == 2) { document.querySelector("#kekka").innerHTML = "私の勝ち"; document.querySelector("#pc").innerHTML = "グー"; count["me"]++; } if ($r == 3) { document.querySelector("#kekka").innerHTML = "PCの勝ち"; document.querySelector("#pc").innerHTML = "チョキ"; count["pc"]++; } document.querySelector("#scoreBoard").innerHTML = "PC:" + count["pc"] + " : 私" + count["me"]; }; //ここから上に記述 //************************************************ </script> </body> </html>
現在じゃんけんゲームを作成しています。
コンピュータの出した手は?の部分にコンピュータがチョキだったらチョキの画像を、グーだったらグーの画像を表示させたいです。
数時間試行錯誤してみたのですが、実行することができなかったので力を貸してほしいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/15 13:57