Studio1HQ/index.html

## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DX-Ball Arcade Game</title>
    <style>
      body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #000;
      }
      canvas {
        border: 2px solid #fff;
      }
      #message {
        position: absolute;
        color: white;
        font-family: Arial, sans-serif;
        font-size: 24px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div id="message"></div>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const message = document.getElementById("message");

      // Game objects
      const paddle = { x: 350, y: 550, width: 100, height: 10, speed: 8 };
      const ball = { x: 400, y: 540, radius: 5, dx: 4, dy: -4, speed: 5 };
      const bricks = [];
      const brickRowCount = 5;
      const brickColumnCount = 10;
      const brickWidth = 75;
      const brickHeight = 20;
      const brickPadding = 10;
      const brickOffsetTop = 30;
      const brickOffsetLeft = 35;
      let score = 0;
      let gameState = "start";

      // Initialize bricks
      for (let c = 0; c < brickColumnCount; c++) {
        bricks[c] = [];
        for (let r = 0; r < brickRowCount; r++) {
          bricks[c][r] = { x: 0, y: 0, status: 1 };
        }
      }

      // Mouse and keyboard controls
      let mouseX = paddle.x;
      document.addEventListener("mousemove", (e) => {
        const rect = canvas.getBoundingClientRect();
        mouseX = e.clientX - rect.left - paddle.width / 2;
      });
      document.addEventListener("keydown", (e) => {
        if (
          e.code === "Space" &&
          (gameState === "start" || gameState === "lost")
        ) {
          if (gameState === "lost") {
            score = 0;
            resetBricks();
          }
          ball.x = paddle.x + paddle.width / 2;
          ball.y = paddle.y - ball.radius;
          ball.dx = 4;
          ball.dy = -4;
          ball.speed = 5;
          gameState = "playing";
          message.textContent = "";
        }
      });

      function resetBricks() {
        for (let c = 0; c < brickColumnCount; c++) {
          for (let r = 0; r < brickRowCount; r++) {
            bricks[c][r].status = 1;
          }
        }
      }

      function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
        ctx.fillStyle = "#0f0";
        ctx.fill();
        ctx.closePath();
      }

      function drawBall() {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = "#fff";
        ctx.fill();
        ctx.closePath();
      }

      function drawBricks() {
        for (let c = 0; c < brickColumnCount; c++) {
          for (let r = 0; r < brickRowCount; r++) {
            if (bricks[c][r].status === 1) {
              const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
              const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
              bricks[c][r].x = brickX;
              bricks[c][r].y = brickY;
              ctx.beginPath();
              ctx.rect(brickX, brickY, brickWidth, brickHeight);
              ctx.fillStyle = `hsl(${r * 50}, 70%, 50%)`;
              ctx.fill();
              ctx.closePath();
            }
          }
        }
      }

      function drawScore() {
        ctx.font = "16px Arial";
        ctx.fillStyle = "#fff";
        ctx.fillText(`Score: ${score}`, 8, 20);
      }

      function collisionDetection() {
        for (let c = 0; c < brickColumnCount; c++) {
          for (let r = 0; r < brickRowCount; r++) {
            const b = bricks[c][r];
            if (b.status === 1) {
              if (
                ball.x > b.x &&
                ball.x < b.x + brickWidth &&
                ball.y > b.y &&
                ball.y < b.y + brickHeight
              ) {
                ball.dy = -ball.dy;
                b.status = 0;
                score += 10;
                if (score === brickRowCount * brickColumnCount * 10) {
                  gameState = "won";
                  message.textContent = "You Win! Press Space to Play Again";
                  ball.dx = 0;
                  ball.dy = 0;
                }
              }
            }
          }
        }
      }

      function update() {
        if (gameState !== "playing") return;

        // Update paddle position
        paddle.x = mouseX;
        if (paddle.x < 0) paddle.x = 0;
        if (paddle.x + paddle.width > canvas.width)
          paddle.x = canvas.width - paddle.width;

        // Update ball position
        ball.x += ball.dx;
        ball.y += ball.dy;

        // Wall collisions
        if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
          ball.dx = -ball.dx;
        }
        if (ball.y - ball.radius < 0) {
          ball.dy = -ball.dy;
        }
        if (ball.y + ball.radius > canvas.height) {
          gameState = "lost";
          message.textContent = "Game Over! Press Space to Restart";
          ball.dx = 0;
          ball.dy = 0;
          ball.x = paddle.x + paddle.width / 2;
          ball.y = paddle.y - ball.radius;
        }

        // Paddle collision
        if (
          ball.y + ball.radius > paddle.y &&
          ball.x > paddle.x &&
          ball.x < paddle.x + paddle.width
        ) {
          ball.dy = -Math.abs(ball.dy);
          ball.speed += 0.1; // Increase speed slightly
          const normalizedHit =
            (ball.x - (paddle.x + paddle.width / 2)) / (paddle.width / 2);
          ball.dx = ball.speed * normalizedHit; // Adjust angle based on hit position
        }
      }

      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPaddle();
        drawBall();
        drawBricks();
        drawScore();
        collisionDetection();
        update();
        requestAnimationFrame(draw);
      }

      // Initial message
      message.textContent = "Press Space to Start";
      draw();
    </script>
  </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>DX-Ball Arcade Game</title>
	<style>
	body {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: #000;
	}
	canvas {
	border: 2px solid #fff;
	}
	#message {
	position: absolute;
	color: white;
	font-family: Arial, sans-serif;
	font-size: 24px;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<canvas id="gameCanvas" width="800" height="600"></canvas>
	<div id="message"></div>
	<script>
	const canvas = document.getElementById("gameCanvas");
	const ctx = canvas.getContext("2d");
	const message = document.getElementById("message");

	// Game objects
	const paddle = { x: 350, y: 550, width: 100, height: 10, speed: 8 };
	const ball = { x: 400, y: 540, radius: 5, dx: 4, dy: -4, speed: 5 };
	const bricks = [];
	const brickRowCount = 5;
	const brickColumnCount = 10;
	const brickWidth = 75;
	const brickHeight = 20;
	const brickPadding = 10;
	const brickOffsetTop = 30;
	const brickOffsetLeft = 35;
	let score = 0;
	let gameState = "start";

	// Initialize bricks
	for (let c = 0; c < brickColumnCount; c++) {
	bricks[c] = [];
	for (let r = 0; r < brickRowCount; r++) {
	bricks[c][r] = { x: 0, y: 0, status: 1 };
	}
	}

	// Mouse and keyboard controls
	let mouseX = paddle.x;
	document.addEventListener("mousemove", (e) => {
	const rect = canvas.getBoundingClientRect();
	mouseX = e.clientX - rect.left - paddle.width / 2;
	});
	document.addEventListener("keydown", (e) => {
	if (
	e.code === "Space" &&
	(gameState === "start" \|\| gameState === "lost")
	) {
	if (gameState === "lost") {
	score = 0;
	resetBricks();
	}
	ball.x = paddle.x + paddle.width / 2;
	ball.y = paddle.y - ball.radius;
	ball.dx = 4;
	ball.dy = -4;
	ball.speed = 5;
	gameState = "playing";
	message.textContent = "";
	}
	});

	function resetBricks() {
	for (let c = 0; c < brickColumnCount; c++) {
	for (let r = 0; r < brickRowCount; r++) {
	bricks[c][r].status = 1;
	}
	}
	}

	function drawPaddle() {
	ctx.beginPath();
	ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
	ctx.fillStyle = "#0f0";
	ctx.fill();
	ctx.closePath();
	}

	function drawBall() {
	ctx.beginPath();
	ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
	ctx.fillStyle = "#fff";
	ctx.fill();
	ctx.closePath();
	}

	function drawBricks() {
	for (let c = 0; c < brickColumnCount; c++) {
	for (let r = 0; r < brickRowCount; r++) {
	if (bricks[c][r].status === 1) {
	const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
	const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
	bricks[c][r].x = brickX;
	bricks[c][r].y = brickY;
	ctx.beginPath();
	ctx.rect(brickX, brickY, brickWidth, brickHeight);
	ctx.fillStyle = `hsl(${r * 50}, 70%, 50%)`;
	ctx.fill();
	ctx.closePath();
	}
	}
	}
	}

	function drawScore() {
	ctx.font = "16px Arial";
	ctx.fillStyle = "#fff";
	ctx.fillText(`Score: ${score}`, 8, 20);
	}

	function collisionDetection() {
	for (let c = 0; c < brickColumnCount; c++) {
	for (let r = 0; r < brickRowCount; r++) {
	const b = bricks[c][r];
	if (b.status === 1) {
	if (
	ball.x > b.x &&
	ball.x < b.x + brickWidth &&
	ball.y > b.y &&
	ball.y < b.y + brickHeight
	) {
	ball.dy = -ball.dy;
	b.status = 0;
	score += 10;
	if (score === brickRowCount * brickColumnCount * 10) {
	gameState = "won";
	message.textContent = "You Win! Press Space to Play Again";
	ball.dx = 0;
	ball.dy = 0;
	}
	}
	}
	}
	}
	}

	function update() {
	if (gameState !== "playing") return;

	// Update paddle position
	paddle.x = mouseX;
	if (paddle.x < 0) paddle.x = 0;
	if (paddle.x + paddle.width > canvas.width)
	paddle.x = canvas.width - paddle.width;

	// Update ball position
	ball.x += ball.dx;
	ball.y += ball.dy;

	// Wall collisions
	if (ball.x + ball.radius > canvas.width \|\| ball.x - ball.radius < 0) {
	ball.dx = -ball.dx;
	}
	if (ball.y - ball.radius < 0) {
	ball.dy = -ball.dy;
	}
	if (ball.y + ball.radius > canvas.height) {
	gameState = "lost";
	message.textContent = "Game Over! Press Space to Restart";
	ball.dx = 0;
	ball.dy = 0;
	ball.x = paddle.x + paddle.width / 2;
	ball.y = paddle.y - ball.radius;
	}

	// Paddle collision
	if (
	ball.y + ball.radius > paddle.y &&
	ball.x > paddle.x &&
	ball.x < paddle.x + paddle.width
	) {
	ball.dy = -Math.abs(ball.dy);
	ball.speed += 0.1; // Increase speed slightly
	const normalizedHit =
	(ball.x - (paddle.x + paddle.width / 2)) / (paddle.width / 2);
	ball.dx = ball.speed * normalizedHit; // Adjust angle based on hit position
	}
	}

	function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drawPaddle();
	drawBall();
	drawBricks();
	drawScore();
	collisionDetection();
	update();
	requestAnimationFrame(draw);
	}

	// Initial message
	message.textContent = "Press Space to Start";
	draw();
	</script>
	</body>
	</html>
No results found