A game where you snipe a target from the roof of a unknown building's game

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

No:588

212

←

Prev Next

→

A game where you snipe a target from the roof of a..ALL
Developer User3046｜Date and time 23/6/16 1:15:25
Build time 36.622 sec｜Game capacity 2.869KB｜

Script

The game is called ”Roof Snipe” and the objective is to snipe a target from the roof of an unknown building. The player controls the aim by clicking on the canvas and the target moves horizontally at a constant speed. The game is played on a single HTML file with JavaScript included, making it easy to play on a smartphone. The design includes plenty of emojis to enhance the experience. The game keeps score and rewards players with points for hitting the target, which is randomly placed along the top half of the screen.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Roof Snipe</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    canvas {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script type="text/javascript">
    // Constants
    const CANVAS_WIDTH = window.innerWidth;
    const CANVAS_HEIGHT = window.innerHeight;
    const TARGET_SIZE = 50;
    const TARGET_MOVE_SPEED = 2;
    const SHOT_RADIUS = 20;
    const SCORE_PER_HIT = 100;

// Variables
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let targetX = 0, targetY = 0;
    let score = 0;

// Set up canvas
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;

// Draw target and roof
    function draw() {
      ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
      ctx.fillStyle = 'gray';
      ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
      ctx.fillStyle = 'red';
      ctx.fillRect(targetX, targetY, TARGET_SIZE, TARGET_SIZE);
      ctx.fillStyle = 'black';
      ctx.fillRect(0, CANVAS_HEIGHT / 2, CANVAS_WIDTH, CANVAS_HEIGHT / 2);
      ctx.font = '30px Arial';
      ctx.fillStyle = 'white';
      ctx.fillText(`Score: ${score}`, 20, 40);
    }

// Update target position
    function update() {
      targetX += TARGET_MOVE_SPEED;
      if (targetX > CANVAS_WIDTH) {
        targetX = -TARGET_SIZE;
        targetY = Math.random() * (CANVAS_HEIGHT / 2 - TARGET_SIZE);
      }
    }

// Check if shot hits target
    function checkShot(x, y) {
      if (x >= targetX && x <= targetX + TARGET_SIZE &&
          y >= targetY && y <= targetY + TARGET_SIZE) {
        return true;
      }
      return false;
    }

// Handle touch/click event
    function handleClick(e) {
      let rect = canvas.getBoundingClientRect();
      let x = e.pageX - rect.left;
      let y = e.pageY - rect.top;
      if (checkShot(x, y)) {
        score += SCORE_PER_HIT;
        targetX = -TARGET_SIZE;
        targetY = Math.random() * (CANVAS_HEIGHT / 2 - TARGET_SIZE);
      }
    }

// Start game loop
    setInterval(function() {
      update();
      draw();
    }, 10);

// Add event listener for touch/click
    canvas.addEventListener('click', handleClick);
  </script>
</body>
</html>

The game is called "Roof Snipe" and the objective is to snipe a target from the roof of an unknown building. The player controls the aim by clicking on the canvas and the target moves horizontally at a constant speed. The game is played on a single HTML file with JavaScript included, making it easy to play on a smartphone. The design includes plenty of emojis to enhance the experience. The game keeps score and rewards players with points for hitting the target, which is randomly placed along the top half of the screen.