AI game creator

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

No:122

373

←

Prev Next

→

Fill-in game
Developer User2368｜Date and time 23/5/23 14:54:24
Build time 0.007 sec｜Game capacity 2.138KB｜

Script

「塗りつぶしゲーム」というゲームは、キャンバス上に表示されている黒い背景に、白い四角形を描いていくゲームです。スマホやPCで操作可能であり、タッチまたはマウスドラッグで白い四角形を描くことができます。リセットボタンを押すことで、背景が再び黒くなります。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>塗りつぶしゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			margin: auto;
			background: white;
		}
		button {
			margin: 10px;
			padding: 10px 20px;
			font-size: 1.5em;
			border-radius: 10px;
			border: none;
			background: yellow;
			color: black;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<button id="resetButton">リセットする🎨</button>
	<script>
		// HTML要素の取得
		const canvas = document.getElementById("canvas");
		const resetButton = document.getElementById("resetButton");

// ゲームの設定
		const width = window.innerWidth;
		const height = window.innerHeight;
		canvas.width = width;
		canvas.height = height;
		const context = canvas.getContext("2d");
		context.fillStyle = "black";
		context.fillRect(0, 0, width, height);

// ユーザーの操作
		let isDrawing = false;
		canvas.addEventListener("mousedown", start);
		canvas.addEventListener("mousemove", draw);
		canvas.addEventListener("mouseup", stop);
		canvas.addEventListener("mouseout", stop);

function start(event) {
			isDrawing = true;
			draw(event);
		}

function draw(event) {
			if (!isDrawing) return;
			const x = event.pageX - canvas.offsetLeft;
			const y = event.pageY - canvas.offsetTop;
			context.fillStyle = "white";
			context.fillRect(x, y, 20, 20);
		}

function stop(event) {
			isDrawing = false;
		}

// ボタンの操作
		resetButton.addEventListener("click", reset);

function reset() {
			context.fillStyle = "black";
			context.fillRect(0, 0, width, height);
		}
	</script>
</body>
</html>