じゃんけんアプリ
選択してください:
コンピュータの選択は
負け!出直してこい😡
以下が実際のプログラムです。セキュリティ脆弱性を考慮し、evalや他のサイトに遷移させる機能は含んでいません。HTMLとJavaScriptの両方が1つのファイルに入っています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Janken App</title>
<style>
body { font-family: sans-serif; }
h2 { margin-top: 1.5em; }
.result { font-size: 2em; }
.win { color: green; }
.lose { color: red; }
.hidden { display: none; }
.rotating-text {
display: inline-block;
animation: rotate 2s linear infinite;
transform-origin: 50% 50%;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
<script>
function janken(playerInput) {
// ランダムに手を選ぶ
let choices = ["グー✊", "チョキ✌️", "パー✋"];
let computerInput = choices[Math.floor(Math.random() * choices.length)];
// 結果を表示する
let result = document.querySelector(".result");
if (playerInput === computerInput) {
result.innerText = "引き分け!もう1回!";
} else if (
(playerInput === "グー✊" && computerInput === "チョキ✌️") ||
(playerInput === "チョキ✌️" && computerInput === "パー✋") ||
(playerInput === "パー✋" && computerInput === "グー✊")
) {
result.classList.remove("lose");
result.classList.add("win");
result.innerText = "あなたの勝ち!" + getEncouragement();
} else {
result.classList.remove("win");
result.classList.add("lose");
result.innerText = "負け!出直してこい😡";
document.querySelector(".rotating-text").classList.remove("hidden");
}
document.querySelector(".computer-choice").innerText = computerInput;
}
// ランダムなエールを取得する
function getEncouragement() {
let encouragements = [
"すごい!",
"やったね!",
"うまい!",
"すばらしい!",
"最高!",
"大当たり!",
"モーレツ!"
];
return encouragements[Math.floor(Math.random() * encouragements.length)];
}
</script>
</head>
<body>
<h1>じゃんけんアプリ</h1>
<p>選択してください:</p>
<button onclick="janken('グー✊')">グー✊</button>
<button onclick="janken('チョキ✌️')">チョキ✌️</button>
<button onclick="janken('パー✋')">パー✋</button>
<h2>コンピュータの選択は<span class="computer-choice"></span></h2>
<h2 class="result"></h2>
<p class="rotating-text hidden">負け!出直してこい😡</p>
</body>
</html>
```
このプログラムは、ユーザーが選択した手を受け取って、コンピュータがランダムに手を選択します。その後、選択した手の勝敗に応じて結果を表示し、勝った場合にはランダムな応援メッセージを表示します。負けた場合には、「負け!出直してこい😡」というテキストが高速で回転します。
このアプリには、セキュリティ脆弱性が含まれていません。ユーザーが別のサイトに移動することを防ぐため、ボタンがクリックされたときに何が起こるかを厳密に管理しています。また、eval関数は使わず、alert関数も使用していません。うまく機能すると「すごい!」「やったね!」「うまい!」「最高!」「大当たり!」「モーレツ!」などのランダムな応援メッセージが表示されます!