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

No:31602

Make a game of teen titans
Developer User15196｜Date and time 23/12/27 18:32:19
Build time 39.879 sec｜Game capacity 4.364KB｜

Script

Sure! Here's an example of a simple Teen Titans game implemented using HTML and JavaScript. Please note that this is just a basic demonstration and can be further enhanced with graphics, sound, and additional gameplay features.

Teen Titans Game

In the provided code, the game involves controlling a player character using left and right arrow keys to avoid obstacles falling from the top of the game screen. The player's score increases as they successfully dodge the obstacles. If the player collides with any of the obstacles, the game ends with a game over message showing the final score. Please make sure to replace the placeholders (player.png and obstacle.png) with the actual image files for the player and obstacle pictograms respectively in the same directory as the HTML file.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Teen Titans Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      background-color: #333;
      color: #fff;
    }
  </style>
</head>
<body>
  <h1>Teen Titans Game</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Pictogram images
    var playerImage = new Image();
    playerImage.src = 'player.png';

var obstacleImage = new Image();
    obstacleImage.src = 'obstacle.png';

// Player object
    class Player {
      constructor() {
        this.width = 40;
        this.height = 40;
        this.x = canvas.width / 2 - this.width / 2;
        this.y = canvas.height - this.height - 10;
        this.direction = null;
      }

update() {
        if (this.direction === 'left' && this.x > 0) {
          this.x -= gameSpeed;
        } else if (this.direction === 'right' && this.x < canvas.width - this.width) {
          this.x += gameSpeed;
        }
      }

draw() {
        context.drawImage(playerImage, this.x, this.y, this.width, this.height);
      }
    }

// Obstacle object
    class Obstacle {
      constructor(x) {
        this.width = 30;
        this.height = 30;
        this.x = x;
        this.y = 0;
      }

update() {
        this.y += gameSpeed;
        if (this.y > canvas.height) {
          score++;
          this.reset();
        }
      }

reset() {
        this.y = 0;
        this.x = Math.floor(Math.random() * (canvas.width - this.width));
      }

draw() {
        context.drawImage(obstacleImage, this.x, this.y, this.width, this.height);
      }
    }

// Game initialization
    function startGame() {
      canvas = document.getElementById('gameCanvas');
      context = canvas.getContext('2d');
      player = new Player();

document.addEventListener('keyup', function(event) {
        if (event.keyCode === 37 || event.keyCode === 39) {
          player.direction = null;
        }
      });

setInterval(updateGame, 20);
      setInterval(addObstacle, 2000);
    }

// Game update loop
    function updateGame() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      player.update();
      player.draw();

for (var i = 0; i < obstacles.length; i++) {
        obstacles[i].update();
        obstacles[i].draw();

// Collision detection
        if (
          player.x < obstacles[i].x + obstacles[i].width &&
          player.x + player.width > obstacles[i].x &&
          player.y < obstacles[i].y + obstacles[i].height &&
          player.y + player.height > obstacles[i].y
        ) {
          // Game over
          alert('Game over! Your score: ' + score);
          score = 0;
          obstacles = [];
          break;
        }
      }

// Display score
      context.fillStyle = '#fff';
      context.font = '18px Arial';
      context.fillText('Score: ' + score, 10, 30);
    }

// Add new obstacle
    function addObstacle() {
      obstacles.push(new Obstacle(Math.floor(Math.random() * (canvas.width - 30))));
    }

// Start the game
    window.onload = function() {
      startGame();
    };
  </script>
</body>
</html>
```

Please make sure to replace the placeholders (player.png and obstacle.png) with the actual image files for the player and obstacle pictograms respectively in the same directory as the HTML file.