Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Atelier] Fond animé Space Invaders

Venez vous entraîner avec le langage de votre choix :)

    24 avril 2013 à 12:41:00

    Voilà une première version de ma participation en Python 3 pur (aucune dépendance nécessaire).

    Il écrit son animation aléatoire dans un GIF animé, comme celui-ci :

    J'ai commencé à m'amuser un peu avec les patterns mais globalement le code est encore direct et non-obfusqué (bref, encore lisible).

    #!/usr/bin/env python3
    
    from random import choice, randrange as rand
    
    PATTERNS=(((0,0,2,0,2,0,0,           ##  ##
                0,2,2,2,2,2,0,         ##########
                0,2,0,2,0,2,0,         ##  ##  ##
                0,2,0,2,0,2,0,         ##  ##  ##
                2,2,2,2,2,2,2,       ##############
                2,0,2,0,2,0,2),      ##  ##  ##  ##
                (16,23),(18,25)),
    
               ((0,0,0,2,2,0,0,0,             ####
                 0,0,2,2,2,2,0,0,           ########
                 0,2,0,2,2,0,2,0,         ##  ####  ##   
                 2,2,0,2,2,0,2,2,       ####  ####  ####
                 2,2,2,2,2,2,2,2,       ################
                 0,0,2,0,0,2,0,0,           ##    ##   
                 0,2,0,2,2,0,2,0,         ##  ####  ##
                 2,0,2,0,0,2,0,2),      ##  ##    ##  ##
                 (18,26),(21,29)),
    
                ((0,0,0,2,2,0,0,0,            ####
                  0,0,2,2,2,2,0,0,          ########
                  0,2,0,2,2,0,2,0,        ##  ####  ##  
                  2,2,0,2,2,0,2,2,      ####  ####  ####
                  2,2,2,2,2,2,2,2,      ################
                  0,2,0,2,2,0,2,0,        ##  ####  ##
                  2,0,0,0,0,0,0,2,      ##            ##
                  0,2,0,0,0,0,2,0),       ##        ##
                  (18,26),(21,29)),
    
                 ((0,0,2,0,0,0,0,0,2,0,0,       ##          ##
                   0,0,0,2,0,0,0,2,0,0,0,         ##      ##
                   0,0,2,2,2,2,2,2,2,0,0,       ##############
                   0,2,2,0,2,2,2,0,2,2,0,     ####  ######  ####
                   2,2,2,0,2,2,2,0,2,2,2,   ######  ######  ######
                   2,0,2,2,2,2,2,2,2,0,2,   ##  ##############  ##
                   2,0,2,0,0,0,0,0,2,0,2,   ##  ##          ##  ##
                   0,0,0,2,2,0,2,2,0,0,0),        ####  ####
                   (36,47),(40,51)),
    
                 ((0,0,0,0,2,2,2,2,0,0,0,0,             ########
                   0,2,2,2,2,2,2,2,2,2,2,0,       ####################
                   2,2,2,2,2,2,2,2,2,2,2,2,     ########################
                   2,2,2,0,0,2,2,0,0,2,2,2,     ######    ####    ######
                   2,2,2,2,2,2,2,2,2,2,2,2,     ########################
                   0,0,0,2,2,0,0,2,2,0,0,0,           ####    ####
                   0,0,2,2,0,2,2,0,2,2,0,0,         ####  ####  ####
                   2,2,0,0,0,0,0,0,0,0,2,2),    ####                ####
                   (39,40),(43,44)))
    
    HDR = bytes([0x47,0x49,0x46,0x38,0x39,0x61,0x20,0x03,0x58,0x02,0xC1,
                 0x00,0x00,0xFF,0xFF,0xFF,0x00,0x00,0x00,0x00,0xFF,0x00,
                 0x00,0x00,0xFF,0x21,0xFF,0x0B,0x4e,0x45,0x54,0x53,0x43,
                 0x41,0x50,0x45,0x32,0x2e,0x30,0x03,0x01,0x00,0x00,0x00,
                 0x21,0xF9,0x04,0x09,0x01,0x00,0x00,0x00,0x2C,0x00,0x00,
                 0x00,0x00,0x20,0x03,0x58,0x02,0x81,0xFF,0xFF,0xFF,0x00,
                 0x00,0x00,0x00,0xFF,0x00,0x00,0x00,0xFF]) 
                     
    
    def lzw(stream, bpp):
        table, CC, bits = {}, 1 << bpp, bpp + 1
        EOI, code, cmax = CC+1, CC+2, 1<< bits
        bb, off, pixnum = 0, 0, 0
        res, buf = bytearray([bpp]), bytearray()
    
        def pack(c=None):
            nonlocal bb, off, cmax, bits, res, buf
            if c is None:
                while bb > 0:
                    buf, bb, off = buf + bytes([bb & 0xFF]), bb >> 8, off-8
                res, buf = res + bytes([len(buf)]) + buf, bytearray()
            else:
                bb |= (c << off) & 0xffffffff
                off += bits
                while off >= 8:
                    buf, bb, off = buf + bytes([bb & 0xFF]), bb >> 8, off - 8
                    if len(buf) == 255:
                        res, buf = res + bytes([len(buf)]) + buf, bytearray()
            if code >= cmax and c <= 0xFFF:
                bits = bits + 1
                cmax = 1 << bits
    
        pack(CC)
        cur = stream[0]
    
        for pixel in stream[1:]:
            key = (cur << 8) | pixel 
            if key in table:
                cur = table[key]
            else:
                pack(cur)
                cur = pixel
                if code >= 0xFFF:
                    pack(CC)
                    code, bits = CC + 2, bpp + 1
                    cmax, table = 1 << bits, {}
                else:
                    table[key], code = code, code + 1
    
        pack(cur)
        pack(EOI)
        pack()
        res.append(0)
        return res
    
    
    def mk_hdr(w, h):
        xo, yo = rand(800-w), rand(600-h)
        xm, xl = xo >> 8, xo & 0xff
        ym, yl = yo >> 8, yo & 0xff
        wm, wl = w >> 8, w & 0xff
        hm, hl = h >> 8, h & 0xff
        r, g, b = rand(256), rand(256), rand(256)
    
        return bytes([0x21,0xF9,0x04,0x09,0x48,0x00,0x00,0x00,0x2C,
                      xl,xm,yl,ym,wl,wm,hl,hm,0x81,0xFF,0xFF,0xFF,
                      0x00,0x00,0x00,r,g,b,0x00,0x00,0xFF])
    
    
    def inflate(data, w, h, ss):
        new_img = [0] * w * ss * h * ss 
        for x in range(1,ss-1):
            for y in range(1,ss-1):
                for i in range(w):
                    for j in range(h):
                        new_img[w * ss * (y + j * ss) + ss * i + x] = data[w * j + i]
        return new_img
    
    
    def mk_pat():
        p,lp,rp = choice(PATTERNS)
        pat = list(p)
        pat[choice(lp)] = pat[choice(rp)] = 1
        return pat
    
    
    def mk_img():
        p = mk_pat()
        pw, ph = {42:(7,6),64:(8,8),96:(12,8),88:(11,8)}[len(p)]
        ss = rand(12,28)
        return mk_hdr(pw*ss,ph*ss) + lzw(inflate(p,pw,ph,ss),2)
            
    
    img = open('space_invader.gif', 'wb')
    img.write(HDR + lzw([0] * 800 * 600, 2))
    for _ in range(20):
        img.write(mk_img())
    img.write(bytes([0x3b]))
    img.close()
    

    Histoire que ça soit un peu un challenge, je me suis donné comme contrainte de coder complètement la génération de l'image. Ça m'aura fait découvrir l'algo de compression LZW (et la façon dont il est implémenté dans le format GIF).

    J'éditerai peut-être quand j'aurai pris un peu plus de temps pour obfusquer le code. Mais en attendant je me suis dit que le poster tel quel pourrait en intéresser certains. :)

    -
    Edité par nohar 26 avril 2013 à 9:56:03

    • Partager sur Facebook
    • Partager sur Twitter
    Zeste de Savoir, le site qui en a dans le citron !
      24 avril 2013 à 14:04:42

      Bon la je fait dans la catégorie le code plus inutilement compliqué, je l'ai amélioré pour gérer plusieurs Invaders, avec chacun sa couleur, son type (au passage, j'ai rajouté 2 types d'invaders).

      Pour éviter que ça fasse une bouillie de pixels, j'ai mis une gestion des collisions, avec tout de même une limite pour éviter de surcharger le proc. ^^

      La page se trouve ici, vous pouvez fouiller dans mon code, j'ai relativement bien commenté (en tout cas plus que d'habitude ^^).

      Je projette encore de faire une version géré par NodeJS, et que la position/la couleur/le type/le spawn des invaders se fasse coté serveur, et que du coup, via des WebSockets, qu'il y ai la même chose chez tout le monde en même temps :p

      • Partager sur Facebook
      • Partager sur Twitter
      Interdiction de lire cette signature | OCr Notificateur | Retrouvez moi sur Zeste de Savoir !
        24 avril 2013 à 14:15:04

        nohar a écrit:

        Voilà une première version de ma participation en Python 3 pur (aucune dépendance nécessaire).

        Sympa, fait nous un code en perl maintenant. :D

        • Partager sur Facebook
        • Partager sur Twitter
        Zeste de Savoirbépocode minimal  — Ge0 <3
          24 avril 2013 à 14:50:17

          Bonjour tout le monde,

          allez, je trouve ça fun comme principe, je vous rajoute ma contribution en GWT : http://nicolas.hilaire.free.fr/gwt/

          Pareil, fait entre midi et deux ^^

          Le code utilisé :

          public class SpaceInvadersScreenSaver implements EntryPoint {
          	private final int spaceInvaderSize = 40;
          	private final int spaceInvaderTabWidth = 7;
          	private final int spaceInvaderTabHeight = 6;
          	
          	public void onModuleLoad() {
          		Timer t = new Timer() {
          			@Override
          			 public void run() {
          			        GenerateSpaceInvaders();
          			      }
          		};
          		t.scheduleRepeating(3000);
          	}
          	
          	private void GenerateSpaceInvaders(){
          		RootPanel.get().clear();
          		int [][]spaceInvader = new int[][] {{0,0,1,0,1,0,0}, {0,1,1,1,1,1,0}, {0,1,2,1,2,1,0}, {0,1,2,1,2,1,0}, {1,1,1,1,1,1,1}, {1,0,1,0,1,0,1}};
          		setEyes(spaceInvader);
          		
          		VerticalPanel vPanel = new VerticalPanel();
          		String randomColor = "rgb(" + Random.nextInt(255) + "," + Random.nextInt(255) + "," + Random.nextInt(255) + ")";
          		for (int j = 0 ; j < spaceInvaderTabHeight ; j++){
          			HorizontalPanel hPanel = new HorizontalPanel();
          			for (int i = 0 ; i < spaceInvaderTabWidth ; i++) {
          				String color;
          				if (spaceInvader[j][i] == 0)
          					color = "white";
          				else if(spaceInvader[j][i] == 1)
          					color = randomColor;
          				else
          					color = "black";
          				HTML carre = new HTML("<div style=\"width:" + spaceInvaderSize + "px;height:" + spaceInvaderSize + "px;background:" + color + "\"></div>");
          				hPanel.add(carre);
          			}
          			vPanel.add(hPanel);
          		}
          		
          		int x = Random.nextInt(Window.getClientWidth() - spaceInvaderSize * spaceInvaderTabWidth);
          		int y = Random.nextInt(Window.getClientHeight() - spaceInvaderSize * spaceInvaderTabHeight);
          		RootPanel.get().add(vPanel, x, y);
          	}
          
          	private void setEyes(int[][] spaceInvader) {
          		int indice = 2;
          		if (Random.nextBoolean())
          			indice++;
          		spaceInvader[indice][2] = 0;
          		indice = 2;
          		if (Random.nextBoolean())
          			indice++;
          		spaceInvader[indice][4] = 0;
          	}
          }
          



          -
          Edité par nico.pyright 24 avril 2013 à 14:50:43

          • Partager sur Facebook
          • Partager sur Twitter
            24 avril 2013 à 14:57:53

             C'est une très bonne initiative d'atelier Mateo21, j'y participe car ça ne demande pas trop de temps à être réalisé et le résultat est sympa.

            Langage : Javascript

            Code :

            <html>
            <head>
            <meta http-equiv="Content-Language" content="fr-be">
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Fond d'écran "Space Invader's"</title>
            
            <style type="text/css">
            
            
            
            #a1
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 100px;
            	margin-left: 100px;
            	background-color: rgb(255,255,255);
            }
            
            #a2
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 100px;
            	margin-left: 154px;
            	background-color: rgb(255,255,255);
            }
            
            #a3
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 100px;
            	margin-left: 208px;
            	background-color: rgb(49,145,19);
            }
            
            #a4
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 100px;
            	margin-left: 262px;
            	background-color: rgb(255,255,255);
            }
            
            #a5
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 100px;
            	margin-left: 316px;
            	background-color: rgb(49,145,19);
            }
            
            #a6
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 100px;
            	margin-left: 370px;
            	background-color: rgb(255,255,255);
            }
            
            #a7
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 100px;
            	margin-left: 424px;
            	background-color: rgb(255,255,255);
            }
            
            #b1
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 154px;
            	margin-left: 100px;
            	background-color: rgb(255,255,255);
            }
            
            #b2
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 154px;
            	margin-left: 154px;
            	background-color: rgb(49,145,19);
            }
            
            #b3
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 154px;
            	margin-left: 208px;
            	background-color: rgb(49,145,19);
            }
            
            #b4
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 154px;
            	margin-left: 262px;
            	background-color: rgb(49,145,19);
            }
            
            #b5
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 154px;
            	margin-left: 316px;
            	background-color: rgb(49,145,19);
            }
            
            #b6
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 154px;
            	margin-left: 370px;
            	background-color: rgb(49,145,19);
            }
            
            #b7
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 154px;
            	margin-left: 424px;
            	background-color: rgb(255,255,255);
            }
            
            #c1
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 208px;
            	margin-left: 100px;
            	background-color: rgb(255,255,255);
            }
            
            #c2
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 208px;
            	margin-left: 154px;
            	background-color: rgb(49,145,19);
            }
            
            #c3
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 208px;
            	margin-left: 208px;
            	background-color: #000000;
            }
            
            #c4
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 208px;
            	margin-left: 262px;
            	background-color: rgb(49,145,19);
            }
            
            #c5
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 208px;
            	margin-left: 316px;
            	background-color: #000000;
            }
            
            #c6
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 208px;
            	margin-left: 370px;
            	background-color: rgb(49,145,19);
            }
            
            #c7
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 208px;
            	margin-left: 424px;
            	background-color: rgb(255,255,255);
            }
            
            #d1
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 262px;
            	margin-left: 100px;
            	background-color: rgb(255,255,255);
            }
            
            #d2
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 262px;
            	margin-left: 154px;
            	background-color: rgb(49,145,19);
            }
            
            #d3
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 262px;
            	margin-left: 208px;
            	background-color: rgb(255,255,255);
            }
            
            #d4
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 262px;
            	margin-left: 262px;
            	background-color: rgb(49,145,19);
            }
            
            #d5
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 262px;
            	margin-left: 316px;
            	background-color: rgb(255,255,255);
            }
            
            #d6
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 262px;
            	margin-left: 370px;
            	background-color: rgb(49,145,19);
            }
            
            #d7
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 262px;
            	margin-left: 424px;
            	background-color: rgb(255,255,255);
            }
            
            #e1
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 316px;
            	margin-left: 100px;
            	background-color: rgb(49,145,19);
            }
            
            #e2
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 316px;
            	margin-left: 154px;
            	background-color: rgb(49,145,19);
            }
            
            #e3
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 316px;
            	margin-left: 208px;
            	background-color: rgb(49,145,19);
            }
            
            #e4
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 316px;
            	margin-left: 262px;
            	background-color: rgb(49,145,19);
            }
            
            #e5
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 316px;
            	margin-left: 316px;
            	background-color: rgb(49,145,19);
            }
            
            #e6
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 316px;
            	margin-left: 370px;
            	background-color: rgb(49,145,19);
            }
            
            #e7
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 316px;
            	margin-left: 424px;
            	background-color: rgb(49,145,19);
            }
            
            #f1
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 370px;
            	margin-left: 100px;
            	background-color: rgb(49,145,19);
            }
            
            #f2
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 370px;
            	margin-left: 154px;
            	background-color: rgb(255,255,255);
            }
            
            #f3
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 370px;
            	margin-left: 208px;
            	background-color: rgb(49,145,19);
            }
            
            #f4
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 370px;
            	margin-left: 262px;
            	background-color: rgb(255,255,255);
            }
            
            #f5
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 370px;
            	margin-left: 316px;
            	background-color: rgb(49,145,19);
            }
            
            #f6
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 370px;
            	margin-left: 370px;
            	background-color: rgb(255,255,255);
            }
            
            #f7
            {
            	width: 50px;
            	height: 50px;
            	position: absolute;
            	margin-top: 370px;
            	margin-left: 424px;
            	background-color: rgb(49,145,19);
            }
            
            
            
            
            
            
            
            
            
            
            </style>
            </head>
            
            <body>
            
            
            
            <table id="a1">
            <tr><td> </td></tr>
            </table>
            <table id="a2">
            <tr><td> </td></tr>
            </table>
            <table id="a3">
            <tr><td> </td></tr>
            </table>
            <table id="a4">
            <tr><td> </td></tr>
            </table>
            <table id="a5">
            <tr><td> </td></tr>
            </table>
            <table id="a6">
            <tr><td> </td></tr>
            </table>
            <table id="a7">
            <tr><td> </td></tr>
            </table>
            
            <table id="b1">
            <tr><td> </td></tr>
            </table>
            <table id="b2">
            <tr><td> </td></tr>
            </table>
            <table id="b3">
            <tr><td> </td></tr>
            </table>
            <table id="b4">
            <tr><td> </td></tr>
            </table>
            <table id="b5">
            <tr><td> </td></tr>
            </table>
            <table id="b6">
            <tr><td> </td></tr>
            </table>
            <table id="b7">
            <tr><td> </td></tr>
            </table>
            
            <table id="c1">
            <tr><td> </td></tr>
            </table>
            <table id="c2">
            <tr><td> </td></tr>
            </table>
            <table id="c3">
            <tr><td> </td></tr>
            </table>
            <table id="c4">
            <tr><td> </td></tr>
            </table>
            <table id="c5">
            <tr><td> </td></tr>
            </table>
            <table id="c6">
            <tr><td> </td></tr>
            </table>
            <table id="c7">
            <tr><td> </td></tr>
            </table>
            
            <table id="d1">
            <tr><td> </td></tr>
            </table>
            <table id="d2">
            <tr><td> </td></tr>
            </table>
            <table id="d3">
            <tr><td> </td></tr>
            </table>
            <table id="d4">
            <tr><td> </td></tr>
            </table>
            <table id="d5">
            <tr><td> </td></tr>
            </table>
            <table id="d6">
            <tr><td> </td></tr>
            </table>
            <table id="d7">
            <tr><td> </td></tr>
            </table>
            
            <table id="e1">
            <tr><td> </td></tr>
            </table>
            <table id="e2">
            <tr><td> </td></tr>
            </table>
            <table id="e3">
            <tr><td> </td></tr>
            </table>
            <table id="e4">
            <tr><td> </td></tr>
            </table>
            <table id="e5">
            <tr><td> </td></tr>
            </table>
            <table id="e6">
            <tr><td> </td></tr>
            </table>
            <table id="e7">
            <tr><td> </td></tr>
            </table>
            
            <table id="f1">
            <tr><td> </td></tr>
            </table>
            <table id="f2">
            <tr><td> </td></tr>
            </table>
            <table id="f3">
            <tr><td> </td></tr>
            </table>
            <table id="f4">
            <tr><td> </td></tr>
            </table>
            <table id="f5">
            <tr><td> </td></tr>
            </table>
            <table id="f6">
            <tr><td> </td></tr>
            </table>
            <table id="f7">
            <tr><td> </td></tr>
            </table>
            
            
            <script type="text/javascript">
            
            refresh_petit_bonhomme_rigolo_qui_change_de_couleur();
            
            function refresh_petit_bonhomme_rigolo_qui_change_de_couleur()
            {
            
            //Auteur : Niko300
            //Date de création : 24/04/2013
            //Copyright : Vous pouvez modifier avec mention de l'auteur, partagez, publier.
            
            	petitbonhomme_ligne1 = new Array;
            	petitbonhomme_ligne2 = new Array;
            	petitbonhomme_ligne3 = new Array;
            	petitbonhomme_ligne4 = new Array;
            	petitbonhomme_ligne5 = new Array;
            	petitbonhomme_ligne6 = new Array;
            
            	petitbonhomme_ligne1 = [0,0,1,0,1,0,0];
            	petitbonhomme_ligne2 = [0,1,1,1,1,1,0];
            	petitbonhomme_ligne3 = [0,1,2,1,2,1,0];
            	petitbonhomme_ligne4 = [0,1,0,1,0,1,0];
            	petitbonhomme_ligne5 = [1,1,1,1,1,1,1];
            	petitbonhomme_ligne6 = [1,0,1,0,1,0,1];
            
            
            	minimum = 1;
            	maximum = 2;
            	oeil_gauche = Math.round(minimum + Math.random() * (maximum - minimum));
            	oeil_droit = Math.round(minimum + Math.random() * (maximum - minimum));
            
            
            	minimum = 50;
            	maximum = 450;
            	decalage_x = Math.round(minimum + Math.random() * (maximum - minimum));
            
            	minimum = 50;
            	maximum = 450;
            	decalage_y = Math.round(minimum + Math.random() * (maximum - minimum));
            	
            	 
            
            	minimum = 50;
            	maximum = 220;
            	valeur_couleurR = Math.round(minimum + Math.random() * (maximum - minimum));
            	valeur_couleurV = Math.round(minimum + Math.random() * (maximum - minimum));
            	valeur_couleurB = Math.round(minimum + Math.random() * (maximum - minimum));
            
            	valeur_couleurR += 5;
            	valeur_couleurV -= 10;
            	valeur_couleurB -= 1;
            
            
            	switch (oeil_gauche)
            	{
            
            	case 1 : petitbonhomme_ligne3[2] = 2; petitbonhomme_ligne4[2] = 0; break;
            	case 2 : petitbonhomme_ligne3[2] = 0; petitbonhomme_ligne4[2] = 2; break;
            
            	}
            
            
            	switch (oeil_droit)
            	{
            
            	case 1 : petitbonhomme_ligne3[4] = 2; petitbonhomme_ligne4[4] = 0; break;
            	case 2 : petitbonhomme_ligne3[4] = 0; petitbonhomme_ligne4[4] = 2; break;
            
            	}
            
            	for (i = 1; i <= 6; i++)
            	{
            
            					switch (i)
            				{
            				
            					case 1 : lettre = "a"; break;
            					case 2 : lettre = "b"; break;
            					case 3 : lettre = "c"; break;
            					case 4 : lettre = "d"; break;
            					case 5 : lettre = "e"; break;
            					case 6 : lettre = "f"; break;
            				
            				}
            
            
            		for (j = 1; j <= 7; j++)
            		{
            		
            
            			
            			variable = "petitbonhomme_ligne"+i;
            			
            			if (eval(variable)[j-1] == 1)
            			{
            
            				document.getElementById(lettre+j).style.backgroundColor = "rgb("+valeur_couleurR+","+valeur_couleurV+","+valeur_couleurB+")";
            				
            			}
            			else if (eval(variable)[j-1] == 2)
            			{
            			
            					document.getElementById(lettre+j).style.backgroundColor = "rgb(0,0,0)";
            					
            			}
            			else if (eval(variable)[j-1] == 0)
            			{
            			
            					document.getElementById(lettre+j).style.backgroundColor = "rgb(255,255,255)";	
            					
            			}
            			
            			
            			marge_gauche = document.getElementById(lettre+j).currentStyle["marginLeft"];
            			marge_haut = document.getElementById(lettre+j).currentStyle["marginTop"];
            			
            			
            			marge_gauche = marge_gauche.replace('px','');
            			marge_haut = marge_haut.replace('px','');
            			
            			
            			
            			marge_G = parseInt(marge_gauche);
            			marge_H = parseInt(marge_haut);
            			
            			nouvelle_marge_gauche = decalage_x + marge_G;
            			nouvelle_marge_haut = decalage_y + marge_H;
            		
            				document.getElementById(lettre+j).style.marginLeft = nouvelle_marge_gauche + "px";
            				document.getElementById(lettre+j).style.marginTop = nouvelle_marge_haut + "px";
            				
            		}
            	}
            	//alert(123);
            }
            
            function actualiser()
            {
            	document.location = "index.htm";
            }
            
            setInterval('actualiser()',2500);
            </script>
            
            </body>
            
            </html>
            
            

            Juste le Javascript :

            refresh_petit_bonhomme_rigolo_qui_change_de_couleur();
            
            function refresh_petit_bonhomme_rigolo_qui_change_de_couleur()
            {
            
            //Auteur : Niko300
            //Date de création : 24/04/2013
            //Copyright : Vous pouvez modifier avec mention de l'auteur, partagez, publier.
            
            	petitbonhomme_ligne1 = new Array;
            	petitbonhomme_ligne2 = new Array;
            	petitbonhomme_ligne3 = new Array;
            	petitbonhomme_ligne4 = new Array;
            	petitbonhomme_ligne5 = new Array;
            	petitbonhomme_ligne6 = new Array;
            
            	petitbonhomme_ligne1 = [0,0,1,0,1,0,0];
            	petitbonhomme_ligne2 = [0,1,1,1,1,1,0];
            	petitbonhomme_ligne3 = [0,1,2,1,2,1,0];
            	petitbonhomme_ligne4 = [0,1,0,1,0,1,0];
            	petitbonhomme_ligne5 = [1,1,1,1,1,1,1];
            	petitbonhomme_ligne6 = [1,0,1,0,1,0,1];
            
            
            	minimum = 1;
            	maximum = 2;
            	oeil_gauche = Math.round(minimum + Math.random() * (maximum - minimum));
            	oeil_droit = Math.round(minimum + Math.random() * (maximum - minimum));
            
            
            	minimum = 50;
            	maximum = 450;
            	decalage_x = Math.round(minimum + Math.random() * (maximum - minimum));
            
            	minimum = 50;
            	maximum = 450;
            	decalage_y = Math.round(minimum + Math.random() * (maximum - minimum));
            	
            	 
            
            	minimum = 50;
            	maximum = 220;
            	valeur_couleurR = Math.round(minimum + Math.random() * (maximum - minimum));
            	valeur_couleurV = Math.round(minimum + Math.random() * (maximum - minimum));
            	valeur_couleurB = Math.round(minimum + Math.random() * (maximum - minimum));
            
            	valeur_couleurR += 5;
            	valeur_couleurV -= 10;
            	valeur_couleurB -= 1;
            
            
            	switch (oeil_gauche)
            	{
            
            	case 1 : petitbonhomme_ligne3[2] = 2; petitbonhomme_ligne4[2] = 0; break;
            	case 2 : petitbonhomme_ligne3[2] = 0; petitbonhomme_ligne4[2] = 2; break;
            
            	}
            
            
            	switch (oeil_droit)
            	{
            
            	case 1 : petitbonhomme_ligne3[4] = 2; petitbonhomme_ligne4[4] = 0; break;
            	case 2 : petitbonhomme_ligne3[4] = 0; petitbonhomme_ligne4[4] = 2; break;
            
            	}
            
            	for (i = 1; i <= 6; i++)
            	{
            
            					switch (i)
            				{
            				
            					case 1 : lettre = "a"; break;
            					case 2 : lettre = "b"; break;
            					case 3 : lettre = "c"; break;
            					case 4 : lettre = "d"; break;
            					case 5 : lettre = "e"; break;
            					case 6 : lettre = "f"; break;
            				
            				}
            
            
            		for (j = 1; j <= 7; j++)
            		{
            		
            
            			
            			variable = "petitbonhomme_ligne"+i;
            			
            			if (eval(variable)[j-1] == 1)
            			{
            
            				document.getElementById(lettre+j).style.backgroundColor = "rgb("+valeur_couleurR+","+valeur_couleurV+","+valeur_couleurB+")";
            				
            			}
            			else if (eval(variable)[j-1] == 2)
            			{
            			
            					document.getElementById(lettre+j).style.backgroundColor = "rgb(0,0,0)";
            					
            			}
            			else if (eval(variable)[j-1] == 0)
            			{
            			
            					document.getElementById(lettre+j).style.backgroundColor = "rgb(255,255,255)";	
            					
            			}
            			
            			
            			marge_gauche = document.getElementById(lettre+j).currentStyle["marginLeft"];
            			marge_haut = document.getElementById(lettre+j).currentStyle["marginTop"];
            			
            			
            			marge_gauche = marge_gauche.replace('px','');
            			marge_haut = marge_haut.replace('px','');
            			
            			
            			
            			marge_G = parseInt(marge_gauche);
            			marge_H = parseInt(marge_haut);
            			
            			nouvelle_marge_gauche = decalage_x + marge_G;
            			nouvelle_marge_haut = decalage_y + marge_H;
            		
            				document.getElementById(lettre+j).style.marginLeft = nouvelle_marge_gauche + "px";
            				document.getElementById(lettre+j).style.marginTop = nouvelle_marge_haut + "px";
            				
            		}
            	}
            	//alert(123);
            }
            
            function actualiser()
            {
            	document.location = "index.htm";
            }
            
            setInterval('actualiser()',2500);

            Voici le lien vers la page :


            http://www.espace-gaming.netne.net/invaders/index.htm


            -
            Edité par Niko300 24 avril 2013 à 15:02:03

            • Partager sur Facebook
            • Partager sur Twitter
              24 avril 2013 à 22:07:50

              seconde participation, pour faire le plus court possible ;) (toujours JS, mais en utilisant canvas cette fois ci)

              version minimifiée avec l’excellent uglifyjs (485octets, html+js): 
              http://dl.dropboxusercontent.com/u/1120328/sdz/shorterinvader/invader-mini.html

              version un peu moins minimifiée (il y a aussi un travail d'optimisation intermédiaire a la main entre le code au dessus, et celui là)
              http://dl.dropboxusercontent.com/u/1120328/sdz/shorterinvader/invader.html

              -
              Edité par STuFF 26 avril 2013 à 0:02:13

              • Partager sur Facebook
              • Partager sur Twitter

              N'utilisez JAMAIS alert() pour debugger. Utilisez console.log()

                25 avril 2013 à 0:44:29

                Petite participation en Go pour ma part \ o /.

                https://github.com/lethom/space-bitton/blob/master/main.go

                Deux corps différents (c'était juste pour pas en avoir qu'un) et les 4 types d'yeux. Change toutes les 3 secondes, Control + Q pour quitter. C'est pas beau (ni le rendu ni le code, d'ailleurs) mais ça fait ce qu'on lui demande :3.

                Edit : une petite preuve, quou même. http://www.youtube.com/watch?v=WJxssKB937U&feature=youtu.be

                -
                Edité par lethom 25 avril 2013 à 1:00:03

                • Partager sur Facebook
                • Partager sur Twitter
                Small is Beautiful — E.F. Schumacher | Blog (fr)
                  25 avril 2013 à 1:16:41

                  Et m**de ... Je voulais le faire en Go ...
                  Bon ben ... J'ai plus qu'a me débrouiller autrement ...
                  Pas mal en tout cas ;)

                  -
                  Edité par @che 29 avril 2013 à 16:15:49

                  • Partager sur Facebook
                  • Partager sur Twitter

                  🍊 - Étudiant - Codeur en C | Zeste de Savoir apprenez avec une communauté | Articles  - ♡ Copying is an act of love.

                    25 avril 2013 à 1:55:16

                    Eh bah écoute, ça faisait plus de six mois que j'y avais pas touché, j'allais pas manquer l'occasion de me rafraîchir la mémoire \o/.

                    -
                    Edité par lethom 25 avril 2013 à 2:24:01

                    • Partager sur Facebook
                    • Partager sur Twitter
                    Small is Beautiful — E.F. Schumacher | Blog (fr)
                      25 avril 2013 à 14:44:12

                      Re,

                      voici une version qui concoure dans la catégorie des "inutilement compliqués pour rien" :).

                      J'ai donc réalisé une version en Silverlight que vous pouvez trouver ici : http://nicolas.hilaire.free.fr/silverlight/

                      Elle respecte le design pattern MVVM, et elle utilise le design pattern mediator. Comme tout est en binding, j'ai dû écrire également un Converter de visibilité. J'ai également suivile pattern service locator, couplé à un système d'inversion de contrôle pour découpler complètement le viewmodel de la vue.

                      Voici le XAML :

                      <UserControl x:Class="SpaceInvadersScreenSaver.MainPage"
                          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                          xmlns:local="clr-namespace:SpaceInvadersScreenSaver" mc:Ignorable="d"
                          DataContext="{Binding ViewModel, Source={StaticResource Locator}}">
                      
                          <UserControl.Resources>
                              <local:VisibilityConverter x:Key="VisibilityConverter" />
                              <local:InverseVisibilityConverter x:Key="InverseVisibilityConverter" />
                          </UserControl.Resources>
                          <Canvas x:Name="MainCanvas" Width="{Binding ElementName=MainWin, Path=ActualWidth}" Height="{Binding ElementName=MainWin, Path=ActualHeight}">
                              <Canvas Canvas.Top="{Binding Y}" Canvas.Left="{Binding X}">
                                  <Rectangle Width="40" Height="40" Canvas.Left="80" Canvas.Top="0" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="160" Canvas.Top="0" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="40" Canvas.Top="40" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="80" Canvas.Top="40" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="120" Canvas.Top="40" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="160" Canvas.Top="40" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="200" Canvas.Top="40" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="40" Canvas.Top="80" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="80" Canvas.Top="80" Fill="Black" Visibility="{Binding LeftEyesVisible, Converter={StaticResource VisibilityConverter}}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="120" Canvas.Top="80" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="160" Canvas.Top="80" Fill="Black" Visibility="{Binding RightEyesVisible, Converter={StaticResource VisibilityConverter}}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="200" Canvas.Top="80" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="40" Canvas.Top="120" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="80" Canvas.Top="120" Fill="Black" Visibility="{Binding LeftEyesVisible, Converter={StaticResource InverseVisibilityConverter}}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="120" Canvas.Top="120" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="160" Canvas.Top="120" Fill="Black" Visibility="{Binding RightEyesVisible, Converter={StaticResource InverseVisibilityConverter}}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="200" Canvas.Top="120" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="0" Canvas.Top="160" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="40" Canvas.Top="160" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="80" Canvas.Top="160" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="120" Canvas.Top="160" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="160" Canvas.Top="160" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="200" Canvas.Top="160" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="240" Canvas.Top="160" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="0" Canvas.Top="200" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="80" Canvas.Top="200" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="160" Canvas.Top="200" Fill="{Binding RandomColor}" />
                                  <Rectangle Width="40" Height="40" Canvas.Left="240" Canvas.Top="200" Fill="{Binding RandomColor}" />
                              </Canvas>
                          </Canvas>
                      </UserControl>
                      



                      le viewmodel :

                      public class ViewModel : INotifyPropertyChanged, IViewModel
                      {
                          private Random random;
                          private DispatcherTimer timer;
                          private Size actualSize;
                      
                          public ViewModel()
                          {
                              SingletonMediator.Instance.Register(this);
                              actualSize = new Size(0, 0);
                              random = new Random();
                              DataBind();
                              timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(3) };
                              timer.Tick += this.timer_Tick;
                              timer.Start();
                          }
                      
                          void timer_Tick(object sender, EventArgs e)
                          {
                              DataBind();
                          }
                      
                          [MediatorMessageSink(MediatorMessages.SizeMessage, ParameterType = typeof(Size))]
                          public void OnGetNewSize(Size size)
                          {
                              actualSize = size;
                          }
                      
                          private void DataBind()
                          {
                              RandomColor = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(255), (byte)random.Next(255), (byte)random.Next(255)));
                              bool left = random.Next(2) == 0;
                              LeftEyesVisible = left;
                              bool right = random.Next(2) == 0;
                              RightEyesVisible = right;
                              X = random.Next(Math.Max(0, (int)(actualSize.Width - 40 * 7)));
                              Y = random.Next(Math.Max(0, (int)(actualSize.Height - 40 * 6)));
                          }
                      
                          public event PropertyChangedEventHandler PropertyChanged;
                      
                          public void NotifyPropertyChanged(string nomPropriete)
                          {
                              if (PropertyChanged != null)
                                  PropertyChanged(this, new PropertyChangedEventArgs(nomPropriete));
                          }
                      
                          private SolidColorBrush _randomColor;
                          public SolidColorBrush RandomColor
                          {
                              get { return _randomColor; }
                              set
                              {
                                  _randomColor = value;
                                  NotifyPropertyChanged("RandomColor");
                              }
                          }
                      
                          private double _x;
                          public double X
                          {
                              get { return _x; }
                              set
                              {
                                  _x = value;
                                  NotifyPropertyChanged("X");
                              }
                          }
                      
                          private double _y;
                          public double Y
                          {
                              get { return _y; }
                              set
                              {
                                  _y = value;
                                  NotifyPropertyChanged("Y");
                              }
                          }
                      
                          private bool _leftEyesVisible;
                          public bool LeftEyesVisible
                          {
                              get { return _leftEyesVisible; }
                              set
                              {
                                  _leftEyesVisible = value;
                                  NotifyPropertyChanged("LeftEyesVisible");
                              }
                          }
                      
                          private bool _rightEyesVisible;
                          public bool RightEyesVisible
                          {
                              get { return _rightEyesVisible; }
                              set
                              {
                                  _rightEyesVisible = value;
                                  NotifyPropertyChanged("RightEyesVisible");
                              }
                          }
                      }
                      



                      Le converter :

                      public class VisibilityConverter : IValueConverter
                      {
                          public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
                          {
                              bool visibility = (bool)value;
                              return visibility ? Visibility.Visible : Visibility.Collapsed;
                          }
                      
                          public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
                          {
                              Visibility visibility = (Visibility)value;
                              return visibility == Visibility.Visible;
                          }
                      }

                      Et son inverse :

                      public class InverseVisibilityConverter : IValueConverter
                      {
                          public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
                          {
                              bool visibility = (bool)value;
                              return visibility ? Visibility.Collapsed : Visibility.Visible;
                          }
                      
                          public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
                          {
                              Visibility visibility = (Visibility)value;
                              return visibility == Visibility.Collapsed;
                          }
                      }

                      Et dans le code behind, l'utilisation du mediator pour passer la taille du canvas au viewmodel, comme ça, pas de couplage entre view model et vue :

                      public partial class MainPage : UserControl
                      {
                      	public MainPage()
                      	{
                      		InitializeComponent();
                      		MainCanvas.SizeChanged += MainCanvas_SizeChanged;
                      	}
                      
                      	void MainCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
                      	{
                      		SingletonMediator.Instance.NotifyColleagues(MediatorMessages.SizeMessage, e.NewSize);
                      	}
                      }
                      

                      L'inversion de contrôle est assez basique, d'abord il faut créer la classe qui gère l'ioc :

                      public static class SimpleIoc
                      {
                          private static readonly IDictionary<Type, Type> types = new Dictionary<Type, Type>();
                          private static readonly IDictionary<Type, object> typeInstances = new Dictionary<Type, object>();
                          public static void Register<TContract, TImplementation>()
                          {
                              types[typeof(TContract)] = typeof(TImplementation);
                          }
                          public static void Register<TContract, TImplementation>(TImplementation instance)
                          {
                              typeInstances[typeof(TContract)] = instance;
                          }
                          public static T Resolve<T>()
                          {
                              return (T)Resolve(typeof(T));
                          }
                          public static object Resolve(Type contract)
                          {
                              if (typeInstances.ContainsKey(contract))
                              {
                                  return typeInstances[contract];
                              }
                              Type implementation = types[contract];
                              ConstructorInfo constructor = implementation.GetConstructors()[0];
                              ParameterInfo[] constructorParameters = constructor.GetParameters();
                              if (constructorParameters.Length == 0)
                              {
                                  return Activator.CreateInstance(implementation);
                              }
                              List<object> parameters = new List<object>(constructorParameters.Length);
                              foreach (ParameterInfo parameterInfo in constructorParameters)
                              {
                                  parameters.Add(Resolve(parameterInfo.ParameterType));
                              }
                              return constructor.Invoke(parameters.ToArray());
                          }
                      }

                      Puis créer un locator qui utilise l'ioc :

                      public class ViewModelLocator
                      {
                          static ViewModelLocator()
                          {
                              SimpleIoc.Register<IViewModel, ViewModel>(new ViewModel());
                          }
                      
                          public IViewModel ViewModel
                          {
                              get { return SimpleIoc.Resolve<IViewModel>(); }
                          }
                      }

                      Ce locator doit être déclaré dans les ressources de l'appli :

                      <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:SpaceInvadersScreenSaver" x:Class="SpaceInvadersScreenSaver.App"
                                   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                                   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                                   mc:Ignorable="d">
                          <Application.Resources>
                              <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="true" />
                          </Application.Resources>
                      </Application>
                      

                      Et lié au datacontext dans le code de la vue (qui est plus haut).


                      Je vous fait grâce du médiator que vous pourrez trouver en suivant le lien.

                      L'utilisation de ces patterns est tout à fait justifiée dans une application complexe ... là, c'est un peu du bazooka pour chopper la mouche :)


                      Bien sûr, pour se lancer, elle a besoin d'une page html qui embarque le plugin :

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <html xmlns="http://www.w3.org/1999/xhtml" >
                      <!-- saved from url=(0014)about:internet -->
                      <head>
                          <title>SpaceInvadersScreenSaver</title>
                          <style type="text/css">
                          html, body {
                      	    height: 100%;
                      	    overflow: auto;
                          }
                          body {
                      	    padding: 0;
                      	    margin: 0;
                          }
                          #silverlightControlHost {
                      	    height: 100%;
                      	    text-align:center;
                          }
                          </style>
                          
                          <script type="text/javascript">
                              function onSilverlightError(sender, args) {
                                  var appSource = "";
                                  if (sender != null && sender != 0) {
                                    appSource = sender.getHost().Source;
                                  }
                                  
                                  var errorType = args.ErrorType;
                                  var iErrorCode = args.ErrorCode;
                      
                                  if (errorType == "ImageError" || errorType == "MediaError") {
                                    return;
                                  }
                      
                                  var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
                      
                                  errMsg += "Code: "+ iErrorCode + "    \n";
                                  errMsg += "Category: " + errorType + "       \n";
                                  errMsg += "Message: " + args.ErrorMessage + "     \n";
                      
                                  if (errorType == "ParserError") {
                                      errMsg += "File: " + args.xamlFile + "     \n";
                                      errMsg += "Line: " + args.lineNumber + "     \n";
                                      errMsg += "Position: " + args.charPosition + "     \n";
                                  }
                                  else if (errorType == "RuntimeError") {           
                                      if (args.lineNumber != 0) {
                                          errMsg += "Line: " + args.lineNumber + "     \n";
                                          errMsg += "Position: " +  args.charPosition + "     \n";
                                      }
                                      errMsg += "MethodName: " + args.methodName + "     \n";
                                  }
                      
                                  throw new Error(errMsg);
                              }
                          </script>
                      </head>
                      <body>
                          <form id="form1" runat="server" style="height:100%">
                          <div id="silverlightControlHost">
                              <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
                      		  <param name="source" value="SpaceInvadersScreenSaver.xap"/>
                      		  <param name="onError" value="onSilverlightError" />
                      		  <param name="background" value="white" />
                      		  <param name="minRuntimeVersion" value="4.0.60310.0" />
                      		  <param name="autoUpgrade" value="true" />
                      		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.60310.0" style="text-decoration:none">
                       			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
                      		  </a>
                      	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
                          </form>
                      </body>
                      </html>
                      

                      On peut encore faire plus compliqué, mais fallait que ça tienne dans un développement sandwich d'entre midi et deux :)

                      -
                      Edité par nico.pyright 26 avril 2013 à 10:23:07

                      • Partager sur Facebook
                      • Partager sur Twitter
                        25 avril 2013 à 16:19:29

                        Bonjour,

                        Voici ma contribution en langage Linotte en moins de 20 lignes !

                        Ce code est compatible avec la syntaxe supérieur à 2 du langage : http://langagelinotte.free.fr/

                        space invaders :
                        	bloc :: rectangle, largeur=10, hauteur=10, plein="oui"
                        	début
                        		tant que vrai, lis
                        			x & y <- hasard(500)
                        			couleur@bloc = couleurs{hasard(x/2)}
                        			pour chaque {2,4,8,9,10,11,12,15,17,19,22,24,26,28,29,30,31,32,33,34,35,37,39,41}, lis
                        				x@bloc = x + joker mod 7*11; y@bloc = y + entier(joker/7)*11
                        				projette clone(bloc)
                        			ferme
                        			couleur@bloc = "noir"
                        			x@bloc = x + 2 * 11; y@bloc = y + (2 + x mod 2) * 11
                        			projette clone(bloc)
                        			x@bloc = x + 4 * 11; y@bloc = y + (2 + y mod 2) * 11
                        			projette clone(bloc)
                        			attends 1 seconde
                        			efface toile
                        		ferme

                         Et voilà le résultat :

                         

                        Ajouté le 28 avril, une version extra courte inspirée de l'algo de emixam150 :

                        b:
                        x&y<-hasard 500
                        b::rectangle,largeur=8,hauteur=8,plein="oui",couleur=couleurs{x/2}
                        début
                        projette b
                        pour chaque {2,4,8,9,10,11,12,15,17,19,22,24,26,28,29,30,31,32,33,34,35,37,39,41},lis
                        x@b=x+joker mod 7*9;y@(#b)=y+entier(joker/7)*9
                        ferme
                        couleur@b=0;x@b=x+18;y@(#b)=y+(2+x mod 2)*9;x@b=x+36;y@b=y+(2+y mod 2)*9
                        attends 1 seconde;efface toile
                        va vers b

                        Soit 356 octets et contrat respecté !

                        -
                        Edité par metalm 1 mai 2013 à 19:07:55

                        • Partager sur Facebook
                        • Partager sur Twitter
                          25 avril 2013 à 16:34:05

                          Génial ton GIF nohar ! Joli boulot, surtout le fait de coder le GIF en "bas niveau" sans bibliothèque adaptée.

                          Bon, j'ai vu que personne ne l'avait fait en Java, alors je me suis dit que c'était nécessaire.
                          En temps normal, je suis plutôt HTML/CSS/JS (et ça peut paraître bizarre, j'aime pas Java). Je me suis basé sur la librairie StdDraw de l'université de Princeton, elle même basée sur AWT.

                          Voilà le JAR : https://www.dropbox.com/s/zfnltnu1d4z15x0/Invaders.jar

                          Sous Windows un double-clic devrait suffire, sous Linux : java -jar Invaders.jar

                          import java.awt.Dimension;
                          import java.awt.Color;
                          import java.util.Random;
                          import java.lang.Thread;
                          
                          class Invaders
                          {
                          	public static void main(String[] args)
                          	{
                          		Random rdm = new Random(System.nanoTime());
                          		Dimension screenDim = java.awt.Toolkit.getDefaultToolkit().getScreenSize();
                          		StdDraw.setCanvasSize((int)screenDim.getWidth(), (int)screenDim.getHeight());
                          		StdDraw.setXscale(0, screenDim.getWidth());
                          		StdDraw.setYscale(0, screenDim.getHeight());
                          		
                          		Invader invader;
                          		int size, posX, posY;
                          		
                          		while(true)
                          		{
                          			invader = new Invader(rdm.nextInt(25) + 50);
                          			
                          			posX = rdm.nextInt((int)screenDim.getWidth() - Invader.invaderShape[0].length * (invader.squaresSize+5));
                          			posY = rdm.nextInt((int)screenDim.getHeight() - Invader.invaderShape.length * (invader.squaresSize+5));
                          
                          			invader.draw(posX, posY);
                          			
                          			try
                          			{
                          				Thread.sleep(3000);
                          			}
                          			catch(java.lang.Exception e)
                          			{}
                          			
                          			StdDraw.clear();
                          		}
                          	}
                          }
                          
                          class Invader
                          {
                          	public int squaresSize;
                          	public Color color;
                          	public static int[][] invaderShape = {{0,0,1,0,1,0,0},{0,1,1,1,1,1,0},{0,1,2,1,2,1,0},{0,1,0,1,0,1,0},{1,1,1,1,1,1,1},{1,0,1,0,1,0,1}};
                          	private Random rdm = new Random(System.nanoTime());
                          	
                          	public Invader(int size)
                          	{
                          		squaresSize = size;
                          		color = new Color(rdm.nextInt(220), rdm.nextInt(220), rdm.nextInt(220));
                          	}
                          	
                          	public void draw(int posX, int posY)
                          	{
                          		double size = squaresSize/2;
                          		int screenHeight = (int)java.awt.Toolkit.getDefaultToolkit().getScreenSize().getHeight();
                          		posY = screenHeight - posY;
                          		int x = 0, y = 0;
                          		
                          		StdDraw.setPenColor(color);
                          		
                          		for(int i=0; i<invaderShape.length; i++)
                          		{
                          			for(int j=0; j<invaderShape[i].length; j++)
                          			{
                          				if(invaderShape[i][j] == 1)
                          				{
                          					StdDraw.filledRectangle(posX+x,posY-y,size,size);
                          				}
                          				
                          				else
                          				{
                          					StdDraw.setPenColor();
                          					
                          					if(invaderShape[i][j] == 2)
                          					{
                          						StdDraw.filledRectangle(posX+x,posY-y-((squaresSize+5)*rdm.nextInt(2)),size,size);
                          					}
                          					
                          					StdDraw.setPenColor(color);
                          				}
                          					
                          				x += squaresSize + 5;
                          			}
                          			
                          			y += squaresSize + 5;
                          			x = 0;
                          		}
                          	}
                          }
                          



                          -
                          Edité par mogolecho 26 avril 2013 à 0:51:06

                          • Partager sur Facebook
                          • Partager sur Twitter
                            25 avril 2013 à 17:42:09

                            Dans le genre inutilement compliqué, je crois que j'ai atteint un certain niveau ^^ (Enfin remarque, c'est rien d'exceptionnel non plus...)

                            http://sandhose.fr/invaders/

                            Donc en gros, j'ai un Raspberry Pi (Google pour ceux qui savent pas ce que c'est), sous Raspbian, avec un serveur NodeJS.

                            Il fait office de serveur Web, et c'est lui qui gère le spawn, destruction, le type, la couleur, la taille des invaders...

                            Tout ca est envoyé au client via un script JS (WebSockets powa! \o/), et le client peut admirer et faire spawner des invaders, le tout synchro avec le server ! :D

                            Vous pouvez donc afficher 2 fois la page cote à cote, vous aurez la meme chose, à quelques millisecondes près ;)

                            Pour aller encore plus loin, il est possible de le faire marcher le script via un bookmarklet, il suffit de glisser le lien "bookmarklet" dans votre barre de favoris, et de le lancer depuis n'importe quel site !

                            Donc voici le SDZ infesté de Space Invaders ! :p

                            Quelques précisions:

                            Le script est optimisé pour une résolution 1600x1000. Si votre écran est trop petit, ils risquent de sortir de l'écran...

                            J'ai mis une limite de spawn à 16 Invaders, pour éviter de faire cramer mon cher Raspberry Pi, et ils meurent au bout d'un certain nombre (aléatoire) de déplacements

                            Il y a une detection de collisions entre les invaders, pour éviter qu'ils se superposent, mais je l'ai quand meme limité pour éviter que ça prenne trop de temps a calculer, donc il y a de temps en temps quelques "superpositions"...

                            Le code source est dispo sur la page, les seuls dépendances de cette app, c'est Socket.io, parce que je suis pas un expert en matière de WebSocket, et UglifyJS pour minimifier les scripts à la volée

                            Je sais pas si je vais laisser mon Raspberry Pi allumé H24, donc paniquez pas si ça marche plus d'un coup ^^

                            Enjoy! ;)

                            Sandhose

                            EDIT: Entre-temps, je me suis acheté un nom de domaine ;) Le script se trouve donc maintenant sur http://sandhose.fr/invaders/

                            -
                            Edité par Sandhose 29 avril 2013 à 19:21:21

                            • Partager sur Facebook
                            • Partager sur Twitter
                            Interdiction de lire cette signature | OCr Notificateur | Retrouvez moi sur Zeste de Savoir !
                              25 avril 2013 à 19:08:44

                              Voila mon code en C avec la lib Ncurses ! (Par contre le code doit pas être super propre, j'ai appris Ncurses sur le tas)

                              #include <ncurses.h>
                              #include<time.h>
                              
                              int main()
                              {	
                              	srand(time(NULL));
                              	int x = 0, y = 0, i,j;
                              	initscr();
                              	start_color();	
                              	while(1)
                              	{
                              		for(i = 1 ; i <= 7 ; i++)
                              		{			
                              			x = rand()%(68-12) +12;
                              			y = rand()%(13-8) +8;
                              			do
                              			{
                              				j = rand()%(7-1)+1;
                              			}while(j == i);
                              			init_pair(1, 0, i);
                              			init_pair(2, i, j);
                              			bkgd(COLOR_PAIR(2));
                              			attron(COLOR_PAIR(1));
                              			mvprintw(y, x+2, " "); mvprintw(y, x+8, " ");
                              			mvprintw(y+1, x+3, " "); mvprintw(y+1, x+7, " ");
                              			mvprintw(y+2, x+3, "     ");
                              			mvprintw(y+3, x+2, "  ");mvprintw(y+3, x+5, " "); mvprintw(y+3, x+7, "  ");
                              			mvprintw(y+4, x+1, "         ");
                              			mvprintw(y+5, x, " "); mvprintw(y+5, x+2, "       "); mvprintw(y+5, x+10, " ");
                              			mvprintw(y+6, x, " "); mvprintw(y+6, x+2, " "); mvprintw(y+6, x+8, " "); mvprintw(y+6, x+10, " ");
                              			mvprintw(y+7, x+3, "  "); mvprintw(y+7, x+6, "  ");
                              			attroff(COLOR_PAIR(1));
                              			napms(1000);
                              			refresh();
                              			clear();	
                              			echo();
                              			
                              		}				
                              	}	
                              	endwin();		
                              		
                              	return 0;
                              }
                              


                              -
                              Edité par Rom1M 26 avril 2013 à 16:46:05

                              • Partager sur Facebook
                              • Partager sur Twitter
                              "Il n'y a que deux sortes de langages de programmation: ceux dont les gens disent toujours du mal et ceux que personne n'utilise." Bjarne Stroustrup.
                                25 avril 2013 à 19:13:31

                                Salut tout le monde !

                                Des zéros de la section électronique et des curieux se demande souvent ce que l'on peut faire avec une Arduino, alors voila un exemple...

                                (On avait bien dit "écran" au sens large et pas précisé ordinateur non :-° )

                                Voici donc le résultat, petit message d'accueil puis un invader spawn aléatoirement sur l'écran puis disparait, puis reviens, puis repart, puis reviens, puis repart...

                                 La vidéo ...

                                (Si quelqu'un sait comment faire pour insérer une vidéo... le html ne marche pas en tout cas, seulement dans la visualisation...)

                                Arduino Space Invaders by Eskimon

                                Et pour le code :

                                #include <LiquidCrystal.h>
                                
                                LiquidCrystal lcd(8, 9, 4, 5, 6, 7);
                                
                                //Partie gauche de l'invader bras baissé
                                byte invader_low_left[8] = {
                                  B00100,
                                  B00010,
                                  B00111,
                                  B01101,
                                  B11111,
                                  B10111,
                                  B10100,
                                  B00010
                                };
                                //Partie droite de l'invader bras baissé
                                byte invader_low_right[8] = {
                                  B00100,
                                  B01000,
                                  B11100,
                                  B10110,
                                  B11111,
                                  B11101,
                                  B00101,
                                  B01000
                                };
                                //Partie gauche de l'invader bras levé
                                byte invader_high_left[8] = {
                                  B00100,
                                  B10010,
                                  B10111,
                                  B11101,
                                  B11111,
                                  B01111,
                                  B00100,
                                  B01000
                                };
                                //Partie droite de l'invader bras levé
                                byte invader_high_right[8] = {
                                  B00100,
                                  B01001,
                                  B11101,
                                  B10111,
                                  B11111,
                                  B11110,
                                  B00100,
                                  B00010
                                };
                                
                                void setup() {
                                  randomSeed(analogRead(0)); //initialise l'aléatoire avec une lecture analogique 
                                  lcd.createChar(0, invader_low_left); //apprend le caractère à l'écran LCD
                                  lcd.createChar(1, invader_low_right); //apprend le caractère à l'écran LCD
                                  lcd.createChar(2, invader_high_left); //apprend le caractère à l'écran LCD
                                  lcd.createChar(3, invader_high_right); //apprend le caractère à l'écran LCD
                                  lcd.begin(16, 2);
                                
                                  lcd.write("Salut les zeros!");
                                  delay(2000);
                                  lcd.clear();
                                }
                                
                                void loop() {
                                  char colonne = random(0, 2);
                                  char ligne = random(0, 15);
                                  drawInvader(colonne, ligne, 0);
                                  delay(800);
                                  drawInvader(colonne, ligne, 1);
                                  delay(800);
                                  lcd.clear();
                                }
                                
                                void drawInvader(char colonne, char ligne, char etat)
                                {
                                  lcd.clear(); //efface l'écran
                                  lcd.setCursor(ligne,colonne); //se place au bon pixel
                                  lcd.write((uint8_t) (0+etat*2)); //affiche la moitié gauche 
                                  lcd.write((uint8_t) (1+etat*2)); //affiche la moitié droite
                                }

                                EDIT : Ajout d'image car la vidéo ne peut-être intégré directement... au passage, bug spotted la font ne veut pas changer de taille :(

                                Nouvel EDIT : J'ai ajouté une animation dans le code et la vidéo

                                EDIT : Sujet de présentation et d'explication type tuto...

                                -
                                Edité par Eskimon 24 janvier 2014 à 13:13:05

                                • Partager sur Facebook
                                • Partager sur Twitter

                                Retrouvez moi sur mon blog et ma chaine Youtube !

                                  25 avril 2013 à 19:13:38

                                  @CaptainYop : Ne ré-appelle pas srand à chaque fois que tu veux générer un nombre (pseudo-)aléatoire. Si il s'est écoulé un temps inférieur à la granularité impliquée par time entre les deux appels, la séquence générée sera identique. Pour le coup, tu peux simplement effectuer un appel à srand en début de programme, puis appeler rand indépendamment dans ta boucle.

                                  -
                                  Edité par Lucas-84 25 avril 2013 à 19:14:09

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  Staff désormais retraité.
                                    25 avril 2013 à 21:01:31

                                    Hey c'est encore moi :D

                                    Une petite variante de mon premier code, ici je stocke les donnée en indiquant a compien de case se trouvent la prochaine remplie (2,2,4,1,1 ect..) et il s'utilise maintenant en bookmarker, le tous en 541 caractères :D

                                    function f(){(x=(c=y.lastChild).getContext("2d")).clearRect(0,0,380,320);i=0;p="#"+(r=Math.random)().toString(16).substr(2,6);d="22411113"+((a=r()<.5)?11:2)+((b=r()<.5)?113:23)+(!a?11:2)+(!b?11:2)+21111111222;(s=c.style).left=r()*(y.clientWidth-380)+"px";s.top=r()*(y.clientHeight-320)+"px";while(d[0]){i+=+d[0];d=d.slice(1);x.fillStyle=i-16&&i-18&&i-23&&i-25?p:"#000";x.fillRect(i%7*54,54*~~(i/7),50,50)}setTimeout(f,3e3)}(y=document.body).insertAdjacentHTML("beforeend","<canvas width=380 height=320 style=position:absolute></canvas>");f()

                                    Mais bon au départ je poste ce message surtout pour ma version WTF: Un space invader en OOK :D

                                    Pour ce qui ne vois pas ce que sais: wikipedia

                                    Donc voila à quoi sa ressemble ICI

                                    La partie aléatoire et la compilation est faite en javascript mais bon sa change rien ;)

                                    -
                                    Edité par sadiquo 19 mars 2014 à 18:11:40

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      25 avril 2013 à 21:02:11

                                      Lua (Love 2D)

                                      Cet exercice me parût un bon entraînement pour apprendre la librairie LOVE2D

                                      Ce code est sûrement très "porc"

                                      function love.load()
                                          modes = love.graphics.getModes()
                                          table.sort(modes, function(a, b) return a.width*a.height < b.width*b.height end)
                                          resol = modes[table.getn(modes)]
                                          love.graphics.setMode(resol["width"], resol["height"])
                                          love.graphics.setCaption("Space Bitton")
                                      end
                                      
                                      function love.draw()
                                          love.graphics.setColor(255, 255, 255)
                                          love.graphics.rectangle("fill", 0, 0, love.graphics.getWidth(), love.graphics.getHeight())
                                          local r = math.random(0, 255)
                                          local g = math.random(0, 255)
                                          local b = math.random(0, 255)
                                          local carre = 50
                                          local x = math.random(0, love.graphics.getWidth()-10*carre) 
                                          local y = math.random(0, love.graphics.getHeight()-10*carre) 
                                      
                                          local alien = {
                                              {0, 0, 1, 0, 1, 0, 0},
                                              {0, 1, 1, 1, 1, 1, 0},
                                              {0, 1, 0, 1, 0, 1, 0},
                                              {0, 1, 0, 1, 0, 1, 0},
                                              {1, 1, 1, 1, 1, 1, 1},
                                              {1, 0, 1, 0, 1, 0, 1}
                                          }
                                          y_yeux1 = math.random(3, 4)
                                          y_yeux2 = math.random(3, 4)
                                          x_yeux1 = 3
                                          x_yeux2 = 5
                                          alien[y_yeux1][x_yeux1] = 2
                                          alien[y_yeux2][x_yeux2] = 2
                                      
                                          for i, l in ipairs(alien) do
                                              for ii, num in ipairs(alien[i]) do
                                                  if num == 0 then
                                                      love.graphics.setColor(255, 255, 255)
                                                  elseif num == 1 then
                                                      love.graphics.setColor(r, g, b)
                                                  elseif num == 2 then
                                                      love.graphics.setColor(0, 0, 0)
                                                  end 
                                                  love.graphics.rectangle("fill", x+ii*carre, y+i*carre, carre-4, carre-4)
                                              end
                                          end
                                          love.timer.sleep(3)
                                      end
                                      

                                      Je sais pas si c'est utile mais voila des images:

                                      Fichier .love => Ici

                                      -
                                      Edité par Kokopak 26 avril 2013 à 10:13:20

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                      Développeur de GroovySearch (site down pour l'instant)
                                        25 avril 2013 à 22:59:02

                                        Je suis fan de la version Arduino \ o /

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                        Small is Beautiful — E.F. Schumacher | Blog (fr)
                                          25 avril 2013 à 23:13:29

                                          @lethom, Merci ^^ si tu as des idées pour l'améliorer je suis preneur ^^ (tout en restant dans le thême ;) )
                                          • Partager sur Facebook
                                          • Partager sur Twitter

                                          Retrouvez moi sur mon blog et ma chaine Youtube !

                                            25 avril 2013 à 23:14:41

                                            Voici ma version en javascript/jQuery et SVG. http://spaceinv.factionsunited.com/

                                            Rien d'exceptionnel par rapport à ce qui à déjà été posté mais je suis content d'avoir un code qui fonctionne :p

                                            et ça m'aura permis de decouvrir SVG! hehe

                                            J'ai essayé d'utiliser CSS3  à la place de javascript mais il n'est apparement  pas possible de générer des valeurs au hasard. Dommage, ça serait bien utile :)

                                            <html>
                                            	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                                            	<body>
                                            		<svg width="380px" height="325px" style="position:fixed">
                                                		<rect class="skin" x="110" y="0" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="220" y="0" width="50" height="50" fill="red" />
                                                		
                                                		<rect class="skin" x="55" y="55" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="110" y="55" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="165" y="55" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="220" y="55" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="275" y="55" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="55" y="110" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="165" y="110" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="275" y="110" width="50" height="50" fill="red" />
                                                		
                                                		<rect class="skin" x="55" y="165" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="165" y="165" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="275" y="165" width="50" height="50" fill="red" />
                                                		
                                                		<rect class="skin" x="0" y="220" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="55" y="220" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="110" y="220" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="165" y="220" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="220" y="220" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="275" y="220" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="330" y="220" width="50" height="50" fill="red" />
                                                		
                                                		<rect class="skin" x="0" y="275" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="110" y="275" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="220" y="275" width="50" height="50" fill="red" />
                                                		<rect class="skin" x="330" y="275" width="50" height="50" fill="red" />
                                            
                                                		<rect id="eyeL" x="110" y="110" width="50" height="50" fill="black" />
                                                		<rect id="eyeR" x="220" y="110" width="50" height="50" fill="black" />
                                                	</svg>
                                                	<script>
                                            		$(document).ready(function() {
                                                		setInterval(function(){
                                                			// changement de couleur
                                                			var newColor = 
                                                				'rgb(' + (Math.round(Math.random()*255)) + ','
                                                				+ (Math.round(Math.random()*255)) + ',' 
                                                				+ (Math.round(Math.random()*255)) + ')';
                                                			$('.skin').css('fill', newColor);
                                                			// Changement de position
                                                			var newLeft = Math.round(Math.random()*(window.innerWidth-380));
                                                			var newTop = Math.round(Math.random()*(window.innerHeight-325));
                                                			$('svg').css({'left': newLeft, 'top': newTop});
                                                			// Position des yeux
                                                			if(Math.floor(Math.random()*2)) $('#eyeL').attr('y', '110');
                                                			else $('#eyeL').attr('y', '165');
                                                			if(Math.floor(Math.random()*2)) $('#eyeR').attr('y', '110');
                                                			else $('#eyeR').attr('y', '165');
                                                		},2000);
                                                	});
                                                	</script>
                                            	</body>
                                            </html>

                                            Ma version préférée pour l'instant est celle de lucas-84, j'aime le coté old school :D

                                            http://www.siteduzero.com/forum/sujet/atelier-fond-anime-space-invaders?page=1#message-84270604

                                            -
                                            Edité par sylv1pdt 25 avril 2013 à 23:19:55

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              25 avril 2013 à 23:48:19

                                              Bonjour,

                                              voici ma petite participation

                                              C'est une version reprise de la version de Stuff que j'ai simplement rendue encore plus concise.

                                              Le code est par ici

                                              -
                                              Edité par Shahor 25 avril 2013 à 23:56:04

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                26 avril 2013 à 0:36:31

                                                Voici ma modeste contribution.

                                                Je l'ai réalisé en C++ avec Qt, les sources sont avec le programme pour ceux que ça intéresse ;-)

                                                Space Invader

                                                La taille de la « zone d'invasion » s'adapte à votre écran ;-)

                                                Voili voilou :-)

                                                -
                                                Edité par Dark Patate 26 avril 2013 à 0:39:15

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                « Mon pied droit est jaloux de mon pied gauche. Quand l'un avance, l'autre veut le dépasser. Et moi, comme un imbécile, je marche ! » — Raymond Devos
                                                  26 avril 2013 à 1:44:38

                                                  Voici la mienne en JS:

                                                  <html>
                                                  	<head>
                                                  		<title></title>
                                                  		<style type="text/css">
                                                  			span{
                                                  				width: 364px;
                                                  				height: 312px;
                                                  				position:absolute;
                                                  			}
                                                  			div{
                                                  				width: 50px;
                                                  				height: 50px;
                                                  				margin:1px;
                                                  				float: left;
                                                  			}
                                                  			.b{}
                                                  		</style>
                                                  	</head>
                                                  	<body>
                                                  		<span id="a"></span>
                                                  	</body>
                                                  	<script type="text/javascript">
                                                      var z = document;
                                                      function g(){
                                                          var g = z.getElementById('a');
                                                          g.innerHTML='';
                                                          var x = Math.random();
                                                          g.style.top=x*(window.innerHeight - 312);
                                                          g.style.left=x*(window.innerWidth - 364);
                                                          var m='35.!17.246.246.!9.!246';
                                                          var r=m.match(/(!?[0-9]+)/ig);
                                                          var c=0;
                                                          var i=1;
                                                          while(i<=42){
                                                              var f=r[parseInt(i/7.1)];
                                                              Math.ceil(i%7.1)==1?c=f.charAt(0)=='!'?0:1:'';
                                                              var d=z.getElementById('a').appendChild(z.createElement('div'));
                                                              f.search(Math.ceil(i%7.1))>=0?c==0?d.className='c':d.className='b':c==0?d.className='b':d.className='c';
                                                              i++;
                                                          }
                                                          z.styleSheets[0].rules[2].style.background = '#'+Math.floor(x*16777215).toString(16);
                                                          var d = x.toString();
                                                          d.charAt(13)>=5?s(16):s(23);
                                                          d.charAt(12)>=5?s(18):s(25);
                                                      }
                                                      function s(i){
                                                          z.getElementsByTagName('div')[i].style.backgroundColor = '#000';
                                                      }
                                                      setInterval(g,1000);
                                                  	</script>
                                                  </html>



                                                  -
                                                  Edité par prosthetiks 26 avril 2013 à 2:18:18

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    26 avril 2013 à 9:55:44

                                                    Bonjour, voici mon code en JavaScript et CSS.

                                                    <!DOCTYPE html>
                                                    <html>
                                                    	<head>
                                                    		<title>SpaceInvaders</title>
                                                    		<meta http-equiv="Refresh"content="3; URL=index.html">
                                                    	</head>
                                                    	<body> 
                                                    	<div id="invaders">
                                                    		<script>
                                                    		var spaceinvaders_css = '\
                                                    		#invaders {\
                                                    		background-color: RGB(R_BGCOLOR, V_BGCOLOR, B_BGCOLOR);\
                                                    		width:413px;\
                                                    		height:359px;\
                                                    		position: absolute;\
                                                    		top: POSTOP%;\
                                                    		right: POSRIGHT%;\
                                                    		}\
                                                    		';
                                                    		var R_BGCOLOR = Math.round(Math.random() * 255);
                                                    		var V_BGCOLOR = Math.round(Math.random() * 255);
                                                    		var B_BGCOLOR = Math.round(Math.random() * 255);
                                                    		var POSTOP = Math.round(Math.random() * 60);
                                                    		var POSRIGHT = Math.round(Math.random() * 70);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/POSTOP/g, POSTOP);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/POSRIGHT/g, POSRIGHT);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/R_BGCOLOR/g, R_BGCOLOR);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/V_BGCOLOR/g, V_BGCOLOR);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/B_BGCOLOR/g, B_BGCOLOR);
                                                    		document.write('<style>'+ spaceinvaders_css +'</style>');
                                                    		var img = Math.round(Math.random() * 3);
                                                    		if(img == 0)
                                                    		document.write('<img src="invaders.png" alt=""/>');
                                                    		if(img == 1)
                                                    		document.write('<img src="invaders_2.png" alt=""/>');
                                                    		if(img == 2)
                                                    		document.write('<img src="invaders_3.png" alt=""/>');
                                                    		if(img == 3)
                                                    		document.write('<img src="invaders_4.png" alt=""/>');
                                                    		</script>
                                                    	</div>
                                                    	</body>
                                                    </html>
                                                    

                                                    Bon je rajoute une deuxième version, la taille des invaders est aléatoire et il peut y en avoir deux.

                                                    <!DOCTYPE html>
                                                    <html>
                                                    	<head>
                                                    		<title>SpaceInvaders</title>
                                                    		<meta http-equiv="Refresh"content="1; URL=index.html">
                                                    	</head>
                                                    	<body> 
                                                    	<div id="invaders">
                                                    		<script>
                                                    		var spaceinvaders_css = '\
                                                    		#invaders {\
                                                    		background-color: RGB(R_BGCOLOR, V_BGCOLOR, B_BGCOLOR);\
                                                    		width:Width_imgpx;\
                                                    		height:Height_imgpx;\
                                                    		position: absolute;\
                                                    		top: POSTOP%;\
                                                    		right: POSRIGHT%;\
                                                    		}\
                                                    		.invaders_1 {\
                                                    		width:Width_imgpx;\
                                                    		height:Height_imgpx;\
                                                    		}\
                                                    		';
                                                    		var R_BGCOLOR = Math.round(Math.random() * (240 - 25) + 25);
                                                    		var V_BGCOLOR = Math.round(Math.random() * (240 - 25) + 25);
                                                    		var B_BGCOLOR = Math.round(Math.random() * (240 - 25) + 25);
                                                    		var POSTOP = Math.round(Math.random() * 40);
                                                    		var POSRIGHT = Math.round(Math.random() * 70);
                                                    		var Height_img = Math.round(Math.random() * (359 - 70) + 70);
                                                    		var Width_img = Height_img*(413/359);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/POSTOP/g, POSTOP);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/POSRIGHT/g, POSRIGHT);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/Height_img/g, Height_img);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/Width_img/g, Width_img);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/R_BGCOLOR/g, R_BGCOLOR);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/V_BGCOLOR/g, V_BGCOLOR);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/B_BGCOLOR/g, B_BGCOLOR);
                                                    		document.write('<style>'+ spaceinvaders_css +'</style>');
                                                    		var img = Math.round(Math.random() * 3);
                                                    		if(img == 0)
                                                    		document.write('<img class="invaders_1" src="invaders.png" alt=""/>');
                                                    		if(img == 1)
                                                    		document.write('<img class="invaders_1" src="invaders_2.png" alt=""/>');
                                                    		if(img == 2)
                                                    		document.write('<img class="invaders_1" src="invaders_3.png" alt=""/>');
                                                    		if(img == 3)
                                                    		document.write('<img class="invaders_1" src="invaders_4.png" alt=""/>');
                                                    		</script>
                                                    	</div>
                                                    	<div id="invaders_2">
                                                    	<script>
                                                    		var i = Math.round(Math.random() * (100 - 1) + 1);
                                                    		if(i > 50)
                                                    		{
                                                    		var spaceinvaders_css = '\
                                                    		#invaders_2 {\
                                                    		background-color: RGB(R_BGCOLOR, V_BGCOLOR, B_BGCOLOR);\
                                                    		width:Width_imgpx;\
                                                    		height:Height_imgpx;\
                                                    		position: absolute;\
                                                    		top: POSTOP%;\
                                                    		right: POSRIGHT%;\
                                                    		}\
                                                    		.invaders_2 {\
                                                    		width:Width_imgpx;\
                                                    		height:Height_imgpx;\
                                                    		}\
                                                    		';
                                                    		var R_BGCOLOR = Math.round(Math.random() * (240 - 25) + 25);
                                                    		var V_BGCOLOR = Math.round(Math.random() * (240 - 25) + 25);
                                                    		var B_BGCOLOR = Math.round(Math.random() * (240 - 25) + 25);
                                                    		var Height_img = Math.round(Math.random() * (359 - 70) + 70);
                                                    		var Width_img = Height_img*(413/359);
                                                    		if(POSTOP > 20)
                                                            var POSTOP_2 = POSTOP-20;
                                                    		if(POSTOP < 20)
                                                            var POSTOP_2 = POSTOP+20;
                                                    		if(POSRIGHT > 35)
                                                            var POSRIGHT_2 = POSRIGHT-30;
                                                    		if(POSRIGHT < 35)
                                                            var POSTOP_2 = POSRIGHT+30;
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/POSTOP/g, POSTOP_2);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/POSRIGHT/g, POSRIGHT_2);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/Height_img/g, Height_img);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/Width_img/g, Width_img);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/R_BGCOLOR/g, R_BGCOLOR);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/V_BGCOLOR/g, V_BGCOLOR);
                                                    		spaceinvaders_css = spaceinvaders_css.replace(/B_BGCOLOR/g, B_BGCOLOR);
                                                    		document.write('<style>'+ spaceinvaders_css +'</style>');
                                                    		var img = Math.round(Math.random() * 3);
                                                    		if(img == 0)
                                                    		document.write('<img class="invaders_2" src="invaders.png" alt=""/>');
                                                    		if(img == 1)
                                                    		document.write('<img class="invaders_2" src="invaders_2.png" alt=""/>');
                                                    		if(img == 2)
                                                    		document.write('<img class="invaders_2" src="invaders_3.png" alt=""/>');
                                                    		if(img == 3)
                                                    		document.write('<img class="invaders_2" src="invaders_4.png" alt=""/>');
                                                    		}
                                                    	</script>
                                                    	</div>
                                                    	</body>
                                                    </html>

                                                    Un petit screen pour voir ce que ça donne ;)





                                                    -
                                                    Edité par Ebroz 26 avril 2013 à 16:52:54

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                    Anonyme
                                                      26 avril 2013 à 10:00:30

                                                      Voici ma vision des choses (première version), elle est composé d'un fichier html, js, css, htaccess (pour url rewriting). Actuellement il manque juste l'animation des yeux (dont gérer dynamiquement la position et la taille des yeux), et une petite optimisation du code.

                                                      J'ai fais un petit éditeur pour pouvoir paramétrer l'animation (et on peu dessiner son propre space invader de la taille voulu (min 5x5 et max 32x32).

                                                      Les particularités :

                                                      • Les couleurs ne sont pas définit par un simple random mais en fonction de la position de la souris ou du space invader. Cette méthode permet d'éviter un changement de couleur "trop surprenante".
                                                      • Mise en place d'un système de sauvegarde/partage. Qui génère le lien correspondant.
                                                      • J'ai divisé la taille par deux pour plus de liberté.

                                                      http://celean.site40.net/spaceinvaders/7x6_001010001111100101010012121011111111010101

                                                      http://celean.site40.net/spaceinvaders/11x8_0010000010000010001000001111111000110111011011111111111101111111011010000010100011011000

                                                      Le coude source (dans cette ordre : htacces, html, css, js) :

                                                      Options +FollowSymlinks
                                                      RewriteEngine On
                                                      RewriteRule ^([0-9]{0,2})x([0-9]{0,2})_([0-9]*)$ index.html [L]
                                                      RewriteRule ^([0-9]*)$ index.html [L]
                                                      <!DOCTYPE html>
                                                      <html>
                                                      <head>
                                                      	<meta charset=utf-8 />
                                                      	<title>Space Invaders</title>
                                                      	<link id="style" rel="stylesheet" type="text/css" href="./style.css">
                                                      	<script type="text/javascript" src="./script.js"></script>
                                                      </head>
                                                      <body>
                                                      	<div id="space" oncontextmenu="return false;"></div>
                                                      	<br>
                                                      	<div id="tool">
                                                      		<label for="permaLink">Lien permanent :</label>
                                                      		<input id="permaLink" type="text"/>
                                                      		<label for="format_x">Format :</label>
                                                      		<input id="format_x" type="text"/><span> x </span><input id="format_y" type="text"/>
                                                      		<label for="colorMode">Couleur selon :</label>
                                                      		<input id="colorMode" type="button" value="[MOUSE] | space"/>
                                                      		<label for="switch">Activer l'animation :</label>
                                                      		<input id="switch" type="button" value="DEMARRER"/>	
                                                      	</div>
                                                      </body>
                                                      </html>
                                                      html, body { height:100%; width:100%; margin:0; }
                                                      #space { position:absolute; top:0; left:0; line-height:0; }
                                                      .pixel { display:inline-block; height:25px; width:25px; margin:1px; }
                                                      #permaLink { width:300px; }
                                                      #format_x, #format_y { width:20px; }
                                                      #tool { position:fixed; bottom:0; left:0; }
                                                      .pixel[title="0"] { background:#DDD; }
                                                      .pixel[title="1"] { background:lime; }
                                                      .pixel[title="2"] { background:black; }
                                                      var _format = {
                                                      	x: 7,
                                                      	y: 6,
                                                      	air: function() {
                                                      		return _format.x * _format.y;
                                                      	}
                                                      };
                                                      
                                                      /* var _p = { none:0, bloc:1, eye:2 }; */
                                                      
                                                      var _space = {
                                                      	node: null,
                                                      	permaLink: "001010001111100101010012121011111111010101",
                                                      	colorMode: "space",
                                                      	interval: null,
                                                      	refreshformat: function() {
                                                      		_space.node.style.width = (_format.x * 27) + "px";
                                                      		_space.node.style.height = (_format.y * 27) + "px";
                                                      	},
                                                      	animation: function() {
                                                      		_space.node.style.left = Math.floor((Math.random()*(window.innerWidth-_space.node.offsetWidth))+0)+"px";
                                                      		_space.node.style.top = Math.floor((Math.random()*(window.innerHeight-_space.node.offsetHeight))+0)+"px";
                                                      
                                                      		_space.animColor(_space.node.offsetLeft, _space.node.offsetTop);
                                                      	},
                                                      	colorEvent:function () {
                                                      		var bool = (_space.colorMode != "mouse");
                                                      		_space.colorMode = (bool) ? "mouse" : "space";
                                                      		this.value = (bool) ? "[MOUSE] | space" : "mouse | [SPACE]";
                                                      
                                                      		document.body.onmousemove = (bool) ? function (event) {
                                                      			_space.animColor(event.clientX, event.clientY);
                                                      		} : null;
                                                      	},
                                                      	switchEvent:function () {
                                                      		var bool = (_space.interval === null);
                                                      		this.value = (bool) ? "STOP" : "DEMARRER";
                                                      
                                                      		if (bool) {
                                                      			_space.interval = setInterval(_space.animation, 1000);
                                                      		} else {
                                                      			clearInterval(_space.interval);
                                                      			_space.interval = null;
                                                      		}
                                                      
                                                      		var color = (bool) ? "none" : "#DDD";
                                                      		$cssRules(".pixel[title=\"0\"]").style.background = color;
                                                      	},
                                                      	animColor: function(x, y) {
                                                      		var xc = ~~(256 * x / window.innerWidth);
                                                      		var yc = ~~(256 * y / window.innerHeight);
                                                      
                                                      		$cssRules(".pixel[title=\"1\"]").style.background = "rgb("+xc+","+(255-xc)+","+yc+")";
                                                      	},
                                                      	load: function() { //On prépare le terrain
                                                      		_space.refreshformat();
                                                      
                                                      		for (var i = 0; i < _format.air(); i++) {
                                                      			var pixel = document.createElement("div");
                                                      			pixel.className = "pixel";
                                                      			pixel.title = (i < _space.permaLink.length) ? _space.permaLink[i] : 1;
                                                      			pixel.onmousedown = _space.toggle;
                                                      
                                                      			_space.node.appendChild(pixel);
                                                      		}
                                                      		_space.notifyLink();
                                                      		_space.colorEvent();
                                                      		//_space.switchEvent();
                                                      	},
                                                      	//<----Fonction d'édition---->
                                                      	updateSize: function () { //On change la taille
                                                      		var type = ($("format_x").value != _format.x) ? "x" : "y";
                                                      		var typeloop = (type == "x") ? "y" : "x";
                                                      
                                                      		var diff = parseInt($("format_"+type).value - _format[type],0);
                                                      		if (diff < 0) {
                                                      			for (var p = 1; p <= diff*-1; p++) {
                                                      				for (var j = 1; j <= _format[typeloop]; j++) {
                                                      					if (type == "x") {
                                                      						remove(_space.node.childNodes[j*_format.x-(j*p)]);
                                                      					} else {
                                                      						remove(_space.node.childNodes[_format.air()-(j+(p-1)*_format.x)]);
                                                      					}
                                                      				}
                                                      			}
                                                      		} else {
                                                      			for (var o = 1; o <= diff; o++) {
                                                      				for (var i = 0; i < _format[typeloop]; i++) {
                                                      					var pixel = document.createElement("div");
                                                      					pixel.className = "pixel";
                                                      					pixel.title = 0;
                                                      					pixel.onmousedown = _space.toggle;
                                                      
                                                      					if (type == "x") {
                                                      						insertAfter(_space.node.childNodes[(i+1)*_format.x+(i*o-1)], pixel);
                                                      					} else {
                                                      						_space.node.appendChild(pixel);
                                                      					}
                                                      				}
                                                      			}
                                                      		}
                                                      
                                                      		_format[type] += diff;
                                                      		_space.refreshformat();
                                                      
                                                      		_space.notifyLink();
                                                      	},
                                                      	parseLink: function() { //On génére le lien
                                                      		var permaLink = "";
                                                      		for (var i = 0; i < _space.node.childNodes.length; i++) {
                                                      			var o = _space.node.childNodes[i];
                                                      			if (typeof(o.className) != "undefined" && o.className.substr(0,5) == "pixel") {
                                                      				var p = parseInt(_space.node.childNodes[i].title, 0);
                                                      				permaLink += p;
                                                      			}
                                                      		}
                                                      		return permaLink;
                                                      	},
                                                      	notifyLink: function() { //On affiche le lien
                                                      		var permaLink = _space.parseLink();
                                                      		window.history.pushState({},"", "/spaceinvaders/"+_format.x+"x"+_format.y+"_"+permaLink);
                                                      		$("permaLink").value = document.location;
                                                      		_space.node.permaLink = "/spaceinvaders/"+permaLink;
                                                      	},
                                                      	toggle: function(e) { //On change le gros pixel (quand on clique dessus)
                                                      		if (_space.interval !== null) { return; }
                                                      
                                                      		var p = parseInt(e.target.title, 0);
                                                      		if (e.which == 1) {
                                                      			e.target.title = (p == 1) ? 0 : 1;
                                                      		} else {
                                                      			e.target.title = (p != 2) ? 2 : 1;
                                                      		}
                                                      
                                                      		_space.notifyLink();
                                                      	}
                                                      	//<----Fonction d'édition---->
                                                      };
                                                      
                                                      function $(id) {
                                                      	return document.getElementById(id);
                                                      }
                                                      
                                                      function $cssRules(selector) {
                                                      	var cssRules = $("style").sheet.cssRules;
                                                      	do {
                                                      		for (var i in cssRules) {
                                                      			if (cssRules[i].selectorText == selector) {
                                                      				return cssRules[i];
                                                      			}
                                                      		}
                                                      		$("style").sheet.insertRule(selector+" { }", 0);
                                                      	} while(1);
                                                      }
                                                      
                                                      function insertAfter(referenceNode, newNode) {
                                                      	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
                                                      }
                                                      
                                                      function remove(referenceNode) {
                                                          return referenceNode.parentNode.removeChild(referenceNode);
                                                      }
                                                      
                                                      function main() {
                                                      	//Definition variable
                                                      	_space.node = $("space");
                                                      	var match = document.location.pathname.match(/^\/spaceinvaders\/([0-9]{0,2})x([0-9]{0,2})_([0-9]*)$/);
                                                      	if (match !== null) {
                                                      		_format.x = match[1];
                                                      		_format.y = match[2];
                                                      		_space.permaLink = match[3];
                                                      
                                                      		var o = {x:null, y:null};
                                                      		for (var t in o) {
                                                      			_format[t] = parseInt(_format[t], 0);
                                                      			_format[t] = (5 < _format[t]) ? _format[t] : 5;
                                                      			_format[t] = (_format[t] < 32) ? _format[t] : 32;
                                                      		}
                                                      	}
                                                      
                                                      	//On prépare l'environnement
                                                      	var input = $("permaLink");
                                                      	input.onclick = function () {
                                                      			this.selectionStart=0;
                                                      			this.selectionEnd=this.value.length;
                                                      		};
                                                      	input.onkeydown = function () { return false; };
                                                      
                                                      	$("colorMode").onclick = _space.colorEvent;
                                                      	$("switch").onclick = _space.switchEvent;
                                                      
                                                      	var tab = {
                                                      		"format_x":_format.x,
                                                      		"format_y":_format.y
                                                      	}; /* On créer la fonction avant car : "Don't make function within a loop". */
                                                      	var funcchange = function () {
                                                      			this.value = parseInt(this.value, 0);
                                                      			this.value = (5 < this.value) ? this.value : 5;
                                                      			this.value = (this.value < 32) ? this.value : 32;
                                                      			_space.updateSize();
                                                      		},
                                                      		funckeydown = function () {
                                                      			return (_space.interval === null);
                                                      		};
                                                      
                                                      	for (var k in tab) {
                                                      		$(k).value = tab[k];
                                                      		$(k).onchange = funcchange;
                                                      		$(k).onkeydown = funckeydown;
                                                      	}
                                                      
                                                      	//Execution des fonctions mères
                                                      	_space.load();
                                                      }
                                                      
                                                      window.onload = main;




                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        26 avril 2013 à 10:12:30

                                                        Bonjour à tous,

                                                        Ma participation en powershell ...

                                                        Attention, le code pique les yeux, la seule roublardise dont je sois fier est de jouer sur un sleep / refresh pour éviter une boucle ...

                                                        Maj V2 : Deuxieme invader géré ... et ça va suffire :)

                                                        video ici :http://www.youtube.com/watch?feature=player_detailpage&v=4APQ7jipCc4

                                                        [reflection.assembly]::LoadWithPartialName( "System.Windows.Forms") |out-null
                                                        [reflection.assembly]::LoadWithPartialName( "System.Drawing")|out-null
                                                        $eyebrush = new-object Drawing.SolidBrush black
                                                        $form = New-Object Windows.Forms.Form
                                                        $form.WindowState="Maximized"
                                                        $form.size= New-Object System.Drawing.Size($form.width,$form.height) 
                                                        $formGraphics = $form.createGraphics()
                                                        $form.backcolor="white"
                                                        $size=((6,7),(8,11))
                                                        $si = ((0,0,1,0,1,0,0), (0,1,1,1,1,1,0), (0,1,2,1,2,1,0), (0,1,2,1,2,1,0), (1,1,1,1,1,1,1), (1,0,1,0,1,0,1)),((0,0,1,0,0,0,0,0,1,0,0),(0,0,0,1,0,0,0,1,0,0,0),(0,0,1,1,1,1,1,1,1,0,0),(0,1,1,2,1,1,1,2,1,1,0),(1,1,1,2,1,1,1,2,1,1,1),(1,0,1,1,1,1,1,1,1,0,1),(1,0,1,0,0,0,0,0,1,0,1),(0,0,0,1,1,0,1,1,0,0,0))
                                                        $eyes=(1,1,0,0),(1,0,0,1),(0,1,1,0),(0,0,1,1)
                                                        
                                                        	$form.add_paint({
                                                        	$currentinvader=(get-random -maximum 2)
                                                        	$currentbrush = new-object Drawing.SolidBrush $([System.Drawing.Color]::FromArgb((get-random -maximum 256),(get-random -maximum 256),(get-random -maximum 256)))
                                                        	$currenteyes = (get-random -maximum 4)
                                                        	$lenght=(get-random -maximum 40 ) +10
                                                        	$eyesindex=0
                                                        		$xmax=($form.width - ($size[$currentinvader][1] * $lenght))
                                                        		$ymax=($form.height - ($size[$currentinvader][0] * $lenght))
                                                        		if ($xmax -le 0){$xmax=0}
                                                        		if ($ymax -le 0){$ymax=0}
                                                        		$x= (get-random -maximum ($xmax))
                                                        		$y= (get-random -maximum ($ymax))
                                                        		for ($j=0;$j -lt $size[$currentinvader][0];$j++)
                                                        		{
                                                        			for ($i=0;$i -lt $size[$currentinvader][1];$i++)
                                                        			{ 
                                                        				if ($si[$currentinvader][$j][$i] -ne 0)
                                                        				{
                                                        					$xstart=$x
                                                        					$ystart=$y
                                                        					$xstart = $xstart + ($i * $lenght)
                                                        					$ystart = $ystart + ($j * $lenght)
                                                        					$rect = new-object Drawing.Rectangle $xstart,$ystart, $lenght,$lenght
                                                        					
                                                        					if ($si[$currentinvader][$j][$i] -eq 2)
                                                        					{ 
                                                        						if ($eyes[$currenteyes][$eyesindex] -eq 1){$formGraphics.FillRectangle($eyebrush, $rect)}
                                                        						$eyesindex ++;
                                                        					}
                                                        					else
                                                        					{
                                                        					$formGraphics.FillRectangle($currentbrush, $rect)
                                                        					}	
                                                        				}			
                                                        			}
                                                        		}
                                                        		start-sleep 1
                                                        		$form.refresh()
                                                        	})
                                                        $form.ShowDialog() |out-null 



                                                        Bon ben voila !

                                                        Très sympa cet atelier ... y en a qui aiment se faire mal, visiblement... pas vrai nico.pyright ? ;)

                                                        -
                                                        Edité par sensei.dje 26 avril 2013 à 10:50:12

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                        uses crt;
                                                          26 avril 2013 à 11:12:55

                                                          Comme ça manquait de stats par ici, j'ai fait ça en R, sans autres motivations :)

                                                          Code :

                                                          N <- 50;
                                                          AreaR <- 25;
                                                          png(file="SI%03d.png", width=800,height=600,units="px");
                                                          for (mySI in 1:N)
                                                          {	
                                                          	SIlocX <- runif(1,-AreaR,AreaR-7); SIlocY <- runif(1,-AreaR,AreaR-7);
                                                          	SIcol <- sample(1:length(colours()),1);
                                                          	SIcol <- paste(colours()[SIcol], sep="");
                                                          	symbols(x=c(SIlocX,rep(SIlocX,3)+c(2,4,6),seq(from=SIlocX,to=SIlocX+6,by=1),rep(rep(SIlocX,3)+c(1,3,5),2),seq(from=SIlocX+1,to=SIlocX+5,by=1),rep(SIlocX,2)+c(2,4)),y=c(SIlocY,rep(SIlocY,3),rep(SIlocY+1,7),rep(SIlocY+2, 3),rep(SIlocY+3,3),rep(SIlocY+4,5),rep(SIlocY+5,2)),squares=rep(0.8, 24),inches=FALSE,fg=SIcol,bg=SIcol,asp=1,xlim=c(-AreaR,AreaR),ylim=c(-AreaR,AreaR),xaxt="n",yaxt="n",xlab="",ylab="");
                                                          	Yeyes <- ifelse(runif(1,0,1)<0.5,SIlocY+2,SIlocY+3);
                                                          	symbols(x=rep(SIlocX,2)+c(2,4),y=rep(Yeyes,2),square=rep(0.8,2),inches=FALSE, fg="black",bg="black",add=TRUE); 
                                                          }
                                                          dev.off();
                                                          system("convert -delay 80 *.png SI.gif");file.remove(list.files(pattern=".png"));
                                                          

                                                          Résultat : 

                                                          Space Invaders R

                                                          -
                                                          Edité par ADNdeBanane 26 avril 2013 à 11:18:41

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                          Anonyme
                                                            26 avril 2013 à 11:33:22

                                                            Niko300b a écrit:

                                                             C'est une très bonne initiative d'atelier Mateo21, j'y participe car ça ne demande pas trop de temps à être réalisé et le résultat est sympa.

                                                            Rajoute toi des difficultés alors. ;) Tu pourrais largement optimiser le code HTML (en le chargeant dynamiquement avec du JS).

                                                            • Partager sur Facebook
                                                            • Partager sur Twitter
                                                              26 avril 2013 à 11:36:33

                                                              Bonjour,

                                                              Voici ma participation en canvas HTML5 avec KineticJs.

                                                              Tout d'abord, le code :

                                                              <script>
                                                              function supportsCanvas(){return !!document.createElement('canvas').getContext;}
                                                              if(supportsCanvas()){
                                                                  // Vars
                                                                  var timer=setInterval("drawSpace()", 2000);
                                                                  var sW=document.body.clientWidth;
                                                                  var sH=document.body.clientHeight;
                                                                  var _tW=50;
                                                                  var _tH=50;
                                                                  
                                                                  // Stage
                                                                  var stage = new Kinetic.Stage({container: 'container',width:sW,height:sH});
                                                                  var layer=new Kinetic.Layer();
                                                                  
                                                                  // Draw Rect
                                                                  function drawRect(obj,_px,_py,_col){
                                                                      obj=new Kinetic.Rect({x:_px,y:_py,width:_tW,height:_tH,fill:_col,stroke:"#fff",strokeWidth:4})
                                                                      layer.add(obj);
                                                                  }
                                                                      
                                                                  // Draw SpaceInvaders
                                                                  function drawSpace(){
                                                                      // Init
                                                                      layer.remove();
                                                                      layer=new Kinetic.Layer();
                                                                      
                                                                      var t=new Array(new Array([0,0,1,0,1,0,0],[0,1,1,1,1,1,0],[0,1,2,1,4,1,0],[0,1,3,1,5,1,0],[1,1,1,1,1,1,1],[1,0,1,0,1,0,1]),
                                                              new Array([0,0,0,1,1,0,0,0],[0,0,1,1,1,1,0,0],[0,1,2,1,1,4,1,0],[1,1,3,1,1,5,1,1],[1,1,1,1,1,1,1,1],[0,0,1,0,0,1,0,0],[0,1,0,1,1,0,1,0],[1,0,1,0,0,1,0,1]),
                                                              new Array([0,0,0,1,1,0,0,0],[0,0,1,1,1,1,0,0],[0,1,2,1,1,4,1,0],[1,1,3,1,1,5,1,1],[1,1,1,1,1,1,1,1],[0,1,0,1,1,0,1,0],[1,0,0,0,0,0,0,1],[0,1,0,0,0,0,1,0]),
                                                              new Array([0,0,1,0,0,0,0,0,1,0,0],[0,0,0,1,0,0,0,1,0,0,0],[0,0,1,1,1,1,1,1,1,0,0],[0,1,1,2,1,1,1,4,1,1,0],[1,1,1,3,1,1,1,5,1,1,1],[1,0,1,1,1,1,1,1,1,0,1],[1,0,1,0,0,0,0,0,1,0,1],[0,0,0,1,1,0,1,1,0,0,0]),
                                                              new Array([0,0,0,0,1,1,1,1,0,0,0,0],[0,1,1,1,1,1,1,1,1,1,1,0],[1,1,1,1,1,1,1,1,1,1,1,1],[1,1,1,2,3,1,1,4,5,1,1,1],[1,1,1,1,1,1,1,1,1,1,1,1],[0,0,0,1,1,0,0,1,1,0,0,0],[0,0,1,1,0,1,1,0,1,1,0,0],[1,1,0,0,0,0,0,0,0,0,1,1]),
                                                              new Array([0,0,0,1,1,0,0,0],[0,0,1,1,1,1,0,0],[0,1,1,1,1,1,1,0],[1,2,3,1,1,4,5,1],[1,1,1,1,1,1,1,1],[0,0,1,0,0,1,0,0],[0,1,0,1,1,0,1,0],[1,0,1,0,0,1,0,1]),
                                                              new Array([0,1,0,0,1,0,0,1,0,1,1,1,0,1,0,1,0,0,1,0],[1,0,1,0,1,1,0,1,0,0,1,0,0,1,0,1,0,1,0,1],[1,1,1,0,1,0,1,1,0,0,1,0,0,1,1,1,0,1,0,1],[1,0,1,0,1,0,0,1,0,0,1,0,0,1,0,1,0,0,1,0]),
                                                              new Array([0,1,1,0,0,1,1,0],[1,0,0,1,0,0,0,1],[1,0,0,1,0,0,0,1],[0,1,1,0,0,1,1,0],[1,0,0,1,0,0,0,1],[1,0,0,1,0,0,0,1],[0,1,1,0,0,1,1,0])
                                                              ); var rect=new Array(); var _color="#"+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6); var _pX=0,_pY=0,nbRect=0; var lEye=Math.ceil(Math.random()*2+1); var rEye=Math.ceil(Math.random()*2+3); var form=Math.floor(Math.random()*(t.length)); var margX=Math.random()*sW-(t[form][0].length*_tW); var margY=Math.random()*sH-(t[form].length*_tH); if(margX<0){margX+=-margX;} if(margY<0){margY+=-margY;} // For for(var j=0;j<t[form].length;j++){ for(var i=0;i<t[form][j].length;i++){ _pX=(i*_tW)+margX; _pY=(j*_tH)+margY; switch(t[form][j][i]){ case 1:drawRect(rect[nbRect],_pX,_pY,_color);break; case lEye:drawRect(rect[nbRect],_pX,_pY,"#000");break; case rEye:drawRect(rect[nbRect],_pX,_pY,"#000");break; } nbRect++; } } stage.add(layer); } drawSpace(); }else{alert("Votre navigateur ne supporte pas canvas. ;o");} </script>


                                                              Et le résultat en live ici.

                                                              -
                                                              Edité par MADEiN83 26 avril 2013 à 11:55:30

                                                              • Partager sur Facebook
                                                              • Partager sur Twitter

                                                              [Atelier] Fond animé Space Invaders

                                                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                              • Editeur
                                                              • Markdown