Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Atelier] Fond animé Space Invaders

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

    Admin 23 avril 2013 à 14:42:25

    Bonjour tout le monde !

    Adrien, un ami entrepreneur, m'a montré récemment un petit projet qu'il a fait sur sa machine. Il a créé un fond d'écran animé Space Invaders (probablement à un moment d'ennui entre midi et deux :p ). Ce projet est visible à l'adresse suivante : http://www.space-bitton.com/

    Space Invaders

    Les petits space invaders bougent sur la page web aléatoirement, avec une position des yeux et une couleur aléatoires. Adrien a fait ça avec les outils qu'il avait sous la main (HTML, CSS, un serveur PHP). Regardez le code de la page pour voir comment il a fait.

    On s'est dit qu'il y avait beaucoup de façons différentes de faire ce space invaders et on vous propose justement un petit défi sous forme d'atelier sur ce forum. Les règles sont simples :

    • Il faut reproduire le fond animé space invaders présent sur http://www.space-bitton.com/
    • Les langages utilisés sont totalement libres
    • Ce défi durera 3 semaines, du 23 avril 2013 au 14 mai 2013 inclus. Durant ce temps, tout le monde est invité à présenter sa création dans ce topic et à aider les autres

    A la fin, Adrien et moi ferons un petit compte-rendu des projets qui ont été créés à l'initiative de cet atelier. Nous en sélectionnerons en particulier 3 selon les critères suivants :

    • Code le plus concis (le moins d'octets possible)
    • Code le plus inutilement compliqué
    • Code le plus étonnant

    L'atelier est ouvert à tout le monde, débutants comme plus expérimentés. N'oubliez pas que le but est simplement de s'amuser, il n'y a pas d'enjeu particulier. ;)

    Bon courage à tous ! :)


    Gagnants

    Le jury (à savoir Adrien et moi :D ) a délibéré ! Nous avons été très agréablement surpris de l'intérêt porté à cet atelier, il y a eu plus de participations que nous ne pouvions rêver ! Du coup, les délibérations ont été longues mais il faut dire que vous avez fait preuve d'une créativité extraordinaire ! Nous tenons donc vraiment à féliciter tout le monde. :)

    Sans plus attendre, notre verdict !

    Catégorie "Code le plus étonnant"

    Un grand bravo à Eskimon qui nous a tous vraiment surpris en choisissant la voie... électronique pour réaliser le space invaders ! Son projet Arduino est sans conteste le plus inattendu et le plus étonnant !

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

    Arduino Space Invaders by Eskimon

    Vidéo

    </p>

    Catégorie "Code le plus inutilement compliqué"

    C'est une catégorie qui ne manquait pas de prétendants ! Nous avons eu du mal à choisir, mais nous nous inclinons devant la solution exotique en silverlight bien cossue de nico.pyright !

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

    Catégorie "Code le plus concis"

    Beaucoup de prétendants ici. Il était très difficile de compter les caractères pour donner un gagnant "juste" (ça dépend pas mal du langage), donc nous en avons sélectionné un très bon réalisé par geex :

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

    Une mention spéciale (prix de l'originalité !) à spacefox qui a brillamment triché avec sa solution à base de wget ! http://www.siteduzero.com/forum/sujet/atelier-fond-anime-space-invaders?page=4#message-84285826

    Coups de coeur

    Il y a eu tellement de bonnes idées que nous ne résistons pas à vous livrer une petite sélection de nos autres préférés !

    Dans la catégorie "code artistique", coup de coeur pour blackfart : http://www.siteduzero.com/forum/sujet/atelier-fond-anime-space-invaders?page=5#message-84289923 Et pour naim42 : http://www.siteduzero.com/forum/sujet/atelier-fond-anime-space-invaders?page=7#message-84294364

    Dans la catégorie "multi devices", la solution de alphadelta a bien la classe ! http://www.siteduzero.com/forum/sujet/atelier-fond-anime-space-invaders?page=2

    Dans la catégorie "années lycée", la version calculatrice TI de mogolecho mérite le détour ! http://www.siteduzero.com/forum/sujet/atelier-fond-anime-space-invaders?page=3

    Dans la catégorie "ça te décroche la machoire", un grand bravo à Nohar qui nous l'a fait en Python qui génère des GIFs animés à la main sans libs ! http://www.siteduzero.com/forum/sujet/atelier-fond-anime-space-invaders?page=2#message-84272190

    Bravo à tous pour vos participations, et du coup : rendez-vous au prochain atelier !


    Liste (très incomplète) des participations

    Pseudo Langage Lien
    Thunderseb Javascript Lien
    Sandhose Javascript Lien
    sadiquo Javascript Lien
    Alexi's PHP Lien
    kristofjé Python Lien
    Bloodangan C Lien
    Rannios Javascript Lien
    simbilou C Lien
    Lucas-84 C Lien
    papinpierre C Lien
    Szczork HTML/CSS Lien
    nohar Python Lien
    nico.pyright Java (+GWT) Lien
    Niko300b Javascript Lien
    lethom Go Lien
    STuFF Javascript Lien

    -
    Edité par Mateo21 27 mai 2013 à 18:01:12

    • Partager sur Facebook
    • Partager sur Twitter

    If you'd like to join us, read "How do we work at OpenClassrooms"! :)

      23 avril 2013 à 15:17:17

      Bonjour,

      Tout d'abord merci pour ce défi qui, j'en suis sûr, sera suivi par pas mal de monde, mais avant de commencer à coder, j'ai une petite question:
      Dans le cas où l'un des participants utiliserait un lib externe (par exemple, dans mon cas, KineticJS), son poids compterait-elle dans le nombre d'octet pour le challenge du code le plus concis?

      Merci d'avance :)

      -
      Edité par Bibou34 23 avril 2013 à 15:18:06

      • Partager sur Facebook
      • Partager sur Twitter
        Admin 23 avril 2013 à 15:18:26

        Oui, mais ne vous prenez pas trop la tête là-dessus le but est de s'amuser, y'a pas de voyage autour du monde à gagner non plus. ;)

        • Partager sur Facebook
        • Partager sur Twitter

        If you'd like to join us, read "How do we work at OpenClassrooms"! :)

          Team Tech 23 avril 2013 à 15:20:36

          mince, j'abandonne de suite alors, s'il n'y a pas de voyage autours du monde :)
          • Partager sur Facebook
          • Partager sur Twitter
          N'utilisez JAMAIS alert() pour debugger. Utilisez console.log()
            23 avril 2013 à 15:20:51

            Je me tate à le faire en cobol avec des mouffles ^^
            • Partager sur Facebook
            • Partager sur Twitter
              23 avril 2013 à 15:30:10

              Yeah,

              Moi je vais faire le code le plus compliqué et inutile qui soit!

              ++

              • Partager sur Facebook
              • Partager sur Twitter
              Dans le Mouton, tout est bon!
                23 avril 2013 à 15:50:53

                Je trouve que c'est une très bonne idée de lancer ce genre de concours, comme ça tout le monde pourra participer et exploiter ces compétences et les renforcer.

                Donc voila je décide de participé et de réaliser un font animé avec toutes mes outils que je connais afin de produire le meilleur font dans le délai le plus rapide :)

                Enfin je tiens a remercié  toute l'équipe du SDZ et surtout Mateo21 et je vous dis soyez nombreux a participer et que le meilleur gagne :)

                -
                Edité par bisof00 23 avril 2013 à 15:51:34

                • Partager sur Facebook
                • Partager sur Twitter
                  23 avril 2013 à 16:28:35

                  L'idée du concours est sympa, j'aimerai juste savoir si le code doit être valide w3c (pour le plus concis, c'est important à savoir ^^)
                  • Partager sur Facebook
                  • Partager sur Twitter
                    Admin 23 avril 2013 à 16:38:56

                    Pas nécessairement. Si tu le fais en Python pour générer des GIFs animés sans utiliser la lib standard (j'en ai entendu me dire qu'ils pensaient faire ça !), bah la validité w3c est hors sujet. :-°

                    • Partager sur Facebook
                    • Partager sur Twitter

                    If you'd like to join us, read "How do we work at OpenClassrooms"! :)

                      23 avril 2013 à 16:53:44

                      Je le fais en html/Js, je me demande donc si je dois le rendre valide ou non, au pire j'envoie une version ultra-concise non valide, et une valide ^^
                      • Partager sur Facebook
                      • Partager sur Twitter
                        Admin 23 avril 2013 à 17:00:51

                        Voilà dans le doute fais les deux :-°

                        Tu peux aussi en faire une version avec un design basé sur les tableaux pour faire vintage !

                        • Partager sur Facebook
                        • Partager sur Twitter

                        If you'd like to join us, read "How do we work at OpenClassrooms"! :)

                          23 avril 2013 à 18:02:12

                          Javascript et Canvas

                          Voici ma première version, en HTML + Javascript et exploitant Canvas (sans librairie...) : http://nayi.free.fr/invaders.htm

                          Au niveau de la technique, je dessine l'Invader sur base d'un tableau à deux dimensions. Je le redessine toutes les 3 secondes, et je le change de place. A mon avis, on peut difficilement faire plus simple.

                          La couleur est choisie aléatoirement, de même que la position.

                          -
                          Edité par Thunderseb 23 avril 2013 à 18:02:42

                          • Partager sur Facebook
                          • Partager sur Twitter
                          Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
                            23 avril 2013 à 18:02:53

                            Sympathique cet atelier ;)

                            Après 2044 octets de JS (1329 en minimifié), j'y suis arrivé! :)

                            Le lien vers le code: spaceBitton.js (Minimifié)

                            C'est possible de l'utiliser comme Bookmarklet, pour pouvoir l'utiliser sur n'importe quelle page, suffit de glisser le lien se trouvant sur cette page ;)

                            Sandhose

                            • Partager sur Facebook
                            • Partager sur Twitter
                            Interdiction de lire cette signature | OCr Notificateur | Retrouvez moi sur Zeste de Savoir !
                              23 avril 2013 à 18:13:07

                              Pour rester dans le javascript/canvas: *lien cassé, prendre une machine à voyager dans le temps pour le voir* (CTRL + U pour voir le code)

                              Je me base sur une chaine de caractère pour dessiner toutes les 3 secondes le personnage ;)

                              -
                              Edité par sadiquo 19 mars 2014 à 18:09:07

                              • Partager sur Facebook
                              • Partager sur Twitter
                              Anonyme
                                23 avril 2013 à 18:28:01

                                Le code doit-il être posté ici, ou être envoyé en MP ?

                                Edit : Ok, je sais pas lire, je poste le mien juste en dessous :)

                                -
                                Edité par Anonyme 23 avril 2013 à 19:29:25

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  23 avril 2013 à 18:33:09

                                  Alexis's a écrit:

                                  Le code doit-il être posté ici, ou être envoyé en MP ?

                                  Je pense qu'ici est le mieux :) Le but est de montrer nos oeuvres. Donc autant le faire dans ce sujet...

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  Anonyme
                                    23 avril 2013 à 19:13:57

                                    Voici mon invader, tout en php :

                                    http://ptitworldwarien.fr/invaders/

                                    "mignifier" il fait 1,29ko.

                                    Voilà le code complet :

                                    <!DOCTYPE html>
                                    <html lang="fr">
                                    	<head>
                                    		<meta name="author" content="Alexis's">
                                    		<title>Invaders - SDZ</title>
                                    		<meta http-equiv="refresh" content="3;URL=http://ptitworldwarien.fr/invaders/">
                                    		<style>
                                    			#container { position:relative; top:<?php echo rand(0,400); ?>px; left:<?php echo rand(0,1024); ?>px; height:321px; width:371px }
                                    			.item { position:absolute; margin-bottom:3px; margin-left:3px; height:50px; width:50px }
                                    			.w { background-color:white }
                                    			.b { background-color:black }
                                    			.c { background-color:#<?php echo str_pad(dechex(mt_rand(0, 16000000)),6,'0'); ?> }
                                    			<?php
                                    				$p = array(1 => 0, 2 => 53, 3 => 106, 4 => 159, 5 => 212, 6 => 265, 7 => 318);
                                    				for($i = 1; $i <= 6; $i++) { echo '.y'.$i.'{ top:'.$p[$i].'px; }'; }
                                    				for($i = 1; $i <= 7; $i++) { echo '.x'.$i.'{ left:'.$p[$i].'px; }'; }
                                    			?>
                                    		</style>
                                    	</head>
                                    	<body>
                                    		<div id="container">
                                    			<?php
                                    				function bOw($rand){if($rand){return 'b';}else{return 'w';}}
                                    				function inversebOw($rand){if($rand){return 'w';}else{return 'b';}}
                                    				$rand1 = rand(0,1);
                                    				$rand2 = rand(0,1);
                                    				$c = array(11 => 'w', 12 => 'w', 13 => 'c', 14 => 'w', 15 => 'c', 16 => 'w', 17 => 'w', 21 => 'w', 22 => 'c', 23 => 'c', 24 => 'c', 25 => 'c', 26 => 'c', 27 => 'w', 31 => 'w', 32 => 'c', 33 => bOw($rand1), 34 => 'c', 35 => bOw($rand2), 36 => 'c', 37 => 'w', 41 => 'w', 42 => 'c', 43 => inversebOw($rand1), 44 => 'c', 45 => inversebOw($rand2), 46 => 'c', 47 => 'w', 51 => 'c', 52 => 'c', 53 => 'c', 54 => 'c', 55 => 'c', 56 => 'c', 57 => 'c', 61 => 'c', 62 => 'w', 63 => 'c', 64 => 'w', 65 => 'c', 66 => 'w', 67 => 'c');
                                    				for($i = 1; $i <= 6; $i++)
                                    				{
                                    					for($j = 1; $j <= 7; $j++)
                                    					{
                                    						echo '<div class="'.$c[$i.$j].' y'.$i.' x'.$j.' item"></div>';
                                    					}
                                    				}
                                    			?>
                                    		</div>
                                    	</body>
                                    </html>

                                    le voici mignifier

                                    <html><head><meta http-equiv="refresh"content="3;URL=http://ptitworldwarien.fr/invaders/"><style>#container{position:relative;top:<?php echo rand(0,400);?>px;left:<?php echo rand(0,1024);?>px;height:321px;width:371px}.item{position:absolute;margin-bottom:3px;margin-left:3px;height:50px;width:50px}.w{background-color:white}.b{background-color:black}.c{background-color:#<?php echo str_pad(dechex(mt_rand(0, 16000000)),6,'0');?>}<?php $p=array(1=>0,2=>53,3=>106,4=>159,5=>212,6=>265,7=>318);for($i=1;$i<=6;$i++){echo'.y'.$i.'{top:'.$p[$i].'px;}';}for($i=1;$i<=7;$i++){echo'.x'.$i.'{left:'.$p[$i].'px;}';}?></style></head><body><div id="container"><?php function bOw($rand){if($rand){return'b';}else{return'w';}}function inversebOw($rand){if($rand){return'w';}else{return'b';}}$rand1=rand(0,1);$rand2=rand(0,1);$c=array(11=>'w',12=>'w',13=>'c',14=>'w',15=>'c',16=>'w',17=>'w',21=>'w',22=>'c',23=>'c',24=>'c',25=>'c',26=>'c',27=>'w',31=>'w',32=>'c',33=>bOw($rand1),34=>'c',35=>bOw($rand2),36=>'c',37=>'w',41=>'w',42=>'c',43=>inversebOw($rand1),44=>'c',45=>inversebOw($rand2),46=>'c',47=>'w',51=>'c',52=>'c',53=>'c',54=>'c',55=>'c',56=>'c',57=>'c',61=>'c',62=>'w',63=>'c',64=>'w',65=>'c',66=>'w',67=>'c');for($i=1;$i<=6;$i++){for($j=1;$j<=7;$j++){echo'<div class="'.$c[$i.$j].' y'.$i.' x'.$j.' item"></div>';}}?></div></body></html>




                                    -
                                    Edité par Anonyme 23 avril 2013 à 19:15:05

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      23 avril 2013 à 19:17:07

                                      Python avec lib standard uniquement

                                      J'avais un peu de temps à tuer (ou plutôt la flemme de bosser), donc en attendant la version GIF animé de mon collegue, voici une autre version en Python utilisant uniquement la lib standard.

                                      Au niveau technique

                                      J'ai rusé, chaque pixel est en fait une fenetre (tkinter) sans bordure qui va se déplacer aléatoirement. Donc si vous le lancé chez vous, ça va créer un certain nombre de fenetre qui vont se déplacer et changer de couleurs. J'utilise un tableau 2D, tout comme Thunderseb mais legerement plus "souple" (au vu de son code que j'ai lu rapidement). En particulier, à chaque mise à jour, les yeux se "déplacent" (eventuellement, ils peuvent rester fixe) dans l'une des cases libres autour. Il peut y en avoir autant qu'on veut.

                                      Le code brut ci-dessous reproduit la page donné en exemple. En decommentant les lignes 21 à 30 vous rajoutez en plus un deuxième space-invader qui va se déplacer plus souvent (1sec pour la MAJ), d'une forme différente avec des yeux plus gros.

                                      Le code

                                      Bon par contre le code est crade et vite fait, je pense que je le modifierai plus tard, c'est qu'une première ebauche. Mais si vous vous voulez vous en servir comme base, allez y :D

                                      NB : Sur certaines distrib il peut être necessaire de remplacer la première ligne par #!/usr/bin/env python3

                                      #!/usr/bin/env python
                                      #-*- coding:utf-8 -*-
                                      
                                      import tkinter as tk
                                      import random
                                      from threading import Timer
                                      
                                      class App(tk.Tk):
                                          def __init__(self):
                                              tk.Tk.__init__(self)
                                              self.withdraw()
                                              patt = (
                                              		(0,0,1,0,1,0,0),
                                              		(0,1,1,1,1,1,0),
                                              		(0,1,0,1,0,1,0),
                                              		(0,1,8,1,8,1,0),
                                              		(1,1,1,1,1,1,1),
                                              		(1,0,1,0,1,0,1))
                                              self.si = SpaceInvader(self, patt, 50, 5, 3)
                                              
                                              #patt2 = (
                                              #		(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,8,0,1,0,8,1,1,0),
                                              #		(1,1,1,0,0,1,0,0,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))
                                              #self.si2 = SpaceInvader(self, patt2, 25, 2, 1)
                                              
                                              
                                      class SpaceInvader:
                                      	def __init__(self, root, patern, size, margin, intMAJ):
                                      		self.intMAJ = intMAJ
                                      		self.margin = margin
                                      		
                                      		self.fw = []
                                      
                                      		for l in range(len(patern)):
                                      			NL=[]
                                      			for c in range(len(patern[0])):
                                      				fp = None
                                      				if patern[l][c] is not 0:
                                      					fp = FloatingPixel(c,l,size,margin,root)
                                      					fp.dep = patern[l][c] is 8
                                      				NL.append(fp)
                                      			self.fw.append(NL)
                                      
                                      		self.DepPosX = root.winfo_screenwidth()-(len(patern)*size+(len(patern)+1)*margin)
                                      		self.DepPosY = root.winfo_screenheight()-(len(patern[0])*size+(len(patern[0])+1)*margin)
                                      
                                      		self.updateApp()
                                      	
                                      	def updateApp(self):
                                      		depX = random.randint(0,self.DepPosX)
                                      		depY = random.randint(0,self.DepPosY)
                                      
                                      		col='#{:02x}{:02x}{:02x}'.format(*[random.randrange(0, 255) for i in range(3)])
                                      		ldep = []
                                      		for l in range(len(self.fw)):
                                      			for c in range(len(self.fw[0])):
                                      				if self.fw[l][c] is not None:
                                      					if not self.fw[l][c].dep:
                                      						self.fw[l][c].Updateconf(depX,depY,col )
                                      					else:
                                      						ldep.append((l,c,self.fw[l][c]))
                                      
                                      		for ol,oc,fwt in ldep:
                                      			lposPoss = []
                                      			for ii in range(max(0,ol-1),min(len(self.fw),ol+2)):
                                      				for jj in range(max(0,oc-1),min(len(self.fw[0]),oc+2)):
                                      					if self.fw[ii][jj] is None or self.fw[ii][jj] is fwt:
                                      						lposPoss.append((ii,jj))
                                      			nl,nc = lposPoss[random.randint(0,len(lposPoss)-1)]
                                      			
                                      			self.fw[ol][oc],self.fw[nl][nc]=self.fw[nl][nc],self.fw[ol][oc]
                                      			fwt.yy = nl
                                      			fwt.xx = nc
                                      			fwt.Updateconf(depX,depY,'#000000')
                                      		self.ttimer = Timer(self.intMAJ, self.updateApp)
                                      		self.ttimer.start()
                                      					
                                      class FloatingPixel(tk.Toplevel):
                                      	def __init__(self,xx,yy,ss,margin, *args, **kwargs):
                                      		tk.Toplevel.__init__(self, *args, **kwargs)
                                      		self.overrideredirect(True)
                                      		self.xx=xx
                                      		self.yy=yy
                                      		self.ss=ss
                                      		self.margin=margin
                                      		self.dep = False
                                      
                                      		self.Updateconf(0,0,'#FFFFFF')
                                          
                                      
                                      	def Updateconf(self,depX,depY,col):
                                      		self.depX=depX
                                      		self.depY=depY
                                      		self.col = col
                                      		self.geometry("%dx%d%+d%+d" % (self.ss, self.ss, self.xx*(self.ss+self.margin) + self.depX, self.yy*(self.ss+self.margin)+self.depY))
                                      		self.configure(background=self.col)
                                      
                                      
                                      app=App()
                                      app.mainloop()

                                      Bonus : A noter que si vous trouvez mes tableaux 2D pas tres lisibles, vous pouvez utiliser cette classe pour générer les paterne. Perso je trouve ça plus joli ainsi :) (je vous ai reproduit les 2 exemple de l'autre code)

                                      class sic(object):
                                      	def __init__(self,base=None):
                                      		self.base= ([] if base is None else base)
                                      	def __getattr__(self, key):
                                      		self.base.append(tuple([ (0 if c is '_' else ( 1 if c is 'X' else 8 )) for c in key ]))
                                      		return sic(self.base)
                                      	def __call__(self):
                                      		return self.base
                                      	
                                      
                                      patt =sic().__X_X__.\
                                      			_XXXXX_.\
                                      			_XoXoX_.\
                                      			_X_X_X_.\
                                      			XXXXXXX.\
                                      			X_X_X_X()
                                      			
                                      
                                      patt2=sic().__X_____X__.\
                                      			___X___X___.\
                                      			__XXXXXXX__.\
                                      			_XXo_X_oXX_.\
                                      			XXX__X__XXX.\
                                      			X_XXXXXXX_X.\
                                      			X_X_____X_X.\
                                      			___XX_XX___()
                                      

                                      Bonus 2 Une autre version en jouant avec Unicode cette fois, toujours pour générer les patterns.

                                      def sic2(ss):
                                      	return tuple([tuple([ (0 if c == '░' else ( 1 if c == '█' else 8 )) for c in l ]) for l in ss.split('\n') if len(l) > 0])
                                      
                                      patt=sic2("""
                                      ░░█░█░░
                                      ░█████░
                                      ░█◉█◉█░
                                      ░█░█░█░
                                      ███████
                                      █░█░█░█
                                      """)
                                      
                                      patt2=sic2("""
                                      ░░█░░░░░█░░
                                      ░░░█░░░█░░░
                                      ░░███████░░
                                      ░██◉░█░◉██░
                                      ███░░█░░███
                                      █░███████░█
                                      █░█░░░░░█░█
                                      ░░░██░██░░░
                                      """)

                                      PS: A noter que meme si tkinter fait bien partit de la lib standard, tk n'est pas forcément installé. j'ai du l'installer chez moi (pour arch un pacman -S tk suffit)

                                      -
                                      Edité par Dr. kristofjé 23 avril 2013 à 20:56:06

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                      Anonyme
                                        23 avril 2013 à 19:20:52

                                        Voilà une version en C utilisant la SDL :

                                        #include <stdio.h>
                                        #include <stdlib.h>
                                        #include <time.h>
                                        #include <SDL/SDL.h>
                                        
                                        #define WIDTH 540
                                        #define HEIGHT 384
                                        
                                        #define CUBE_LEN 32
                                        #define NB_CUBE_WIDTH 7
                                        #define NB_CUBE_HEIGHT 6
                                        #define SPACE 1
                                        
                                        #define SECONDE 2
                                        
                                        #define RAND(x) (rand() % (x + 1))
                                        
                                        int invader[NB_CUBE_HEIGHT][NB_CUBE_WIDTH] = {{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}};
                                        
                                        
                                        SDL_Surface* CreateWindow(const char* title, int width, int height);
                                        void Event(void);
                                        Uint32 BlitInvader(Uint32 ms, void* param);
                                        
                                        int main(void)
                                        {
                                            SDL_Surface *window;
                                            SDL_TimerID timer;
                                        
                                            if(SDL_Init(SDL_INIT_VIDEO | SDL_INIT_TIMER) == -1)
                                            {
                                                printf("Erreur : %s", SDL_GetError());
                                                exit(1);
                                            }
                                        
                                            atexit(SDL_Quit);
                                        
                                            window = CreateWindow("Space invaders", WIDTH, HEIGHT);
                                        
                                            srand(time(NULL));
                                        
                                            timer = SDL_AddTimer(SECONDE * 1000, BlitInvader, window);
                                        
                                            BlitInvader(SECONDE * 1000, window);
                                            Event();
                                        
                                            SDL_RemoveTimer(timer);
                                            return 0;
                                        }
                                        
                                        SDL_Surface* CreateWindow(const char* title, int width, int height)
                                        {
                                            SDL_Surface *window;
                                        
                                            window = SDL_SetVideoMode(width, height, 32, SDL_HWSURFACE | SDL_DOUBLEBUF);
                                            if(window == NULL)
                                            {
                                                printf("Erreur : %s", SDL_GetError());
                                                exit(1);
                                            }
                                        
                                            SDL_WM_SetCaption(title, NULL);
                                        
                                            return window;
                                        }
                                        
                                        void Event(void)
                                        {
                                            SDL_Event event;
                                            int quit = 0;
                                        
                                            while(!quit)
                                            {
                                                SDL_WaitEvent(&event);
                                                switch(event.type)
                                                {
                                                    case SDL_QUIT:
                                                        quit = 1;
                                                        break;
                                        
                                                    case SDL_KEYDOWN:
                                                        if(event.key.keysym.sym == SDLK_ESCAPE)
                                                        {
                                                            quit = 1;
                                                        }
                                                        break;
                                                }
                                            }
                                        }
                                        
                                        Uint32 BlitInvader(Uint32 ms, void* param)
                                        {
                                            SDL_Rect cube;
                                            Uint32 color;
                                            int i, j, x, y;
                                            SDL_Surface *window = param;
                                        
                                            SDL_FillRect(window, NULL, SDL_MapRGB(window->format, 0xFF, 0xFF, 0xFF));
                                        
                                            cube.w = CUBE_LEN;
                                            cube.h = CUBE_LEN;
                                            x = RAND(window->w - (NB_CUBE_WIDTH * CUBE_LEN + (NB_CUBE_WIDTH - SPACE)));
                                            y = RAND(window->h - (NB_CUBE_HEIGHT * CUBE_LEN + (NB_CUBE_HEIGHT - SPACE)));
                                            cube.x = x;
                                            cube.y = y;
                                        
                                            color = SDL_MapRGB(window->format, RAND(255), RAND(255), RAND(255));
                                        
                                            for(j = 0; j < NB_CUBE_HEIGHT; j++)
                                            {
                                                for(i = 0; i < NB_CUBE_WIDTH; i++)
                                                {
                                                    if(invader[j][i])
                                                    {
                                                        SDL_FillRect(window, &cube, color);
                                                    }
                                                    cube.x += cube.w + SPACE; 
                                                }
                                                cube.x = x;
                                                cube.y += cube.h + SPACE;
                                            }
                                        
                                            cube.x = x + 2 * (cube.w + SPACE);
                                        
                                            for(i = 0; i < 2; i++)
                                            {
                                                cube.y = y + (2 + RAND(1)) * (cube.h + SPACE);
                                                SDL_FillRect(window, &cube, SDL_MapRGB(window->format, 0x00, 0x00, 0x00));
                                                cube.x += 2 * (cube.w + SPACE);
                                            }
                                        
                                            SDL_Flip(window);
                                        
                                            return ms;
                                        }

                                        EDIT : Modification du code, utilisation des timers.

                                        -
                                        Edité par Anonyme 24 juillet 2020 à 14:27:02

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          23 avril 2013 à 19:26:00

                                          Alexis's a écrit:

                                          Voici mon invader, tout en php :

                                          C'est dommage que la page soit obligée de se recharger, ce qui fait que ce n'est pas vraiment un "background". Tu devrais modifier pur ajouter un peu d'AJAX, qui réactualiserait l'invader sans recharger complètement la page.

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                          Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
                                          Anonyme
                                            23 avril 2013 à 19:34:20

                                            L'original profitant du refresh du page, et m'étant donné comme idée de ne le faire qu'en PHP, j'pensais pas ça génant.

                                            J'essai de faire plus "léger" en y intégrant l'ajax, c'est pas dit :hap:

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

                                              Je sais, mais je disais juste ça pour le "challenge" :p

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                              Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
                                                23 avril 2013 à 20:08:10

                                                Voici ma version que j'ai essayé de réduire au maximum ... désolé c'est un peu illisible ! :p

                                                Le script est actif ici : http://rannios.free.fr/spaceInvader.html

                                                <script type="text/javascript">// 
                                                function a()
                                                {
                                                (t=(c=(d=document).querySelector("canvas")).getContext("2d")).clearRect(0,0,x=c.width=(B=d.body).clientWidth,y=c.height=B.clientHeight);
                                                l=[], X=(r=Math.random)()*(x-374), Y=r()*(y-320),
                                                z="0020200022222002"+ +(e=r()<0.5)+"2"+ +(f=r()<0.5)+"2002"+ +!e+"2"+ +!f+"2022222222020202";
                                                for(i=0;i<3;i++){l[i]=(F=Math.floor)(r()*255);}
                                                for(i=2;i&lt;42;i++){t.beginPath();t.rect(X+54*(i%7),Y+54*F(i/7),50,50);t.fillStyle=(+z[i]<1)?"rgb("+l+")":"#000";if(+z[i])t.fill();}setTimeout(a,500);
                                                }
                                                
                                                a();
                                                // </script>

                                                 Le javascript seul fait 489 caractères... 688 avec le html...

                                                Edit : je n'arrive pas trop à me servir des bbcodes de la nouvelle version du SdZ, alors voici le lien direct du script : http://rannios.free.fr/spaceInvader.js  ;)

                                                -
                                                Edité par Rannios 23 avril 2013 à 20:32:02

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  23 avril 2013 à 20:40:23

                                                  Une autre version en C, également avec la SDL. Je n’ai qu’un nombre ridicule de couleur, mais c’est juste des triplets rgb à ajouter et j’ai un peu la flemme. :-°

                                                  Une version en console ça pourrait être sympa aussi.

                                                  Ah oui, le code (sensiblement identique à celui de Blodangan).

                                                  -
                                                  Edité par simbilou 23 avril 2013 à 20:45:21

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                  Zeste de Savoirbépocode minimal  — Ge0 <3
                                                    Team Tech 23 avril 2013 à 21:21:54

                                                    hop, ma version.

                                                    Javascript, affichage DOM. Je me suis permis quelques libertés, il y a plusieurs types d'aliens, et un petit effet de profondeur.

                                                    http://dl.dropboxusercontent.com/u/1120328/sdz/spaceinvader/spaceinvader.html

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                    N'utilisez JAMAIS alert() pour debugger. Utilisez console.log()
                                                      23 avril 2013 à 21:32:12

                                                      Bonsoir,

                                                      Je vois que personne n'a posté de code dégueulasse jusqu'à présent ; je m'empresse donc de relever le niveau. Voici un petit programme conforme à la norme (pas strictly-conforming, certes). Bon, c'est du code pour UNIX. Sous MS Windows, il faut faire un coup de compilation conditionnelle, mais ça enlevait un peu d'élégance, je trouvais. Voilà la bête :

                                                      #include <stdio.h>
                                                      #include <stdlib.h>
                                                      #include <unistd.h>
                                                      
                                                      int main(void){for(;;){char t[80],*u="o ",*v=" o",a=rand()%
                                                      19,b=rand()%66,c=rand()%2,d=rand()%2,e;system("clear");for(
                                                      e=0;e<b;e++)t[e]=' ';t[b]=0;for(e=0;e<a;e++)puts("");printf
                                                      ("%s    **  **\n%s  *********""*\n%s  **%c%c**%c%c**\n%s  "
                                                      "**%c%c**%c%c**\n%s**************\n%s**  **  **  **\n",t,t,
                                                      t,u[c],u[c],v[d],v[d],t,v[c],v[c],u[d],u[d],t,t);sleep(3);}}

                                                      À exécuter dans un émulateur de terminal en 25*80, sinon c'est pas drôle. Et puis, uhm, c'est assez rudimentaire.

                                                      Bonne soirée ! :)

                                                      PS : C'est pas non plus super obfusqué, mais ça tient sur 361 c (sans les #include). Si j'ai le temps, je ferai peut-être une participation un peu plus « sérieuse ».

                                                      -
                                                      Edité par Lucas-84 23 avril 2013 à 21:51:57

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                      Staff désormais retraité.
                                                        23 avril 2013 à 21:41:14

                                                        ceci est egalement une version "c" avec SDL la forme et les texture se situe dans le meme dossier que l'executable  

                                                        je sais c pas le plus court mais bon je le met quan meme :) 

                                                         //voila :
                                                        
                                                        #include <stdio.h>
                                                        #include <stdlib.h>
                                                        #include <time.h>
                                                        #include <SDL/SDL.h>
                                                        
                                                        #define HAUTEUR 750
                                                        #define LARGEUR 700
                                                        
                                                        #define HPERSO 7
                                                        #define LPERSO 8
                                                        
                                                        int ouvrir(char pers[HPERSO][LPERSO]);
                                                        char nombrealeatoire(int *x,int *y, char *aff, char *gauche, char* droite);
                                                        char stop();
                                                        char afficher(char pers[HPERSO][LPERSO],int x,int y,char aff);
                                                        
                                                        int main(int argv,char*argc[])
                                                        {
                                                        
                                                        char pers[HPERSO][LPERSO] ={NULL};
                                                        
                                                        srand(time(NULL));
                                                        char err = 0;
                                                        char continuer = 1;
                                                        char aff = 0;
                                                        char gauche = 0;
                                                        char droite = 0;
                                                        int x = 0;
                                                        int y = 0;
                                                        printf("voila : \n");
                                                        err = ouvrir(pers);
                                                        
                                                        
                                                        while(continuer)
                                                        {
                                                        
                                                        err = nombrealeatoire(&x,&y,&aff,&gauche,&droite);
                                                        
                                                        if(gauche == 1)
                                                        {
                                                        pers[2][2] = '0';
                                                        pers[3][2] = '2';
                                                        }
                                                        if(gauche == 2)
                                                        {
                                                        pers[2][2] = '2';
                                                        pers[3][2] = '0';
                                                        }
                                                        if(droite == 1)
                                                        {
                                                        pers[2][4] = '0';
                                                        pers[3][4] = '3';
                                                        }
                                                        if(gauche == 2)
                                                        {
                                                        pers[2][4] = '3';
                                                        pers[3][4] = '0';
                                                        }
                                                        
                                                        err = afficher(pers,x,y,aff);
                                                        
                                                        continuer = err;
                                                        }
                                                        stop();
                                                        return EXIT_SUCCESS;
                                                        }
                                                        char nombrealeatoire(int *x,int *y, char *aff, char *gauche, char *droite)
                                                        {
                                                        *x = (rand() % ((LARGEUR-300) - 0 + 1));
                                                        *y = (rand() % ((HAUTEUR-350) - 0 + 1));
                                                        *aff = (rand() % (9 - 1 + 1)) +1;
                                                        *gauche = (rand() % (2 - 1 + 1))+1;
                                                        *droite = (rand() % (2 - 1 + 1))+1;
                                                        
                                                        return 1;
                                                        }
                                                        int ouvrir(char pers[HPERSO][LPERSO])
                                                        {
                                                        FILE *fichier = NULL;
                                                        
                                                        fichier = fopen("forme.txt","r");
                                                        
                                                        char i = 0;
                                                        char t = 0;
                                                        
                                                        if(fichier == NULL)
                                                        {
                                                        printf("erreur !! ");
                                                        return 0;
                                                        }
                                                        
                                                        for(i = 0;i < HPERSO;i ++)
                                                        {
                                                        for(t = 0;t < LPERSO;t++)
                                                        {
                                                        pers[i][t] = fgetc(fichier);
                                                        }
                                                        }
                                                        
                                                        fclose(fichier);
                                                        return 1;
                                                        }
                                                        char afficher(char pers[HPERSO][LPERSO],int x,int y,char aff)
                                                        {
                                                        SDL_Surface *ecran = NULL;
                                                        SDL_Surface *perso[HPERSO][LPERSO] = {NULL};
                                                        SDL_Rect position;
                                                        int temps = 0;
                                                        int temps_act = 0;
                                                        
                                                        position.x = 0;
                                                        position.y = 0;
                                                        SDL_Event event;
                                                        
                                                        char continuer = 1;
                                                        
                                                        SDL_Init(SDL_INIT_VIDEO);
                                                        ecran = SDL_SetVideoMode(HAUTEUR,LARGEUR,32,SDL_HWSURFACE|SDL_DOUBLEBUF);
                                                        char i = 0;
                                                        char h = 0;
                                                        
                                                        SDL_FillRect(ecran,NULL,SDL_MapRGB(ecran -> format,255,255,255));
                                                        
                                                        
                                                        for(i = 0;i < HPERSO;i ++)
                                                        {
                                                        for(h = 0;h < LPERSO;h++)
                                                        {
                                                        position.x = h * 50 + x;
                                                        position.y = i * 50 + y;
                                                        
                                                        if(aff == 1)
                                                        {
                                                        if(pers[i][h] == '1')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_rouge.bmp");
                                                        }
                                                        if(pers[i][h] == '2')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        if(pers[i][h] == '3')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        }
                                                        if(aff == 2)
                                                        {
                                                        if(pers[i][h] == '1')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_bleu.bmp");
                                                        }
                                                        if(pers[i][h] == '2')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        if(pers[i][h] == '3')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        }
                                                        if(aff == 3)
                                                        {
                                                        if(pers[i][h] == '1')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_vert.bmp");
                                                        }
                                                        if(pers[i][h] == '2')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        if(pers[i][h] == '3')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        }
                                                        if(aff == 4)
                                                        {
                                                        if(pers[i][h] == '1')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_maron.bmp");
                                                        }
                                                        if(pers[i][h] == '2')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        if(pers[i][h] == '3')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        }
                                                        if(aff == 5)
                                                        {
                                                        if(pers[i][h] == '1')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_rose.bmp");
                                                        }
                                                        if(pers[i][h] == '2')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        if(pers[i][h] == '3')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        }
                                                        if(aff == 6)
                                                        {
                                                        if(pers[i][h] == '1')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_violet.bmp");
                                                        }
                                                        if(pers[i][h] == '2')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        if(pers[i][h] == '3')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        }
                                                        if(aff == 7)
                                                        {
                                                        if(pers[i][h] == '1')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_jaune.bmp");
                                                        }
                                                        if(pers[i][h] == '2')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        if(pers[i][h] == '3')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        }
                                                        if(aff == 8)
                                                        {
                                                        if(pers[i][h] == '1')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_vert_bizar.bmp");
                                                        }
                                                        if(pers[i][h] == '2')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        if(pers[i][h] == '3')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        }
                                                        if(aff == 9)
                                                        {
                                                        if(pers[i][h] == '1')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_bleu_clair.bmp");
                                                        }
                                                        if(pers[i][h] == '2')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        if(pers[i][h] == '3')
                                                        {
                                                        perso[i][h] = SDL_LoadBMP("block_noir.bmp");
                                                        }
                                                        }
                                                        SDL_BlitSurface(perso[i][h],NULL,ecran,&position);
                                                        
                                                        }
                                                        }
                                                        
                                                        SDL_Flip(ecran);
                                                        temps = SDL_GetTicks();
                                                        while(continuer)
                                                        {
                                                        SDL_PollEvent(&event);
                                                        switch(event.type)
                                                        {
                                                        case SDL_QUIT:
                                                        continuer = 0;
                                                        return 0;
                                                        break;
                                                        }
                                                        
                                                        temps_act = SDL_GetTicks();
                                                        if(temps_act - temps > 2000)
                                                        {
                                                        continuer = 0;
                                                        temps_act = temps;
                                                        }
                                                        }
                                                        return 1;
                                                        }
                                                        char stop()
                                                        {
                                                        SDL_Quit();
                                                        }



                                                        -
                                                        Edité par papinpierre 23 avril 2013 à 22:40:33

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          23 avril 2013 à 22:59:54

                                                          Bonjour,

                                                          Ma version en html et css3

                                                          http://88.191.146.130/space_invader.html

                                                          no javascript :)

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            Admin 24 avril 2013 à 9:11:58

                                                            Tiens sympa cette version sans JS ! Il y a peut-être moyen de faire plus concis au niveau du code et tableless non ?

                                                            • Partager sur Facebook
                                                            • Partager sur Twitter

                                                            If you'd like to join us, read "How do we work at OpenClassrooms"! :)

                                                              24 avril 2013 à 12:26:09

                                                              Pour valider sa participation, il y a besoin d'envoyer une executable ou seul le linkage du code est nécéssaire?
                                                              • Partager sur Facebook
                                                              • Partager sur Twitter
                                                              J'aime pas les gens

                                                              [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