A game where you make a box jump over triangles if the box touches a triangle you lose tap to jump's game

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

No:19368

←

Prev Next

→

A game where you make a box jump over triangles if..ALL
Developer User8566｜Date and time 23/10/3 8:25:53
Build time 15.484 sec｜Game capacity 4.205KB｜

Script

Sure! Here's an example of a simple game where you control a box and try to make it jump over triangles. If the box touches a triangle, you lose the game. You can tap (or click) anywhere on the screen to make the box jump. Please copy the entire code below and save it as a `.html` file to play the game in your browser:

I hope you enjoy playing the game! Let me know if you have any questions.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Please copy the entire code below and save it as a `.html` file to play the game in your browser:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }

canvas {
        background-color: #f1f1f1;
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>

// Set canvas size
        const width = window.innerWidth;
        const height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;

// Box parameters
        let boxX = 50; // Initial position
        let boxY = height - 100;
        const boxWidth = 50;
        const boxHeight = 50;
        const boxColor = "#ff0000";
        let isJumping = false; // Jumping state
        let jumpForce = 15; // Jump force

// Triangle parameters
        let triangles = [];
        const triangleWidth = 50;
        const triangleHeight = 50;
        const triangleColor = "#0000ff";
        const triangleSpeed = 5; // Triangle movement speed
        const triangleSpacing = 300; // Spacing between triangles

// Score
        let score = 0;
        ctx.font = "20px Arial";

// Event listeners
        canvas.addEventListener("mousedown", handleJump);

// Main game loop
        function update() {
          ctx.clearRect(0, 0, width, height); // Clear canvas

// Jumping logic
          if (isJumping) {
            boxY -= jumpForce;
            jumpForce -= 1;
            if (jumpForce <= 0) {
              isJumping = false;
              jumpForce = 15;
            }
          } else {
            boxY += 5; // Gravity
          }

// Draw box
          ctx.fillStyle = boxColor;
          ctx.fillRect(boxX, boxY, boxWidth, boxHeight);

// Draw triangles
          triangles.forEach(function (triangle) {
            triangle.x -= triangleSpeed;
            ctx.fillStyle = triangleColor;
            ctx.beginPath();
            ctx.moveTo(triangle.x, triangle.y);
            ctx.lineTo(triangle.x + triangleWidth, triangle.y);
            ctx.lineTo(triangle.x + triangleWidth / 2, triangle.y - triangleHeight);
            ctx.closePath();
            ctx.fill();

// Collision detection
            if (
              boxX < triangle.x + triangleWidth &&
              boxX + boxWidth > triangle.x &&
              boxY < triangle.y &&
              boxY + boxHeight > triangle.y - triangleHeight
            ) {
              gameOver();
            }

// Remove triangles when they go off-screen
            if (triangle.x + triangleWidth < 0) {
              score++;
              triangles.shift(); // Remove the first element
            }
          });

// Draw score
          ctx.fillStyle = "#000000";
          ctx.fillText("Score: " + score, 20, 30);

requestAnimationFrame(update);
        }

// Game over logic
        function gameOver() {
          alert("Game Over! Your score: " + score);
          document.location.reload();
        }

// Jump handling
        function handleJump() {
          if (!isJumping) {
            isJumping = true;
          }
        }

// Generate initial triangles
        function generateTriangles() {
          let numTriangles = Math.floor(width / triangleSpacing);
          let startX = width;
          for (let i = 0; i < numTriangles; i++) {
            triangles.push({ x: startX, y: height });
            startX += triangleSpacing;
          }
        }

generateTriangles(); // Generate initial triangles
        update(); // Start the game loop
      };
    </script>
  </body>
</html>
```

I hope you enjoy playing the game! Let me know if you have any questions.