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

No:137

280

←

Prev Next

→

coloring game
Developer User2524｜Date and time 23/5/25 17:40:09
Build time 90.259 sec｜Game capacity 2.767KB｜

Script

塗り絵ゲーム

この塗り絵ゲームは、指定した画像に対してカーソルをドラッグして描画を行い、各色を選択することができます。画像はプログラム内に指定するか、外部から読み込むことができます。また、やり直すボタンで描画をやり直すことができます。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>塗り絵ゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body { text-align:center; }
		h1 { font-size:2rem; margin-top:1rem; }
		img { max-width:100%; height:auto; margin:2rem auto; border:2px solid #000; padding:1rem; box-sizing:border-box; }
		.colors { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; margin:2rem auto; }
		.color { width:3rem; height:3rem; margin:0.5rem; border-radius:50%; cursor:pointer; }
		.color:hover { border:2px solid #000; }
		#canvas { max-width:100%; height:auto; border:2px solid #000; margin:2rem auto; }
		.button { margin:2rem 0; padding:1rem 2rem; background-color:#FFC107; color:#fff; border:none; border-radius:5px; font-size:1rem; cursor:pointer; }
		.button:hover { background-color:#FFA000; }
	</style>
</head>
<body>

<h1>塗り絵ゲーム</h1>

var currentColor;

function currentColor(element) {
		currentColor = element.style.backgroundColor;
	}

function resetCanvas() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
	}

function draw(e) {
		ctx.fillStyle = currentColor;
		ctx.fillRect(e.offsetX, e.offsetY, 10, 10);
	}

canvas.addEventListener("mousedown", function() {
		canvas.addEventListener("mousemove", draw);
	});

canvas.addEventListener("mouseup", function() {
		canvas.removeEventListener("mousemove", draw);
	});

document.getElementById("image").addEventListener("load", function() {
		canvas.width = this.width;
		canvas.height = this.height;
		ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
	});
</script>

</body>
</html>