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

No:116

713

←

Prev Next

→

Left-right balancing game
Developer ひさひさ｜Date and time 23/5/21 3:22:34
Build time 86.656 sec｜Game capacity 2.995KB｜

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>
		canvas {
			border: 2px solid black;
		}
	</style>
</head>
<body>

<h1>バランスを取ろう！</h1>
	<p>画面をタップしてバランスを取ろう！左右に傾くので注意してね。</p>

// 変数
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');
		const ballRadius = 10;
		let ballX = canvas.width/2;
		let ballY = canvas.height-ballRadius-50;
		let ballDX = 2;
		let ballDY = -2;
		let paddleHeight = 10;
		let paddleWidth = 75;
		let paddleX = (canvas.width-paddleWidth)/2;
		let rightPressed = false;
		let leftPressed = false;

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

// キー入力時の処理
		function keyDownHandler(e) {
			if(e.key == "Right" || e.key == "ArrowRight") {
				rightPressed = true;
			}
			else if(e.key == "Left" || e.key == "ArrowLeft") {
				leftPressed = true;
			}
		}
		function keyUpHandler(e) {
			if(e.key == "Right" || e.key == "ArrowRight") {
				rightPressed = false;
			}
			else if(e.key == "Left" || e.key == "ArrowLeft") {
				leftPressed = false;
			}
		}

// マウス移動時の処理
		function mouseMoveHandler(e) {
			let relativeX = e.clientX - canvas.offsetLeft;
			if(relativeX > 0 && relativeX < canvas.width) {
				paddleX = relativeX - paddleWidth/2;
			}
		}

// ボールとパドルの当たり判定
		function collisionDetection() {
			if(ballX > paddleX && ballX < paddleX + paddleWidth) {
				if(ballY + ballRadius > canvas.height - paddleHeight) {
					ballDY = -ballDY;
				}
			}
		}

// ゲームループ
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
			ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();

ctx.beginPath();
			ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
			ctx.fillStyle = "#0095DD";
			ctx.fill();
			ctx.closePath();

// バウンド
			if(ballX + ballDX > canvas.width-ballRadius || ballX + ballDX < ballRadius) {
				ballDX = -ballDX;
			}
			if(ballY + ballDY < ballRadius) {
				ballDY = -ballDY;
			}
			else if(ballY + ballDY > canvas.height-ballRadius) {
				if(ballX > paddleX && ballX < paddleX + paddleWidth) {
					ballDY = -ballDY;
				}
				else {
					alert("ゲームオーバー");
					document.location.reload();
				}
			}

// パドル移動
			if(rightPressed && paddleX < canvas.width-paddleWidth) {
				paddleX += 7;
			}
			else if(leftPressed && paddleX > 0) {
				paddleX -= 7;
			}

ballX += ballDX;
			ballY += ballDY;

collisionDetection();
		}

setInterval(draw, 10);

</script>

</body>
</html>