billiards's game | AI game creator

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

No:11202

126

billiards
Developer User3532｜Date and time 23/8/8 13:25:31
Build time 13.917 sec｜Game capacity 1.398KB｜

→ 　

0　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>ビリヤードゲーム</title>
<style>
canvas {
  border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>

<script>
// ゲームの初期設定
function gameStart() {
  // キャンバス情報の取得
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  
  // ビリヤードボールの位置と速度情報
  let ballX = canvas.width / 2;
  let ballY = canvas.height / 2;
  let ballRadius = 20;
  let ballSpeedX = 2;
  let ballSpeedY = -2;
  
  // アニメーションフレームの描画
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.beginPath();
    ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
    
    // ボールの移動
    ballX += ballSpeedX;
    ballY += ballSpeedY;
    
    // ボールの反射処理
    if (ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
      ballSpeedX = -ballSpeedX;
    }
    if (ballY + ballSpeedY > canvas.height - ballRadius || ballY + ballSpeedY < ballRadius) {
      ballSpeedY = -ballSpeedY;
    }
    
    requestAnimationFrame(draw);
  }
  
  // ゲームの開始
  draw();
}

// ゲームの開始
gameStart();
</script>
</body>
</html>