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

No:2361

3303

←

Prev Next

→

When you tap "Start" to kick the ball, a line-draw..ALL
Developer もちきなこ｜Date and time 23/6/21 1:59:33
Build time 25.128 sec｜Game capacity 1.78KB｜

Script

ball game

Keep tapping to avoid dropping the ball down.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>ボール蹴り</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #f5f5f5;
			text-align: center;
			font-size: 2em;
		}
		canvas {
			border: 3px solid black;
		}
	</style>
</head>
<body>
	<h1>ボール蹴り</h1>
	<p>ボールを下に落とさないようにタップし続けてください。</p>
	<canvas id="canvas"></canvas>
	<button id="start">スタート</button>

// ボールの初期設定
		let ball = {
			x: canvasWidth/2,
			y: canvasHeight/2,
			r: 50,
			vy: 0,
			g: 1.5,
			color: 'yellow'
		};

// canvasの描画処理
		function draw() {
			ctx.clearRect(0, 0, canvasWidth, canvasHeight);
			ctx.beginPath();
			ctx.fillStyle = ball.color;
			ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI*2, false);
			ctx.fill();
			ctx.closePath();

ball.y += ball.vy;
			ball.vy += ball.g;

// 壁にぶつかったら跳ね返る
			if (ball.y + ball.r >= canvasHeight) {
				ball.vy *= -0.8;
				ball.color = 'pink';
			} else if (ball.y - ball.r <= 0) {
				ball.vy *= -1;
				ball.color = 'lightgreen';
			}

requestAnimationFrame(draw);
		}

// ボールをタップしたら跳ね上がる
		canvas.addEventListener('click', function() {
			ball.vy = -15;
			ball.color = 'yellow';
		});

// スタートボタンを押したらゲームスタート
		document.getElementById('start').addEventListener('click', function() {
			draw();
			this.style.display = 'none';
		});

</script>
</body>
</html>