A game where you're a little blue dot that walks around a city each of the buildings are larger black dots. There are lots of green nuts which are cars driving in between the buildings There are red dots which are other people walking in the city You can shoot them by clicking a circular button The more people you k○ll the more cops follow you Cops are Purple dots's game

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

No:44533

←

Prev Next

→

A game where you're a little blue dot that walks a..ALL
Developer User19407｜Date and time 24/2/18 8:33:36
Build time 7.961 sec｜Game capacity 2.372KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>City Shooter Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

let playerX = 200;
    let playerY = 200;
    let cops = [];
    let people = [];
    let bullets = [];

function drawPlayer() {
      ctx.fillStyle = "blue";
      ctx.beginPath();
      ctx.arc(playerX, playerY, 5, 0, Math.PI * 2);
      ctx.fill();
    }

function drawCops() {
      cops.forEach(cop => {
        ctx.fillStyle = "purple";
        ctx.beginPath();
        ctx.arc(cop.x, cop.y, 5, 0, Math.PI * 2);
        ctx.fill();
      });
    }

function drawPeople() {
      people.forEach(person => {
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc(person.x, person.y, 5, 0, Math.PI * 2);
        ctx.fill();
      });
    }

function drawBuildings() {
      ctx.fillStyle = "black";
      ctx.fillRect(50, 50, 100, 200);
      ctx.fillRect(250, 100, 150, 200);
      ctx.fillRect(100, 250, 200, 100);
    }

function drawCars() {
      ctx.fillStyle = "green";
      ctx.fillRect(150, 50, 20, 50);
      ctx.fillRect(250, 300, 30, 40);
      ctx.fillRect(75, 150, 25, 30);
    }

function drawBullets() {
      bullets.forEach(bullet => {
        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.arc(bullet.x, bullet.y, 2, 0, Math.PI * 2);
        ctx.fill();
      });
    }

function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBuildings();
      drawCars();
      drawPlayer();
      drawCops();
      drawPeople();
      drawBullets();

requestAnimationFrame(update);
    }

function createPerson() {
      const person = {
        x: Math.random() * 400,
        y: Math.random() * 400
      };
      people.push(person);
    }

function createCop() {
      const cop = {
        x: Math.random() * 400,
        y: Math.random() * 400
      };
      cops.push(cop);
    }

function createBullet() {
      const bullet = {
        x: playerX,
        y: playerY
      };
      bullets.push(bullet);
    }

canvas.addEventListener("click", createBullet);

for (let i = 0; i < 5; i++) {
      createPerson();
      createCop();
    }

update();

</script>
</body>
</html>