AI game creator

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

No:10578

185

←

Prev Next

→

matte paint
Developer User4481｜Date and time 23/8/1 4:50:19
Build time 18.113 sec｜Game capacity 1.737KB｜

Script

了解いたしました。以下にプログラムの例を示します。

このプログラムは、スマートフォンで画面に触れることで描画ができるマットペイントのゲームです。canvas要素を使って描画領域を作成し、JavaScriptコードで触れた座標を取得して描画を行っています。実行すると、画面が白くなっている状態で画面に触れると黒い線が描かれます。指を離すと描画が停止します。

←

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 {
			margin: 0;
			overflow: hidden;
		}
		canvas {
			background-color: #FFF;
			touch-action: none;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

let isPainting = false;
		let prevX = 0;
		let prevY = 0;

function startPainting(e) {
			isPainting = true;
			prevX = e.touches[0].clientX;
			prevY = e.touches[0].clientY;
		}

function stopPainting() {
			isPainting = false;
		}

function paint(e) {
			if (!isPainting) return;

const x = e.touches[0].clientX;
			const y = e.touches[0].clientY;

context.strokeStyle = "#000";
			context.lineWidth = 5;
			context.lineCap = "round";

context.beginPath();
			context.moveTo(prevX, prevY);
			context.lineTo(x, y);
			context.stroke();

prevX = x;
			prevY = y;
		}

canvas.addEventListener("touchstart", startPainting);
		canvas.addEventListener("touchend", stopPainting);
		canvas.addEventListener("touchmove", paint);
	</script>
</body>
</html>
```

このプログラムは、スマートフォンで画面に触れることで描画ができるマットペイントのゲームです。canvas要素を使って描画領域を作成し、JavaScriptコードで触れた座標を取得して描画を行っています。

実行すると、画面が白くなっている状態で画面に触れると黒い線が描かれます。指を離すと描画が停止します。