Web Development

A simple snake-water-gun game using HTML, CSS and JavaScript

Shresth Gour's photo
Shresth Gour
·

3 min read

Table of contents

In this blog, you will learn the logic behind a simple snake-water-gun game using HTML, CSS and JavaScript.

Note: There is no UI involved in this project so beginners can understand it quite well.

Here in this project, I have made the website using a single HTML file and included CSS and JavaScript in this file only.

Logic

The logic behind this game is simple, we will start the game with a prompt appearing on the screen asking the user to enter their choice and the computer picks a choice for itself.

It is all played by using the prompt() method in javascript

Function getRandomInt decides the choice for the computer

function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
}

This function chooses between 0, 1, or 2

In this program:

  • Snake is represented by 0

  • Water is represented by 1

  • Gun is represented by 2

Winning conditions:

  • Snake wins over water

  • Water wins over gun

  • Gun wins over snake

Losing conditions:

  • Water loses against Snake

  • Snake loses over Gun

  • Gun loses over Water

Draw Conditions:

  • Gun over Gun

  • Snake over Snake

  • Water over Water

How to Play?

Step 1. Load the website using live server extension in VS Code

Step 2. You have to choose an option between Snake, Water or Gun

Step 3. The Program will tell you the computer's choice and the result (WIN or LOSE)

Step 4. Reload the website to play again

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercise 2</title>
</head>

<body>
    <h1>Dummy Website</h1>
</body>
<script>
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    let generated_option = getRandomInt(0, 2)
    // 0 : Snake
    // 1 : Water
    // 2 : Gun

    const game = ((val1, val2) => {
        if (val1 == 'S' && val2 == 0) {
            alert("Computer Chose SNAKE!")
            alert("Its a DRAW!")
        }
        else if (val1 == 'S' && val2 == 1) {
            alert("Computer Chose Water!")
            alert("YOU WIN!")
        }
        else if (val1 == 'S' && val2 == 2) {
            alert("Computer Chose GUN!")
            alert("YOU LOSE!")
        }


        else if (val1 == 'W' && val2 == 0) {
            alert("Computer Chose SNAKE!")
            alert("YOU LOSE!")
        }
        else if (val1 == 'W' && val2 == 1){
            alert("Computer Chose WATER!")
            alert("Its a DRAW!")
        }
        else if (val1 == 'W' && val2 == 2) {
            alert("Computer Chose GUN!")
            alert("YOU WIN!")
        }


        else if (val1 == 'G' && val2 == 0) {
            alert("Computer Chose SNAKE!")
            alert("YOU WIN!")
        }
        else if (val1 == 'G' && val2 == 1) {
            alert("Computer Chose WATER!")
            alert("YOU LOSE!")
        }
        else if (val1 == 'G' && val2 == 2){
            alert("Computer Chose GUN!")
            alert("Its a DRAW!")
        }
        else{
            alert("Please Enter a Valid Option!")
        }
    })

    let user_input = prompt("Choose an Option: \n S : Snake \n W : Water \n G : Gun")
    game(user_input,generated_option)

</script>

</html>

Note: The user has to reload the website after every round to restart the game

Web DevelopmentHTML5CSSJavaScript