AI game creator

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

No:1422

112

←

Prev Next

→

Avoiding Balls game
Developer User3337｜Date and time 23/6/18 15:22:26
Build time 41.501 sec｜Game capacity 3.514KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>ボールを避けるゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #eeeeee;
			font-size: 20px;
			text-align: center;
			color: #333333;
		}
		#score {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 50px;
			background-color: #ffffff;
			border-bottom: 2px solid #dddddd;
			line-height: 50px;
			font-size: 24px;
			text-align: center;
			z-index: 1;
		}
		#canvas {
			display: block;
			margin: 0 auto;
			background-color: #ffffff;
			border: 2px solid #dddddd;
			z-index: 0;
		}
	</style>
</head>
<body>
	<div id="score">Score: 0</div>
	<canvas id="canvas"></canvas>
	<script>
		// ゲームの設定
		var setting = {
			width: window.innerWidth,
			height: window.innerHeight - 50, // スコア表示の高さ
			ballRadius: 20,
			ballSpeed: 5,
			ballColor: '#ff0000',
			obstacleWidth: 50,
			obstacleHeight: 150,
			obstacleSpeed: 3,
			obstacleColor: '#333333'
		};

// ゲームの変数
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var score = 0;
		canvas.width = setting.width;
		canvas.height = setting.height;
		var ball = {
			x: setting.width / 2,
			y: setting.height / 2,
			r: setting.ballRadius
		};
		var obstacles = [];

// ボールの描画
		function drawBall() {
			ctx.beginPath();
			ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
			ctx.fillStyle = setting.ballColor;
			ctx.fill();
			ctx.closePath();
		}

// 障害物の描画
		function drawObstacle(obstacle) {
			ctx.fillStyle = setting.obstacleColor;
			ctx.fillRect(obstacle.x, obstacle.y, setting.obstacleWidth, setting.obstacleHeight);
		}

// スコアの表示
		function drawScore() {
			ctx.fillStyle = '#333333';
			ctx.font = 'bold 24px sans-serif';
			ctx.fillText('Score: ' + score, 10, 40);
		}

// ゲームの初期化
		function init() {
			obstacles = [];
			score = 0;
			setInterval(addObstacle, 1500);
		}

// 障害物の追加
		function addObstacle() {
			var obstacle = {
				x: setting.width,
				y: Math.random() * (setting.height - setting.obstacleHeight),
				w: setting.obstacleWidth,
				h: setting.obstacleHeight,
				s: setting.obstacleSpeed
			};
			obstacles.push(obstacle);
		}

// ゲームオーバー時の処理
		function gameOver() {
			clearInterval(timer);
			alert('Game Over! Score: ' + score);
			init();
			timer = setInterval(runGame, 10);
		}

// ゲームの開始
		function runGame() {
			ctx.clearRect(0, 0, setting.width, setting.height);

// ボールの移動
			ball.x += setting.ballSpeed;
			if (ball.x + setting.ballRadius > setting.width) {
				ball.x = setting.ballRadius;
				score++;
			}

// 障害物の移動
			for (var i = 0; i < obstacles.length; i++) {
				obstacles[i].x -= obstacles[i].s;
				drawObstacle(obstacles[i]);
				if (obstacles[i].x < -obstacles[i].w) {
					obstacles.splice(i, 1);
					i--;
				}
			}

// ボールと障害物の当たり判定
			for (var i = 0; i < obstacles.length; i++) {
				if (ball.x + ball.r > obstacles[i].x && ball.x - ball.r < obstacles[i].x + obstacles[i].w && ball.y + ball.r > obstacles[i].y && ball.y - ball.r < obstacles[i].y + obstacles[i].h) {
					gameOver();
					return;
				}
			}

drawBall();
			drawScore();
		}

init();
		var timer = setInterval(runGame, 10);
	</script>
</body>
</html>