tom and jerry 2D you can choose who to play and the game will end when tom catches jerry's game

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

No:16200

119

←

Prev Next

→

tom and jerry 2D you can choose who to play and th..ALL
Developer User7131｜Date and time 23/9/16 16:59:25
Build time 21.699 sec｜Game capacity 2.624KB｜

Script

Sure! Here's a simple implementation of the Tom and Jerry game in a single HTML file:

Note: Replace the `emozi_bear.png` and `emozi_chicken.png` file paths with your own images representing Tom and Jerry.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the Tom and Jerry game in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tom and Jerry Game</title>
  <style>
    #game {
      width: 500px;
      height: 500px;
      border: 1px solid black;
      position: relative;
    }

#tom, #jerry {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
    }

#tom {
      background-image: url('tom.png'); /* Replace with your own image */
    }

#jerry {
      background-image: url('jerry.png'); /* Replace with your own image */
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="tom"></div>
    <div id="jerry"></div>
  </div>
  
  <script>
    var tom = document.getElementById('tom');
    var jerry = document.getElementById('jerry');
    
    var gameArea = document.getElementById('game');
    var gameWidth = gameArea.offsetWidth;
    var gameHeight = gameArea.offsetHeight;

var tomCaughtJerry = false;
    
    // Randomly position Tom and Jerry within the game area
    tom.style.left = Math.floor(Math.random() * (gameWidth - tom.offsetWidth)) + 'px';
    jerry.style.left = Math.floor(Math.random() * (gameWidth - jerry.offsetWidth)) + 'px';
    tom.style.top = Math.floor(Math.random() * (gameHeight - tom.offsetHeight)) + 'px';
    jerry.style.top = Math.floor(Math.random() * (gameHeight - jerry.offsetHeight)) + 'px';
    
    // Move Jerry to a random position on the screen when clicked
    jerry.addEventListener('click', moveJerry);

// Check if Tom catches Jerry on each mouse move
    gameArea.addEventListener('mousemove', function(event) {
      if (!tomCaughtJerry && checkCollision(tom, jerry)) {
        tomCaughtJerry = true;
        alert('Game Over! Tom caught Jerry.');
      }
    });

// Move Jerry to a random position on the screen
    function moveJerry() {
      if (!tomCaughtJerry) {
        jerry.style.left = Math.floor(Math.random() * (gameWidth - jerry.offsetWidth)) + 'px';
        jerry.style.top = Math.floor(Math.random() * (gameHeight - jerry.offsetHeight)) + 'px';
      }
    }

// Check if two elements are colliding
    function checkCollision(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();
      
      return !(
        rect1.right < rect2.left ||
        rect1.left > rect2.right ||
        rect1.bottom < rect2.top ||
        rect1.top > rect2.bottom
      );
    }
  </script>
</body>
</html>
```

Note: Replace the `tom.png` and `jerry.png` file paths with your own images representing Tom and Jerry.