AI game creator

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

No:1660

7150

←

Prev Next

→

sandbox game
Developer User3385｜Date and time 23/6/18 21:11:57
Build time 26.103 sec｜Game capacity 2.22KB｜

Script

では、以下にJavaScriptを含む1枚のHTMLファイルで実装した、スマホで遊べるsandboxゲームのコードを記載します。

操作方法：タッチ＆ドラッグでブロックを置く

このsandboxゲームでは、タッチ＆ドラッグでブロックを置くことができます。また、ブロックの色がランダムに変わるようになっています。ブロックの操作方法は、instructionというIDを持つdiv要素内に記載されています。

←

Prev　Next

→ 　

Back　

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

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

では、以下にJavaScriptを含む1枚のHTMLファイルで実装した、スマホで遊べるsandboxゲームのコードを記載します。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sandbox Game</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: #F6F6F6;
			font-size: 16px;
			font-family: sans-serif;
			color: #333;
		}
		canvas {
			display: block;
		}
		#instruction {
			position: absolute;
			top: 10px;
			left: 10px;
			padding: 10px;
			background-color: #FFFFFF;
			border-radius: 10px;
			box-shadow: 3px 3px 5px #888888;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="instruction">操作方法：タッチ＆ドラッグでブロックを置く</div>
	<script>
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');

// ブロックの色設定
		const blockColors = ['#FFFFFF', '#FF0000', '#FFFF00', '#00FF00', '#00FFFF'];

// キャンバスサイズ設定
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

// ブロック座標の初期設定
		let blockX = -1;
		let blockY = -1;

// ブロックを描画する関数
		function drawBlock() {
			if (blockX !== -1 && blockY !== -1) {
				ctx.fillStyle = blockColors[Math.floor(Math.random() * blockColors.length)];
				ctx.fillRect(blockX, blockY, 50, 50);
			}
		}

// キャンバス上でのタッチ操作でブロックを置く
		canvas.addEventListener('touchmove', (e) => {
			blockX = e.touches[0].clientX - 25;
			blockY = e.touches[0].clientY - 25;
		});

// フレームごとに画面を更新する関数
		function update() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBlock();
			requestAnimationFrame(update);
		}

// 初期化
		update();
	</script>
</body>
</html>
```