Make a fps pixel game about interacting with objects's game

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

No:30937

←

Prev Next

→

Make a fps pixel game about interacting with objec..ALL
Developer User14978｜Date and time 23/12/24 15:09:09
Build time 16.498 sec｜Game capacity 3.392KB｜

Script

Sure! I've created a simple FPS (First Person Shooter) pixel game using JavaScript and enclosed it in script tags within a single HTML file. The game allows you to interact with objects in the environment. Since you mentioned smartphone operation, the controls are designed accordingly. Here's the code:

To play the game, you can copy the above code into a new HTML file and run it using a web browser on your smartphone. The game presents a canvas where you control a red dot (representing the player) using the arrow keys or 'WASD' keys (for smartphone controls, you can use touch events or on-screen buttons). The objective is to interact with the colored objects (blue, green, and yellow rectangles) by colliding with them. Once you interact with an object, an alert will be shown indicating the successful interaction. Note: This is a very basic implementation and can be expanded upon with additional features, levels, and more complex gameplay.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>FPS Pixel Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="360" height="640"></canvas>

const player = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 10,
      color: 'red'
    };

const objects = [
      { x: 100, y: 100, width: 50, height: 50, color: 'blue', interacted: false },
      { x: 200, y: 300, width: 80, height: 120, color: 'green', interacted: false },
      { x: 300, y: 150, width: 60, height: 80, color: 'yellow', interacted: false }
    ];

function drawPlayer() {
      context.beginPath();
      context.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
      context.fillStyle = player.color;
      context.fill();
      context.closePath();
    }

function drawObjects() {
      objects.forEach(object => {
        context.beginPath();
        context.rect(object.x, object.y, object.width, object.height);
        context.fillStyle = object.color;
        context.fill();
        context.closePath();
      });
    }

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

drawPlayer();
      drawObjects();
      checkInteractions();

// Handle player movement (can be customized for mobile controls)
      document.addEventListener('keydown', (event) => {
        const key = event.key.toLowerCase();
        switch (key) {
          case 'w':
            player.y -= 10;
            break;
          case 's':
            player.y += 10;
            break;
          case 'a':
            player.x -= 10;
            break;
          case 'd':
            player.x += 10;
            break;
        }
      });

requestAnimationFrame(updateGame);
    }

updateGame();
  </script>
</body>
</html>
```

Note: This is a very basic implementation and can be expanded upon with additional features, levels, and more complex gameplay.