Don't Touch The spikes's game

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

No:31996

←

Prev Next

→

Don't Touch The spikes
Developer User15234｜Date and time 23/12/29 5:02:28
Build time 33.344 sec｜Game capacity 4.725KB｜

Script

Sure, here's a simple implementation of the Don't Touch The spikes game using JavaScript and enclosed within a single HTML file. The game can be played on a smartphone using pictograms to represent spikes and the player character. Save the code below in an HTML file and open it in a web browser to play.

Please note that the code above is a simplified implementation of the game and may not include all the features or optimizations you might expect in a complete game. Feel free to modify and enhance the code as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Don't Touch The Spikes</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }

#gameCanvas {
      background-color: #f1f1f1;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Player character variables
    let playerX = canvas.width / 2;
    let playerY = canvas.height / 2;
    const playerSize = 40;

// Spike variables
    const numSpikes = 5;
    const spikeSize = 40;
    const spikeGap = 150;
    let spikes = [];

// Game state variables
    let gameStarted = false;
    let gameEnded = false;
    let score = 0;

// Function to handle touch events on mobile
    function handleTouch(e) {
      if (!gameStarted) {
        gameStarted = true;
        spawnSpikes();
        requestAnimationFrame(gameLoop);
      } else if (gameEnded) {
        gameEnded = false;
        score = 0;
        playerX = canvas.width / 2;
        playerY = canvas.height / 2;
        spawnSpikes();
        requestAnimationFrame(gameLoop);
      } else if (playerY >= 0 && playerY + playerSize <= canvas.height) {
        playerY -= 80;
      }
    }

// Function to spawn new set of spikes
    function spawnSpikes() {
      spikes = [];

for (let i = 0; i < numSpikes; i++) {
        const spikeY = Math.floor(Math.random() * (canvas.height - spikeGap));
        spikes.push({ x: canvas.width, y: spikeY });
      }
    }

// Function to update game state
    function update() {
      if (gameStarted) {
        playerY += 5;

if (playerY + playerSize > canvas.height) {
          gameStarted = false;
          gameEnded = true;
          return;
        }

for (let i = 0; i < spikes.length; i++) {
          const spike = spikes[i];
          spike.x -= 5;

if (
            playerX + playerSize > spike.x &&
            playerX < spike.x + spikeSize &&
            (playerY < spike.y || playerY + playerSize > spike.y + spikeGap)
          ) {
            gameStarted = false;
            gameEnded = true;
            return;
          }

if (spike.x + spikeSize < 0) {
            score++;
            spikes.splice(i, 1);
            i--;
          }
        }

if (spikes.length === 0) {
          spawnSpikes();
        }
      }
    }

// Function to draw game elements on canvas
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

if (gameStarted || gameEnded) {
        ctx.fillStyle = '#000';

for (let spike of spikes) {
          ctx.fillRect(spike.x, 0, spikeSize, spike.y);
          ctx.fillRect(spike.x, spike.y + spikeGap, spikeSize, canvas.height);
        }

ctx.fillStyle = gameEnded ? '#f00' : '#00f';
        ctx.fillRect(playerX, playerY, playerSize, playerSize);

if (gameEnded) {
          ctx.font = '30px Arial';
          ctx.fillStyle = '#000';
          ctx.textAlign = 'center';
          ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2 - 30);
          ctx.fillText('Score: ' + score, canvas.width / 2, canvas.height / 2 + 10);
          ctx.fillText('Tap to Play Again', canvas.width / 2, canvas.height / 2 + 50);
        } else {
          ctx.font = '20px Arial';
          ctx.fillStyle = '#000';
          ctx.textAlign = 'right';
          ctx.fillText('Score: ' + score, canvas.width - 10, 30);
        }
      } else {
        ctx.font = '30px Arial';
        ctx.fillStyle = '#000';
        ctx.textAlign = 'center';
        ctx.fillText('Tap to Start', canvas.width / 2, canvas.height / 2);
      }
    }

// Main game loop
    function gameLoop() {
      update();
      draw();

if (gameStarted || gameEnded) {
        requestAnimationFrame(gameLoop);
      }
    }

// Add touch event listener
    canvas.addEventListener('touchstart', handleTouch);

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