Make a game where the goal is to get the most points. To get a point, you must land on the blue space. If you land on the red space, you lose 1 point.'s game

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

No:30459

122

←

Prev Next

→

Make a game where the goal is to get the most poin..ALL
Developer User14724｜Date and time 23/12/21 23:56:29
Build time 25.793 sec｜Game capacity 3.651KB｜

Script

Here's a single HTML file that contains the implementation of the game you described. The game is drawn on a canvas element and uses JavaScript to handle player movement and scoring. The player moves horizontally or vertically based on touch input on smartphones. The goal is to land on the blue spot to earn points but landing on the red spot will result in losing points. The score is displayed on the screen. The game loop continuously updates the canvas. Note: When running this code, please make sure to enclose it within `
` tags in a .html file for it to work correctly.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Points Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Game setup
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");
    var playerSize = 50;
    var playerX = canvas.width / 2 - playerSize / 2;
    var playerY = canvas.height / 2 - playerSize / 2;
    var blueSpotX = getRandomPosition();
    var blueSpotY = getRandomPosition();
    var redSpotX = getRandomPosition();
    var redSpotY = getRandomPosition();
    var score = 0;

// Keyboard control setup (for smartphones)
    var touchStartX, touchStartY, touchEndX, touchEndY;
    canvas.addEventListener("touchstart", handleTouchStart, false);
    canvas.addEventListener("touchmove", handleTouchMove, false);
    canvas.addEventListener("touchend", handleTouchEnd, false);

// Game loop
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      ctx.fillStyle = "green";
      ctx.fillRect(playerX, playerY, playerSize, playerSize);

// Draw blue spot
      ctx.fillStyle = "blue";
      ctx.fillRect(blueSpotX, blueSpotY, playerSize, playerSize);

// Draw red spot
      ctx.fillStyle = "red";
      ctx.fillRect(redSpotX, redSpotY, playerSize, playerSize);

// Display score
      ctx.fillStyle = "black";
      ctx.fillText("Score: " + score, 10, 20);

// Check if player is on the blue spot
      if (playerX === blueSpotX && playerY === blueSpotY) {
        score++;
        blueSpotX = getRandomPosition();
        blueSpotY = getRandomPosition();
      }

// Check if player is on the red spot
      if (playerX === redSpotX && playerY === redSpotY) {
        score--;
        redSpotX = getRandomPosition();
        redSpotY = getRandomPosition();
      }
    }

function getRandomPosition() {
      var min = playerSize;
      var max = canvas.width - playerSize;
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

// Keyboard control logic (for smartphones)
    function handleTouchStart(event) {
      touchStartX = event.touches[0].clientX;
      touchStartY = event.touches[0].clientY;
    }

function handleTouchMove(event) {
      event.preventDefault();
      touchEndX = event.touches[0].clientX;
      touchEndY = event.touches[0].clientY;
      movePlayer();
    }

function handleTouchEnd(event) {
      touchEndX = event.changedTouches[0].clientX;
      touchEndY = event.changedTouches[0].clientY;
      movePlayer();
    }

// Start the game loop
    setInterval(draw, 10);
  </script>
</body>
</html>
```

Note: When running this code, please make sure to enclose it within `<script>` tags in a .html file for it to work correctly.