Click here for free DL of the app version that can save data.

No:2201

357

←

Prev Next

→

Monster Card Game
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time unknown sec｜Game capacity 5.511KB｜

Script

モンスターカードゲーム

ルール：5枚のカードを引き、攻撃力の合計値で勝負！

※1枚目のカードは必ず5の攻撃力を持つ特別なカードです。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

<html>
<head>
	<title>モンスターカードゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body{
			font-family: sans-serif;
			background-color: #cde3f7;
		}
		h1{
			text-align: center;
			font-size: 50px;
			color: #ff5722;
			margin-top: 20px;
			margin-bottom: 30px;
		}
		p{
			text-align: center;
			font-size: 20px;
			color: #424242;
			margin: 10px;
		}
		button{
			font-size: 20px;
			padding: 10px;
			margin: 10px;
			background-color: #ff5722;
			border: none;
			border-radius: 5px;
			color: white;
			cursor: pointer;
		}
		button:hover{
			background-color: #ff7043;
		}
		.card{
			width: 150px;
			height: 200px;
			background-color: white;
			border: 2px solid black;
			border-radius: 10px;
			margin: 10px;
			display: inline-block;
		}
		.card img{
			width: 100%;
			height: 70%;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
		}
		.card p{
			text-align: center;
			font-size: 18px;
			color: #616161;
			margin: 10px;
			font-weight: bold;
		}
		.card button{
			font-size: 18px;
			padding: 5px;
			margin-top: 5px;
			margin-bottom: 10px;
			background-color: #4caf50;
			border: none;
			border-radius: 5px;
			color: white;
			cursor: pointer;
			display: none;
		}
		.card:hover button{
			display: block;
		}
		.result{
			text-align: center;
			font-size: 30px;
			font-weight: bold;
			margin-top: 30px;
			color: #4caf50;
		}
		.end{
			text-align: center;
			font-size: 30px;
			font-weight: bold;
			margin-top: 30px;
			color: #f44336;
		}
	</style>
</head>
<body>
	<h1>モンスターカードゲーム</h1>

<p>ルール：5枚のカードを引き、攻撃力の合計値で勝負！</p>
	<p>※1枚目のカードは必ず5の攻撃力を持つ特別なカードです。</p>
	
	<div id="cards">
		
	</div>

<button onclick="draw()">カードを引く</button>
	<button onclick="battle()">勝負する！</button>

var hand = []; // 手札

function draw(){
			if(hand.length < 5){
				// 手札が5枚未満の場合、ランダムでカードを配る
				var randomIndex = Math.floor(Math.random() * cards.length);
				hand.push(cards[randomIndex]);
				cards.splice(randomIndex, 1); // 配られたカードを削除
				update(); // 手札を更新
			}
		}

function update(){
			var cardsDiv = document.getElementById("cards");
			cardsDiv.innerHTML = "";

for(var i = 0; i < hand.length; i++){
				var cardDiv = document.createElement("div");
				cardDiv.className = "card";

var cardImg = document.createElement("img");
				cardImg.src = hand[i].img;
				cardDiv.appendChild(cardImg);

var cardName = document.createElement("p");
				cardName.textContent = hand[i].name;
				cardDiv.appendChild(cardName);

var cardAttack = document.createElement("p");
				cardAttack.textContent = "攻撃力：" + hand[i].attack;
				cardDiv.appendChild(cardAttack);

var cardBtn = document.createElement("button");
				cardBtn.textContent = "使う！";
				cardBtn.onclick = makeBattleFunc(i); // クロージャで関数を作成
				cardDiv.appendChild(cardBtn);

cardsDiv.appendChild(cardDiv);
			}

// カードを引くボタン、勝負するボタンの表示・非表示切り替え
			var drawBtn = document.getElementsByTagName("button")[0];
			var battleBtn = document.getElementsByTagName("button")[1];
			if(hand.length >= 5){
				drawBtn.style.display = "none";
				battleBtn.style.display = "block";
			}else{
				drawBtn.style.display = "block";
				battleBtn.style.display = "none";
			}
		}

function makeBattleFunc(i){
			return function(){
				// カードを使用すると攻撃力が変動するので、使用前の攻撃力を保存しておく
				var beforeAttack = hand[i].attack;

for(var j = 0; j < hand.length; j++){
					if(j != i){
						hand[j].attack += 1; // 使用していないカードの攻撃力を+1する
					}
				}

hand.splice(i, 1); // 使用したカードを手札から削除
				update(); // 手札を更新

hand.splice(0, 0, {name: "特別カード", attack: beforeAttack, img: "🐲"}); // 特別カードを先頭に追加

var resultDiv = document.getElementById("result");
				resultDiv.textContent = "特別カードの攻撃力：" + beforeAttack;
			}
		}

function battle(){
			var totalAttack = 0;
			for(var i = 0; i < hand.length; i++){
				totalAttack += hand[i].attack;
			}

var resultDiv = document.getElementById("result");
			if(totalAttack > 20){
				resultDiv.textContent = "合計攻撃力：" + totalAttack + "！勝利！！";
				resultDiv.className = "result";
			}else{
				resultDiv.textContent = "合計攻撃力：" + totalAttack + "…残念でした。";
				resultDiv.className = "end";
			}
		}

update(); // 初期表示用に1度呼び出す
	</script>
</body>
</html>