Game likes splatoon splash's game

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

No:28827

←

Prev Next

→

Game likes splatoon splash
Developer User14250｜Date and time 23/12/14 16:09:29
Build time 51.405 sec｜Game capacity 3.459KB｜

Script

Sure! Here's an example of a simple game similar to Splatoon Splash using JavaScript and pictograms. Just save this code in an HTML file and open it in a web browser on your smartphone to play.

This game creates a canvas element that fills the whole screen on your smartphone. You can control the player's movement by touching the screen and moving your finger around. The player, represented by a blue circle, will follow your touch position. The player is confined within the canvas, and as you move, the canvas will be cleared and updated in the game loop, creating a smooth movement effect. Feel free to enhance and modify the game according to your preferences!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's an example of a simple game similar to Splatoon Splash using JavaScript and pictograms. Just save this code in an HTML file and open it in a web browser on your smartphone to play.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Set canvas size to full screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Player configuration
    const playerSize = 50;
    const playerSpeed = 5;
    let playerX = canvas.width / 2 - playerSize / 2;
    let playerY = canvas.height / 2 - playerSize / 2;
    const playerColor = 'blue';

// Touch event handling
    let touchX = null;
    let touchY = null;

document.addEventListener('touchstart', handleTouchStart, false);
    document.addEventListener('touchmove', handleTouchMove, false);
    document.addEventListener('touchend', handleTouchEnd, false);

function handleTouchStart(event) {
      const touch = event.touches[0];
      touchX = touch.clientX;
      touchY = touch.clientY;
    }

function handleTouchMove(event) {
      event.preventDefault();
      const touch = event.touches[0];
      touchX = touch.clientX;
      touchY = touch.clientY;
    }

function handleTouchEnd(event) {
      touchX = null;
      touchY = null;
    }

// Game loop
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

if (touchX !== null && touchY !== null) {
        movePlayer(touchX, touchY);
      }

drawPlayer();
      requestAnimationFrame(gameLoop);
    }

// Move the player towards the touch position
    function movePlayer(touchX, touchY) {
      const deltaX = touchX - (playerX + playerSize / 2);
      const deltaY = touchY - (playerY + playerSize / 2);

const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

if (distance > playerSpeed) {
        const ratio = playerSpeed / distance;
        playerX += ratio * deltaX;
        playerY += ratio * deltaY;
      } else {
        playerX = touchX - playerSize / 2;
        playerY = touchY - playerSize / 2;
      }

// Prevent player from going outside the canvas
      playerX = Math.max(0, Math.min(canvas.width - playerSize, playerX));
      playerY = Math.max(0, Math.min(canvas.height - playerSize, playerY));
    }

// Draw the player as a pictogram
    function drawPlayer() {
      // In this example, let's display a simple blue circle
      ctx.fillStyle = playerColor;
      ctx.beginPath();
      ctx.arc(playerX + playerSize / 2, playerY + playerSize / 2, playerSize / 2, 0, Math.PI * 2, false);
      ctx.fill();
    }

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

Feel free to enhance and modify the game according to your preferences!