<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Shot game</title>
  <link rel="stylesheet" href="./hidden_shotgame.css">

</head>
<body>
<!-- partial:index.partial.html -->
<main id="gameFrame" class="firstGame" onclick="myShootingEffects()">

  <div id="healthBar"></div>

  <div class="ennemy" style="left: 030px;"></div>
  <div class="ennemy" style="left: 200px;"></div>
  <div class="ennemy" style="left: 330px;"></div>
  <div class="ennemy" style="left: 430px;"></div>
  <div class="ennemy" style="left: 500px;"></div>
  <div class="ennemy" style="left: 640px;"></div>

  <button onclick="newGame()" id="newGame">

    <span class="messageWon">
      <span class="emoji">👏</span> Oh yes!
    </span>
    <span class="messageDead">
      <span class="emoji">😵</span> Oh no…
    </span>
    <span class="messageWelcome">
      <span class="emoji">🤖</span> Welcome
    </span>

    <p>👉 New game</p>

  </button>

</main>
<!-- partial -->
  <script  src="./shotgame.js"></script>

</body>
</html>
