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

No:1598

10317

←

Prev Next

→

monopoly
Developer anonymous｜Date and time 70/1/1 11:22:54
Build time unknown sec｜Game capacity 8.574KB｜

Script

アプリを1枚のhtmlファイルとして実装し、JavaScriptを使用してモノポリーのゲームを作成しました。ゲームの概要：プレイヤーはダイスを振って進み、不動産を買い、家を建て、そして他のプレイヤーと交渉を行いつつ、できるだけ多くのお金を稼ぎます。最後に残った1人が勝者となります。スマホで操作する場合、画面上にダイスを振るためのボタンや、不動産を買うためのボタン、交渉を行うためのボタンを配置しました。絵文字を多く使用して、ゲームがより楽しくなるように工夫しました。以下が実際のプログラムです：

モノポリー

←

Prev　Next

→ 　

Back　

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

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

アプリを1枚のhtmlファイルとして実装し、JavaScriptを使用してモノポリーのゲームを作成しました。

ゲームの概要：
プレイヤーはダイスを振って進み、不動産を買い、家を建て、そして他のプレイヤーと交渉を行いつつ、できるだけ多くのお金を稼ぎます。最後に残った1人が勝者となります。

スマホで操作する場合、画面上にダイスを振るためのボタンや、不動産を買うためのボタン、交渉を行うためのボタンを配置しました。絵文字を多く使用して、ゲームがより楽しくなるように工夫しました。

以下が実際のプログラムです：

<!DOCTYPE html>
<html>
<head>
	<title>モノポリー</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 20px;
			text-align: center;
		}
		.dice-btn {
			padding: 20px;
			font-size: 50px;
			background-color: #F5DEB3;
			border-radius: 50%;
			margin: 20px;
			cursor: pointer;
		}
		.property-btn {
			padding: 10px;
			background-color: #4169E1;
			color: white;
			border: none;
			border-radius: 5px;
			margin: 10px;
			cursor: pointer;
		}
		.trade-btn {
			padding: 10px;
			background-color: #FF69B4;
			color: white;
			border: none;
			border-radius: 5px;
			margin: 10px;
			cursor: pointer;
		}
	</style>
	<script>
		// プレイヤー情報
		var players = [
			{name: "プレイヤー1", money: 1500, position: 1, properties: []},
			{name: "プレイヤー2", money: 1500, position: 1, properties: []},
			{name: "プレイヤー3", money: 1500, position: 1, properties: []},
			{name: "プレイヤー4", money: 1500, position: 1, properties: []}
		];

// プレイヤーの順番
		var currentPlayer = 0;

// ダイスを振る
		function rollDice() {
			var dice1 = Math.floor(Math.random() * 6) + 1;
			var dice2 = Math.floor(Math.random() * 6) + 1;
			var total = dice1 + dice2;
			alert("出目：" + dice1 + "、" + dice2);
			players[currentPlayer].position += total;
			if (players[currentPlayer].position > 40) {
				players[currentPlayer].position -= 40;
				players[currentPlayer].money += 200;
			}
			alert(players[currentPlayer].name + "は" + players[currentPlayer].position + "マス目にいます。");
			movePlayer();
		}

// プレイヤーを移動する
		function movePlayer() {
			var playerElem = document.getElementsByClassName("player")[currentPlayer];
			var position = players[currentPlayer].position;
			var elem = document.getElementById("cell_" + position);
			playerElem.style.left = elem.offsetLeft + "px";
			playerElem.style.top = elem.offsetTop + "px";
			checkProperty();
		}

// 物件を買う
		function buyProperty() {
			var position = players[currentPlayer].position;
			var price = board[position - 1].price;
			if (players[currentPlayer].money >= price) {
				players[currentPlayer].money -= price;
				players[currentPlayer].properties.push(position);
				alert("物件を購入しました。");
			} else {
				alert("お金が足りません。");
			}
		}

// 物件を売る
		function sellProperty() {
			var position = players[currentPlayer].position;
			var price = board[position - 1].price;
			if (players[currentPlayer].properties.indexOf(position) >= 0) {
				players[currentPlayer].money += price;
				players[currentPlayer].properties.splice(players[currentPlayer].properties.indexOf(position), 1);
				alert("物件を売却しました。");
			} else {
				alert("持っていません。");
			}
		}

// 他のプレイヤーと交渉する
		function tradeProperty() {
			alert("まだ実装されていません。");
		}

// プレイヤー情報を表示する
		function showPlayerInfo() {
			var playerInfoElem = document.getElementById("player-info");
			var player = players[currentPlayer];
			playerInfoElem.innerHTML = player.name + "：" + player.money + "円";
		}

// 自分が所有している物件かどうかをチェックする
		function checkProperty() {
			var position = players[currentPlayer].position;
			var propertyIndex = players[currentPlayer].properties.indexOf(position);
			var buyElem = document.getElementById("buy-btn");
			var sellElem = document.getElementById("sell-btn");
			if (propertyIndex >= 0) {
				buyElem.style.display = "none";
				sellElem.style.display = "block";
			} else if (board[position - 1].type == "property") {
				buyElem.style.display = "block";
				sellElem.style.display = "none";
			} else {
				buyElem.style.display = "none";
				sellElem.style.display = "none";
			}
			showPlayerInfo();
		}

// ボード情報
		var board = [
			{name: "START", type: "start", price: 0},
			{name: "?", type: "random", price: 0},
			{name: "西武池袋線 池袋-本川越", type: "property", price: 200},
			{name: "?", type: "random", price: 0},
			{name: "銀座線 大手町-銀座", type: "property", price: 200},
			{name: "セブンイレブン", type: "shop", price: 0},
			{name: "有楽町線 池袋-東池袋", type: "property", price: 200},
			{name: "?", type: "random", price: 0},
			{name: "渋谷駅前ビル", type: "shop", price: 0},
			{name: "JR山手線 池袋-大塚", type: "property", price: 200},
			{name: "VISIT JAIL", type: "jail", price: 0},
			{name: "京王線 東小金井-小平", type: "property", price: 200},
			{name: "?", type: "random", price: 0},
			{name: "JR南武線 南武線-川崎", type: "property", price: 200},
			{name: "東急ストア", type: "shop", price: 0},
			{name: "京王線 京王多摩川-稲城", type: "property", price: 200},
			{name: "?", type: "random", price: 0},
			{name: "京都銀行", type: "shop", price: 0},
			{name: "京王線 笹塚-新宿", type: "property", price: 200},
			{name: "FREE PARKING", type: "free", price: 0},
			{name: "京王線 京王八王子-拝島", type: "property", price: 200},
			{name: "?", type: "random", price: 0},
			{name: "西武多摩川線 渋谷-下高井戸", type: "property", price: 200},
			{name: "?", type: "random", price: 0},
			{name: "新宿エンタメランド", type: "shop", price: 0},
			{name: "京王線 新宿-九段下", type: "property", price: 200},
			{name: "?", type: "random", price: 0},
			{name: "東京駅", type: "shop", price: 0},
			{name: "京浜東北線 大宮-赤羽", type: "property", price: 200},
			{name: "風俗エステ", type: "shop", price: 0},
			{name: "京急線 高砂-平和島", type: "property", price: 200},
			{name: "?", type: "random", price: 0},
			{name: "成城石井", type: "shop", price: 0},
			{name: "?", type: "final", price: 0}
		]

// ボードを表示する
		function showBoard() {
			var boardElem = document.getElementById("board");
			boardElem.innerHTML = "";
			for (var i = 0; i < board.length; i++) {
				var cellElem = document.createElement("div");
				cellElem.id = "cell_" + (i + 1);
				cellElem.className = "cell";
				switch (board[i].type) {
					case "start":
						cellElem.innerHTML = "💰 START";
						break;
					case "property":
						cellElem.innerHTML = "🏛 " + board[i].name + "<br>(" + board[i].price + "円)";
						break;
					case "shop":
						cellElem.innerHTML = "🏬 " + board[i].name;
						break;
					case "jail":
						cellElem.innerHTML = "🕴 VISIT JAIL";
						break;
					case "free":
						cellElem.innerHTML = "🎞 FREE PARKING";
						break;
					case "random":
						cellElem.innerHTML = "🎲 ?";
						break;
					case "final":
						cellElem.innerHTML = "🏁 THE END";
						break;
				}
				boardElem.appendChild(cellElem);
			}
			var playerElem = document.createElement("div");
			playerElem.id = "player_" + currentPlayer;
			playerElem.className = "player";
			playerElem.innerHTML = "👶";
			boardElem.appendChild(playerElem);
		}

// ゲームを開始する
		function startGame() {
			showBoard();
			movePlayer();
			checkProperty();
			showPlayerInfo();
		}
	</script>
</head>
<body onload="startGame()">
	<h1>モノポリー</h1>
	<div id="board"></div>
	<div id="player-info"></div>
	<button class="dice-btn" onclick="rollDice()">⚀ ダイスを振る</button>
	<button class="property-btn" id="buy-btn" style="display: none" onclick="buyProperty()">🏛 物件を買う</button>
	<button class="property-btn" id="sell-btn" style="display: none" onclick="sellProperty()">💵 物件を売る</button>
	<button class="trade-btn" onclick="tradeProperty()">👨 交渉する</button>
</body>
</html>