portfolio/blitz.html at main · devipilou/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Jeu vidéo de Snake - mobile compatible, et de difficulté croissante. Exercice Javascript à l'aide du tutoriel d'Enzo Ustariz complété par mes soins">
    <title>Super Blitz - Bonus Page - Pierre-Loup Perez - Web Developer</title>
    <link
      rel="stylesheet"
      href="https://bootswatch.com/5/spacelab/bootstrap.min.css"
      />
    <link rel="stylesheet" href="/styles/style.css" />
    <script defer src="https://cdn.jsdelivr.net/npm/tsparticles@1.36.0/tsparticles.min.js"></script>
    <script src="/js/app.js" defer></script>
    <link rel="shortcut icon" href="/assets/favicon.ico" />
    <link rel="icon" href="/assets/android-chrome-192x192.png" sizes="192x192" />
    <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" />
    <meta
      name="msapplication-TileImage"
      content="/assets/android-chrome-192x192.png"
    />
    <link rel="image_src" href="/assets/android-chrome-512x512.png" />
  </head>

  <body id="top">

    <!-- fond particules -->
    <div id="tsparticles"></div>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand ms-3" href="index.html">
          <img src="/assets/android-chrome-192x192.png" alt="logo Pilou Dev" class="border border-primary">
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarColor03"
          aria-controls="navbarColor03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse me-lg-3" id="navbarColor03">
          <ul class="navbar-nav ms-auto text-center">
            <li class="nav-item">
              <a class="nav-link" href="index.html">Accueil</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="projets.html">Projets</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="presentation.html">Présentation</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="cv.html">Curriculum Vitae</a>
            </li>
            <li class="nav-item">
              <a href="contact.html" class="nav-link">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Header -->
    <header class="container-fluid text-center mb-5">
      <img src="/assets/android-chrome-192x192.png" alt="logo pilou dev web" class="logo80">
       <figure class="text-intro">
         <blockquote class="blockquote">
           <h1 class="mb-2 display-4">Super Blitz</h1>
         </blockquote>
         <figcaption class="blockquote-footer text-dark">
           <cite title="Source Title">bonus</cite>
         </figcaption>
       </figure>
     </header>


     <!-- Main -->
     <main class="container">

      <article id="blitz" class="text-center">
        <canvas id="canvasBlitz" width="320" height="320"></canvas>
        <p>Score = <span id="score">0</span></p>
        <p><small class="text-secondary">ps: mon record est <span id="recordBlitz"></span></small></p>
        <div id="messageBlitz"></div>
        <button class="btn btn-secondary" id="startBlitz">Commencer</button>
      </article>

      <hr class="mx-5 bg-primary my-5">

      <article class="text-center">
        <p>Le jeu se joue au click dans le cadre, cela déclenche la chute d'une bombe.</p>
        <p>Le but est de détruire tous les immeubles avant que l'avion ne les percute.</p>
        <p>Une nouvelle bombe est chargée dès que la première a terminé sa chute.</p>
        <p>L'algorithme de score est secret, à vous de le deviner si cela vous amuse. Par contre, le score n'est valable que si vous terminez le jeu</p>
      </article>

    </main>

  <!-- Footer -->
  <footer class="row text-center justify-content-center pt-3 mx-1">
    <section class="col-12 col-sm-6 col-md-4 row">
      <h4>Où me trouver ?</h4>
      <a href="https://github.com/devipilou/devipilou" target="_blank">Github</a>
      <a href="https://www.linkedin.com/in/pierre-loup-perez" target="_blank">LinkedIn</a>
      <a href="https://www.hackerrank.com/devipilou?hr_r=1" target="blank">HackerRank</a>
      <a href="https://scratch.mit.edu/users/AnnaEtPapa/" target="_blank">Scratch</a>
    </section>

    <section class="col-12 col-sm-6 col-md-4 row">
      <h4>Projets à voir</h4>
      <a href="/pilou_art/index.html" target="_blank">Galerie de Pilou_art</a>
      <a href="https://maitressege.fr" target="_blank">Blog de Maîtresse Gé</a>
    </section>

    <section class="col-12 col-sm-6 col-md-4 row">
      <h4>Liens internes</h4>
      <a href="bonus.html">Bonus</a>
      <a href="mentions.html">Mentions Légales</a>
      <a href="contact.html">Contactez-moi</a>
    </section>
    <p class="col-12 mt-2">
      &copy; <span id="annee"></span> - Pierre-Loup Perez
    </p>
  </footer>

    <!-- Scripts -->
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
      crossorigin="anonymous"
    ></script>
    <script src="/js/blitz.js"></script>
  </body>
</html>