The Game of Surviving the Great Depression's game

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

No:2801

3304

←

Prev Next

→

The Game of Surviving the Great Depression
Developer User3494｜Date and time 23/6/22 17:56:26
Build time 39.004 sec｜Game capacity 3.536KB｜

Script

このゲームは、プレイヤーが赤いボールを避けながら、黄色いバーで青いマークを操作して、スコアを稼ぐゲームです。スマホでの操作を前提としているため、左右にスライドすることでバーを動かすことができます。ボールに当たるとスコアが加算され、一定数スコアが稼がれると難易度が上がります。スコアが100以上になるとゲームオーバーとなります。是非とも世界恐慌を生き残ってください！

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>世界恐慌を生き残るゲーム</title>
<style>
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

canvas {
  display: block;
  background: #f2f2f2;
}
</style>
</head>
<body>
<canvas id="game"></canvas>
<script>
// Canvasの設定
const canvas = document.getElementById("game");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");

// ゲームの設定
let score = 0;
let speed = 5;
let player = {
  x: canvas.width / 2 - 50,
  y: canvas.height - 50,
  width: 100,
  height: 20,
  color: "yellow"
};
let balls = [];

// プレイヤーの描画
function drawPlayer() {
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

// ボールの描画
function drawBall(ball) {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2);
  ctx.fillStyle = ball.color;
  ctx.fill();
}

// ボールの生成
function createBall() {
  let ball = {
    x: Math.random() * canvas.width,
    y: -10,
    size: 20,
    speed: (Math.random() * 2) + speed,
    color: "red"
  };
  balls.push(ball);
}

// 当たり判定
function collision(ball) {
  if (player.x < ball.x + ball.size && player.x + player.width > ball.x && player.y < ball.y + ball.size && player.y + player.height > ball.y) {
    return true;
  } else {
    return false;
  }
}

// スコアの描画
function drawScore() {
  ctx.fillStyle = "white";
  ctx.font = "20px sans-serif";
  ctx.fillText("Score: " + score, 10, 30);
}

// ゲームオーバー画面の描画
function drawGameOver() {
  ctx.fillStyle = "black";
  ctx.globalAlpha = 0.6;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.globalAlpha = 1;
  ctx.fillStyle = "white";
  ctx.font = "50px sans-serif";
  ctx.textAlign = "center";
  ctx.fillText("GAME OVER", canvas.width / 2, canvas.height / 2);
  ctx.font = "30px sans-serif";
  ctx.fillText("Score: " + score, canvas.width / 2, canvas.height / 2 + 50);
}

// ゲームのメイン処理
function main() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawPlayer();
  for (let i = 0; i < balls.length; i++) {
    let ball = balls[i];
    ball.y += ball.speed;
    drawBall(ball);
    if (collision(ball)) {
      balls.splice(i, 1);
      score++;
      if (score % 10 === 0) {
        speed += 1;
      }
    }
    if (ball.y > canvas.height) {
      balls.splice(i, 1);
    }
  }
  drawScore();
  if (score % 25 === 0) {
    createBall();
  }
  if (balls.length === 0) {
    createBall();
  }
  if (score >= 100) {
    cancelAnimationFrame(requestId);
    drawGameOver();
  }
  requestId = requestAnimationFrame(main);
}

// イベントリスナーの設定
document.addEventListener("keydown", function(e) {
  if (e.keyCode === 37) {
    player.x -= 10;
  } else if (e.keyCode === 39) {
    player.x += 10;
  }
});

// ゲームの開始
let requestId = requestAnimationFrame(main);
</script>
</body>
</html>