A game where if you die by the spikes, you win. If you eat the apple, you lose.'s game

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

No:43257

←

Prev Next

→

A game where if you die by the spikes, you win. If..ALL
Developer User19164｜Date and time 24/2/15 4:43:14
Build time 15.375 sec｜Game capacity 4.306KB｜

Script

Sure! Here's a simple game that meets your requirements. It is an HTML-based game with JavaScript logic. The game is played on a smartphone, and pictograms are used to represent the game elements. The premise of the game is to avoid spikes and collect apples. Let's get started:

In this game, you control a player character represented by a red square. You need to navigate the player using swipe gestures (left and right) to avoid the black spikes positioned near the bottom of the screen. If the player collides with a spike, you win the game ("You Won!" message is displayed). However, if the player collects the green apple (represented by a green square), you lose the game ("You Lost!" message is displayed). The game can be played on a smartphone by swiping the screen left or right. Please let me know if you need any further assistance.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Spike Avoider Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    canvas {
      background-color: #f1f1f1;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Event listeners
    canvas.addEventListener("touchstart", handleTouchStart, false);
    canvas.addEventListener("touchmove", handleTouchMove, false);

// Game logic
    function updateGame() {
      if (gameEnded) return;

clearCanvas();
      movePlayer();
      drawPlayer();
      drawSpikes();
      drawApple();
      handleCollision();

requestAnimationFrame(updateGame);
    }

function clearCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }
    
    function movePlayer() {
      if (player.x < canvas.width - player.size && player.x > 0) {
        player.x += player.speed;
      }
    }

function drawPlayer() {
      context.fillStyle = "#ff0000";
      context.fillRect(player.x, player.y, player.size, player.size);
    }

function drawSpikes() {
      for (var i = 0; i < spikes.length; i++) {
        var spike = spikes[i];
        context.fillStyle = "#000000";
        context.fillRect(spike.x, spike.y, spike.size, spike.size);
      }
    }

function drawApple() {
      context.fillStyle = "#00ff00";
      context.fillRect(apple.x, apple.y, apple.size, apple.size);
    }

function handleCollision() {
      // Check spike collision
      for (var i = 0; i < spikes.length; i++) {
        var spike = spikes[i];
        if (
          player.x < spike.x + spike.size &&
          player.x + player.size > spike.x &&
          player.y < spike.y + spike.size &&
          player.y + player.size > spike.y
        ) {
          endGame("You Won!");
          return;
        }
      }

// Check apple collision
      if (
        player.x < apple.x + apple.size &&
        player.x + player.size > apple.x &&
        player.y < apple.y + apple.size &&
        player.y + player.size > apple.y
      ) {
        endGame("You Lost!");
        return;
      }
    }

function endGame(message) {
      gameEnded = true;
      alert(message);
    }

// Touch event handlers
    var startX, startY;

function handleTouchStart(evt) {
      startX = evt.touches[0].clientX;
      startY = evt.touches[0].clientY;
    }

function handleTouchMove(evt) {
      evt.preventDefault();
      var touchX = evt.touches[0].clientX;
      var touchY = evt.touches[0].clientY;
      var diffX = touchX - startX;
      var diffY = touchY - startY;

if (Math.abs(diffX) > Math.abs(diffY)) {
        if (diffX > 0) {
          // Swipe right
          player.x += player.speed;
        } else {
          // Swipe left
          player.x -= player.speed;
        }
      }

startX = touchX;
      startY = touchY;
    }

// Initial setup
    spikes.push({ x: 0, y: 440, size: 40 });
    spikes.push({ x: 40, y: 440, size: 40 });
    spikes.push({ x: 80, y: 440, size: 40 });

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

Please let me know if you need any further assistance.