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

No:4020

1257

←

Prev Next

→

traditional Japanese board game played with dice
Developer User3589｜Date and time 23/6/27 2:12:27
Build time 45.152 sec｜Game capacity 3.528KB｜

Script

のゲームを作成しました。以下がコードです。

すごろくゲーム

現在のプレイヤー: 😎

ダイス: ⚅

このゲームは、20個のセルで構成されたすごろくのゲームです。プレイヤーは巨大な絵文字のアイコンで表され、ダイスを振ることで進みます。ダイスは、⚅ 絵文字で表され、クリックするとランダムな数の1〜6が生成されます。プレイヤーはセルを進み、20番目のセルに到達するまで進みます。ゴールに到達すると、プレイヤーは再び最初のセルに戻ります。試してみてください！

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

のゲームを作成しました。

以下がコードです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>すごろくゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #F5F5F5;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-family: Arial, sans-serif;
		}
		h1 {
			font-size: 3rem;
			margin: 0;
			padding: 0;
			color: #333333;
			text-shadow: 2px 2px #F5F5F5;
		}
		#board {
			display: flex;
			flex-wrap: wrap;
			max-width: 80vw;
		}
		.cell {
			width: 25%;
			height: 100px;
			background-color: white;
			border: 1px solid #333333;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 2rem;
			color: #333333;
			text-shadow: 1px 1px #F5F5F5;
			cursor: pointer;
			transition: all 0.2s;
		}
		.cell:hover {
			background-color: #F5F5F5;
		}
		.player {
			font-size: 4rem;
			color: #333333;
			text-shadow: 1px 1px #F5F5F5;
			margin: 0;
			padding: 0;
			transition: all 0.2s;
		}
		.player:hover {
			transform: scale(1.2);
		}
		.dice {
			font-size: 4rem;
			color: #333333;
			text-shadow: 1px 1px #F5F5F5;
			margin: 2rem;
			cursor: pointer;
			transition: all 0.2s;
		}
		.dice:hover {
			transform: rotate(90deg);
		}
	</style>
</head>
<body>
	<h1>すごろくゲーム</h1>
	<div id="board"></div>
	<p>現在のプレイヤー: <span id="player" class="player">😎</span></p>
	<p>ダイス: <span id="dice" class="dice">⚅</span></p>

// ボードを初期化する
		function initBoard() {
			for (var i = 0; i < 20; i++) {
				var cell = document.createElement("div");
				cell.setAttribute("class", "cell");
				cell.textContent = i+1;
				cells.push(cell);
				board.appendChild(cell);
			}
		}

// プレイヤーを初期化する
		function initPlayer() {
			playerIndex = 0;
			player.textContent = "😎";
			cells[playerIndex].appendChild(player);
		}

// ゲームを初期化する
		function initGame() {
			initBoard();
			initPlayer();
		}

// ダイスを振る
		function rollDice() {
			return Math.floor(Math.random()*6)+1;
		}

// ゲームを再開する
		function resetGame() {
			for (var i = 0; i < cells.length; i++) {
				cells[i].innerHTML = "";
			}
			initPlayer();
		}

// ダイスをクリックすると移動する
		dice.addEventListener("click", function() {
			var steps = rollDice();
			playerIndex += steps;
			if (playerIndex >= cells.length) {
				alert("おめでとうございます！ゴールしました！");
				resetGame();
				return;
			}
			cells[playerIndex-1].removeChild(player);
			cells[playerIndex].appendChild(player);
		});

initGame();
	</script>
</body>
</html>
```