Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Atelier] Fond animé Space Invaders

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

    5 mai 2013 à 18:37:17

    ça ressemble au calcul de factoriel 69, j'imagine du coup que ça sert de tempo (pendant qu'il le calcul, le programme ne bouge pas)

    • Partager sur Facebook
    • Partager sur Twitter
      5 mai 2013 à 19:54:50

      Oui c'est ça, comme il n'y a pas de fonction de temporisation (sur Ti 82 et 83+ en tout cas) j'ai trouvé ce calcul qui est asser long (et a partir de 70 la calculatrice renvoie un erreur parce que pas asser de mémoire)

      • Partager sur Facebook
      • Partager sur Twitter
      Vive le peupl et les clémentines !
        5 mai 2013 à 21:07:19

        yoch a écrit:

        Quel est le sens de defparameter, par rapport à un setf ou autre setq ? (j'ai testé vite fait l'effet de la macro avec macroexpand, mais je comprends rien)

        Il y a la même différence entre defparameter et setf qu'entre int i; et i = 42; en C. La différence, c'est que les déclarations de variables ne sont pas obligatoires en Common Lisp. :)

        Pourquoi as tu séparé les fonctions pour chaque oeil, alors qu'elles semblent faire pareil toutes les deux ? Suffit de mettre le random dans la fonction direct.

        Parce que la fonction qui dessine l'invader est appelée à chaque frame... Si je mets le random direct dans la fonction, les yeux vont être regénérés aléatoirement à chaque frame. Ce n'est pas le comportement voulu.

        J'ai pas compris l'histoire du with.

        En fait, (with-sdl-init blablabla) est équivalent à (sdl-init) blablabla (sdl-quit).

        Sinon, la syntaxe avec ':', c'est une histoire de packages, c'est ça ?

        Il y a des subtilités que je ne maîtrise pas avec ':', mais ça sert à ça, oui. Si je fais un package bidule, et qu'il contient une fonction foo, alors je peux m'y référer avec bidule:foo. Un peu comme un '::' en C++.

        Sinon, perso, j'ai des sérieux problèmes avec loop, la page de l'hyperspec est carrément imbuvable, c'est sympa de voir que ça peut s'utiliser aussi simplement :)

        L'HyperSpec est trop hard pour commencer. Prends-toi le bouquin en ligne de gigamonkeys, ou « succesful lisp », ou un autre ; normalment, tout bon bouquin de lisp aura un chapitre sur loop.

        J'ai bien aimé l'histoire des symboles que tu appelles comme des fonction.

        C'est ma bidouille principale pour le moment. :)

        Common Lisp, le retour de la vengence

        Tout d'abord, le code. Ceux qui ont lu mon code précédent y verront quelques similitudes... Je vous conseille de le lire si vous le n'avez pas fait ; je ne donnerai ici que les explications sur ce qui diffère par rapport à la v1.

        (ql:quickload :lispbuilder-sdl)
        (in-package sdl)
        
        (defmacro draw-tile (x y col)
          `(draw-box-* (* 20 ,x) (* 20 ,y) 18 18 :color ,col))
         
        (defun ░ (i j) ())
        (defun █ (i j) (draw-tile (+ *x* i) (+ *y* j) *col*))
        (defun ◉ (i j) (draw-tile (+ *x* i) (+ *y* j *eye1*) *black*))
        (defun ◕ (i j) (draw-tile (+ *x* i) (+ *y* j *eye2*) *black*))
        
        (rand-inv (defun rand-inv (f)
          (setf *t* 0)
          (setf *x* (random 20))
          (setf *y* (random 20))
          (setf *eye1* (random 2))
          (setf *eye2* (random 2))
          (setf *col* (color :r (random 255) :g (random 255) :b (random 255)))))
         
        (defun draw-invader () "((░ ░ █ ░ █ ░ ░)
                                 (░ █ █ █ █ █ ░)                            
                                 (░ █ ◕ █ ◉ █ ░)
                                 (░ █ ░ █ ░ █ ░)
                                 (█ █ █ █ █ █ █)
                                 (█ ░ █ ░ █ ░ █))"
          (loop for l in (read-from-string (documentation 'draw-invader 'function))
                for j from 0 do
                (loop for e in l
                      for i from 0 do (funcall e i j))))
        
        (with-init ()
          (window 600 600)
          (rand-inv nil)
          (with-events ()
            (:quit-event () T)
            (:idle () (incf *t*)
                      (when (= *t* 50) (rand-inv #'rand-inv))
                      (clear-display *white*)
                      (draw-invader)
                      (update-display))))

        La première ligne charge la SDL, rien de nouveau de ce côté-là. La deuxième ligne nous place dans le package SDL, ce qui a plusieurs conséquences :

        • je n'ai plus besoin de mettre des sdl: partout ;
        • toutes les fonctions et variables que je définis sont réputées faire partie de la bibliothèque SDL.

        Ça prendrait deux lignes de faire mon propre package qui utilserait la SDL, ce qui serait bien plus propre... Il est donc inutilement compliqué d'étendre la SDL. :)

        Ensuite, draw-tile a été transformée : elle est devenu une macro (plutôt qu'une fonction). Ceci signifie qu'elle sera évaluée au moment de la compilation (et non de l'exécution) : chaque fois que le compilateur croisera (draw-tile 1 2 3), il le remplacera par l'expression (draw-box-* (* 20 ,x) (* 20 ,y) 18 18 :color ,col), en remplaçant ,x, ,y et ,col par leurs valeurs. Si vous faites du C, il se passe la même chose qu'avec #define. Notez toutefois que les macros sont infiniment plus puissantes que les define, puisqu'elles permettent de disposer d'un interpréteur lisp pendant la compilation et de s'en servir pour construire toutes sortes d'expressions.

        Les définitions des fonctions aux noms bizarres ne changent pas.

        La fonction rand-inv ne change pas non-plus, à une exception près : une nouvelle variable *t* est crée. Elle servira à gérer le temps. Notez que T, tout court, correspond à la valeur « true » en common lisp.

        La fonction draw-invader change légèrement : le space-invader n'est plus défini comme une variable, il est dans la docstring de la fonction ! Pour ceux qui ne connaissent pas, les docstrings sont des chaînes de caractères que l'on peut associer aux fonctions pour obtenir de l'aide directement dans l'interpréteur (une idée reprise notamment par Python). Ici, la fonction draw-invader va chercher son propre docstring, le parse comme une expression lisp, puis utilise l'astuce décrite dans mon post précédent qui consiste en appeler la fonction dont le nom apparaît dans la liste (comme symbole). Ne vous y méprenez pas ; l'astuce du post précédent est toujours là, j'ai simplement rajouté une étape avant.

        La boucle principale change peu : à chaque frame, on incrémente la variable *t*. Lorsqu'elle vaut 50, on tire un nouvel invader au hasard (ce qui a pour effet de remettre *t* à 0 au passage). Et voilà, l'animation est là ; tout est conforme au projet original !

        Et pour ceux qui n'auraient pas un interpréteur CL avec le paquet quicklisp installé, voici des screenshots.

        D'abord, le programme en train de tourner : Space invader seul

        Ensuite, mon environnement : Mon bureau quand je code

        La fenêtre que vous voyez à droite, derrière le space-invader, est celle de Lisp. Il est en train d'hurler des warnings parce que les bindings SDL pour Lisp utilisent des constructions obsolètes.

        EDIT : la couleur de l'invader est bien aléatoire, même si elle est identique sur les screens. ;)

        -
        Edité par GuilOooo 5 mai 2013 à 22:30:46

        • Partager sur Facebook
        • Partager sur Twitter
        J'ai déménagé sur Zeste de savoir — Ex-manager des modérateurs.
          5 mai 2013 à 22:41:10

          Bonjour, je trouve cette idée vraiment amusante donc j'ai voulu participer à ce petit concours !

          Donc j'ai programmé un Space Invader aux yeux ronds (soyons originaux ^^), avec un effet d'ombre ou de 3D (prenez le comme vous voulez, les deux marchent) qui s'adapte à la position de l'alien. J'ai utilisé le javascript, le CSS et le HTML.

          Voila le résultat : plantes-carnivores.net/SpaceInvader.html

          (Je n'ai pas utilisé de canvas donc je ne sais pas mais peut-être que sur sur certains ordis ça risque de laguer)

          Le code HTML/CSS:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
          	<head>
          		<title>Space Invader</title>
          		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          		<style type="text/css">
          		.case
          		{
          			position:absolute;
          			height:50px;
          			width:50px;
          			background-color:blue;
          		}
          		@keyframes AnimationPourLesNoeils
          		{
          			0%   {background:red;box-shadow: 0px 0px 10px red;height:50px;top:0px;}
          			25%  {background:#E10000;box-shadow: 0px 0px 2px #E10000;height:0px;top:25px;}
          			50%  {background:#E52727;box-shadow: 0px 0px 8px #E52727;height:50px;top:0px;}
          			100%  {background:#DB0000;box-shadow: 0px 0px 5px #DB0000;height:50px;top:0px;}
          		}
          		@-webkit-keyframes AnimationPourLesNoeils
          		{
          			0%   {background:red;box-shadow: 0px 0px 10px red;height:50px;top:0px;}
          			25%  {background:#E10000;box-shadow: 0px 0px 2px #E10000;height:0px;top:25px;}
          			50%  {background:#E52727;box-shadow: 0px 0px 8px #E52727;height:50px;top:0px;}
          			100%  {background:#DB0000;box-shadow: 0px 0px 5px #DB0000;height:50px;top:0px;}
          		}
          		
          		@keyframes AnimationPourLesNoreils
          		{
          			0%   {}
          			50%  {top:-20px;}
          			100%  {top:0px;}
          		}
          		@-webkit-keyframes AnimationPourLesNoreils
          		{
          			0%   {top:0px;}
          			50%  {top:-20px;}
          			100%  {top:0px;}
          		}
          		@keyframes AnimationPourLesNoeils2
          		{
          			from{}
          			to{border-radius:200px 200px; 
          			-moz-border-radius:200px 200px;
          			-webkit-border-radius:200px 200px;
          			top:133px;
          			}
          		}
          		@-webkit-keyframes AnimationPourLesNoeils
          		{
          			from{}
          			to{
          			top:133px;
          			}
          		}
          		
          		.noeil
          		{
          			position:absolute;
          			height:50px;
          			border-radius:200px 200px; 
          			-moz-border-radius:200px 200px;
          			-webkit-border-radius:200px 200px;
          			width:50px;
          			background-color:red;
          			box-shadow: 0px 0px 10px red;
          			animation: AnimationPourLesNoeils linear 1s infinite alternate;
          			-webkit-animation: AnimationPourLesNoeils linear 1s infinite alternate;
          		}
          		#Corps, #Oreils
          		{
          		}
          		.noreil
          		{
          			position:absolute;
          			height:50px;
          			width:50px;
          			background-color:blue;
          			animation: AnimationPourLesNoreils linear 1s infinite alternate;
          			-webkit-animation: AnimationPourLesNoreils linear 1s infinite alternate;
          		}
          		#gauche, #droit
          		{
          			position:absolute;
          		}
          		</style>
          	</head>
          	
          	<body>
          		
          		<div id="SpaceInvader" style="position:absolute;left:20px;top:20px;">			
          			<div id="SpaceInvaderShadow" style="position:absolute;opacity:0.5;left:5px;top:5px;">
          				<div id="OreilsOmbres">
          					<div class="noreil" style="left:108px;top:0px;"></div>
          					<div class="noreil" style="left:216px;top:0px;"></div>
          				</div>
          				<div id="CorpsOmbre">
          					<div class="case" style="left:54px;top:54px;"></div>
          					<div class="case" style="left:108px;top:54px;"></div>
          					<div class="case" style="left:162px;top:54px;"></div>
          					<div class="case" style="left:216px;top:54px;"></div>
          					<div class="case" style="left:270px;top:54px;"></div>
          					
          					<div class="case" style="left:54px;top:108px;"></div>
          					<div class="case" style="left:162px;top:108px;"></div>
          					<div class="case" style="left:270px;top:108px;"></div>
          					
          					<div class="case" style="left:54px;top:162px;"></div>
          					<div class="case" style="left:162px;top:162px;"></div>
          					<div class="case" style="left:270px;top:162px;"></div>
          					
          					<div class="case" style="left:0px;top:216px;"></div>
          					<div class="case" style="left:54px;top:216px;"></div>
          					<div class="case" style="left:108px;top:216px;"></div>
          					<div class="case" style="left:162px;top:216px;"></div>
          					<div class="case" style="left:216px;top:216px;"></div>
          					<div class="case" style="left:270px;top:216px;"></div>
          					<div class="case" style="left:324px;top:216px;"></div>
          					
          					<div class="case" style="left:0px;top:270px;"></div>
          					<div class="case" style="left:108px;top:270px;"></div>
          					<div class="case" style="left:216px;top:270px;"></div>
          					<div class="case" style="left:324px;top:270px;"></div>
          				</div>
          			</div>
          			<div id="Oreils">
          				<div class="noreil" style="left:108px;top:0px;"></div>
          				<div class="noreil" style="left:216px;top:0px;"></div>
          			</div>
          			<div id="Yeux">
          				<div id="gauche" style="left:108px;top:162px;">
          					<div class="noeil"></div>
          				</div>
          				<div id="droit" style="left:216px;top:162px;">
          					<div class="noeil"></div>
          				</div>
          			</div>
          			<div id="Corps">
          				<div class="case" style="left:54px;top:54px;"></div>
          				<div class="case" style="left:108px;top:54px;"></div>
          				<div class="case" style="left:162px;top:54px;"></div>
          				<div class="case" style="left:216px;top:54px;"></div>
          				<div class="case" style="left:270px;top:54px;"></div>
          				
          				<div class="case" style="left:54px;top:108px;"></div>
          				<div class="case" style="left:162px;top:108px;"></div>
          				<div class="case" style="left:270px;top:108px;"></div>
          				
          				<div class="case" style="left:54px;top:162px;"></div>
          				<div class="case" style="left:162px;top:162px;"></div>
          				<div class="case" style="left:270px;top:162px;"></div>
          				
          				<div class="case" style="left:0px;top:216px;"></div>
          				<div class="case" style="left:54px;top:216px;"></div>
          				<div class="case" style="left:108px;top:216px;"></div>
          				<div class="case" style="left:162px;top:216px;"></div>
          				<div class="case" style="left:216px;top:216px;"></div>
          				<div class="case" style="left:270px;top:216px;"></div>
          				<div class="case" style="left:324px;top:216px;"></div>
          				
          				<div class="case" style="left:0px;top:270px;"></div>
          				<div class="case" style="left:108px;top:270px;"></div>
          				<div class="case" style="left:216px;top:270px;"></div>
          				<div class="case" style="left:324px;top:270px;"></div>
          			</div>
          
          		</div>
          		<script src="js.js" type="text/javascript"></script>
          	</body>
          </html>

          Et le code javascript:

          var Si = new DynamicObject("SpaceInvader");
          			var Ears = new DynamicObject("Oreils");
          			var Eyes = new DynamicObject("Yeux");
          			var SiObject = document.getElementById("SpaceInvader");
          			var Cases = document.getElementsByTagName('div');
          			var RightEye = document.getElementById("droit");
          			var LeftEye = document.getElementById("gauche");
          			var Body = new DynamicObject("Corps");
          			
          			var TimeToWait = 0;
          			var DisplaceX;
          			var DisplaceY;
          			
          			var left;
          			var top;
          			
          			
          			Body.blurAppearance(0.5);
          			Ears.blurAppearance(0.5);
          			var Time = 0;
          			Update();
          			function Update()
          			{
          				Shadow();
          				left2=SiObject.style.left.split("px")[0];
          				top2=SiObject.style.top.split("px")[0];
          				if(left2<=0 || left2 >= screen.width-380)
          				{
          					DisplaceX*=-1;
          					Time = 0;
          					TimeToWait = 50+Math.floor((Math.random()+0.05)*25);
          					changeColor();
          					changeEyesPos();
          				}
          				if(top2<=0 || top2 >= screen.height-475)
          				{
          					DisplaceY*=-1;
          					Time = 0;
          					TimeToWait = 50+Math.floor((Math.random()+0.05)*25);
          					changeColor();
          					changeEyesPos();
          				}
          				if(Time >= TimeToWait)
          				{
          					Time = 0;
          					TimeToWait =50+Math.floor((Math.random())*100);
          					DisplaceX = RandomPos();
          					DisplaceY = RandomPos();
          					changeColor();
          					changeEyesPos();
          				}
          				Si.DisplaceOnVector(DisplaceX, DisplaceY, true);
          				Time++;
          				setTimeout(function(){Update()},1000/24);
          			}
          			function RandomPos()
          			{
          				var pos = Math.random()*12-6;
          				return pos;
          			}
          			function changeColor()
          			{
          				// var index=Math.floor(Math.random()*8);
          				var color="rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
          				for( var i = 0;Cases.length>i;i++)
          				{
          					if(Cases[i].className=="case" || Cases[i].className == "noreil")
          					{
          						// Cases[i].style.backgroundColor = colors[index];
          						Cases[i].style.backgroundColor = color;
          					}
          				}
          			}
          			function changeEyesPos()
          			{
          				Eyes.blurDisappearance(0.5);
          				if(Math.random()>0.5)
          				{
          					RightEye.style.top="162px";
          				}
          				else
          				{
          					RightEye.style.top="108px";
          				}
          				if(Math.random()>0.5)
          				{
          					LeftEye.style.top="162px";
          				}
          				else
          				{
          					LeftEye.style.top="108px";
          				}
          				Eyes.blurAppearance(0.5);
          			}
          			function Shadow()
          			{
          				var Left = (((parseInt(SiObject.style.left.split("px")[0])+200)/screen.width)-0.5)*30;
          				var Top = (((parseInt(SiObject.style.top.split("px")[0])+200)/screen.height)-0.5)*30;
          				document.getElementById("SpaceInvaderShadow").style.left = Left*(-1)+"px";
          				document.getElementById("SpaceInvaderShadow").style.top = Top*(-1)+"px";
          			}
          			function DynamicObject(TheID)
          			{
          				var self = this;
          				var id;
          				var opacify;
          				var transparent;
          				var object = document.getElementById(self.id);
          				
          				self.blurAppearance = function (time)
          				{
          					var object = self.object;
          					var coef = 1/(time*24);
          					
          					if(object.style.opacity <= 1)
          					{
          						object.style.opacity = self.opacify;
          						self.opacify+=coef;
          						setTimeout(function(){self.blurAppearance(time);},1000/24);
          					}
          					else
          					{
          						self.opacify = 0;
          					}
          					
          				}
          				
          				self.blurDisappearance = function (time)
          				{
          					var object = self.object;
          					var coef2 = 1/(time*24);
          					
          					if(object.style.opacity > 0)
          					{
          						object.style.opacity = self.transparent;
          						self.transparent-=coef2;
          						setTimeout(function(){self.blurDisappearance(time);},1000/24);
          					}
          					else
          					{
          						self.transparent = 1;
          					}
          				
          				}
          				
          				self.DisplaceOnVector = function (x,y, oneShot)
          				{
          					var object = self.object;
          					var RealX = object.style.left.split("px")[0];
          					var RealY = object.style.top.split("px")[0];
          					
          					object.style.left = parseInt(RealX)+x+"px";
          					object.style.top = parseInt(RealY)+y+"px";
          					if(!oneShot)
          					{
          						setTimeout(function(){self.DisplaceOnVector(x,y);},1000/24);
          					}
          				}
          				self.transparent = 1;
          				self.id=TheID;
          				self.opacify = 0.0;
          				self.object = document.getElementById(self.id);
          			}



          Bon vous l'aurez vu, mon but n'était pas de faire un truc super optimisé, donc je serai plutôt dans la catégorie code complexe et parfois inutil (comme la POO totalement injustifiée :p)

          Voilaaaaa !

          -
          Edité par xolbo 5 mai 2013 à 23:20:31

          • Partager sur Facebook
          • Partager sur Twitter
            6 mai 2013 à 6:37:00

            Voici un dérivé des nombreux exemples "JS + Canvas", où j'ai remplacé Canvas, non pas par du HTML, mais par du SVG. Avec HTML5, il est désormais possible d'intégrer facilement du code SVG via une balise... <svg> . Et CSS permet de styler. En réalité, ce trouve ça plus pratique que canvas, car les différentes formes agissent comme des éléments HTML (on peur leur attacher des évènements, des effets de survol et tout).

            http://nayi.free.fr/invaders.svg.htm

            • Partager sur Facebook
            • Partager sur Twitter

            Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

              6 mai 2013 à 14:40:51

              <!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>
              • Partager sur Facebook
              • Partager sur Twitter
                6 mai 2013 à 16:18:09

                pour le code le plus concis, en n'importe quel langage

                #!/bin/sh
                xdg-open http://www.space-bitton.com/

                et la version encore plus courte : l'uniligne dans le terminal

                xdg-open http://cpc.cx/7cH

                -
                Edité par ledemonboiteux 6 mai 2013 à 16:38:56

                • Partager sur Facebook
                • Partager sur Twitter
                  6 mai 2013 à 16:28:19

                  ledemonboiteux a écrit:

                  pour le code le plus concis, en n'importe quel langage

                  #!/bin/sh
                  xdg-open http://www.space-bitton.com/



                  Dommage, ça a déjà été fait - et en plus court : http://www.siteduzero.com/forum/sujet/atelier-fond-anime-space-invaders?page=4#message-84285826

                  • Partager sur Facebook
                  • Partager sur Twitter
                    6 mai 2013 à 16:37:13

                    Certes, mais le code avec wget télécharge la page, il ne l'affiche pas.
                    • Partager sur Facebook
                    • Partager sur Twitter
                      6 mai 2013 à 16:38:55

                      Suffit de configurer un serveur web pour le faire afficher 8).

                      • Partager sur Facebook
                      • Partager sur Twitter
                      Small is Beautiful — E.F. Schumacher | Blog (fr)
                        6 mai 2013 à 16:44:01

                        c'est vrai on gagne un caractère en remplaçant xdg-open par firefox, et on en gagne plein en remplaçant la commande par 'a' et en configurant un alias :)

                        -
                        Edité par ledemonboiteux 6 mai 2013 à 17:20:10

                        • Partager sur Facebook
                        • Partager sur Twitter
                          6 mai 2013 à 18:20:59

                          Bonne courage

                          -
                          Edité par nino0105 6 mai 2013 à 18:22:27

                          • Partager sur Facebook
                          • Partager sur Twitter
                          Anonyme
                            6 mai 2013 à 18:37:32

                            Moi je suis d'accord avec SpaceFox, le plus simple c'est de cliquer sur ce lien.

                            -
                            Edité par Anonyme 6 mai 2013 à 19:49:27

                            • Partager sur Facebook
                            • Partager sur Twitter
                              6 mai 2013 à 18:58:02

                              Bonjour tout le monde.

                              Voici mon projet en Objective-C pour iPhone au lien suivant : http://spaceinvaders.net63.net/

                              Merci.

                              -
                              Edité par Romain77160 6 mai 2013 à 21:11:49

                              • Partager sur Facebook
                              • Partager sur Twitter
                                6 mai 2013 à 23:10:54

                                Voici mon resultat : Cliquez ici !

                                <html>
                                <head>
                                <title>Invaders v1.0</title>
                                <style>
                                td
                                {
                                 width:50px;
                                 height:50px;
                                }
                                
                                td[name="cHideColored"],td[name="cHide"]
                                {
                                background-color:white;
                                }
                                
                                </style>
                                </head>
                                
                                <body onLoad="test()">
                                
                                
                                <table id="contenu">
                                <tr>
                                <td name="cHide"></td>
                                <td name="cHide"></td>
                                <td name="c"></td>
                                <td name="cHide"></td>
                                <td name="c"></td>
                                <td name="cHide"></td>
                                <td name="cHide"></td>
                                </tr>
                                
                                <tr>
                                <td name="cHide"></td>
                                <td name="c"></td>
                                <td name="c"></td>
                                <td name="c"></td>
                                <td name="c"></td>
                                <td name="c"></td>
                                <td name="cHide"></td>
                                </tr>
                                
                                <tr>
                                <td name="cHide"></td>
                                <td name="c"></td>
                                <td name="cHideColored"></td>
                                <td name="c"></td>
                                <td name="cHideColored"></td>
                                <td name="c"></td>
                                <td name="cHide"></td>
                                </tr>
                                
                                <tr>
                                <td name="cHide"></td>
                                <td name="c"></td>
                                <td name="cHideColored"></td>
                                <td name="c"></td>
                                <td name="cHideColored"></td>
                                <td name="c"></td>
                                <td name="cHide"></td>
                                </tr>
                                
                                <tr>
                                <td name="c"></td>
                                <td name="c"></td>
                                <td name="c"></td>
                                <td name="c"></td>
                                <td name="c"></td>
                                <td name="c"></td>
                                <td name="c"></td>
                                </tr>
                                
                                <tr>
                                <td name="c"></td>
                                <td name="cHide"></td>
                                <td name="c"></td>
                                <td name="cHide"></td>
                                <td name="c"></td>
                                <td name="cHide"></td>
                                <td name="c"></td>
                                </tr>
                                
                                </table>
                                
                                <script>
                                function test()
                                {
                                var table = document.getElementById('contenu');
                                var listCouleurs=['#dd199a','#d97720','#71fa1e','#1eaafa','#72816a','#42094a','#812509'];
                                var listCarreYeux=document.getElementsByName('cHideColored');
                                var listCarreColorer=document.getElementsByName('c');
                                
                                for(var i=0;i<listCarreYeux.length;i++)
                                {
                                listCarreYeux[i].style.background="white";
                                }
                                
                                var rdcHide1,rdcHide2;
                                var different=false;
                                
                                do
                                {
                                 rdcHide1 = Math.floor((Math.random()*3)+0);
                                 rdcHide2 = Math.floor((Math.random()*3)+0);
                                if(rdcHide1!=rdcHide2)
                                {
                                different = true;
                                }
                                }
                                while(!different);
                                 
                                listCarreYeux[rdcHide1].style.background="black";
                                listCarreYeux[rdcHide2].style.background="black";
                                
                                
                                var rdCouleur = Math.floor((Math.random()*7)+0);
                                
                                for(var j=0;j<listCarreColorer.length;j++)
                                {
                                listCarreColorer[j].style.background=listCouleurs[rdCouleur];
                                }
                                
                                var rdL = Math.floor((Math.random()*500)+100);
                                var rdT = Math.floor((Math.random()*100)+50);
                                var rdR = Math.floor((Math.random()*100)+50);
                                var rdB = Math.floor((Math.random()*100)+50);
                                	table.style.position="relative";
                                	table.style.left=rdL+'px';
                                	table.style.right=rdR+'px';
                                    table.style.bottom=rdB+'px';
                                	table.style.top=rdT+'px';
                                	
                                	setTimeout(function () {
                                  test();
                                }, 1000);
                                
                                }
                                </script>
                                
                                </body>
                                
                                </html>
                                 

                                -
                                Edité par nino0105 7 mai 2013 à 1:46:30

                                • Partager sur Facebook
                                • Partager sur Twitter
                                Anonyme
                                  6 mai 2013 à 23:13:44

                                  @nino0105: Les yeux bug chez moi.:euh: (parfois j'ai les deux du même côté...)
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    6 mai 2013 à 23:20:28

                                    @nino0105 : je pense que tu gagnes le prix du "code HTML le plus mal utilisé " :-°

                                    Les balises section ne devraient pas être utilisées pour ça. De même que leur attribut name. Et puis, avec CSS tu peux appliquer un inline-block sans le faire pour chaque balise ;) .

                                    • Partager sur Facebook
                                    • Partager sur Twitter

                                    Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

                                      6 mai 2013 à 23:48:36

                                      Bonsoir je viens vous proposer ma version , elle fait 1,23 ko en version minimisé, j'ai utilisé l'HTML et surtout du JAVASCRIPT, toutes les divs sont générées par le JS , l'HTML est la juste pour le squelette de base: html head body. Je n'ai rien apporté de plus dans l'animation, j'ai cherché à  faire au plus simple ce code ressemble sans doute au code de certains, honnêtement je n'ai pas encore regardé les exploits de tout le monde. bref vous le trouverez ici : http://quentinondet.fr/invaders/.

                                      Le code plus lisible ici:

                                      <html>
                                      <head></head>
                                      <body>
                                      <script type="text/javascript">
                                      	var p1=new Array(3,5,9,10,11,12,13,16,18,20,23,25,27,29,30,31,32,33,34,35,36,38,40,42);
                                      	var rgb = new Array;
                                      	var invader;
                                      
                                      	function a()
                                      	{
                                      		setTimeout("document.body.removeChild(invader)",2700);
                                      		invader=document.createElement('div');
                                      		document.body.appendChild(invader);
                                      		invader.style.height='314px';
                                      		invader.style.width='366px';
                                      		invader.style.position='absolute';
                                      		invader.style.top=Math.round(Math.random()*(screen.height-314))+'px';
                                      		invader.style.left=Math.round(Math.random()*(screen.width-366))+'px';
                                      
                                      		for(k=0;k<3;k++)
                                      		{
                                      			 rgb[k]=Math.round(Math.random()*255);
                                      		}
                                      		var y1=Math.round(Math.random());
                                      		var y2=Math.round(Math.random());
                                      		
                                      		for(i=1;i<43;i++)
                                      		{
                                      			var element=document.createElement('div');
                                      			invader.appendChild(element);
                                      			element.style.margin='1px';
                                      			element.style.height='50px';
                                      			element.style.width='50px';
                                      			element.style.display='inline-block';
                                      			for(j=0;typeof(p1[j])!='undefined';j++)
                                      			{
                                      				if (i==p1[j]) 
                                      				{
                                      					element.style.background='rgb('+ rgb[0] +','+ rgb[1] +','+rgb[2] +')';
                                      				};
                                      				if (y1==1) 
                                      				{
                                      					if (i==17) 
                                      					{
                                      						element.style.background='black';
                                      					};
                                      				}
                                      				else
                                      				{
                                      					if (i==24) 
                                      					{
                                      					element.style.background='black';
                                      					};
                                      				}
                                      
                                      				if (y2==1) 
                                      				{
                                      					if (i==19) 
                                      					{
                                      					element.style.background='black';
                                      					};
                                      				}
                                      				else
                                      				{
                                      				if (i==26) 
                                      					{
                                      						element.style.background='black';
                                      					};
                                      				}
                                      			}
                                      		}
                                      	}
                                      setInterval("a()",3000);	
                                      </script>
                                      </body>
                                      </html>

                                      -
                                      Edité par quentin ondet 7 mai 2013 à 0:12:57

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        7 mai 2013 à 0:00:32

                                        @quentin ondet Tu la peut être remarquer mais ton code ne fonctionne pas sur firefox (en tous cas le miens, version 21.0) par contre aucun problème avec chrome :D

                                        (Sa m'affiche toute les case sur la même ligne verticale)

                                        -
                                        Edité par sadiquo 7 mai 2013 à 0:01:21

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          7 mai 2013 à 0:17:31

                                          @sadiquo Merci de ta remarque, firefox n'a pas aimé mon float j'ai mis un display inline-block a la place ^^, j'en ai profité pour mettre a jour mon post. je n'ai pas vraiment pris le temps de le tester sur d'autres navigateurs. Par contre il peut y avoir un bug de timing entre la création et la suppression de div en cas de lag du navigateur et tu verrais plusieurs invaders ^^ 

                                          -
                                          Edité par quentin ondet 7 mai 2013 à 0:18:24

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            7 mai 2013 à 0:22:33

                                            @Thunderseb merci , j'ai amélioré mon code

                                            -
                                            Edité par nino0105 7 mai 2013 à 1:47:34

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              7 mai 2013 à 1:48:26

                                              @moi62100 merci pour la remarque , C'est bon mnt
                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                7 mai 2013 à 2:08:09

                                                nino0105 a écrit:

                                                @moi62100 merci pour la remarque , C'est bon mnt


                                                Non :°
                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                Anonyme
                                                  7 mai 2013 à 9:23:39

                                                  Toujours pas...:(
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    7 mai 2013 à 12:49:35

                                                    Si j'ai le temps, je reposte un petit quelque chose ce soir \ o /. Histoire de changer un peu de toutes ces versions web é_è.

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                    Small is Beautiful — E.F. Schumacher | Blog (fr)
                                                      7 mai 2013 à 21:25:01

                                                      Bon pas sur que j'ai le temps de faire la version BF++ mais je me le garde de côté quand même ^^
                                                      • Partager sur Facebook
                                                      • Partager sur Twitter

                                                      Retrouvez moi sur mon blog et ma chaine Youtube !

                                                        8 mai 2013 à 0:43:30

                                                        Voila alors moi j'ai voulu faire le code le plus court possible en Javascript.
                                                        Voici le Space Invaders de 618 caracteres (je sais qu'on peut faire beaucoup mieux mais j'ai pas reussi a faire moins):

                                                        http://www.down4idevice.com/Space_Invaders/
                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          8 mai 2013 à 18:04:40

                                                          Bonjour,

                                                          J'ai amélioré ou plutôt changé l'algorithme d'affichage du monstre (ancienne version). Le monstre étant petit, ce n'est pas le meilleur algorithme mais le principale n'est-il pas de s'amuser ? :-)

                                                          Et la version texte :

                                                          space invaders :
                                                          	// Notre bloc que nous allons cloner :
                                                          	bloc :: rectangle, largeur vaut 10, hauteur vaut 10, plein vaut "oui"
                                                          	// Variable pour le traitement
                                                          	p :: nombre
                                                          	// Position du monstre
                                                          	x :: nombre
                                                          	y :: nombre
                                                          	début
                                                          		tant que vrai, lis
                                                          			x vaut hasard(500)
                                                          			y vaut hasard(500)
                                                          			couleur@bloc = couleurs{x/2}
                                                          			// Ce tableau contient la position relative du bloc à x et y et le nombre de blocs à afficher à la suite :
                                                          			pour chaque {{2,1},{4,1},{8,5},{15,1},{17,1},{19,1},{22,1},{24,1},{26,1},{28,8},{37,1},{39,1},{41,1}},lis
                                                          				p vaut joker{0}
                                                          				pour chaque joker{1},lis
                                                          					x@bloc vaut x + p mod 7*11
                                                          					y@bloc vaut y + entier(p/7)*11
                                                          					projette clone(bloc)
                                                          					incrémente p
                                                          				ferme
                                                          			ferme
                                                          			couleur@bloc = "noir"
                                                          			// Oeil 1
                                                          			x@bloc vaut x + 2 * 11
                                                          			y@bloc vaut y + (2 + x mod 2) * 11
                                                          			projette clone(bloc)
                                                          			// Oeil 2
                                                          			x@bloc vaut x + 4 * 11
                                                          			y@bloc vaut y + (2 + y mod 2) * 11
                                                          			projette clone(bloc)
                                                          			attends 1 seconde
                                                          			efface toile
                                                          		ferme



                                                          -
                                                          Edité par metalm 8 mai 2013 à 22:10:01

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            8 mai 2013 à 20:46:35

                                                            #include <x11>
                                                            #include <x11>
                                                            #include <stdio.h>
                                                            #include <stdlib.h>
                                                            #include <time.h>
                                                            
                                                            #define SPACE_W 7
                                                            #define SPACE_H 6
                                                            #define SPACE_S 30
                                                            #define COLORS  6
                                                            #define BORDER  2
                                                            
                                                            void init_colors(GC gcs[COLORS], XColor col[COLORS], Display *disp, Window root);
                                                            
                                                            int main(int argc, char *argv[])
                                                            {
                                                              
                                                              short pattern[] = {
                                                                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
                                                              };
                                                            
                                                              Display *disp;
                                                              Window root;
                                                              GC gcs[COLORS], black;
                                                              XColor col[COLORS];
                                                              XWindowAttributes screen;
                                                            
                                                              disp = XOpenDisplay(NULL); 
                                                              root = RootWindow(disp, DefaultScreen(disp));
                                                              init_colors(gcs, col, disp, root);
                                                              XGetWindowAttributes(disp, root, &screen);
                                                            
                                                              black = XCreateGC(disp, root, 0, NULL);
                                                              XSetForeground(disp, black, BlackPixel(disp, 0));
                                                            
                                                              srand(time(NULL));
                                                            
                                                              XSetWindowBackground(disp, root, 0xffffff);
                                                            
                                                              while (1) {
                                                                int i  = 0,
                                                                    j  = 0,
                                                                    ox = 0,
                                                                    oy = 0,
                                                                    co = 0,
                                                                    e1 = 0,
                                                                    e2 = 0;
                                                            
                                                            
                                                                XClearWindow(disp, root);
                                                            
                                                                ox = rand() % screen.width - SPACE_S * SPACE_W;
                                                                oy = rand() % screen.height - SPACE_S * SPACE_H;
                                                                co = rand() % COLORS;
                                                            
                                                                for (i = 0; i < SPACE_H; i++) {
                                                                  for (j = 0; j < SPACE_W; j++) {
                                                                    if (pattern[j + i * SPACE_W]) {
                                                                      XFillRectangle(disp, root, gcs[co], ox + j * SPACE_S + BORDER,
                                                                                     oy + i * SPACE_S + BORDER, SPACE_S - 2 * BORDER,
                                                                                     SPACE_S - 2 * BORDER);
                                                                    }
                                                                  }
                                                                }
                                                            
                                                                e1 = rand() % 2;
                                                                e2 = rand() % 2;
                                                            
                                                                XFillRectangle(disp, root, black, ox + 2 * SPACE_S + BORDER,
                                                                               oy + (2 + e1) * SPACE_S + BORDER, SPACE_S - 2 * BORDER,
                                                                               SPACE_S - 2 * BORDER);
                                                            
                                                                XFillRectangle(disp, root, black, ox + 4 * SPACE_S + BORDER,
                                                                               oy + (2 + e2) * SPACE_S + BORDER, SPACE_S - 2 * BORDER,
                                                                               SPACE_S - 2 * BORDER);
                                                            
                                                                XFlush(disp);
                                                            
                                                                sleep(2);
                                                              }
                                                            
                                                              return 0;
                                                            
                                                            }
                                                            
                                                            void init_colors(GC gcs[COLORS], XColor col[COLORS],  Display *disp, Window root)
                                                            {
                                                              Colormap colormap;
                                                              char *s_colors[COLORS] = { "#c42820", "#2082c4", "#20c454", "#c4ae20", "#8e42cc",
                                                                                         "#20c4bc" };
                                                              int i;
                                                            
                                                              colormap = DefaultColormap(disp, 0);
                                                            
                                                              for (i = 0; i < COLORS; i++) {
                                                                gcs[i] = XCreateGC(disp, root, 0, 0);
                                                            
                                                                XParseColor(disp, colormap, s_colors[i], &col[i]);
                                                                XAllocColor(disp, colormap, &col[i]);
                                                            
                                                                XSetForeground(disp, gcs[i], col[i].pixel);
                                                              }
                                                            }
                                                             </time.h></stdlib.h></stdio.h></x11></x11>

                                                            Petite version en Xlib, pour avoir un fond d'écran animé sous Linux. J'avais déjà regardé un peu X11, sans jamais vraiment essayer... Bah on peut pas vraiment dire que j'ai été très loin, mais bon, ça marche x).

                                                            Petite vidéo : http://www.youtube.com/watch?v=MSwLXtw5cS8&feature=youtu.be

                                                            C'est assez marrant, on voit deux choses :

                                                            • j'ai deux écrans de tailles différentes, et parfois, le space invader va hors de la limite de celui de gauche... limite capturée par la vidéo, mais forcément pas visible à l'œil nu \ o /
                                                            • j'ai pas géré le fait que les fenêtres puissent être déplacés, ça se voit à un moment de la vidéo.

                                                            Voilà, j'ai pas fait spécialement d'efforts pour avoir un code beau ou propre ou what ever, mais ça fonctionne plus ou moins :3.

                                                            • Partager sur Facebook
                                                            • Partager sur Twitter
                                                            Small is Beautiful — E.F. Schumacher | Blog (fr)

                                                            [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