Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
When you tap "Start" to kick the ball, a line-drawn ball with JavaScript will appear near the center and slowly drop down. Tapping the ball will cause it to bounce upwards (randomly diagonally upwards instead of straight up). It is a game that keeps tapping so as not to drop the ball. In addition, the edge of the screen is a wall, and the ball bounces when it hits the wall. The ball never leaves the screen.'s game | AI game creator

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

No:2361

3542

←

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>