A 3d game with a ball that get through the odstacles's game | AI game creator

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

No:51743

246

A 3d game with a ball that get through the odstacl..ALL
Developer User21691｜Date and time 24/3/16 8:41:41
Build time 8.671 sec｜Game capacity 2.076KB｜

→ 　

0　

0　

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

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

(C)2023 HisashiApp

<script>
  // Define variables for the game
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(canvas);
  var ball = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: 20,
    speed: 5,
    dx: 1,
    dy: 1
  };
  var obstacles = [
    { x: 100, y: 100, width: 50, height: 50 },
    { x: 300, y: 200, width: 50, height: 50 },
    { x: 500, y: 300, width: 50, height: 50 }
  ];
  // Function to draw the ball
  function drawBall() {
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
  }
  // Function to draw the obstacles
  function drawObstacles() {
    obstacles.forEach(function(obstacle) {
      ctx.fillStyle = "#00FF00";
      ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    });
  }
  // Function to update the game
  function update() {
    ball.x += ball.speed * ball.dx;
    ball.y += ball.speed * ball.dy;
    // Check for collision with obstacles
    obstacles.forEach(function(obstacle) {
      if (ball.x + ball.radius > obstacle.x &&
          ball.x - ball.radius < obstacle.x + obstacle.width &&
          ball.y + ball.radius > obstacle.y &&
          ball.y - ball.radius < obstacle.y + obstacle.height) {
        alert("Game Over! You hit an obstacle");
        location.reload();
      }
    });
    // Check for collision with walls
    if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
      ball.dx = -ball.dx;
    }
    if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
      ball.dy = -ball.dy;
    }
  }
  // Function to render the game
  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawObstacles();
  }
  // Function to start the game loop
  function gameLoop() {
    update();
    render();
    requestAnimationFrame(gameLoop);
  }
  // Start the game loop
  gameLoop();
</script>