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

No:2069

1624

←

Prev Next

→

traditional Japanese board game played with dice
Developer anonymous｜Date and time 23/6/20 0:56:11
Build time 65.526 sec｜Game capacity 4.513KB｜

Script

Backgammon game!

// Backgammon Game Overview // This is a backgammon game in which you advance from start to finish. // Players roll dice to advance, but、There are obstacles along the way. // If you hit an obstacle、You cannot proceed to the next turn. // The game is cleared when the goal is reached. // This program has been implemented so that it can be played on a smartphone.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>すごろくゲーム</title>
	<style>
		h1 {
			text-align: center;
			font-size: 40px;
			margin: 20px;
		}

#board {
			margin: 20px auto;
			width: 80vw;
			height: 80vw;
			max-width: 800px;
			max-height: 800px;
			display: grid;
			grid-template-columns: repeat(8, 1fr);
			grid-template-rows: repeat(8, 1fr);
			border: 5px solid black;
			font-size: 40px;
		}

#board div {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: white;
			cursor: pointer;
		}

#board div.start {
			background-color: lightgreen;
		}

#board div.goal {
			background-color: orange;
		}

#board div.player {
			background-color: yellow;
		}

#board div.obstacle {
			background-color: red;
			color: white;
		}
	</style>
</head>
<body>
	<h1>すごろくゲーム！</h1>
	<div id="board"></div>
	<div id="result"></div>
	<script>
		let playerPosition = 0;
		let board = document.getElementById("board");
		let result = document.getElementById("result");

// マスの配置を設定
		const boardArray = [
			[start, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle], // 1行目
			[obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle], // 2行目
			[obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle], // 3行目
			[obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle], // 4行目
			[obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle], // 5行目
			[obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle], // 6行目
			[obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle], // 7行目
			[obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, obstacle, goal], // 8行目
		];

// マスに応じた絵文字を表示
		const emojiArray = {
			start: "🏁",
			goal: "🏆",
			player: "🚶",
			obstacle: "🚫"
		}

// マスを表示
		for (let i = 0; i < boardArray.length; i++) {
			for (let j = 0; j < boardArray[i].length; j++) {
				const square = document.createElement("div");
				switch(boardArray[i][j]) {
					case start:
						square.classList.add("start");
						break;
					case obstacle:
						square.textContent = emojiArray.obstacle;
						square.classList.add("obstacle");
						break;
					case player:
						square.textContent = emojiArray.player;
						square.classList.add("player");
						break;
					case goal:
						square.classList.add("goal");
						break;
				}
				board.appendChild(square);
			}
		}

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

// プレイヤーを移動
		function movePlayer() {
			const currentPosition = playerPosition;
			const steps = rollDice();
			playerPosition += steps;
			if (playerPosition >= 64) {
				playerPosition = 63;
			}

// 進んだ距離のマス目の要素を取得
			const destinationSquare = board.children[playerPosition];

// 前の位置からプレイヤーアイコンを削除
			board.children[currentPosition].textContent = "";
			board.children[currentPosition].classList.remove("player");

// 行き先に障害物がなければプレイヤーを移動
			if (!destinationSquare.classList.contains("obstacle")) {
				destinationSquare.textContent = emojiArray.player;
				destinationSquare.classList.add("player");
			} else {
				result.textContent = "障害物に当たりました！　次のターンに移動できません";
			}

// ゴールに着いたらクリア
			if (playerPosition === 63) {
				result.textContent = "ゴール！　おめでとうございます！";
			}
		}

// サイコロをクリックしたときにプレイヤーを移動
		board.addEventListener("click", () => movePlayer());

// 初期位置にプレイヤーを配置
		board.children[playerPosition].textContent = "🚶";
		board.children[playerPosition].classList.add("player");

</script>
</body>
</html>

// すごろくゲームの概要
// スタートからゴールまで進むすごろくゲームです。
// プレイヤーはサイコロを振って進みますが、途中に障害物があります。
// 障害物に当たってしまうと、次のターンには進めません。
// ゴールに到着したらクリアとなります。
// このプログラムはスマホでもプレイできるように実装しています。