Make a game where you take control of a square and when you tap the screen the square jumps. Also, you need to jump over triangles and avoid pits while collecting 3 star coins in the level.'s game

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

No:39937

←

Prev Next

→

Make a game where you take control of a square and..ALL
Developer User17906｜Date and time 24/1/31 6:36:07
Build time 16.19 sec｜Game capacity 4.261KB｜

Script

Sure! Here's a simple implementation of the game you described using JavaScript and HTML:

To play the game, simply open the HTML file in a web browser on your smartphone. Tapping the screen will cause the square to jump, and you need to jump over the triangles and avoid falling into the pit while collecting 3 star coins to complete the level.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the game you described using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Jumping Square Game</title>
  </head>
  
  <body ontouchstart="jumpSquare()">
    <canvas id="gameCanvas" width="400" height="200"></canvas>
    
    <script>
      // Creating the game canvas
      var canvas = document.getElementById("gameCanvas");
      var ctx = canvas.getContext("2d");

// Variables
      var square = {
        x: 50,
        y: canvas.height - 50,
        width: 50,
        height: 50,
        jumpHeight: 100,
        jumping: false
      };

var triangles = [
        { x: canvas.width - 100, y: canvas.height - 50},
        { x: canvas.width - 200, y: canvas.height - 50},
        { x: canvas.width - 300, y: canvas.height - 50}
      ];

var pit = { x: canvas.width / 2 - 25, y: canvas.height - 50, width: 50, height: 50 };

var starCoins = [
        { x: 100, y: canvas.height - 70, collected: false },
        { x: 200, y: canvas.height - 70, collected: false },
        { x: 300, y: canvas.height - 70, collected: false }
      ];

var score = 0;

// Game Loop
      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw square
        ctx.fillStyle = "#0000FF";
        ctx.fillRect(square.x, square.y, square.width, square.height);
        
        // Draw triangles
        ctx.fillStyle = "#FF0000";
        triangles.forEach(function(triangle) {
          ctx.beginPath();
          ctx.moveTo(triangle.x, triangle.y);
          ctx.lineTo(triangle.x + 25, triangle.y - 50);
          ctx.lineTo(triangle.x + 50, triangle.y);
          ctx.closePath();
          ctx.fill();
        });
        
        // Draw pit
        ctx.fillStyle = "#808080";
        ctx.fillRect(pit.x, pit.y, pit.width, pit.height);
        
        // Draw star coins
        starCoins.forEach(function(starCoin) {
          if (!starCoin.collected) {
            ctx.fillStyle = "#FFD700";
            ctx.beginPath();
            ctx.arc(starCoin.x, starCoin.y, 10, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fill();
          }
        });

// Collision detection
        triangles.forEach(function(triangle) {
          if (square.x < triangle.x + 50 &&
             square.x + square.width > triangle.x &&
             square.y < triangle.y + 50 &&
             square.y + square.height > triangle.y) {
               gameOver();
             }
        });

if (square.x < pit.x + pit.width &&
            square.x + square.width > pit.x &&
            square.y < pit.y + pit.height &&
            square.y + square.height > pit.y) {
              gameOver();
            }

starCoins.forEach(function(starCoin) {
          if (!starCoin.collected &&
              square.x < starCoin.x + 10 &&
              square.x + square.width > starCoin.x - 10 &&
              square.y < starCoin.y + 10 &&
              square.y + square.height > starCoin.y - 10) {
            
              starCoin.collected = true;
              score++;

if (score === 3) {
                levelComplete();
              }
          }
        });

// Update square position
        if (square.jumping) {
          square.y -= 5;
          if (square.y < canvas.height - square.jumpHeight) {
            square.jumping = false;
          }
        } else {
          square.y += 5;
        }

requestAnimationFrame(gameLoop);
      }

// Game Over
      function gameOver() {
        alert("Game Over!");
        location.reload();
      }

// Level Complete
      function levelComplete() {
        alert("Level Complete!");
        location.reload();
      }

// Jump when tapping the screen
      function jumpSquare() {
        if (!square.jumping) {
          square.jumping = true;
        }
      }

// Start the game
      gameLoop();
    </script>
  </body>
</html>
```