A ball will fall from above. Hit it back at the right time and you win's game

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

No:1453

127

←

Prev Next

→

A ball will fall from above. Hit it back at the ri..ALL
Developer User3329｜Date and time 23/6/18 16:45:30
Build time 28.442 sec｜Game capacity 2.521KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<html>
<head>
<meta charset="UTF-8">
<title>落ちてくるボールを打ち返そう！</title>
<style>
*{
  margin: 0;
  padding: 0;
}
canvas{
  display: block;
}
</style>
</head>
<body>

//ボールのサイズ
const ballRadius = 20;

//ボールの初期位置
let ballX = canvasWidth / 2;
let ballY = canvasHeight / 6;

//ボールの落下速度
let ballSpeedY = 7;

//ラケットのサイズ
const racketWidth = 150;
const racketHeight = 20;

//ラケットの初期位置
let racketX = canvasWidth / 2 - racketWidth / 2;
const racketY = canvasHeight - racketHeight - 20;

//ラケットの移動速度
const racketSpeed = 15;

//スコア
let score = 0;

//キャンバス取得
const canvas = document.getElementById("gameArea");
canvas.width = canvasWidth;
canvas.height = canvasHeight;

//コンテキスト取得
const ctx = canvas.getContext("2d");

//ボール描画
function drawBall(){
  ctx.beginPath();
  ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "yellow";
  ctx.fill();
  ctx.closePath();
}

//ボール更新
function updateBall(){
  ballY += ballSpeedY;
  
  //ボールが床に着いたらリセット
  if(ballY > canvasHeight - ballRadius){
    ballX = canvasWidth / 2;
    ballY = canvasHeight / 6;
    score = 0;
  }
  
  //ボールがラケットに当たったら跳ね返る
  if(ballY + ballRadius >= racketY 
     && ballX >= racketX 
     && ballX <= racketX + racketWidth){
    ballSpeedY = -ballSpeedY;
    score++;
  }
}

//ラケット描画
function drawRacket(){
  ctx.beginPath();
  ctx.rect(racketX, racketY, racketWidth, racketHeight);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.closePath();
}

//ラケット更新
function updateRacket(keyCode){
  if(keyCode === 37 && racketX > 0){
    racketX -= racketSpeed;
  }else if(keyCode === 39 && racketX < canvasWidth - racketWidth){
    racketX += racketSpeed;
  }
}

//スコア描画
function drawScore(){
  ctx.font = "36px serif";
  ctx.fillStyle = "white";
  ctx.fillText("SCORE:" + score, 50, 50);
}

//フレームごとの処理
function gameLoop(){
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  
  drawBall();
  updateBall();
  
  drawRacket();
  
  drawScore();
}

//ゲーム開始
setInterval(gameLoop, 50);

//キー操作
document.addEventListener("keydown", function(e){
  updateRacket(e.keyCode);
});
</script>

</body>
</html>