AI game creator

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

No:52501

130

←

Prev Next

→

Block Breaker
Developer User18896｜Date and time 24/3/22 11:27:57
Build time 12.252 sec｜Game capacity 2.265KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block Breaker Game</title>
<style>
  #gameCanvas {
    border: 1px solid black;
    display: block;
    margin: 0 auto;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');

const ball = {
    x: canvas.width / 2,
    y: canvas.height - 30,
    radius: 10,
    dx: 2,
    dy: -2
  };

const paddle = {
    width: 80,
    height: 10,
    x: canvas.width / 2 - 40,
    y: canvas.height - 10
  }

let rightPressed = false;
  let leftPressed = false;

document.addEventListener('keydown', function(e) {
    if(e.key === 'ArrowRight') {
      rightPressed = true;
    } else if(e.key === 'ArrowLeft') {
      leftPressed = true;
    }
  });

document.addEventListener('keyup', function(e) {
    if(e.key === 'ArrowRight') {
      rightPressed = false;
    } else if(e.key === 'ArrowLeft') {
      leftPressed = false;
    }
  });

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

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.closePath();
  }

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();

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;
    } else if(ball.y + ball.radius > canvas.height) {
      if(ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
        ball.dy = -ball.dy;
      } else {
        alert('GAME OVER');
        document.location.reload();
      }
    }

if(rightPressed && paddle.x < canvas.width - paddle.width) {
      paddle.x += 7;
    } else if(leftPressed && paddle.x > 0) {
      paddle.x -= 7;
    }

ball.x += ball.dx;
    ball.y += ball.dy;

requestAnimationFrame(draw);
  }

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