AI game creator

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

No:29786

←

Prev Next

→

Block Breaker
Developer User14628｜Date and time 23/12/19 2:31:08
Build time 23.814 sec｜Game capacity 2.815KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Block Breaker Game</title>
	<style>
		#gameCanvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="400" height="300"></canvas>
	<script>
		// Game variables
		let canvas;
		let canvasContext;
		let ballX = 50;
		let ballY = 50;
		let ballSpeedX = 10;
		let ballSpeedY = 4;
		let paddleX = 250;
		const paddleWidth = 100;
		const paddleHeight = 10;
		let mouseX;

// Start the game
		window.onload = function() {
			canvas = document.getElementById("gameCanvas");
			canvasContext = canvas.getContext("2d");

// Handle mouse movement
			canvas.addEventListener('mousemove', function(event) {
				let rect = canvas.getBoundingClientRect();
				let root = document.documentElement;
				mouseX = event.clientX - rect.left - root.scrollLeft;
			});

// Update game frames
			setInterval(function() {
				moveEverything();
				drawEverything();
			}, 1000 / 30); // 30 frames per second
		};

// Move objects in the game
		function moveEverything() {
			ballX += ballSpeedX;
			ballY += ballSpeedY;

if (ballX < 0 && ballSpeedX < 0.0) { // Ball hits left wall
				ballSpeedX *= -1;
			}
			if (ballX > canvas.width && ballSpeedX > 0.0) { // Ball hits right wall
				ballSpeedX *= -1;
			}
			if (ballY < 0 && ballSpeedY < 0.0) { // Ball hits top wall
				ballSpeedY *= -1;
			}
			if (ballY > canvas.height) { // Ball falls off the screen
				ballReset();
			}

let paddleLeftEdge = mouseX - paddleWidth / 2;
			let paddleRightEdge = mouseX + paddleWidth / 2;
			if (ballY > canvas.height - 30 && // Ball is near the paddle
				ballX > paddleLeftEdge && 
				ballX < paddleRightEdge) {
				ballSpeedY *= -1;

let centerOfPaddle = paddleX + paddleWidth / 2;
				let ballDistFromPaddleCenter = ballX - centerOfPaddle;
				ballSpeedX = ballDistFromPaddleCenter * 0.35;
			}
		}

// Reset the ball position and speed
		function ballReset() {
			ballX = canvas.width / 2;
			ballY = canvas.height / 2;
			ballSpeedX = 10;
			ballSpeedY = 4;
		}

// Draw objects in the game
		function drawEverything() {
			// Clear the canvas
			colorRect(0, 0, canvas.width, canvas.height, "black");

// Draw the paddle
			colorRect(paddleX, canvas.height - 10, paddleWidth, paddleHeight, "white");

// Draw the ball
			colorCircle(ballX, ballY, 10, "white");
		}

// Draw a rectangle with color
		function colorRect(leftX, topY, width, height, color) {
			canvasContext.fillStyle = color;
			canvasContext.fillRect(leftX, topY, width, height);
		}

// Draw a circle with color
		function colorCircle(centerX, centerY, radius, color) {
			canvasContext.fillStyle = color;
			canvasContext.beginPath();
			canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
			canvasContext.fill();
		}
	</script>
</body>
</html>