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

No:4524

6381

←

Prev Next

→

Games with ridiculously large capacity
Developer anonymous｜Date and time 70/1/1 10:11:01
Build time unknown sec｜Game capacity 4.261KB｜

Script

ではなく、シンプルで軽量なゲームを作成することを推奨します。以下は、サンプルのゲームのコードです。

神経衰弱ゲーム

このゲームは、「神経衰弱ゲーム」と呼ばれる、2つのカードを裏返して中身を当てるゲームです。このコードは、JavaScriptでゲームのロジックを実装し、HTMLとCSSでゲームの見た目を作成しています。このゲームは、スマホでも遊べるように、ボタンとカードの大きさを調整しています。また、カードの中身には、絵文字を使っています。このコードを参考にして、自分だけのゲームを作成してみてください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

ではなく、シンプルで軽量なゲームを作成することを推奨します。以下は、サンプルのゲームのコードです。

<!DOCTYPE html>
<html>
<head>
	<title>神経衰弱ゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<h1>神経衰弱ゲーム</h1>
	<div id="game-board"></div>
	<button id="reset-button">リセット</button>

// ゲームの状態
		let gameState = {
			pickedCards: [],
			matchedCards: []
		};

// ゲームの初期化
		function initGame() {
			// カードをシャッフル
			const shuffledCards = shuffleCards(data.concat(data));

// ゲームボードにカードを追加
			const gameBoardEl = document.getElementById("game-board");
			for (const card of shuffledCards) {
				const cardEl = createCardEl(card);
				gameBoardEl.appendChild(cardEl);
			}

// リセットボタンにクリックイベントを追加
			const resetButtonEl = document.getElementById("reset-button");
			resetButtonEl.addEventListener("click", resetGame);
		}

// カードをシャッフルする関数
		function shuffleCards(cards) {
			const shuffledCards = [...cards];
			for (let i = shuffledCards.length - 1; i >= 0; i--) {
				const j = Math.floor(Math.random() * i)
				const temp = shuffledCards[i];
				shuffledCards[i] = shuffledCards[j];
				shuffledCards[j] = temp;
			}
			return shuffledCards;
		}

// カード要素を作成する関数
		function createCardEl(card) {
			const cardEl = document.createElement("div");
			cardEl.classList.add("card");
			cardEl.dataset.id = card.id;
			cardEl.dataset.value = card.value;
			cardEl.textContent = " ";
			cardEl.addEventListener("click", handleCardClick);
			return cardEl;
		}

// カードがクリックされた時の処理
		function handleCardClick(event) {
			const cardEl = event.target;
			
			// カードが裏面の場合
			if (gameState.pickedCards.length < 2 && !gameState.matchedCards.includes(cardEl)) {
				gameState.pickedCards.push(cardEl);
				updateCardEl(cardEl);
			}

// 2つのカードが選ばれた場合
			if (gameState.pickedCards.length === 2) {
				const [card1El, card2El] = gameState.pickedCards;
				if (card1El.dataset.value === card2El.dataset.value) {
					gameState.matchedCards.push(card1El, card2El);
				} else {
					setTimeout(() => {
						updateCardEl(card1El);
						updateCardEl(card2El);
					}, 1000);
				}
				gameState.pickedCards = [];
			}

// ゲーム終了判定
			if (gameState.matchedCards.length === data.length * 2) {
				alert("ゲームクリア！");
			}
		}

// カード要素を更新する関数
		function updateCardEl(cardEl) {
			if (cardEl.textContent === " ") {
				cardEl.textContent = cardEl.dataset.value;
			} else {
				cardEl.textContent = " ";
			}
		}

// ゲームをリセットする関数
		function resetGame() {
			const gameBoardEl = document.getElementById("game-board");
			gameBoardEl.innerHTML = "";
			gameState = { pickedCards: [], matchedCards: [] };
			initGame();
		}

// ゲームの初期化
		initGame();
	</script>