Table tennis with 20 rainbow balls's game

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

No:1896

109

←

Prev Next

→

Table tennis with 20 rainbow balls
Developer User3345｜Date and time 23/6/19 13:25:23
Build time 62.227 sec｜Game capacity 3.582KB｜

Script

ゲーム

得点: 0

このゲームは、レインボーのボール20個がどんどん落ちてくるので、パドルを動かしてボールを跳ね返して得点を稼ぐゲームです。ボールが床に落ちてしまうとゲームオーバーになります。得点を高くするほど難易度が上がっていきます。スマホでも遊べるように、マウスでパドルを操作できるようにしました。

←

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;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="300" height="300"></canvas>
	<p id="score">得点: 0</p>

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

// ボールの初期位置と速度
		const balls = [];
		for (let i = 0; i < BALL_COUNT; i++) {
			const x = canvas.width * Math.random();
			const y = canvas.height * Math.random();
			const speedX = 3 * (Math.random() - 0.5);
			const speedY = 3 * (Math.random() - 0.5);
			balls.push({
				x: x,
				y: y,
				speedX: speedX,
				speedY: speedY
			});
		}

// パドルの初期位置
		let paddleY = canvas.height - 20;

// スコア
		let score = 0;
		const scoreElem = document.getElementById('score');

// マウスの動きによってパドルの位置を更新する関数
		function handleMouse(event) {
			const rect = canvas.getBoundingClientRect();
			const mouseX = event.clientX - rect.left;
			const paddleHalfWidth = 40;
			const paddleX = Math.max(paddleHalfWidth, Math.min(canvas.width - paddleHalfWidth, mouseX));
			paddleY = canvas.height - 20;
		}
		canvas.addEventListener('mousemove', handleMouse);

// ボールとパドルの当たり判定を行う関数
		function detectCollision(ball) {
			const paddleHalfWidth = 40;
			const paddleHalfHeight = 10;
			if (ball.x + 10 >= paddleX - paddleHalfWidth && ball.x - 10 <= paddleX + paddleHalfWidth && ball.y + 10 >= paddleY - paddleHalfHeight && ball.y - 10 <= paddleY + paddleHalfHeight) {
				// パドルに当たった
				score++;
				scoreElem.textContent = `得点: ${score}`;
				return true;
			} else {
				return false;
			}
		}

// ボールを描画する関数
		function drawBall(ball) {
			ctx.beginPath();
			ctx.arc(ball.x, ball.y, 10, 0, 2 * Math.PI);
			ctx.fillStyle = 'white';
			ctx.fill();
		}

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

// ボールの位置を更新する
			balls.forEach((ball) => {
				ball.x += ball.speedX;
				ball.y += ball.speedY;

// 画面端に当たった場合、反射する
				if (ball.x < 10 || ball.x > canvas.width - 10) {
					ball.speedX = -ball.speedX;
				}
				if (ball.y < 10) {
					ball.speedY = -ball.speedY;
				}
				if (ball.y > canvas.height - 10) {
					// パドルに当たった場合、反射する
					if (detectCollision(ball)) {
						ball.speedY = -ball.speedY;
					} else {
						// ゲームオーバー
						alert(`得点: ${score}\nゲームオーバー！`);
						location.reload();
					}
				}

// ボールを描画する
				drawBall(ball);
			});

// パドルを描画する
			ctx.fillStyle = 'white';
			ctx.fillRect(paddleX - 40, paddleY - 10, 80, 20);

// 次のアニメーションフレームを予約する
			requestAnimationFrame(animate);
		}
		animate();
	</script>
</body>
</html>