AI game creator

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

No:548

163

←

Prev Next

→

Avoiding Balls game
Developer User3021｜Date and time 23/6/15 15:10:29
Build time 46.906 sec｜Game capacity 3.307KB｜

Script

Score: 1 0

Game description: This is a ball avoidance game. Do not hit the black wall.、Move the blue paddle and bounce the ball、Let the red ball reach the wall.、This is a game to compete for scores. If the ball hits the black wall, the game is over. You can move the paddle with the right and left arrow keys.

←

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">
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<div>スコア: <span id="score">0</span></div>
	<canvas id="gameCanvas" width="400" height="600"></canvas>

// 右と左の矢印キーを押したときの処理
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);
		function keyDownHandler(e) {
		    if(e.keyCode == 39) {
		        rightPressed = true;
		    }
		    else if(e.keyCode == 37) {
		        leftPressed = true;
		    }
		}
		function keyUpHandler(e) {
		    if(e.keyCode == 39) {
		        rightPressed = false;
		    }
		    else if(e.keyCode == 37) {
		        leftPressed = false;
		    }
		}

// ボールを描画する
		function drawBall() {
			ctx.beginPath();
			ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
			ctx.fillStyle = "red";
			ctx.fill();
			ctx.closePath();
		}

// パドルを描画する
		function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
			ctx.fillStyle = "blue";
			ctx.fill();
			ctx.closePath();
		}

// スコアを更新する
		function updateScore() {
			score++;
			document.getElementById("score").innerHTML = score;
		}

// ゲームオーバー処理
		function gameOver() {
			alert("ゲームオーバー\nスコア: " + score);
			document.location.reload();
		}

// ゲームループ
		function gameLoop() {
			// 画面をクリアする
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// ボールを動かす
			ballX += dx;
			ballY += dy;

// ボールと壁の衝突判定
			if(ballX + dx > canvas.width- ballRadius || ballX + dx < ballRadius) {
				dx = -dx;
			}
			if(ballY + dy < ballRadius) {
				dy = -dy;
			}
			else if(ballY + dy > canvas.height - ballRadius) {
				if(ballX > paddleX && ballX < paddleX + paddleWidth) {
					dy = -dy;
					updateScore();
				}
				else {
					gameOver();
				}
			}

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

drawBall();
			drawPaddle();

requestAnimationFrame(gameLoop);
		}

gameLoop();
	</script>
</body>
</html>

ゲームの概要: ボールを避けるゲームです。黒い壁に当たらないように、青いパドルを動かしてボールを跳ね返し、赤いボールを壁までたどり着かせて、スコアを競うゲームです。ボールが黒い壁に当たってしまうとゲームオーバーです。右矢印キーと左矢印キーでパドルを動かすことができます。