Ball collecting game to become immortal's game

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

No:3065

4018

←

Prev Next

→

Ball collecting game to become immortal
Developer User3655｜Date and time 23/6/23 16:39:06
Build time 40.938 sec｜Game capacity 3.507KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>不老不死ボール集めゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f0f0f0;
		}
		canvas {
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="400" height="600"></canvas>

// ゲームの初期化
		function init() {
			// キャンバスの取得
			canvas = document.getElementById("myCanvas");
			ctx = canvas.getContext("2d");

// プレイヤーの初期位置
			playerX = canvas.width / 2;
			playerY = canvas.height - 50;

// ボールの生成
			balls = [];
			for (var i = 0; i < gameSettings.ballCount; i++) {
				ball = {
					x: Math.random() * canvas.width,
					y: Math.random() * canvas.height / 2,
					dx: Math.random() > 0.5 ? -1 : 1,
					dy: 1,
					radius: 10,
					color: "#" + Math.floor(Math.random()*16777215).toString(16)
				};
				balls.push(ball);
			}

// イベントリスナーの登録
			document.addEventListener("keydown", keyDownHandler, false);
			document.addEventListener("keyup", keyUpHandler, false);

// ゲームのループ処理
			setInterval(gameLoop, 16);
		}

// キーダウンイベントの処理
		function keyDownHandler(event) {
			if (event.keyCode == 37) {
				playerMoveLeft = true;
			} else if (event.keyCode  == 39) {
				playerMoveRight = true;
			}
		}

// キーアップイベントの処理
		function keyUpHandler(event) {
			if (event.keyCode == 37) {
				playerMoveLeft = false;
			} else if (event.keyCode  == 39) {
				playerMoveRight = false;
			}
		}

// ゲームのループ処理
		function gameLoop() {
			// プレイヤーの移動処理
			if (playerMoveLeft && playerX > 0) {
				playerX -= gameSettings.playerVelocity;
			} else if (playerMoveRight && playerX < canvas.width) {
				playerX += gameSettings.playerVelocity;
			}

// ボールの移動処理
			for (var i = 0; i < balls.length; i++) {
				ball = balls[i];
				ball.x += ball.dx * gameSettings.ballSpeed;
				ball.y += ball.dy * gameSettings.ballSpeed;

// ボールと壁の衝突判定
				if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
					ball.dx = -ball.dx;
				}
				if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
					ball.dy = -ball.dy;
				}

// プレイヤーとボールの衝突判定
				if (Math.sqrt((ball.x - playerX)**2 + (ball.y - playerY)**2) < ball.radius) {
					balls.splice(i, 1);
					gameSettings.score++;
				}
			}

// 描画処理
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBalls();
			drawPlayer();
			drawScore();
		}

// ボールの描画処理
		function drawBalls() {
			for (var i = 0; i < balls.length; i++) {
				ball = balls[i];
				ctx.beginPath();
				ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
				ctx.fillStyle = ball.color;
				ctx.fill();
				ctx.closePath();
			}
		}

// プレイヤーの描画処理
		function drawPlayer() {
			ctx.beginPath();
			ctx.rect(playerX-50, playerY, 100, 20);
			ctx.fillStyle = "#333";
			ctx.fill();
			ctx.closePath();
		}

// スコアの描画処理
		function drawScore() {
			ctx.font = "20px Arial";
			ctx.fillStyle = "#333";
			ctx.textAlign = "center";
			ctx.fillText("スコア: " + gameSettings.score, canvas.width/2, 30);
		}

// ゲームの開始
		init();
	</script>
</body>
</html>