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

No:1488

←

Prev Next

→

turn into a star
Developer sayaensm｜Date and time 23/6/18 17:31:13
Build time 27.84 sec｜Game capacity 2.468KB｜

Script

すごろくゲームのアプリを作成しました。以下がプログラムの記述です。

すごろくゲーム

このアプリはすごろくゲームで、サイコロを振って進むことができます。ボード上を进めていき、最終的にゴールするのが目標です。スマートフォン上でも動作するように設計されており、絵文字を多用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

すごろくゲームのアプリを作成しました。

以下がプログラムの記述です。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>すごろくゲーム</title>
	<style>
		body {
			background-color: #C9C9C9;
			font-family: Arial, sans-serif;
			text-align: center;
			margin: 0;
			padding: 0;
		}
		#board {
			margin: 30px auto;
			width: 80%;
			height: 400px;
			background-color: white;
			border: 5px solid black;
			position: relative;
		}
		#player {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: #00BFFF;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		button {
			background-color: #00BFFF;
			color: white;
			border: 0;
			border-radius: 5px;
			padding: 10px 20px;
			font-size: 16px;
			cursor: pointer;
			outline: none;
			margin: 10px;
		}
	</style>
</head>
<body>
	<h1>すごろくゲーム</h1>
	<div id="board">
		<div id="player"></div>
	</div>
	<button onclick="rollDice()">ダイスを振る</button>

function rollDice() {
			const result = Math.floor(Math.random() * 6) + 1;
			alert(`ダイスの目は${result}だよ！`);
			movePlayer(result);
		}

for (let i = 0; i < 20; i++) {
			const square = document.createElement('div');
			square.classList.add('square');
			if (i === 0) {
				square.style.backgroundColor = '#00BFFF';
			} else if (i % 2 === 0) {
				square.style.backgroundColor = '#C9C9C9';
			} else {
				square.style.backgroundColor = '#FFFFFF';
			}
			document.getElementById('board').appendChild(square);
		}
	</script>
</body>
</html>
```