Simple HTML Game

To create a simple HTML game, we will use basic HTML, CSS, and JavaScript code. In this game, the player will have to click on a specific image within a certain time limit, and if successful, will get a point.

Step 1: HTML Markup

First, we will create an HTML markup for the game. We will create a container div that will hold the game content, and an image that the player will have to click on.

<div id='game-container'>
  <img src='image.jpg' id='game-image'>
</div>

Step 2: CSS Styling

Next, we will style the game container div and the game image using CSS. We will center the game container div on the page and add a border to the game image.

#game-container {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  border: 1px solid black;
}

#game-image {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  cursor: pointer;
}

Step 3: JavaScript Functionality

Finally, we will add JavaScript functionality to the game. We will create a function that generates a random position for the game image within the game container div, and another function that keeps track of the player's score.

var score = 0;

function generatePosition() {
  var x = Math.floor(Math.random() * 400);
  var y = Math.floor(Math.random() * 400);
  document.getElementById('game-image').style.left = x + 'px';
  document.getElementById('game-image').style.top = y + 'px';
}

function addScore() {
  score++;
  document.getElementById('score').innerHTML = 'Score: ' + score;
}

document.getElementById('game-image').addEventListener('click', function() {
  addScore();
  generatePosition();
});

setInterval(function() {
  generatePosition();
}, 3000);

In this code, we first initialize the player's score to 0. The generatePosition() function generates a random position for the game image within the game container div by setting the left and top CSS properties of the game image using the Math.random() function. The addScore() function increases the player's score by 1 and updates the score display on the page.

We then add an event listener to the game image that triggers the addScore() and generatePosition() functions when the player clicks on the image. Finally, we use the setInterval() function to call the generatePosition() function every 3 seconds, which keeps the game image moving around the game container div.

Conclusion

Congratulations! You have now created a simple HTML game using basic HTML, CSS, and JavaScript code. You can customize this game by changing the image, the game container size, and the time interval for the game image movement. Have fun playing!