Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Atelier] Fond animé Space Invaders

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

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
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"! :)

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
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
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 - sdlm.be - Horus.aero

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 - sdlm.be - Horus.aero

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 - sdlm.be - Horus.aero

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
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
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"! :)

Anonyme
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