たくさんのブロックが上からそこそこの速度で落ちてきて、いいタイミングでタップすると消滅して、ポイントが1増える。地面の線にブロックが着地するとポイントが-1される。右上にポイントの数が常に表示されている。ブロックはいっぱいかつ無限に落ちてくる。's game

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

No:36363

←

Prev Next

→

たくさんのブロックが上からそこそこの速度で落ちてきて、いいタイミングでタップすると消滅して、ポイント..ALL
Developer User16795｜Date and time 24/1/17 15:51:33
Build time 16.673 sec｜Game capacity 3.167KB｜

Script

スコア: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>ブロックゲーム</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    canvas {
      background: #fff;
      display: block;
      margin: 0 auto;
    }
    #score {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  <span id="score">スコア: 0</span>

var score = 0;
    var blocks = [];

function drawBlocks() {
      for (var i = 0; i < blocks.length; i++) {
        var block = blocks[i];
        ctx.beginPath();
        ctx.rect(block.x, block.y, block.width, block.height);
        ctx.fillStyle = block.color;
        ctx.fill();
        ctx.closePath();
      }
    }

function updateScore() {
      document.getElementById("score").innerText = "スコア: " + score;
    }

function handleTap(evt) {
      var rect = canvas.getBoundingClientRect();
      var tapX = evt.clientX - rect.left;
      var tapY = evt.clientY - rect.top;

for (var i = 0; i < blocks.length; i++) {
        var block = blocks[i];

if (tapX >= block.x && tapX <= block.x + block.width && tapY >= block.y && tapY <= block.y + block.height) {
          blocks.splice(i, 1);
          score++;
          updateScore();
          break;
        }
      }
    }

function handleTouch(evt) {
      evt.preventDefault();

var rect = canvas.getBoundingClientRect();
      var touchX = evt.touches[0].clientX - rect.left;
      var touchY = evt.touches[0].clientY - rect.top;

for (var i = 0; i < blocks.length; i++) {
        var block = blocks[i];

if (touchX >= block.x && touchX <= block.x + block.width && touchY >= block.y && touchY <= block.y + block.height) {
          blocks.splice(i, 1);
          score++;
          updateScore();
          break;
        }
      }
    }

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

for (var i = 0; i < blocks.length; i++) {
        var block = blocks[i];
        block.y += block.speed;

if (block.y + block.height >= canvas.height) {
          blocks.splice(i, 1);
          score--;
          updateScore();
        }
      }

drawBlocks();

requestAnimationFrame(update);
    }

function init() {
      for (var i = 0; i < 10; i++) {
        var block = {
          x: Math.random() * (canvas.width - 50),
          y: -Math.random() * 200 - 50,
          width: 50,
          height: 50,
          speed: Math.random() * 3 + 1,
          color: getRandomColor()
        };
        blocks.push(block);
      }

update();
    }

function getRandomColor() {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

canvas.addEventListener("click", handleTap, false);
    canvas.addEventListener("touchstart", handleTouch, false);

init();
  </script>
</body>
</html>