Endless games to play's game

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

No:2757

2928

←

Prev Next

→

Endless games to play
Developer anonymous｜Date and time 70/1/1 9:34:12
Build time unknown sec｜Game capacity 2.052KB｜

Script

このゲームは画面に黄色いボールを表示し、ボールが画面の端にぶつかるたびに跳ね返るというシンプルな内容です。プレイヤーはタップ or クリックでゲームをスタートし、無限に遊ぶことができます。楽しんでプレイしてください！

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>無限ゲーム</title>
	<style>
		body {
			background-color: black;
			color: white;
			font-size: 2rem;
			text-align: center;
			overflow: hidden;
		}
		canvas {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// 無限ゲーム
		// 起動時、画面タップ or クリックでスタート

// キャンバス取得
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');

// 画面サイズ
		let width = window.innerWidth;
		let height = window.innerHeight;

// 画面リサイズ時にサイズ更新
		window.addEventListener('resize', () => {
			width = window.innerWidth;
			height = window.innerHeight;
			canvas.width = width;
			canvas.height = height;
		});

// ボールの初期位置
		let x = Math.random() * width;
		let y = Math.random() * height;

// ボールの移動量
		let dx = 10;
		let dy = 10;

// アニメーション関数
		function animate() {
			// キャンバスクリア
			ctx.clearRect(0, 0, width, height);

// ボールを描画
			ctx.beginPath();
			ctx.arc(x, y, 50, 0, Math.PI * 2);
			ctx.fillStyle = 'yellow';
			ctx.fill();

// ボール位置更新
			x += dx;
			y += dy;

// 壁に当たった時の処理
			if (x + 50 > width || x - 50 < 0) {
				dx = -dx;
			}
			if (y + 50 > height || y - 50 < 0) {
				dy = -dy;
			}

// 再帰呼び出し
			requestAnimationFrame(animate);
		}

// タップ or クリックでスタート
		document.addEventListener('click', () => {
			requestAnimationFrame(animate);
		});
	</script>
</body>
</html>