Make an infinite runner where you avoid kkk and are black's game

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

No:10708

140

←

Prev Next

→

Make an infinite runner where you avoid kkk and ar..ALL
Developer User4313｜Date and time 23/8/2 6:11:40
Build time 31.824 sec｜Game capacity 4.49KB｜

Script

Sure! Here's an example of an infinite runner game implemented as a single HTML file using JavaScript and enclosed in script tags. The game is designed for smartphone operation and uses pictograms. In this game, the player controls a black character and needs to avoid obstacles represented by "kkk" symbols. The game will continue indefinitely until the player collides with an obstacle.

Please note that this example is a simplified implementation of an infinite runner game, and you may need to modify and enhance it according to your specific requirements and visual style.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Infinite Runner Game</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="game" width="320" height="480"></canvas>

// Event listeners for touch controls
    document.addEventListener("touchstart", handleTouchStart, false);
    document.addEventListener("touchmove", handleTouchMove, false);

var xDown = null;
    var yDown = null;

// Touch controls handling
    function handleTouchStart(event) {
      var firstTouch = event.touches[0];
      xDown = firstTouch.clientX;
      yDown = firstTouch.clientY;
    }

function handleTouchMove(event) {
      if (!xDown || !yDown) {
        return;
      }

var xUp = event.touches[0].clientX;
      var yUp = event.touches[0].clientY;

var xDiff = xDown - xUp;
      var yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
        if (xDiff > 0) {
          // Left swipe
          movePlayerLeft();
        } else {
          // Right swipe
          movePlayerRight();
        }
      } else {
        if (yDiff > 0) {
          // Up swipe
          movePlayerUp();
        } else {
          // Down swipe
          movePlayerDown();
        }
      }

xDown = null;
      yDown = null;
    }

// Player movement functions
    function movePlayerLeft() {
      player.x -= player.speed;
    }

function movePlayerRight() {
      player.x += player.speed;
    }

function movePlayerUp() {
      player.y -= player.speed;
    }

function movePlayerDown() {
      player.y += player.speed;
    }

// Obstacle generation function
    function generateObstacle() {
      var obstacle = {
        x: canvas.width,
        y: Math.random() * (canvas.height - player.height),
        width: 16,
        height: 16,
        speed: 3
      };
      obstacles.push(obstacle);
    }

// Collision detection function
    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
      );
    }

// Game loop
    function gameLoop() {
      if (isGameOver) {
        return;
      }

// Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Move player
      player.y -= player.speed;

// Draw player
      context.fillStyle = "black";
      context.fillRect(player.x, player.y, player.width, player.height);

// Generate obstacles
      if (Math.random() < 0.05) {
        generateObstacle();
      }

// Move obstacles and check for collisions
      for (var i = 0; i < obstacles.length; i++) {
        var obstacle = obstacles[i];
        obstacle.x -= obstacle.speed;

// Draw obstacles
        context.fillStyle = "red";
        context.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

// Check for collisions
        if (isCollision(player, obstacle)) {
          isGameOver = true;
          alert("Game Over! Your final score is: " + score);
          location.reload(); // Restart the game
        }

// Remove obstacles that have moved off the screen
        if (obstacle.x < 0) {
          obstacles.splice(i, 1);
          score++;
        }
      }

// Draw score
      context.fillStyle = "black";
      context.font = "20px Arial";
      context.fillText("Score: " + score, 10, 30);

requestAnimationFrame(gameLoop);
    }

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

Please note that this example is a simplified implementation of an infinite runner game, and you may need to modify and enhance it according to your specific requirements and visual style.