AI game creator

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

No:2807

2598

←

Prev Next

→

one-stroke game
Developer User3617｜Date and time 23/6/22 18:31:40
Build time 55.637 sec｜Game capacity 3.637KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>一筆書きゲーム</title>
	<style>
		body {
			background-color: #FCECEC;
		}
		canvas {
			border: 1px solid black;
		}
		#startButton {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 2em;
			background-color: #FFE4E1;
			padding: 10px 20px;
			border-radius: 10px;
		}
	</style>
</head>
<body>
	<button id="startButton">スタート</button>
	<canvas id="canvas"></canvas>
	<script>
		const canvas = document.getElementById('canvas');
		const startButton = document.getElementById('startButton');
		const ctx = canvas.getContext('2d');
		const radius = 30;
		const emojis = ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🦁', '🐷', '🐸', '🐵'];
		let path = {
			startX: 0,
			startY: 0,
			endX: 0,
			endY: 0
		};
		let points = [];
		let currentEmoji = '';
		let score = 0;

function drawCircle(x, y) {
			ctx.beginPath();
			ctx.arc(x, y, radius, 0, Math.PI * 2);
			ctx.fill();
		}

function drawLine(x1, y1, x2, y2) {
			ctx.beginPath();
			ctx.moveTo(x1, y1);
			ctx.lineTo(x2, y2);
			ctx.stroke();
		}

function drawBackground() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = 'white';
			ctx.fillRect(0, 0, canvas.width, canvas.height);
		}

function getRandomEmoji() {
			return emojis[Math.floor(Math.random() * emojis.length)];
		}

function getDistance(x1, y1, x2, y2) {
			const dx = x2 - x1;
			const dy = y2 - y1;
			return Math.sqrt(dx * dx + dy * dy);
		}

function updateScore() {
			ctx.font = "30px Arial";
			ctx.fillStyle = 'black';
			ctx.fillText(`スコア: ${score}`, 20, 50);
		}

function onMouseDown(event) {
			const rect = canvas.getBoundingClientRect();
			path.startX = event.clientX - rect.left;
			path.startY = event.clientY - rect.top;
			points.push({x: path.startX, y: path.startY});
			currentEmoji = getRandomEmoji();
			canvas.addEventListener('mousemove', onMouseMove);
			canvas.addEventListener('mouseup', onMouseUp);
		}

startButton.addEventListener('click', function() {
			canvas.addEventListener('mousedown', onMouseDown);
			drawBackground();
			updateScore();
			startButton.style.display = 'none';
		});
	</script>
</body>
</html>