Gioco in javascript

J

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
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

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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>
 
J

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
Ciao mi spiace di dare sempre questioni difficili ma frequento una scuola per programmatori internazionale e questo e il livello :p ... 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>
Clicca per allargare...
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
Andrea Perrone funzione javascript applicata al gioco della dama Javascript 2
J Gioco in javascript sparito a schermo Javascript 0
A Realizzare il gioco del tris usando javascript, il dom e l'oggetto event-. Javascript 4
M Hosting VPS per server di gioco Minecraft Hosting 0
M [Cerco][Gratuito] Artista/designer per creazione grafica gioco di società Offerte e Richieste di Lavoro e/o Collaborazione 0
Elyle [Retribuito-Cerco] Programmatore per gioco 2D Offerte e Richieste di Lavoro e/o Collaborazione 2
D CERCO ~ Programmatore Gioco Web Offerte e Richieste di Lavoro e/o Collaborazione 0
P Pubblicazione app store gioco alcolico Sviluppo app per iOS 1
G gioco del tris con i vettori c++ C/C++ 1
C [Retribuito] Scheda personaggio gioco di ruolo Offerte e Richieste di Lavoro e/o Collaborazione 1
F [PHP] gestione meteo manuale per un gioco di ruolo PHP 1
AkenStyle Login per gioco online Database 6
Alias85 Programma per un gioco Offerte e Richieste di Lavoro e/o Collaborazione 3
P Implementare gioco html5 in pagina web HTML e CSS 3
N Sviluppo porting gioco testuale su iOS Sviluppo app per iOS 0
P problema: la funzione funziona (scusate ill gioco di parole) ma mi da errore time out PHP 8
R Mettere la possibilità di Salvare in un gioco =) Come si fa? Java 2
J Interfaccia per un gioco in HTML/CSS/JQ HTML e CSS 0
L vendo n. 2 spazi pubblicitari su sito che ospita un gioco online Vendere e Acquistare pubblicita' online 0
F Per startup cerchiamo webmaster con voglia di mettersi in gioco Offerte e Richieste di Lavoro e/o Collaborazione 0
J inheritance digram per gioco js Javascript 0
C [RETRIBUITO (alla commercializzazione) Cercasi collaboratori sviluppo gioco manageriale ferroviario Offerte e Richieste di Lavoro e/o Collaborazione 1
J Gioco di scacchi usando la libreria createjs Javascript 0
V Consiglio su if in java per determinare vincitore gioco blackjack Java 2
S [Retribuito] Sviluppo gioco manageriale Offerte e Richieste di Lavoro e/o Collaborazione 1
Frank10 [Compro] Pagine target scommesse e gioco Annunci servizi di Social Media Marketing 1
G [vendo]Vendere link testuali gioco d'azzardo Vendere e Acquistare pubblicita' online 1
max_400 il gioco della befana Discussioni Varie 6
Robby84 Gioco-mania.com | Solo i migliori giochi online della rete Presenta il tuo Sito 5
max_400 Gioco di auto - Problema sovrapposizione clip - by max_400 Flash 0
C Gioco a premi 50-50% probabilità Classic ASP 3
F log in php a gioco PHP 11
M gioco memory Javascript 0
max_400 Gioco: muovere un clip su delle coordinate impostate dall'utente Flash 2
M Hattrick Club Italia - Il portale del gioco manageriale online più famoso del Mondo! Presenta il tuo Sito 5
zerofolle Gioco gestionale Discussioni Varie 0
B Gioco non originale... e virus? Sicurezza e Virus 1
A Modificare gioco flash Flash 0
D aiuto per realizzazione gioco lotto in asp Classic ASP 1
C Accessori Per Console Di Gioco Presenta il tuo Sito 4
I insemina gioco flash Flash 0
ciccio71@mac.co UFHO.it nuovo gioco multiplayer online italiano Presenta il tuo Sito 3
S Gioco in PHP PHP 5
0 Hack game - gioco di hack Presenta il tuo Sito 0
B gioco HIGH SCHOOL MUSICAL 2 su msn Discussioni Varie 0
K gioco dell'impiccato Programmazione 0
I Compenso per gioco semplice in flash Flash 0
M Piccolo Pony - Gioco virtuale online Presenta il tuo Sito 1
L Gioco A Premi Di Borsa,schedina Di Borsa Discussioni Varie 0
I [NON RETRIBUITO] Collaborazione allo sviluppo di un nuovo gioco on line Discussioni Varie 7

Discussioni simili

Alto Basso