A gradually accelerating game's game

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

No:3392

813

←

Prev Next

→

A gradually accelerating game
Developer User3662｜Date and time 23/6/24 21:03:35
Build time 14.326 sec｜Game capacity 1.969KB｜

Script

このゲームは、画面の中央付近から下に向かって跳ねるボールを操作するゲームです。クリックすると、ボールの速度がだんだん上がります。画面の上端にボールが接触するとゲームオーバーになります。このゲームはスマホでも操作可能です。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>だんだん加速するゲーム</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #333;
        color: #fff;
      }
      canvas {
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="game" width="320" height="480"></canvas>
    <script>
      window.onload = function () {
        var canvas = document.getElementById("game");
        var ctx = canvas.getContext("2d");

var ballSize = 10;
        var ballX = canvas.width / 2;
        var ballY = canvas.height - ballSize;
        var ballSpeed = 2;
        var ballSpeedIncrement = 0.1;

function clearCanvas() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

function drawBall() {
          ctx.beginPath();
          ctx.arc(ballX, ballY, ballSize, 0, 2 * Math.PI);
          ctx.fill();
        }

function update() {
          ballY -= ballSpeed;
          ballSpeed += ballSpeedIncrement;
          if (ballY < ballSize) {
            alert("ゲームオーバー");
            location.reload();
          }
        }

function render() {
          clearCanvas();
          drawBall();
        }

function loop() {
          update();
          render();
          requestAnimationFrame(loop);
        }

canvas.addEventListener("click", function (e) {
          if (ballSpeedIncrement < 1) {
            ballSpeedIncrement += 0.1;
          }
        });

loop();
      };
    </script>
  </body>
</html>