The iron ball rolls across the screen while you keep touching the screen.'s game

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

No:1921

139

←

Prev Next

→

The iron ball rolls across the screen while you ke..ALL
Developer User3193｜Date and time 23/6/19 14:47:37
Build time 39.025 sec｜Game capacity 2.523KB｜

Script

ようなゲームを実装しました。以下がプログラムになります。

このゲームは、画面を触り続けることで、画面上を転がる鉄球を操作することができます。鉄球が画面の端に当たると、反転して進路を変えます。また、背景には黄色の絵文字を使っています。スマホでも操作がしやすいように、タッチとマウスの両方に対応しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

ようなゲームを実装しました。

以下がプログラムになります。

```html
<!DOCTYPE html>
<html>
<head>
	<title>Rolling Ball Game</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		canvas {
			display: block;
			cursor: none;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// Initialize variables
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var ballRadius = 25;
		var ballX = canvas.width / 2;
		var ballY = canvas.height / 2;
		var ballSpeedX = 5;
		var ballSpeedY = 5;
		var isTouching = false;
		
		// Set canvas size
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		
		// Start animation loop
		requestAnimationFrame(animate);
		
		// Add touch and mouse event listeners
		canvas.addEventListener("touchstart", touchStart);
		canvas.addEventListener("touchend", touchEnd);
		canvas.addEventListener("mousedown", touchStart);
		canvas.addEventListener("mouseup", touchEnd);
		canvas.addEventListener("mousemove", touchMove);
		
		// Handle touch start event
		function touchStart() {
			isTouching = true;
		}
		
		// Handle touch end event
		function touchEnd() {
			isTouching = false;
		}
		
		// Handle touch move event
		function touchMove(event) {
			if (isTouching) {
				ballX = event.clientX;
				ballY = event.clientY;
			}
		}
		
		// Animate the ball
		function animate() {
			// Clear the canvas
			context.clearRect(0, 0, canvas.width, canvas.height);
			
			// Draw the ball
			context.beginPath();
			context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
			context.fillStyle = "yellow";
			context.fill();
			context.closePath();
			
			// Move the ball
			ballX += ballSpeedX;
			ballY += ballSpeedY;
			
			// Reverse ball direction if it hits the canvas edges
			if (ballX - ballRadius < 0 || ballX + ballRadius > canvas.width) {
				ballSpeedX = -ballSpeedX;
			}
			if (ballY - ballRadius < 0 || ballY + ballRadius > canvas.height) {
				ballSpeedY = -ballSpeedY;
			}
			
			// Start next animation frame
			requestAnimationFrame(animate);
		}
	</script>
</body>
</html>
```