Create a game about a blue square using guns to fight other blue squares's game

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

No:10097

132

←

Prev Next

→

Create a game about a blue square using guns to fi..ALL
Developer User4149｜Date and time 23/7/29 1:35:06
Build time 32.462 sec｜Game capacity 4.369KB｜

Script

Sure! Here's a simple game implemented as a single HTML file with JavaScript:

In this game, the blue square can be controlled by dragging your finger on the touchscreen of a smartphone. It moves left or right based on the swipe direction. The objective of the game is to shoot other blue squares by tapping anywhere on the screen, making bullets to appear from the top of the blue square. When a bullet collides with another blue square, the score increases. Please note that the game logic is simplified for demonstration purposes, and you can modify the code based on your requirements and design preferences.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      border: 1px solid black;
      display: block;
    }
  </style>
</head>

// Game Initialization
    window.onload = function() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');

// Set up event listeners for touch controls
      canvas.addEventListener('touchstart', handleTouchStart);
      canvas.addEventListener('touchmove', handleTouchMove);
      canvas.addEventListener('touchend', handleTouchEnd);
      
      setInterval(update, 20); // Update the game every 20 milliseconds
    }

// Touch Controls
    var touchStartX = 0;
    var touchMoveX = 0;

function handleTouchStart(e) {
      touchStartX = e.targetTouches[0].clientX;
    }

function handleTouchMove(e) {
      touchMoveX = e.targetTouches[0].clientX;
    }

function handleTouchEnd() {
      touchStartX = 0;
      touchMoveX = 0;
    }

// Game Update
    function update() {
      moveSquare();
      moveBullets();
      drawGameCanvas();
    }

function moveSquare() {
      // Move the blue square based on touch controls
      if (touchStartX !== 0 && touchMoveX !== 0) {
        var touchDelta = touchMoveX - touchStartX;

if (touchDelta > 0 && blueSquareX < canvas.width - 50) {
          blueSquareX += blueSquareSpeed;
        } else if (touchDelta < 0 && blueSquareX > 0) {
          blueSquareX -= blueSquareSpeed;
        }
      }
    }

function moveBullets() {
      // Move and remove bullets from the screen
      for (var i = 0; i < bullets.length; i++) {
        bullets[i].y -= 5; // Bullet speed

if (bullets[i].y < 0) {
          bullets.splice(i, 1);
          i--;
        }
      }
    }

function drawGameCanvas() {
      // Clear the canvas
      canvasContext.fillStyle = 'white';
      canvasContext.fillRect(0, 0, canvas.width, canvas.height);

// Draw the blue square
      canvasContext.fillStyle = 'blue';
      canvasContext.fillRect(blueSquareX, blueSquareY, 50, 50);

// Draw the bullets
      for (var i = 0; i < bullets.length; i++) {
        canvasContext.fillStyle = 'red';
        canvasContext.fillRect(bullets[i].x, bullets[i].y, 5, 10);
      }

// Check for bullet collision with other blue squares
      for (var i = 0; i < bullets.length; i++) {
        for (var j = 0; j < bullets.length; j++) {
          if (i !== j && bullets[i].y <= (blueSquareY + 50) &&
            bullets[i].x >= blueSquareX && bullets[i].x <= (blueSquareX + 50)) {
            bullets.splice(i, 1);
            score++;
            break;
          }
        }
      }

// Display score
      canvasContext.fillStyle = 'black';
      canvasContext.font = "20px Arial";
      canvasContext.fillText("Score: " + score, 10, 25);
    }

// Fire bullets
    function fireBullet() {
      if (blueSquareGunCooldown <= 0) {
        bullets.push({ x: blueSquareX + 25, y: blueSquareY });
        blueSquareGunCooldown = 10; // Cooldown time between bullets
      }
    }

// Event listener for firing bullets on touch
    canvas.addEventListener('touchstart', function(event) {
      event.preventDefault();
      fireBullet();
    });

// Cooldown timer for bullets
    setInterval(function() {
      if (blueSquareGunCooldown > 0) {
        blueSquareGunCooldown--;
      }
    }, 100);
  </script>
</body>
</html>
```

Please note that the game logic is simplified for demonstration purposes, and you can modify the code based on your requirements and design preferences.