Gioco in javascript

Jakub Lemiszewski · 9 Apr 2014

Al seguente link trovate un gioco con dei quadrati che é stato messo sulla bacheca virtuale della mia scuola. La sfida consiste nel cambiare il codice in modo tale che i quadrati saltino verdi o rossi al posto di quelli altri. Per esempio se io clicco su quello verde e poi clicco su uno rosso quello verde salta e si scambia di posto con quello rosso.
Mi piacerebbe vedere le vostre soluzioni in questa piccola sfida di programmazione della mia scuola.
Non posto il codice giá che html e js cosi basta ispezionare per vederlo perché se no sarebbe troppo lungo.
Grazie a chi posta le propie soluzioni in merito

http://brennanyoung.keaweb.dk/cg/Day02/swapper.html

criric · 9 Apr 2014

Ciao Jakub, le tue domande sono sempre molto complesse e laboriose, difficile trovare il tempo per rifletterci.
Questo giochino è molto simpatico,
ecco la mia versione in jquery

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Gioco - sistema la bandiera</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                var index = false;
                $(".blocco").click(function() {
                    $(this).css("box-shadow", "0px 0px 10px 2px #333333 inset");
                    if (index !== false) {
                        var index2 = $(this).index();
                        setTimeout(function() {
                            $(".blocco").css("box-shadow", "none");
                            var col = $(".blocco").eq(index).css("background-color");
                            var col2 = $(".blocco").eq(index2).css("background-color");
                            $(".blocco").eq(index).css("background-color", col2);
                            $(".blocco").eq(index2).css("background-color", col);
                            index = false;
                        }, 300);
                    } else {
                        index = $(this).index();
                    }
                });
            });
        </script>
        <style>
            html body {
                text-align: center;
                background-color: #E4E4E4;
                margin:50px 0;
            }
            .contenitore {
                margin:auto;
                width: 846px;
                overflow: hidden;
            }
            .blocco {
                width:140px;
                height:140px;
                float: left;
                cursor:pointer;
            }
            .red {
                background-color: red;
            }
            .green {
                background-color: green;
            }
            .white {
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div class='contenitore'>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
        </div>
    </body>
</html>

Jakub Lemiszewski · 10 Apr 2014

Ciao mi spiace di dare sempre questioni difficili ma frequento una scuola per programmatori internazionale e questo e il livello

... Cmq grazie del tuo post e bello mi piace questa versione spero ne ariveranno altre

criric ha scritto:

Ciao Jakub, le tue domande sono sempre molto complesse e laboriose, difficile trovare il tempo per rifletterci.
Questo giochino è molto simpatico,
ecco la mia versione in jquery

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Gioco - sistema la bandiera</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                var index = false;
                $(".blocco").click(function() {
                    $(this).css("box-shadow", "0px 0px 10px 2px #333333 inset");
                    if (index !== false) {
                        var index2 = $(this).index();
                        setTimeout(function() {
                            $(".blocco").css("box-shadow", "none");
                            var col = $(".blocco").eq(index).css("background-color");
                            var col2 = $(".blocco").eq(index2).css("background-color");
                            $(".blocco").eq(index).css("background-color", col2);
                            $(".blocco").eq(index2).css("background-color", col);
                            index = false;
                        }, 300);
                    } else {
                        index = $(this).index();
                    }
                });
            });
        </script>
        <style>
            html body {
                text-align: center;
                background-color: #E4E4E4;
                margin:50px 0;
            }
            .contenitore {
                margin:auto;
                width: 846px;
                overflow: hidden;
            }
            .blocco {
                width:140px;
                height:140px;
                float: left;
                cursor:pointer;
            }
            .red {
                background-color: red;
            }
            .green {
                background-color: green;
            }
            .white {
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div class='contenitore'>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco white'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco green'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
            <div class='blocco red'></div>
        </div>
    </body>
</html>

Cerca

Cerca

Gioco in javascript

Jakub Lemiszewski

Utente Attivo

criric

Super Moderatore

Jakub Lemiszewski

Utente Attivo

Discussioni simili