こんにちは、AM0500です。
賭博黙示録カイジはいつ続きを読めるのでしょうか？
というわけで、カードバトルゲームをシンプルにじゃんけんで作成したゲームを作成してみました。三すくみのシステムはどこにでもあるので、元のジャンケンに戻してシンプルにしたという感じのゲームを作ってみました。
🔗 実際にプレイしてみる
👉 カードゲームバトル要素を加えたじゃんけんゲーム
👉 使用したAI Claude（claude 4 sonnet）はこちら
🎮 ゲーム画面（スクリーンショット）
📝 一言コメント
世の中にはいろいろなカードゲームがありますが、基本的なシステムを追求するとこういう形になるだろう、という見本的になゲームにしてみました。
ゲーム開始時5枚のカードから好きなカードを3枚選んで戦うシステムになっています。じゃんけんに勝てればダメージは2倍！相手の手札を看破して有利にたちましょう。
🧠 使用したClaudeへのプロンプト
今回、使用したプロンプトです。
# カードバトルゲーム作成プロンプト
以下の仕様に沿って、HTML / CSS / JavaScript でPCとスマホの両方で動作する簡易カードバトルゲームを作成してください。
## ゲーム概要
じゃんけんをモチーフとしたカードゲーム。CPUとプレイヤーが手札3枚で対戦し、カードが2枚破壊されたら敗北、先に相手のカードを2枚破壊した方が勝利。
## カード仕様
- **カード種類**: 「グー」「チョキ」「パー」の3種類
- **パラメータ**: 各カードに「攻撃力」「ライフ」が設定
- **バランス調整**: 攻撃力＋ライフ（3倍換算前）の合計は常に一定（例：合計10なら攻撃力5 → ライフ 15）
- **制限**: 攻撃力の最低値は3以上
## ゲームの流れ
1. **初期配布**: プレイヤーに5枚のカードをランダム配布
2. **手札選択**: そこから好きな3枚を選んで手札とする
3. **CPU手札**: CPUもランダムで3枚選ぶ（裏面表示で内容は見えない）
4. **ターン制バトル**: お互いの手札からカードを選んで戦闘
5. **勝敗判定**: どちらかのカードが2枚破壊されたらゲーム終了
## ターンの進行
### カード選択フェーズ
- プレイヤーの手札を表示（生きているカードのみクリック可能）
- CPUの手札を裏面で表示
- プレイヤーがカードを選択すると、CPUも自動でランダム選択
### じゃんけんぽん演出
- 「じゃん」→「けん」→「ぽん！」の掛け声を1秒間隔で表示
- パルスアニメーション付きで臨場感を演出
### 戦闘結果とダメージ計算
- **勝利時**: 勝った側が攻撃力の2倍ダメージを与える + 負けた側が自分の攻撃力の半分ダメージを受ける
- **敗北時**: 負けた側が相手の攻撃力の2倍ダメージを受ける + 勝った側が自分の攻撃力の半分ダメージを受ける
- **あいこ時**: お互いが相手の攻撃力の半分ダメージを受ける
- **カード破壊**: ライフが0以下になったカードは破壊され使用不可
## UI/UX仕様
### 画面構成
- **タイトル画面**: ゲーム開始ボタン
- **カード選択画面**: 5枚から3枚選択、選択済み表示、決定ボタン
- **バトル画面**: 手札表示、じゃんけん演出、戦闘結果、進行ボタン
- **結果画面**: 最終勝敗、タイトルに戻るボタン
### カードデザイン
- **美しいグラデーション背景**でカードを装飾
- **絵文字表示**: グー👊、チョキ✌、パー✋
- **ライフバー**: カードの残りライフを視覚的に表示（30%以下で赤色）
- **ホバーエフェクト**: カードが浮き上がるアニメーション
- **選択状態**: 選択されたカードをハイライト表示
- **破壊状態**: 破壊されたカードは暗く縮小表示
- **裏面デザイン**: CPUカードは「?」マークで表示
### アニメーション
- **カード選択時**: スケール＆ボーダー変更
- **じゃんけんぽん**: パルスアニメーション
- **カード表示**: 回転アニメーション（cardFlip）
- **ホバー効果**: 浮き上がりエフェクト
### レスポンシブ対応
- **PC/スマホ両対応**: タップ・クリック両方で操作可能
- **画面サイズ調整**: メディアクエリで最適化
- **タッチフレンドリー**: 十分なタッチ領域を確保
## 技術的制約・要件
- **Blogger対応**: 特殊記号（×や○など）は使用禁止、通常のテキストのみ
- **軽量実装**: 外部ライブラリ不要、単一HTMLファイル
- **完全リセット**: タイトル画面に戻る際は全ての表示状態をリセット
- **エラー処理**: ゲーム状態の不整合を防ぐ適切な制御
## 実装時の注意点
1. **ゲーム状態管理**: gameStateオブジェクトで一元管理
2. **画面遷移**: showScreen()関数でクリーンな画面切り替え
3. **カード生成**: generateRandomCard()で適切なバランス調整
4. **戦闘処理**: じゃんけんルールとダメージ計算の正確な実装
5. **UI更新**: 各アクション後の適切な表示更新
このプロンプトに従って、戦略性と演出を兼ね備えた高品質なカードバトルゲームを作成してください。
基本的にはこれで作成されますが、必要に応じて修正依頼を行うようにしてください。ブログ公開の作品はブログの表示の問題により記号や背景色の調整しております。
🕹️ Claudeが返してくれた説明文
ゲームの特徴:
レスポンシブデザイン: PCとスマホの両方で快適にプレイ可能
直感的なカードデザイン: グー(✊)、チョキ(✌️)、パー(✋)が一目で分かる
美しいUI: グラデーションと影効果で現代的なデザイン
スムーズなアニメーション: ホバー効果やカード選択時の視覚的フィードバック
実装した仕様:
カード生成: 攻撃力3-7、ライフは(10-攻撃力)×3で自動計算
手札選択: 5枚から3枚を選択する直感的なインターフェース
バトルシステム: じゃんけんの勝敗に基づくダメージ計算
勝敗判定: 2枚破壊で敗北、視覚的な結果表示
ゲーム進行: ターン制バトルとリスタート機能
技術的な配慮:
特殊記号を使用せず、絵文字で分かりやすく表現
軽量なコード（外部ライブラリ不使用）
Blogger対応（単一HTMLファイル）
タッチとクリックの両方に対応
💡 ソースコード（HTML）
下記がゲーム本体のhtmlの中身になります。ご自由にご利用ください。もちろん改変などもOKです。リンクや紹介していただけたら嬉しいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カードバトルゲーム</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #333;
}
.game-container {
width: 90%;
max-width: 800px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
h1 {
text-align: center;
color: #4a5568;
margin-bottom: 30px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.screen {
display: none;
}
.screen.active {
display: block;
}
.card {
width: 120px;
height: 160px;
background: linear-gradient(145deg, #f0f4f8, #d6e8f5);
border: 3px solid #4299e1;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
margin: 10px;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.card.selected {
background: linear-gradient(145deg, #ffd89b, #19547b);
border-color: #ff6b6b;
color: white;
}
.card.destroyed {
opacity: 0.3;
background: linear-gradient(145deg, #666, #333);
border-color: #999;
transform: scale(0.9);
}
.card-type {
font-size: 2.5em;
font-weight: bold;
margin-bottom: 5px;
}
.card-stats {
text-align: center;
font-size: 0.9em;
font-weight: bold;
}
.card-name {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 10px;
}
.card-back {
background: linear-gradient(145deg, #2d3748, #4a5568);
color: white;
border-color: #2d3748;
}
.card-back .card-type {
font-size: 1.5em;
}
.cards-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 20px 0;
}
.hand-selection {
text-align: center;
margin-bottom: 20px;
}
.selected-cards {
display: flex;
justify-content: center;
gap: 10px;
margin: 20px 0;
}
.battle-area {
display: flex;
justify-content: space-between;
align-items: center;
margin: 30px 0;
}
.player-side, .cpu-side {
flex: 1;
text-align: center;
}
.vs-section {
font-size: 2em;
font-weight: bold;
color: #e53e3e;
margin: 0 20px;
}
.battle-cards {
display: flex;
justify-content: center;
gap: 10px;
margin: 20px 0;
}
.hand-display {
margin: 20px 0;
}
.hand-cards {
display: flex;
justify-content: center;
gap: 8px;
margin: 10px 0;
}
.hand-cards .card {
width: 80px;
height: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.hand-cards .card:hover {
transform: translateY(-3px);
}
.hand-cards .card.selected-for-battle {
transform: scale(1.1);
border-color: #ff6b6b;
box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}
.janken-countdown {
text-align: center;
font-size: 3em;
font-weight: bold;
color: #e53e3e;
margin: 30px 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
animation: pulse 1s ease-in-out;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.card-reveal {
animation: cardFlip 0.6s ease-in-out;
}
@keyframes cardFlip {
0% { transform: rotateY(180deg); }
100% { transform: rotateY(0deg); }
}
.result-text {
font-size: 1.2em;
font-weight: bold;
text-align: center;
margin: 20px 0;
padding: 10px;
border-radius: 10px;
}
.win {
background: linear-gradient(145deg, #c6f6d5, #9ae6b4);
color: #22543d;
}
.lose {
background: linear-gradient(145deg, #fed7d7, #feb2b2);
color: #742a2a;
}
.draw {
background: linear-gradient(145deg, #fef5e7, #f6e05e);
color: #744210;
}
.btn {
background: linear-gradient(145deg, #4299e1, #3182ce);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.game-info {
text-align: center;
margin: 20px 0;
font-size: 1.1em;
}
.health-bar {
width: 100%;
height: 8px;
background: #e2e8f0;
border-radius: 4px;
margin: 5px 0;
overflow: hidden;
}
.health-fill {
height: 100%;
background: linear-gradient(90deg, #48bb78, #38a169);
transition: width 0.5s ease;
}
.low-health {
background: linear-gradient(90deg, #f56565, #e53e3e);
}
@media (max-width: 600px) {
.game-container {
width: 95%;
padding: 15px;
}
h1 {
font-size: 2em;
}
.card {
width: 100px;
height: 130px;
margin: 5px;
}
.card-type {
font-size: 2em;
}
.card-stats {
font-size: 0.8em;
}
.battle-area {
flex-direction: column;
gap: 20px;
}
.vs-section {
font-size: 1.5em;
margin: 10px 0;
}
}
</style>
</head>
<body>
<div class="game-container">
<!-- タイトル画面 -->
<div id="title-screen" class="screen active">
<h1>カードバトルゲーム</h1>
<div style="text-align: center; margin: 40px 0;">
<p style="font-size: 1.3em; margin-bottom: 30px;">グー・チョキ・パーでバトル！</p>
<button class="btn" onclick="startGame()">ゲーム開始</button>
</div>
</div>
<!-- カード選択画面 -->
<div id="card-selection-screen" class="screen">
<h2 style="text-align: center; margin-bottom: 20px;">手札を選択してください（3枚）</h2>
<div class="hand-selection">
<div id="available-cards" class="cards-container"></div>
<div class="selected-cards" id="selected-cards"></div>
<p>選択済み: <span id="selected-count">0</span>/3</p>
<button class="btn" id="confirm-selection" onclick="confirmSelection()" disabled>決定</button>
</div>
</div>
<!-- バトル画面 -->
<div id="battle-screen" class="screen">
<div class="game-info">
<p>プレイヤー残り: <span id="player-remaining">3</span>枚 | CPU残り: <span id="cpu-remaining">3</span>枚</p>
</div>
<!-- 手札表示エリア -->
<div class="hand-display">
<div class="player-side">
<h3>あなたの手札</h3>
<div id="player-hand" class="hand-cards"></div>
</div>
<div class="cpu-side" style="margin-top: 20px;">
<h3>CPUの手札</h3>
<div id="cpu-hand" class="hand-cards"></div>
</div>
</div>
<!-- じゃんけん掛け声 -->
<div id="janken-countdown" class="janken-countdown" style="display: none;"></div>
<!-- バトルカード表示 -->
<div class="battle-area" id="battle-area" style="display: none;">
<div class="player-side">
<h3>プレイヤー</h3>
<div id="player-battle-cards" class="battle-cards"></div>
</div>
<div class="vs-section">VS</div>
<div class="cpu-side">
<h3>CPU</h3>
<div id="cpu-battle-cards" class="battle-cards"></div>
</div>
</div>
<div id="battle-result" class="result-text" style="display: none;"></div>
<div style="text-align: center;">
<button class="btn" id="select-card-btn" onclick="startCardSelection()" style="display: none;">カードを選ぶ</button>
<button class="btn" id="next-turn-btn" onclick="nextTurn()" style="display: none;">次のターン</button>
</div>
</div>
<!-- 結果画面 -->
<div id="result-screen" class="screen">
<h2 style="text-align: center; margin-bottom: 30px;">ゲーム結果</h2>
<div id="final-result" class="result-text"></div>
<div style="text-align: center; margin-top: 30px;">
<button class="btn" onclick="backToTitle()">タイトルに戻る</button>
</div>
</div>
</div>
<script>
let gameState = {
playerCards: [],
cpuCards: [],
selectedCards: [],
availableCards: [],
currentPlayerCard: null,
currentCPUCard: null,
playerDestroyedCount: 0,
cpuDestroyedCount: 0,
turnCount: 0
};
const cardTypes = ['グー', 'チョキ', 'パー'];
const cardEmojis = {
'グー': '✊',
'チョキ': '✌️',
'パー': '✋'
};
function generateRandomCard() {
const type = cardTypes[Math.floor(Math.random() * cardTypes.length)];
const baseTotal = 10;
const minAttack = 3;
const maxAttack = baseTotal - 1;
const attack = Math.floor(Math.random() * (maxAttack - minAttack + 1)) + minAttack;
const life = (baseTotal - attack) * 3;
return {
type: type,
attack: attack,
life: life,
maxLife: life,
destroyed: false
};
}
function createCardElement(card, isBack = false, onClick = null) {
const cardEl = document.createElement('div');
cardEl.className = 'card';
if (isBack) {
cardEl.className += ' card-back';
cardEl.innerHTML = `
<div class="card-type">?</div>
<div class="card-name">裏面</div>
`;
} else {
if (card.destroyed) {
cardEl.className += ' destroyed';
}
const healthPercent = (card.life / card.maxLife) * 100;
const healthClass = healthPercent <= 30 ? 'low-health' : '';
cardEl.innerHTML = `
<div class="card-name">${card.type}</div>
<div class="card-type">${getCardSymbol(card.type)}</div>
<div class="card-stats">
攻撃力: ${card.attack}<br>
ライフ: ${card.life}/${card.maxLife}
</div>
<div class="health-bar">
<div class="health-fill ${healthClass}" style="width: ${healthPercent}%"></div>
</div>
`;
}
if (onClick) {
cardEl.addEventListener('click', onClick);
}
return cardEl;
}
function getCardSymbol(type) {
switch(type) {
case 'グー': return '👊';
case 'チョキ': return '✌';
case 'パー': return '✋';
default: return '?';
}
}
function startGame() {
resetGame();
gameState.availableCards = [];
for (let i = 0; i < 5; i++) {
gameState.availableCards.push(generateRandomCard());
}
showScreen('card-selection-screen');
displayAvailableCards();
}
function resetGame() {
gameState = {
playerCards: [],
cpuCards: [],
selectedCards: [],
availableCards: [],
currentPlayerCard: null,
currentCPUCard: null,
playerDestroyedCount: 0,
cpuDestroyedCount: 0,
turnCount: 0
};
// カード選択画面の表示もリセット
document.getElementById('available-cards').innerHTML = '';
document.getElementById('selected-cards').innerHTML = '';
document.getElementById('selected-count').textContent = '0';
document.getElementById('confirm-selection').disabled = true;
// バトル画面の表示もリセット
document.getElementById('player-hand').innerHTML = '';
document.getElementById('cpu-hand').innerHTML = '';
document.getElementById('player-battle-cards').innerHTML = '';
document.getElementById('cpu-battle-cards').innerHTML = '';
document.getElementById('battle-result').style.display = 'none';
document.getElementById('battle-area').style.display = 'none';
document.getElementById('janken-countdown').style.display = 'none';
document.getElementById('select-card-btn').style.display = 'none';
document.getElementById('next-turn-btn').style.display = 'none';
}
function displayAvailableCards() {
const container = document.getElementById('available-cards');
container.innerHTML = '';
gameState.availableCards.forEach((card, index) => {
const cardEl = createCardElement(card, false, () => selectCard(index));
container.appendChild(cardEl);
});
}
function selectCard(index) {
if (gameState.selectedCards.length >= 3) return;
const card = gameState.availableCards[index];
gameState.selectedCards.push(card);
gameState.availableCards.splice(index, 1);
updateCardSelection();
}
function updateCardSelection() {
displayAvailableCards();
const selectedContainer = document.getElementById('selected-cards');
selectedContainer.innerHTML = '';
gameState.selectedCards.forEach((card, index) => {
const cardEl = createCardElement(card, false, () => deselectCard(index));
cardEl.classList.add('selected');
selectedContainer.appendChild(cardEl);
});
document.getElementById('selected-count').textContent = gameState.selectedCards.length;
document.getElementById('confirm-selection').disabled = gameState.selectedCards.length !== 3;
}
function deselectCard(index) {
const card = gameState.selectedCards[index];
gameState.availableCards.push(card);
gameState.selectedCards.splice(index, 1);
updateCardSelection();
}
function confirmSelection() {
gameState.playerCards = [...gameState.selectedCards];
// CPU手札をランダム生成
gameState.cpuCards = [];
for (let i = 0; i < 3; i++) {
gameState.cpuCards.push(generateRandomCard());
}
showScreen('battle-screen');
startBattle();
}
function startBattle() {
updateBattleDisplay();
displayAllHands();
nextTurn();
}
function displayAllHands() {
const playerHandContainer = document.getElementById('player-hand');
const cpuHandContainer = document.getElementById('cpu-hand');
playerHandContainer.innerHTML = '';
cpuHandContainer.innerHTML = '';
// プレイヤーの手札表示
gameState.playerCards.forEach((card, index) => {
if (!card.destroyed) {
const cardEl = createCardElement(card, false, () => selectPlayerCard(index));
playerHandContainer.appendChild(cardEl);
}
});
// CPUの手札表示（裏面）
gameState.cpuCards.forEach((card, index) => {
if (!card.destroyed) {
const cardEl = createCardElement(card, true);
cpuHandContainer.appendChild(cardEl);
}
});
}
function selectPlayerCard(index) {
if (gameState.playerCards[index].destroyed) return;
// 選択状態をリセット
document.querySelectorAll('#player-hand .card').forEach(card => {
card.classList.remove('selected-for-battle');
});
// 選択したカードをハイライト
document.querySelectorAll('#player-hand .card')[getAliveCardIndex(gameState.playerCards, index)].classList.add('selected-for-battle');
gameState.currentPlayerCard = gameState.playerCards[index];
// CPUのカードをランダム選択
const aliveCPUs = gameState.cpuCards.filter(card => !card.destroyed);
gameState.currentCPUCard = aliveCPUs[Math.floor(Math.random() * aliveCPUs.length)];
// じゃんけんぽん演出開始
startJankenAnimation();
}
function getAliveCardIndex(cards, originalIndex) {
let aliveIndex = 0;
for (let i = 0; i <= originalIndex; i++) {
if (i === originalIndex) break;
if (!cards[i].destroyed) aliveIndex++;
}
return aliveIndex;
}
function startCardSelection() {
document.getElementById('select-card-btn').style.display = 'none';
document.getElementById('battle-result').style.display = 'none';
document.getElementById('next-turn-btn').style.display = 'none';
document.getElementById('battle-area').style.display = 'none';
document.getElementById('janken-countdown').style.display = 'none';
displayAllHands();
}
function startJankenAnimation() {
const countdownEl = document.getElementById('janken-countdown');
const messages = ['じゃん', 'けん', 'ぽん！'];
let currentIndex = 0;
countdownEl.style.display = 'block';
function showNextMessage() {
if (currentIndex < messages.length) {
countdownEl.textContent = messages[currentIndex];
countdownEl.style.animation = 'none';
setTimeout(() => {
countdownEl.style.animation = 'pulse 0.8s ease-in-out';
}, 10);
currentIndex++;
setTimeout(showNextMessage, 1000);
} else {
// アニメーション終了、カード表示
setTimeout(() => {
revealCards();
}, 500);
}
}
showNextMessage();
}
function revealCards() {
document.getElementById('janken-countdown').style.display = 'none';
document.getElementById('battle-area').style.display = 'flex';
const playerContainer = document.getElementById('player-battle-cards');
const cpuContainer = document.getElementById('cpu-battle-cards');
playerContainer.innerHTML = '';
cpuContainer.innerHTML = '';
if (gameState.currentPlayerCard) {
const playerCardEl = createCardElement(gameState.currentPlayerCard);
playerCardEl.classList.add('card-reveal');
playerContainer.appendChild(playerCardEl);
}
if (gameState.currentCPUCard) {
const cpuCardEl = createCardElement(gameState.currentCPUCard);
cpuCardEl.classList.add('card-reveal');
cpuContainer.appendChild(cpuCardEl);
}
setTimeout(() => {
processBattle();
}, 800);
}
function updateBattleDisplay() {
const playerRemaining = gameState.playerCards.filter(card => !card.destroyed).length;
const cpuRemaining = gameState.cpuCards.filter(card => !card.destroyed).length;
document.getElementById('player-remaining').textContent = playerRemaining;
document.getElementById('cpu-remaining').textContent = cpuRemaining;
}
function nextTurn() {
document.getElementById('battle-result').style.display = 'none';
document.getElementById('next-turn-btn').style.display = 'none';
document.getElementById('battle-area').style.display = 'none';
document.getElementById('janken-countdown').style.display = 'none';
// 生きているカードを取得
const alivePlayers = gameState.playerCards.filter(card => !card.destroyed);
const aliveCPUs = gameState.cpuCards.filter(card => !card.destroyed);
if (alivePlayers.length <= 1 || aliveCPUs.length <= 1) {
endGame();
return;
}
gameState.currentPlayerCard = null;
gameState.currentCPUCard = null;
updateBattleDisplay();
displayAllHands();
document.getElementById('select-card-btn').style.display = 'block';
}
function displayBattleCards() {
const playerContainer = document.getElementById('player-battle-cards');
const cpuContainer = document.getElementById('cpu-battle-cards');
playerContainer.innerHTML = '';
cpuContainer.innerHTML = '';
if (gameState.currentPlayerCard) {
playerContainer.appendChild(createCardElement(gameState.currentPlayerCard));
}
if (gameState.currentCPUCard) {
cpuContainer.appendChild(createCardElement(gameState.currentCPUCard));
}
}
function processBattle() {
const playerType = gameState.currentPlayerCard.type;
const cpuType = gameState.currentCPUCard.type;
const result = getJankenResult(playerType, cpuType);
let resultText = '';
let resultClass = '';
if (result === 'win') {
// プレイヤーの勝ち
const damage = gameState.currentPlayerCard.attack * 2;
gameState.currentCPUCard.life -= damage;
const counterDamage = Math.floor(gameState.currentCPUCard.attack / 2);
gameState.currentPlayerCard.life -= counterDamage;
resultText = `プレイヤーの勝利！ CPUに${damage}ダメージ、プレイヤーに${counterDamage}ダメージ`;
resultClass = 'win';
} else if (result === 'lose') {
// CPUの勝ち
const damage = gameState.currentCPUCard.attack * 2;
gameState.currentPlayerCard.life -= damage;
const counterDamage = Math.floor(gameState.currentPlayerCard.attack / 2);
gameState.currentCPUCard.life -= counterDamage;
resultText = `CPUの勝利！ プレイヤーに${damage}ダメージ、CPUに${counterDamage}ダメージ`;
resultClass = 'lose';
} else {
// あいこ
const playerDamage = Math.floor(gameState.currentCPUCard.attack / 2);
const cpuDamage = Math.floor(gameState.currentPlayerCard.attack / 2);
gameState.currentPlayerCard.life -= playerDamage;
gameState.currentCPUCard.life -= cpuDamage;
resultText = `あいこ！ 両者にダメージ（プレイヤー:${playerDamage}, CPU:${cpuDamage}）`;
resultClass = 'draw';
}
// カード破壊チェック
if (gameState.currentPlayerCard.life <= 0) {
gameState.currentPlayerCard.destroyed = true;
gameState.playerDestroyedCount++;
resultText += ' - プレイヤーのカードが破壊されました！';
}
if (gameState.currentCPUCard.life <= 0) {
gameState.currentCPUCard.destroyed = true;
gameState.cpuDestroyedCount++;
resultText += ' - CPUのカードが破壊されました！';
}
const resultDiv = document.getElementById('battle-result');
resultDiv.textContent = resultText;
resultDiv.className = `result-text ${resultClass}`;
resultDiv.style.display = 'block';
updateBattleDisplay();
displayBattleCards();
displayAllHands();
document.getElementById('select-card-btn').style.display = 'none';
document.getElementById('next-turn-btn').style.display = 'block';
}
function getJankenResult(player, cpu) {
if (player === cpu) return 'draw';
const winConditions = {
'グー': 'チョキ',
'チョキ': 'パー',
'パー': 'グー'
};
return winConditions[player] === cpu ? 'win' : 'lose';
}
function endGame() {
const playerAlive = gameState.playerCards.filter(card => !card.destroyed).length;
const cpuAlive = gameState.cpuCards.filter(card => !card.destroyed).length;
let resultText = '';
let resultClass = '';
if (playerAlive > cpuAlive) {
resultText = 'プレイヤーの勝利！';
resultClass = 'win';
} else if (cpuAlive > playerAlive) {
resultText = 'CPUの勝利！';
resultClass = 'lose';
} else {
resultText = '引き分け！';
resultClass = 'draw';
}
document.getElementById('final-result').textContent = resultText;
document.getElementById('final-result').className = `result-text ${resultClass}`;
showScreen('result-screen');
}
function showScreen(screenId) {
const screens = document.querySelectorAll('.screen');
screens.forEach(screen => screen.classList.remove('active'));
document.getElementById(screenId).classList.add('active');
}
function backToTitle() {
resetGame();
showScreen('title-screen');
}
</script>
</body>
</html>🔔 補足・注意事項
このコードや説明は、Claudeのバージョンや環境によって出力内容が異なる可能性があります。
同じ命令をしても、まったく違うコードが返ってくることもあるので、再現性は参考程度にご覧ください。
0 件のコメント:
コメントを投稿