Create a game similar with stumble guys's game

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

No:40957

←

Prev Next

→

Create a game similar with stumble guys
Developer User18332｜Date and time 24/2/4 23:37:42
Build time 13.179 sec｜Game capacity 3.333KB｜

Script

Sure! Here's a simple game similar to Stumble Guys that you can play on a smartphone. It uses pictograms and is written as a single HTML file, enclosed in script tags. Please note that due to text limitations, the code might be wrapped across multiple lines.

To play the game, simply copy the above code and save it as an HTML file. Open the HTML file in a browser on your smartphone, and you should see the game canvas. Use the left and right arrow keys to move the player (represented by a blue rectangle) and try to avoid the falling obstacles (represented by red rectangles). The goal is to survive as long as possible and achieve a high score before colliding with an obstacle.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Stumble Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>

function initializeGame() {
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const player = {
      x: 200,
      y: 450,
      width: 50,
      height: 50,
      speed: 3
    };
    let obstacles = [];
    let score = 0;
    let isGameOver = false;

function drawPlayer() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

function drawObstacles() {
      ctx.fillStyle = 'red';
      obstacles.forEach((obstacle) => {
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
      });
    }

function movePlayer(event) {
      switch (event.keyCode) {
        case 37: // Left arrow key
          player.x -= player.speed;
          break;
        case 39: // Right arrow key
          player.x += player.speed;
          break;
      }
    }

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

if (!isGameOver) {
        drawPlayer();

if (Math.random() < 0.01) {
          obstacles.push({
            x: Math.random() * (canvas.width - 30),
            y: 0,
            width: Math.random() * 50 + 20,
            height: Math.random() * 50 + 20
          });
        }

drawObstacles();

obstacles.forEach((obstacle, index) => {
          obstacle.y += 1;

if (obstacle.y > canvas.height) {
            obstacles.splice(index, 1);
            score++;
          }

if (isCollision(player, obstacle)) {
            isGameOver = true;
          }
        });

ctx.fillStyle = 'black';
        ctx.font = '20px Arial';
        ctx.fillText('Score: ' + score, 10, 30);

requestAnimationFrame(updateGame);
      } else {
        ctx.fillStyle = 'black';
        ctx.font = '30px Arial';
        ctx.fillText('Game Over!', 130, canvas.height / 2);
        ctx.fillText('Score: ' + score, 150, canvas.height / 2 + 50);
      }
    }

function isCollision(rect1, rect2) {
      return (
        rect1.x < rect2.x + rect2.width &&
        rect1.x + rect1.width > rect2.x &&
        rect1.y < rect2.y + rect2.height &&
        rect1.y + rect1.height > rect2.y
      );
    }

document.addEventListener('keydown', movePlayer);
    updateGame();
  }
</script>
</body>
</html>
```