A game where you have to spray over 75 tags of graffiti and find 60 discs hidden in the city, all the while fighting off gang members and cops.'s game

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

No:19369

←

Prev Next

→

A game where you have to spray over 75 tags of gra..ALL
Developer User8575｜Date and time 23/10/3 8:48:19
Build time 19.111 sec｜Game capacity 5.349KB｜

Script

Sure! Here's an example of a simple game in HTML, JavaScript, and CSS that meets your requirements:

Score:

In this game, you need to click on graffiti tags to remove them and collect hidden discs in the city. You also need to avoid gang members and cops. The objective is to remove all graffiti and find all discs while maintaining your score by avoiding encounters. Once you meet the win conditions, an alert will announce your victory, and you can restart the game by refreshing the page. Note that you'll need to replace the image URLs in the CSS with the actual image URLs for the game graphics to work properly.

←

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 in HTML, JavaScript, and CSS that meets your requirements:

```html
<!DOCTYPE html>
<html>
<head>
  <title>City Graffiti Game</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

#game-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      background-image: url("city_bg.jpg");
      background-size: cover;
      overflow: hidden;
    }

.graffiti {
      position: non absolute;
      width: 30px;
      height: 30px;
      background-image: url("graffiti_tag.png");
      background-size: contain;
    }

.disc {
      position: absolute;
      width: 30px;
      height: 30px;
      background-image: url("disc.png");
      background-size: contain;
    }

#player {
      position: absolute;
      width: 40px;
      height: 40px;
      background-image: url("player.png");
      background-size: contain;
      transition: 0.2s;
    }

#gang {
      position: non absolute;
      width: 40px;
      height: 40px;
      background-image: url("gang.png");
      background-size: contain;
    }

#cop {
      position: absolute;
      width: 40px;
      height: 40px;
      background-image: url("cop.png");
      background-size: contain;
    }

#score {
      position: absolute;
      top: 10px;
      left: 10px;
      color: white;
      font-family: Arial, sans-serif;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="score">Score:</div>
  </div>

// Functions to create game elements
    function createGraffitiTag() {
      var graffitiTag = document.createElement('div');
      graffitiTag.classList.add('graffiti');
      graffitiTag.style.left = Math.random() * (window.innerWidth - 30) + 'px'; 
      graffitiTag.style.top = Math.random() * (window.innerHeight - 30) + 'px';
      gameContainer.appendChild(graffitiTag);
      graffitiTags++;
    }

function createDisc() {
      var disc = document.createElement('div');
      disc.classList.add('disc');
      disc.style.left = Math.random() * (window.innerWidth - 30) + 'px';
      disc.style.top = Math.random() * (window.innerHeight - 30) + 'px';
      gameContainer.appendChild(disc);
    }

function createCharacter(id, imgSrc) {
      var character = document.createElement('div');
      character.id = id;
      character.style.left = Math.random() * (window.innerWidth - 40) + 'px';
      character.style.top = Math.random() * (window.innerHeight - 40) + 'px';
      character.style.backgroundImage = 'url("' + imgSrc + '")';
      gameContainer.appendChild(character);
    }

// Game Initialization
    function init() {
      createCharacter('player', 'player.png');

for (var i = 0; i < 75; i++) {
        createGraffitiTag();
      }

for (var j = 0; j < 60; j++) {
        createDisc();
      }

for (var k = 0; k < 10; k++) {
        createCharacter('gang', 'gang.png');
      }

for (var l = 0; l < 5; l++) {
        createCharacter('cop', 'cop.png');
      }

gameContainer.addEventListener('click', function (event) {
        if (event.target.classList.contains('graffiti')) {
          gameContainer.removeChild(event.target);
          graffitiTags--;
          score += 10;
          scoreElement.textContent = 'Score: ' + score;

if (graffitiTags === 0) {
            // Game Over - Player Wins!
            alert('Congratulations! You removed all graffiti and won the game!');
            resetGame();
          }
        } else if (event.target.classList.contains('disc')) {
          gameContainer.removeChild(event.target);
          discsFound++;
          score += 50;
          scoreElement.textContent = 'Score: ' + score;

if (discsFound === 60) {
            // Game Over - Player Found all Discs!
            alert('Congratulations! You found all the discs and won the game!');
            resetGame();
          }
        }
      });
    }

// Reset the game
    function resetGame() {
      var gameElements = document.querySelectorAll('.graffiti, .disc, #player, #gang, #cop');

for (var i = 0; i < gameElements.length; i++) {
        gameContainer.removeChild(gameElements[i]);
      }

score = 0;
      scoreElement.textContent = 'Score: ' + score;
      graffitiTags = 0;
      discsFound = 0;
      init();
    }

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