AI game creator

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

No:3224

924

←

Prev Next

→

PONG
Developer AI絵師｜Date and time 23/6/24 6:42:32
Build time 27.654 sec｜Game capacity 2.241KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>PONG</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas{
			border: 10px solid #333;
			display: block;
			margin: 50px auto;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>

// Ball Object
		let ball = {
			x: canvas.width/2,
			y: canvas.height/2,
			radius: 10,
			speed: 7,
			vx: 5,
			vy: 5
		}

// Paddle Object
		let leftPaddle = {
			x: 50,
			y: canvas.height/2 - 75,
			width: 10,
			height: 150,
			speed: 10,
			vy: 0
		}

// Controls for Left Paddle
		document.addEventListener("keydown", event => {
			if(event.code === "ArrowUp"){
				leftPaddle.vy = -leftPaddle.speed;
			} else if(event.code === "ArrowDown"){
				leftPaddle.vy = leftPaddle.speed;
			}
		});

document.addEventListener("keyup", event => {
			if(event.code === "ArrowUp" || event.code === "ArrowDown"){
				leftPaddle.vy = 0;
			}
		});

// Game Loop
		const gameLoop = () => {
			// Clear Canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw Ball
			ctx.beginPath();
			ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
			ctx.fillStyle = "#fff";
			ctx.fill();
			ctx.closePath();

// Draw Left Paddle
			ctx.beginPath();
			ctx.rect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);
			ctx.fillStyle = "#fff";
			ctx.fill();
			ctx.closePath();

// Move Ball
			ball.x += ball.vx;
			ball.y += ball.vy;

// Move Left Paddle
			leftPaddle.y += leftPaddle.vy;

// Bounce Ball off Top and Bottom Walls
			if(ball.y < ball.radius || ball.y > canvas.height - ball.radius){
				ball.vy = -ball.vy;
			}

// Bounce Ball off Left Paddle
			if(ball.x - ball.radius < leftPaddle.x + leftPaddle.width && ball.y > leftPaddle.y && ball.y < leftPaddle.y + leftPaddle.height){
				ball.vx = -ball.vx;
			}

// End Game if Ball Goes off Screen
			if(ball.x < -ball.radius || ball.x > canvas.width + ball.radius){
				alert("Game Over");
				document.location.reload();
			}

window.requestAnimationFrame(gameLoop);
		}

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