How to make find the differences game

أقسام الموقع: الإطار الزمني الرياضة معلومات سريعة العلوم الكون الصحة لغة وغيرها المنوعات الحيوانات باختصار تطبيقات وكتب

HOW TO MAKE FIND THE DIFFERENCES GAME USING HTML, JAVASCRIPT, AND CSS

This lesson will be about learning how to make find the differences game. It will have a picture that I already uploaded on my site. I also drew the two identical sides, but the left side has 3 differences. The object of the game is to point and click these 3 differences using the mouse.

In order to have each item of the 3 spotted, I made 2 elements. One element which is .block001 will define the position (x, y) of the item that needs to be spotted, and the other element .button001 will be used as a square to be placed on top of that item that is different. Since the box will be easy to spot, I made it transparent so it would be hard for the player to spot it. If you want more items other than 3 to be spotted, all you have to do is repeat the steps of .block001 and .button001, .block002 and .button002, and .block003 and .button003. Just copy the two elements and change the number of the class, such as .block004 and button004, then you can change whatever you want inside of the 2 elements. But make sure you draw the picture first with all the differences you want to have in it before uploading it.

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" />
    <title>Find The Differences</title>
</head>
<body>
    <style>
        .position001 {
            position: relative;
        }

        .block001 {
            position: absolute;
            top: 28px;
            left: 83px;
        }

        .block002 {
            position: absolute;
            top: 130px;
            left: 90px;
        }

        .block003 {
            position: absolute;
            top: 240px;
            left: 70px;
        }

        .button001 {
            background-color: transparent;
            border: 1px solid transparent;
            width: 20px;
            height: 10px;
        }

        .button002 {
            background-color: transparent;
            border: 1px solid transparent;
            width: 20px;
            height: 20px;
        }

        .button003 {
            background-color: transparent;
            border: 1px solid transparent;
            width: 90px;
            height: 30px;
        }

        .hide001 {
            background-color: white;
            border: 1px solid white;
        }

        #mark001 {
            color: yellow;
            font-size: 125%;
        }

        .blue001 {
            background-color: blue;
            border: none;
            color: white;
            padding: 7px 17px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 2px 2px;
            border-radius: 9px;
            cursor: pointer;
            width: 178px;
        }
    </style>
    <h2>Find The Differences</h2>
    Items: <text id="score001">0</text><br />
    Attempts: <text id="attempts001">3</text><br /><br />
    <div class="position001">
        <div id="board001">
            <button class="hide001" onclick="incorrect001()">
                <img src="https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_221.png" height="300" />
            </button>
            <div class="block001">
                <div id="disappear001">
                    <button class="button001" onclick="correct001()"></button>
                </div>
            </div>
            <div class="block002">
                <div id="disappear002">
                    <button class="button002" onclick="correct002()"></button>
                </div>
            </div>
            <div class="block003">
                <div id="disappear003">
                    <button class="button003" onclick="correct003()"></button>
                </div>
            </div>
        </div>
    </div>
    <br />
    <p id="message001"></p>
    <p id="message002"></p>

    <script>
        var a = 0;
        a++
        var b = 3;
        b--;

        function correct001() {
            disappear001.innerHTML = "<div id=mark001><strong>&#9711</strong></div>";
            score001.innerHTML = a++;
            if (a > 3) {
                message001.innerHTML = "Congratulations. You won.";
                message002.innerHTML = "<button class=blue001 onclick=repeat001()>Repeat</button>";
                board001.innerHTML = "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_221.png height=300 />";
            }
        }

        function correct002() {
            disappear002.innerHTML = "<div id=mark001><strong>&#9711</strong></div>";
            score001.innerHTML = a++;
            if (a > 3) {
                message001.innerHTML = "Congratulations. You won.";
                message002.innerHTML = "<button class=blue001 onclick=repeat001()>Repeat</button>";
                board001.innerHTML = "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_221.png height=300 />";
            }
        }

        function correct003() {
            disappear003.innerHTML = "<div id=mark001><strong>&#9711</strong></div>";
            score001.innerHTML = a++;
            if (a > 3) {
                message001.innerHTML = "Congratulations. You won.";
                message002.innerHTML = "<button class=blue001 onclick=repeat001()>Repeat</button>";
                board001.innerHTML = "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_221.png height=300 />";
            }
        }

        function incorrect001() {
            attempts001.innerHTML = b--;
            if (b < 0) {
                message001.innerHTML = "You lost.";
                message002.innerHTML = "<button class=blue001 onclick=repeat001()>Repeat</button>";
                attempts001.innerHTML = "0";
                board001.innerHTML = "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_221.png height=300 />";
            }
        }

        function repeat001() {
            location.reload();
        }
    </script>
</body>
</html>

Here is a video of the above code.

OTHER RELATED PAGES:

Other Topics:

Islamic Holidays
World Countries
Wars Facts