このコードは、簡単なじゃんけんゲームを作るためのものだよ!じゃんけんゲームは、「グー、チョキ、パー」のどれを出すかで勝負する遊びだよ。
最初に、ホームページを作っているんだ。ホームページには、グー、チョキ、パーの3つのボタン(それぞれの絵)があるよ。君が好きなボタンをクリックすると、コンピュータもランダムでグー、チョキ、パーを出すよ。
選んだ結果、ユーザーとコンピュータのどちらが勝ったかを教えてくれるよ!同じ手を出すと引き分けで、違う手を出すと勝ち負けが決まるんだ。
このコードでは、ユーザーが選んだ手とコンピュータが選んだ手を比べて、勝敗を決めているんだ。楽しんで遊んでね!
初めに
HTML CSS JavaScriptでつくる簡単なゲームを作成してみました。
Visual Studi Codeなどに貼り付けてから保存してお使いください。
画像も、rock.png、paper.png、scissors.pngとして保存してください。
それぞれの絵をクリックすると、コンピューターが選んだ絵と比べてじゃんけんの結果を示します。
解説
HTML
<!DOCTYPE html>
: HTML5の文書型宣言を指定しています。<html lang="en">
: HTML文書の言語を指定しています。<head>
: ページのメタ情報やスタイルの定義が含まれます。<style>
: ページのスタイルを指定しています。<title>
: ページのタイトルを指定しています。<body>
: ページの実際のコンテンツが含まれます。
CSS
body
: フォントとテキストの配置を指定しています。#result
および#choices img
: 結果と画像の表示スタイルを指定しています。
JavaScript
userChoice
関数: 画像がクリックされたときに呼び出され、ユーザーの選択とコンピュータのランダムな選択に基づいて結果を計算し、表示します。- ユーザーが選んだものとコンピュータが選んだものを比較して、勝者を判定しています。
仕組み
- ユーザーは画像(rock、paper、scissors)をクリックして選択します。
userChoice
関数が呼び出され、コンピュータがランダムに選んだものと比較して勝敗を判定します。- 判定結果が
#result
要素に表示されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
}
#result {
font-size: 24px;
margin-top: 20px;
}
#choices img {
width: 100px;
margin: 10px;
cursor: pointer;
}
</style>
<title>Rock Paper Scissors Game</title>
</head>
<body>
<h1>Rock Paper Scissors</h1>
<div id="choices">
<img src="rock.png" alt="Rock" onclick="userChoice('rock')">
<img src="paper.png" alt="Paper" onclick="userChoice('paper')">
<img src="scissors.png" alt="Scissors" onclick="userChoice('scissors')">
</div>
<div id="result">Choose your move!</div>
<script>
function userChoice(choice) {
var choices = ['rock', 'paper', 'scissors'];
var computerChoice = choices[Math.floor(Math.random() * 3)];
document.getElementById('result').innerText = "You chose: " + choice + ", Computer chose: " + computerChoice;
if (choice === computerChoice) {
document.getElementById('result').innerText += "\nIt's a tie!";
} else if (
(choice === 'rock' && computerChoice === 'scissors') ||
(choice === 'paper' && computerChoice === 'rock') ||
(choice === 'scissors' && computerChoice === 'paper')
) {
document.getElementById('result').innerText += "\nYou win!";
} else {
document.getElementById('result').innerText += "\nYou lose!";
}
}
</script>
</body>
</html>