AI game creator

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

No:2916

1354

←

Prev Next

→

Mosaic Maker
Developer User3614｜Date and time 23/6/23 3:48:03
Build time 47.524 sec｜Game capacity 4.158KB｜

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 charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f3f3f3;
		}

#canvas {
			display: block;
			margin: 0 auto;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
		}

#controls {
			display: flex;
			flex-wrap: wrap;
			margin: 10px;
			padding: 10px;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
		}

.tool {
			display: flex;
			align-items: center;
			margin: 5px;
			padding: 5px;
			background-color: #eee;
			border-radius: 5px;
			box-shadow: 0 0 5px rgba(0,0,0,0.5);
			cursor: pointer;
		}

.tool.active {
			background-color: #ccc;
			box-shadow: 0 0 5px rgba(0,0,0,1);
		}

.color {
			display: block;
			width: 30px;
			height: 30px;
			margin-right: 5px;
			border-radius: 15px;
			box-shadow: 0 0 5px rgba(0,0,0,0.5);
			cursor: pointer;
		}

#output {
			display: block;
			margin: 10px auto;
			background-color: #fff;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
			text-align: center;
			font-size: 2em;
			padding: 20px;
			cursor: pointer;
		}

@media screen and (max-width: 500px) {
			.tool {
				flex: 0 0 100%;
			}
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="controls">
		<div class="tool active" id="pen">
			<div class="color" style="background-color: #000"></div>
			<span>ペン</span>
		</div>
		<div class="tool" id="erase">
			<span>消しゴム</span>
		</div>
		<div class="tool" id="clear">
			<span>クリア</span>
		</div>
	</div>
	<div id="output">完成！</div>
	<script>
		const canvas = document.querySelector('#canvas');
		const ctx = canvas.getContext('2d');
		const controls = document.querySelector('#controls');
		const pen = document.querySelector('#pen');
		const erase = document.querySelector('#erase');
		const clear = document.querySelector('#clear');
		const output = document.querySelector('#output');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight - controls.offsetHeight;
		ctx.fillStyle = '#fff';
		ctx.fillRect(0, 0, canvas.width, canvas.height);
		ctx.lineWidth = 10;
		ctx.lineCap = 'round';
		let isDrawing = false;
		let lastX = 0;
		let lastY = 0;
		let penColor = '#000';
		let toolType = 'pen';
		function draw(e) {
			if (!isDrawing) return;
			ctx.strokeStyle = penColor;
			ctx.beginPath();
			ctx.moveTo(lastX, lastY);
			ctx.lineTo(e.clientX, e.clientY - controls.offsetHeight);
			ctx.stroke();
			lastX = e.clientX;
			lastY = e.clientY - controls.offsetHeight;
		}
		canvas.addEventListener('mousedown', (e) => {
			isDrawing = true;
			lastX = e.clientX;
			lastY = e.clientY - controls.offsetHeight;
		});
		canvas.addEventListener('mousemove', draw);
		canvas.addEventListener('mouseup', () => isDrawing = false);
		canvas.addEventListener('mouseout', () => isDrawing = false);
		pen.addEventListener('click', () => {
			pen.classList.add('active');
			erase.classList.remove('active');
			toolType = 'pen';
		});
		erase.addEventListener('click', () => {
			erase.classList.add('active');
			pen.classList.remove('active');
			toolType = 'erase';
		});
		clear.addEventListener('click', () => {
			ctx.fillStyle = '#fff';
			ctx.fillRect(0, 0, canvas.width, canvas.height);
		});
		output.addEventListener('click', () => {
			const imgData = canvas.toDataURL();
			window.open(imgData);
		});
		document.querySelectorAll('.color').forEach((color) => {
			color.addEventListener('click', () => {
				penColor = color.style.backgroundColor;
			});
		});
	</script>
</body>
</html>