AI game creator

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

No:3927

3093

←

Prev Next

→

ellipse
Developer sayaensm｜Date and time 23/6/26 23:52:08
Build time 29.709 sec｜Game capacity 2.714KB｜

Script

形を描画し、その中に入るように指を動かして遊ぶゲームを作ります。以下がプログラムの例です。

このプログラムは、楕円形を描画し、その中に青い円を移動させることができます。円をドラッグして移動させることができます。楕円形のパラメータ（中心座標、長径、短径）は、isInsideEllipse関数内の値を変更することによって調整することができます。円のサイズや色は、playerオブジェクトのプロパティを変更することによって調整することができます。また、プログラム内にスコアやタイマーなどのゲームメカニクスを追加することができます。

←

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>
		#canvas {
			border: 1px solid black;
			width: 300px;
			height: 300px;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');

const player = {
			x: canvas.width / 2,
			y: canvas.height / 2,
			radius: 15,
			color: 'blue'
		};

let isDragging = false;

canvas.addEventListener('mousedown', function(event) {
			const mouseX = event.clientX - canvas.getBoundingClientRect().left;
			const mouseY = event.clientY - canvas.getBoundingClientRect().top;
			if (isInsideEllipse(mouseX, mouseY, canvas.width / 2, canvas.height / 2, 100, 50)) {
				isDragging = true;
			}
		});

canvas.addEventListener('mousemove', function(event) {
			if (isDragging) {
				player.x = event.clientX - canvas.getBoundingClientRect().left;
				player.y = event.clientY - canvas.getBoundingClientRect().top;
			}
		});

canvas.addEventListener('mouseup', function() {
			isDragging = false;
		});

function isInsideEllipse(x, y, centerX, centerY, radiusX, radiusY) {
			const dx = (x - centerX) / radiusX;
			const dy = (y - centerY) / radiusY;
			return dx * dx + dy * dy < 1;
		}

function drawEllipse(x, y, radiusX, radiusY, color) {
			ctx.fillStyle = color;
			ctx.beginPath();
			ctx.ellipse(x, y, radiusX, radiusY, 0, 0, 2 * Math.PI);
			ctx.fill();
		}

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

function render() {
			clearCanvas();
			drawEllipse(canvas.width / 2, canvas.height / 2, 100, 50, 'green');
			drawEllipse(player.x, player.y, player.radius, player.radius, player.color);
		}

function update() {
			// No updates required.
		}

function gameLoop() {
			update();
			render();
			window.requestAnimationFrame(gameLoop);
		}

gameLoop();
	</script>
</body>
</html>

このプログラムは、楕円形を描画し、その中に青い円を移動させることができます。円をドラッグして移動させることができます。

楕円形のパラメータ（中心座標、長径、短径）は、isInsideEllipse関数内の値を変更することによって調整することができます。円のサイズや色は、playerオブジェクトのプロパティを変更することによって調整することができます。また、プログラム内にスコアやタイマーなどのゲームメカニクスを追加することができます。