Survive rainbow monsters's game

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

No:29388

←

Prev Next

→

Survive rainbow monsters
Developer User12051｜Date and time 23/12/17 7:14:57
Build time 42.155 sec｜Game capacity 3.591KB｜

Script

Sure! Here's a simple game implementation using HTML and JavaScript code that you can play as a finished game. The game is called "Survive Rainbow Monsters" and is designed for smartphone operation.

To play the game, open the HTML file in a web browser (preferably on a smartphone). The game involves surviving and avoiding rainbow monsters that move randomly on the screen. Move the player (represented as a yellow square) by dragging your finger on the screen or by clicking (for testing purposes) to avoid colliding with the monsters. Your score will increase as long as you survive without colliding. If you collide with a monster, the game will be over, and your score will be displayed. You can then restart the game by closing the alert box. Enjoy playing "Survive Rainbow Monsters"!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here's a simple game implementation using HTML and JavaScript code that you can play as a finished game. The game is called "Survive Rainbow Monsters" and is designed for smartphone operation.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<canvas id="game-canvas" width="480" height="320"></canvas>

// Function to draw the game
  function drawGame() {
    // Clear the canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the player
    context.fillStyle = "yellow";
    context.fillRect(playerX - 20, playerY - 20, 40, 40);

// Draw the monster
    context.fillStyle = "rgb(" + Math.random() * 255 + "," + Math.random() * 255 + "," + Math.random() * 255 + ")";
    context.beginPath();
    context.arc(monsterX, monsterY, 20, 0, Math.PI * 2);
    context.fill();

// Display the game score
    context.fillStyle = "black";
    context.font = "20px Arial";
    context.fillText("Score: " + gameScore, 10, 30);
  }

// Function to update the game logic
  function updateGame() {
    // Move the monster randomly
    var movementX = Math.random() * 6 - 3;
    var movementY = Math.random() * 6 - 3;
    monsterX += movementX;
    monsterY += movementY;

// Check if the player and the monster collided
    if (Math.abs(playerX - monsterX) < 40 && Math.abs(playerY - monsterY) < 40) {
      // Game over, restart the game
      alert("Game Over! Your Score: " + gameScore);
      gameScore = 0;
      playerX = 240;
      playerY = 160;
      monsterX = Math.random() * 400 + 40;
      monsterY = Math.random() * 240 + 40;
    }

// Call the drawGame function to redraw the game
    drawGame();
  }

// Function to handle touch events
  function handleTouch(e) {
    e.preventDefault();

// Update the player position based on touch coordinates
    var touchX = e.touches[0].clientX;
    var touchY = e.touches[0].clientY;
    playerX = touchX - canvas.getBoundingClientRect().left;
    playerY = touchY - canvas.getBoundingClientRect().top;
  }

// Function to handle click events (for Testing Purposes)
  function handleClick(e) {
    // Update the player position based on click coordinates
    playerX = e.clientX - canvas.getBoundingClientRect().left;
    playerY = e.clientY - canvas.getBoundingClientRect().top;
  }

// Attach touch event listeners
  canvas.addEventListener("touchstart", handleTouch, false);
  canvas.addEventListener("touchmove", handleTouch, false);

// Attach click event listener (for Testing Purposes)
  canvas.addEventListener("click", handleClick, false);

// Start the game loop
  setInterval(updateGame, 1000 / 60);
</script>
</body>
</html>
```