はじめに
アプレンティスの課題として「じゃんけんゲーム with チートモード」を実装しました。
HTML,CSS
今回はJavaScriptの課題なのでHTML、CSSは用意されたものを使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>じゃんけんゲーム with チートモード</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
<style>
/* 基本設定 */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: 'Outfit', sans-serif;
background: linear-gradient(135deg, #1e1e2f, #12121a);
color: #fff;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: #fff;
text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.2);
}
.subtitle {
font-size: 1.2rem;
margin-bottom: 2rem;
color: #aaa;
}
.button-group {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
button {
padding: 0.8rem 1.5rem;
font-size: 1.2rem;
border: none;
border-radius: 8px;
background: #2c2c3d;
color: #fff;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
}
button:hover {
background: #5c00ff;
color: #fff;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 0 10px #5c00ff, 0 0 20px #5c00ff33;
}
#cheatMode {
transform: scale(1.5);
margin-right: 10px;
}
label {
display: flex;
align-items: center;
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 1.5rem;
color: #eee;
}
#result {
font-size: 1.6rem;
font-weight: bold;
min-height: 2em;
transition: color 0.3s ease;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
/* 勝敗の結果をネオンカラーで表示するためのクラスたち */
/* JavaScriptで .win / .lose / .draw を result 要素に追加することで色が変わる */
.win { color: #57aaff; }
.lose { color: #ff5555; }
.draw { color: #00ff99; }
/* 背景に敷かれたアニメーション用レイヤー */
/* 通常時はグラデ背景、チートモード時にアニメが発動 */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
background: linear-gradient(135deg, #1e1e2f, #12121a);
transition: background 1s ease;
}
/* チートモードがONになったときに適用されるアニメーション */
/* bodyに .cheat-active がつくと .overlay にこのアニメが発動 */
.cheat-active .overlay {
animation: cheatGlow 1s infinite alternate;
}
/* 背景が変化する演出（紫色） */
@keyframes cheatGlow {
0% { background: #2e003e; }
100% { background: #5e00a0; }
}
</style>
</head>
<body>
<!-- チートモードON時に背景を変化させるための専用要素。CSSで制御されます -->
<div class="overlay"></div>
<h1>じゃんけんゲーム</h1>
<p class="subtitle">普通のじゃんけん... と思いきや？</p>
<div class="button-group">
<button>✊ グー</button>
<button>✌️ チョキ</button>
<button>🖐 パー</button>
</div>
<!-- チートモードのON/OFFを切り替えるチェックボックス -->
<!-- JavaScriptでこのチェック状態を取得するには getElementById('cheatMode') を使います -->
<label>
<input type="checkbox" id="cheatMode"> チートモードをONにする
</label>
<!-- 勝敗の結果を表示するエリア -->
<!-- JavaScriptでここにテキストを表示するには getElementById('result') を使います -->
<p id="result"></p>
<script>
// =========================================
//
// ここにじゃんけんゲームのロジックを実装してください
//
// =========================================
</script>
</body>
</html>
スッテップ１
じゃんけんの勝敗を判定するプログラムを作ります。
function judge(player, cpu){
if(player == cpu) return "引き分け";
else if(player == "グー" && cpu == "チョキ") return "勝ち";
else if(player == "パー" && cpu == "グー") return "勝ち";
else if(player == "チョキ" && cpu == "パー") return "勝ち";
else return "負け"
}
ボタンが押された時に、そのボタンのテキストを取得。
そして、randomに相手の出す手を決める。
最後に結果を出力
buttons.forEach((button)=>{
button.addEventListener("click",()=>{
const playerChoice = button.textContent.split(' ')[1];
let cpuChoice;
cpuChoice = hands[Math.floor(Math.random()*hands.length)];
const result = judge(playerChoice,cpuChoice);
resultDisplay.textContent = `あなた: ${playerChoice} / CPU: ${cpuChoice} → ${result}`;
})
})
randomは0から1未満の値を返すのでそれに３をかけることで0から2.9の値になり、floorで切り捨てすることで0,1,2の値をランダムで返すことができます。
スッテップ２
<label>
<input type="checkbox" id="cheatMode"> チートモードをONにする
</label>
チェックボックスにはcheatModeというidが設定されているのでこれを取得します。
const cheatModeCheckbox = document.getElementById("cheatMode");
チェックボックスがチェックされてるかどうか判定する処理を書きます。
if(cheatModeCheckbox.checked){
cpuChoice = cpuLoseHand(playerChoice);
}else{
cpuChoice = hands[Math.floor(Math.random()*hands.length)];
}
cpuLoseHand関数はプレイヤーの手に対して負ける手を返します。
function cpuLoseHand(player){
if(player=="グー") return "チョキ";
if(player=="チョキ") return "パー";
if(player=="パー") return "グー";
}
スッテップ３
結果に応じてresultDisplayにクラスを付与
これにより勝敗に応じてテキストの色を変えることができる。
function updateResultUI(result){
resultDisplay.classList.remove("win","lose","draw");
if(result == "勝ち") resultDisplay.classList.add("win");
else if(result == "負け") resultDisplay.classList.add("lose");
else resultDisplay.classList.add("draw");
}
チェックボックスがチェックされた時にcheat-activeクラスをbodyに付与
cheatModeCheckbox.addEventListener("change",()=>{
if(cheatModeCheckbox.checked){
document.body.classList.add("cheat-active");
}else{
document.body.classList.remove("cheat-active");
}
})
まとめ
今回はじゃんけんゲームを作ることで、ボタンやチェックボックスでモード切り替え、画面に表示される勝敗や背景アニメーションなどの演出を通じて、JavaScriptによるロジックの切り替え・状態管理・DOM操作を勉強しました。