Reorga ISN et commence html

ISN/pygame/doc_pygame.tex

@@ -0,0 +1,141 @@
+\documentclass[a4paper,12pt]{article}
+\usepackage{myXsim}
+
+\usepackage{listings}
+
+\date{Novembre 2017}
+\title{Documentation Pygame}
+\tribe{ISN}
+
+\definecolor{mygreen}{rgb}{0,0.6,0}
+\definecolor{mygray}{rgb}{0.5,0.5,0.5}
+\definecolor{mymauve}{rgb}{0.58,0,0.82}
+
+\lstset{ %
+  backgroundcolor=\color{white},   % choose the background color
+  basicstyle=\footnotesize,        % size of fonts used for the code
+  breaklines=true,                 % automatic line breaking only at whitespace
+  captionpos=b,                    % sets the caption-position to bottom
+  commentstyle=\color{mygreen},    % comment style
+  escapeinside={\%*}{*)},          % if you want to add LaTeX within your code
+  keywordstyle=\color{blue},       % keyword style
+  stringstyle=\color{mymauve},     % string literal style
+}
+
+\begin{document}
+
+\maketitle
+
+\section{Code minimal}
+
+\lstinputlisting[language=Python, frame=single]{pygame_base.py}
+
+\section{Dessiner sur la fenêtre: Draw}
+
+Dans toute la suite, on supposera que vous avez appelé la fenêtre \texttt{windowSurface}.
+
+Les couleurs se définissent avec leur code RGB:
+
+\begin{lstlisting}[language=Python, frame=single]
+BLACK = (0, 0, 0)
+WHITE = (255, 255, 255)
+RED = (255, 0, 0)
+GREEN = (0, 255, 0)
+BLUE = (0, 0, 255)
+\end{lstlisting}
+
+Tracer de objets géométriques
+
+\begin{itemize}
+    \item \textbf{Un segment:} \texttt{(60, 60)} sont les coordonnées du points de départ, \texttt{(120,60)} le point d'arrivé et \texttt{4} est l'épaisseur du trait.
+        \begin{lstlisting}[language=Python, frame=single]
+    pygame.draw.line(windowSurface, color, (60, 60), (120, 60), 4)
+        \end{lstlisting}
+    \item \textbf{Un cercle:}  \texttt{(300, 50)} sont les coordonnées du centre, \texttt{50} le rayon et \texttt{0} l'épaisseur du trait (0 signifie que le cercle est entièrement colorié).
+        \begin{lstlisting}[language=Python, frame=single]
+    pygame.draw.circle(windowSurface, color, (300, 50), 20, 0)
+        \end{lstlisting}
+    \item \textbf{Une ellipse:} \texttt{300} et \texttt{250} sont les coordonnées du centre, \texttt{40} le rayon horizontal, \texttt{80} le rayon vertical et \texttt{1} l'épaisseur du trait.
+        \begin{lstlisting}[language=Python, frame=single]
+    pygame.draw.ellipse(windowSurface, color, (300, 250, 40,80), 1)
+        \end{lstlisting}
+    \item \textbf{Un rectangle:} \texttt{20} et \texttt{30} sont les coordonnées du coin en haut à gauche du rectangle, \texttt{40} est la largeur et \texttt{50} est la hauteur.
+        \begin{lstlisting}[language=Python, frame=single]
+    pygame.draw.rect(windowSurface, color, (20, 30, 40, 50))
+        \end{lstlisting}
+    \item \textbf{Un polygone:} \texttt{((146, 0), (291, 106), (236, 277), (56, 277), (0, 106))} sont les coordonnées des sommets du polygone.
+        \begin{lstlisting}[language=Python, frame=single]
+    pygame.draw.polygon(windowSurface, color, 
+            ((146, 0), (291, 106), (236, 277), (56, 277), (0, 106))
+            )
+        \end{lstlisting}
+\end{itemize}
+
+Il ne faut pas oublier la ligne suivante après avoir tracé tout ce que vous vouliez, sinon rien ne s'affichera.
+\begin{lstlisting}[language=Python, frame=single]
+pygame.display.update()
+\end{lstlisting}
+
+
+D'autres fonctions de dessins existent. Voici un exemple de tout ce qui peut être fait en dessin avec pygame.
+
+\lstinputlisting[language=Python, frame=single]{./draw_example.py}
+
+\paragraph{Ajouter une image:} Pygame permet d'ajouter des images ayant les formats suivant: JPG, PNG, GIF (non-animated), BMP. On supposera dans la suite qu'elles sont rangées dans le même dossier que notre programme.
+\begin{lstlisting}[language=Python, frame=single]
+#Charger l'image
+img = pygame.image.load('image.jpg')
+# L'afficher sur la surface
+windowSurface.blit(img, (0,0))
+\end{lstlisting}
+Les coordonnées \texttt{(0,0)} sont les coordonnées de l'angle en haut à droit de l'image sur la surface.
+
+
+\section{Interaction avec les périphériques: Events}
+
+L'interaction avec l'utilisateur se fait dans la boucle des évènements.
+
+\begin{lstlisting}[language=Python, frame=single]
+    for event in pygame.event.get():
+        if event.type == pygame.QUIT:
+            running = False
+        elif event.type == pygame.KEYUP:
+            # choses a faire quand une touche du clavier est relachee
+            if event.key == pygame.K_UP:
+                # choses a faire quand c'est la touche fleche du haut 
+            elif event.key == pygame.K_DOWN:
+                # choses a faire quand c'est la touche fleche du bas
+        elif event.type == pygame.KEYDOWN:
+            # choses a faire quand une touche du clavier est pressee
+            elif event.key == pygame.K_LEFT:
+                # choses a faire quand c'est la touche fleche de gauche
+            elif event.key == pygame.K_RIGHT:
+                # choses a faire quand c'est la touche fleche de droite
+        elif event.type == pygame.MOUSEBUTTONUP:
+            # choses a faire quand le bouton de la souris est relache
+        elif event.type == pygame.MOUSEBUTTONDOWN:
+            # choses a faire quand le bouton de la souris est pressee
+\end{lstlisting}
+
+De manière générale, le nom des touches de clavier sont faite sur le même modèle: \texttt{K\_\#\#\#} où on remplace les \texttt{\#} par le nom de la touche.
+\begin{itemize}
+    \item Touche flèche du haut: \texttt{K\_UP}
+    \item Touche E: \texttt{K\_E}
+    \item Touche entrée: \texttt{K\_ESCAPE}
+\end{itemize}
+
+Quelques méthodes pratiques pour manipuler la souris
+
+\begin{itemize}
+    \item \texttt{pygame.mouse.get\_pos()} : connaître la position de la souris sur la fenêtre.
+    \item \texttt{pygame.mouse.set\_pos((x,y))}: déplacer la souris à un endroit.
+\end{itemize}
+
+
+\end{document}
+
+%%% Local Variables: 
+%%% mode: latex
+%%% TeX-master: "master"
+%%% End:
+

ISN/pygame/draw.py

@@ -0,0 +1,65 @@
+import pygame, sys
+
+pygame.init()
+
+windowSurface = pygame.display.set_mode((500, 400))
+pygame.display.set_caption('Hello world!')
+
+BLACK = (0, 0, 0)
+WHITE = (255, 255, 255)
+RED = (255, 0, 0)
+GREEN = (0, 255, 0)
+BLUE = (0, 0, 255)
+
+color_text = WHITE
+color_background = WHITE
+color_polygon = GREEN
+color_border = RED
+
+running = True
+while running:
+
+    basic_font = pygame.font.SysFont(None, 48)
+    text = basic_font.render('Hello world!', True, color_text ,BLUE)
+    text_rect = text.get_rect()
+    text_rect.centerx = windowSurface.get_rect().centerx
+    text_rect.centery = windowSurface.get_rect().centery
+
+    windowSurface.fill(color_background)
+
+    pygame.draw.polygon(windowSurface, color_polygon, 
+            ((146, 0), (291, 106), (236, 277), (56, 277), (0, 106))
+            )
+
+    pygame.draw.line(windowSurface, BLUE, (60, 60), (120, 60), 4)
+    pygame.draw.line(windowSurface, BLUE, (120, 60), (60, 120))
+    pygame.draw.line(windowSurface, BLUE, (60, 120), (120, 120), 4)
+
+    pygame.draw.circle(windowSurface, BLUE, (300, 50), 20, 0)
+
+    pygame.draw.ellipse(windowSurface, RED, (300, 250, 40,80), 1)
+
+    pygame.draw.rect(windowSurface, color_border, 
+            (text_rect.left - 20, text_rect.top - 20, 
+                text_rect.width + 40, text_rect.height + 40)
+            )
+
+    windowSurface.blit(text, text_rect)
+
+    pygame.display.update()
+
+    for event in pygame.event.get():
+        if event.type == pygame.QUIT:
+            running = False
+        elif event.type == pygame.MOUSEBUTTONUP:
+            color_background = WHITE
+            color_border = (255, (color_border[1] + 10) % 256, 0)
+        elif event.type == pygame.MOUSEBUTTONDOWN:
+            color_background = RED
+        elif event.type == pygame.KEYUP:
+            if event.key == pygame.K_UP:
+                color_polygon = BLACK
+            elif event.key == pygame.K_DOWN:
+                color_polygon = GREEN
+
+pygame.quit()

ISN/pygame/draw_example.py

@@ -0,0 +1,83 @@
+# Import a library of functions called 'pygame'
+import pygame
+from math import pi
+ 
+# Initialize the game engine
+pygame.init()
+ 
+# Define the colors we will use in RGB format
+BLACK = (  0,   0,   0)
+WHITE = (255, 255, 255)
+BLUE =  (  0,   0, 255)
+GREEN = (  0, 255,   0)
+RED =   (255,   0,   0)
+ 
+# Set the height and width of the screen
+size = [400, 300]
+screen = pygame.display.set_mode(size)
+ 
+pygame.display.set_caption("Example code for the draw module")
+ 
+#Loop until the user clicks the close button.
+done = False
+clock = pygame.time.Clock()
+ 
+while not done:
+ 
+    # This limits the while loop to a max of 10 times per second.
+    # Leave this out and we will use all CPU we can.
+    clock.tick(10)
+     
+    for event in pygame.event.get(): # User did something
+        if event.type == pygame.QUIT: # If user clicked close
+            done=True # Flag that we are done so we exit this loop
+ 
+    # All drawing code happens after the for loop and but
+    # inside the main while done==False loop.
+     
+    # Clear the screen and set the screen background
+    screen.fill(WHITE)
+ 
+    # Draw on the screen a GREEN line from (0,0) to (50.75) 
+    # 5 pixels wide.
+    pygame.draw.line(screen, GREEN, [0, 0], [50,30], 5)
+ 
+    # Draw on the screen a GREEN line from (0,0) to (50.75) 
+    # 5 pixels wide.
+    pygame.draw.lines(screen, BLACK, False, [[0, 80], [50, 90], [200, 80], [220, 30]], 5)
+    
+    # Draw on the screen a GREEN line from (0,0) to (50.75) 
+    # 5 pixels wide.
+    pygame.draw.aaline(screen, GREEN, [0, 50],[50, 80], True)
+
+    # Draw a rectangle outline
+    pygame.draw.rect(screen, BLACK, [75, 10, 50, 20], 2)
+     
+    # Draw a solid rectangle
+    pygame.draw.rect(screen, BLACK, [150, 10, 50, 20])
+     
+    # Draw an ellipse outline, using a rectangle as the outside boundaries
+    pygame.draw.ellipse(screen, RED, [225, 10, 50, 20], 2) 
+
+    # Draw an solid ellipse, using a rectangle as the outside boundaries
+    pygame.draw.ellipse(screen, RED, [300, 10, 50, 20]) 
+ 
+    # This draws a triangle using the polygon command
+    pygame.draw.polygon(screen, BLACK, [[100, 100], [0, 200], [200, 200]], 5)
+  
+    # Draw an arc as part of an ellipse. 
+    # Use radians to determine what angle to draw.
+    pygame.draw.arc(screen, BLACK,[210, 75, 150, 125], 0, pi/2, 2)
+    pygame.draw.arc(screen, GREEN,[210, 75, 150, 125], pi/2, pi, 2)
+    pygame.draw.arc(screen, BLUE, [210, 75, 150, 125], pi,3*pi/2, 2)
+    pygame.draw.arc(screen, RED,  [210, 75, 150, 125], 3*pi/2, 2*pi, 2)
+    
+    # Draw a circle
+    pygame.draw.circle(screen, BLUE, [60, 250], 40)
+    
+    # Go ahead and update the screen with what we've drawn.
+    # This MUST happen after all the other drawing commands.
+    pygame.display.update()
+ 
+# Be IDLE friendly
+pygame.quit()

ISN/pygame/pygame_base.py

@@ -0,0 +1,30 @@
+# Importation de pygame
+import pygame
+
+pygame.init()
+
+# Initialisation de la fenetre
+largeur = 600
+hauteur = 400
+windowSurface = pygame.display.set_mode((largeur, hauteur), 0,32)
+
+# Initialisation des parametres
+
+
+# Boucle de jeu
+clock = pygame.time.Clock()
+running = True
+while running:
+    # Limitation du nombre de tours de boucle par seconde.
+    clock.tick(10)
+    # Boucle des evenements
+    for event in pygame.event.get():
+        if event.type == pygame.QUIT:
+            running = False
+
+    # Elements a tracer
+
+    pygame.display.update()
+
+
+pygame.quit()

ISN/pygame/snake.tex

@@ -0,0 +1,45 @@
+\documentclass[a4paper,12pt]{article}
+\usepackage{myXsim}
+
+\date{Novembre 2017}
+\title{Jeu Snake}
+\tribe{ISN}
+
+
+\begin{document}
+
+\maketitle
+
+\bigskip
+
+Le but de cette activité est de (re)créer le jeu snake en python avec Pygame.
+
+
+\begin{center}
+    \includegraphics[scale=0.6]{./fig/snake_internet.png}
+\end{center}
+
+D'après Wikipédia:
+
+\begin{quote}
+    Le joueur contrôle une longue et fine ligne semblable à un serpent, qui doit slalomer entre les bords de l'écran et les obstacles qui parsèment le niveau. Pour gagner chacun des niveaux, le joueur doit faire manger à son serpent un certain nombre de pastilles similaire à de la nourriture, allongeant à chaque fois la taille du serpent. Alors que le serpent avance inexorablement, le joueur ne peut que lui indiquer une direction à suivre (en haut, en bas, à gauche, à droite) afin d'éviter que la tête du serpent ne touche les murs ou son propre corps, auquel cas il risque de mourir.
+\end{quote}
+
+\section*{Proposition d'étapes à suivre}
+
+\begin{enumerate}
+    \item \textbf{Scène et acteurs:} Afficher le nom du jeu (sans la partie statistique et contrôles), la grille de jeu et notre serpent (jusqu'à l'étape 6, le serpent ne fera qu'une seule case).
+    \item \textbf{Contrôles}: Faire déplacer le serpent avec les flèches du clavier.
+    \item \textbf{Déplacement et contrôles:} Dans le jeu Snake, le serpent ne s'arrête jamais. Le joueur peut seulement changer la direction du serpent avec les touches du clavier. Programmer ce comportement. Penser à ajouter ajouter un texte qui explique comment jouer.
+    \item \textbf{Game Over:} Le jeu annonce Game Over et s'arrête quand le serpent sort de la grille de jeu.
+    \item \textbf{La nourriture:} La nourriture apparait aléatoirement sur la grille. Dès que le serpent arrive sur cette case, il gagne un point et la nourriture apparait ailleurs. Les points s'affichent sur le côté.
+    \item \textbf{Un beau serpent:} Le serpent faire 3 cases de long. À chaque fois qu'il mange, il grandit d'une case. S'il se déplace sur sa queue, la partie est terminée.
+\end{enumerate}
+
+\end{document}
+
+%%% Local Variables: 
+%%% mode: latex
+%%% TeX-master: "master"
+%%% End:
+

ISN/pygame/snake_corr.py

@@ -0,0 +1,22 @@
+import pygame
+
+pygame.init()
+
+largeur = 600
+hauteur = 400
+windowSurface = pygame.display.set_mode((largeur, hauteur), 0,32)
+
+WHITE = (255, 255, 255)
+
+running = True
+while running:
+
+    pygame.draw.line(windowSurface, WHITE, (0,10), (600,10))
+
+    pygame.display.update()
+
+    for event in pygame.event.get():
+        if event.type == pygame.QUIT:
+            running = False
+
+pygame.quit()