pixelswars/index.html at main · john-does-it/pixelswars · 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pixel's War, a Strategy Board Game Playable in the Browser</title>
  <meta name="description" content="Be the best commander, lead your army to victory, and show your defeated friend who is the smartest! A free turn-by-turn strategy game.">
  <meta name="author" content="John Does It">
  <meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' https://jonathanschoonbroodt.github.io/apis https://cdn.jsdelivr.net;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  img-src 'self' https://jonathanschoonbroodt.github.io;
  connect-src 'self' https://jonathanschoonbroodt.github.io/apis;
  font-src 'self' https://fonts.gstatic.com;
  object-src 'none';
  base-uri 'self';
  form-action 'self';">
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
</head>
<body class="index-container _flex -column -aligncenter">
  <section>
    <h1 class="_color -white _text -xl -center">Pixel's War</h1>
    <p class="_color -white" style="max-width: 640px; padding: 1em;">
      In its current state, Pixel's War is a browser-based game prototype inspired by Famicom Wars / Advance Wars. This project is written using basic web technologies: HTML, CSS, and JS.
      The prototype allows you to play against another player on the same computer or smartphone. Be the best commander, lead your army to victory, and show your defeated friend who is the smartest!
    </p>
  </section>
  <section>
    <h2 class="_color -white _text -l -center">Give It a Try!</h2>
    <ul class="boardpreview-container _flex -wrap -justifycenter -aligncenter">
      <li>
        <a class="_flex -column -justifycenter" href="board-1.html" title="Access to the squared map">
          <img class="boardpreview" src="./assets/boards/board-squared.png" alt="Preview for squared board">
          <span class="_color -white _text -center">Squared 64 tiles (8*8)</span>
        </a>
      </li>
      <!--
        <li>
          <a class="_flex -column -justifycenter" href="board-2.html" title="Access to the rectangular map">
            <img class="boardpreview" src="./assets/boards/board-rectangle.png" alt="Preview for rectangular board">
            <span class="_color -white _text -center">Rectangular 96 tiles (12*8)</span>
          </a>
        </li>
      -->
    </ul>
  </section>
  <section>
    <h2 class="_color -white _text -l -center">Controls</h2>
    <h3 class="_color -white _text -m -center">PC</h3>
    <ul class="_color -white">
      <li>Left Click: Select a unit or attack an in-range enemy unit while a unit is selected.</li>
      <li>Arrows or ZQSD: Move unit while selected.</li>
      <li>Enter: Validate a unit move while selected.</li>
      <li>Escape: Cancel a unit move while selected.</li>
      <li>Space: Capture a building while an infantry is selected and on a cell containing a building.</li>
    </ul>
    <h3 class="_color -white _text -m -center">Smartphone</h3>
    <ul class="_color -white">
      <li>Touch: Select a unit, move a unit while selected or attack an in-range enemy unit while a unit is selected.</li>
    </ul>
  </section>
  <section>
    <h2 class="_color -white _text -l -center">Units</h2>
    <div class="description-container _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/units/infantry-1.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">Infantry</h3>
        <p class="_color -white _text -s">They are weak but they are cheap, so buy some meatboys and send them to the butcher. Infantry can capture buildings, making it a vital unit for your economy!</p>
      </div>
    </div>
    <div class="description-container _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/units/jeep-2.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">Jeep</h3>
        <p class="_color -white _text -s">Not very powerful, but they cover long distances and are relatively cheap. Ideal for harassing infantry and occupying strategic positions on the map.</p>
      </div>
    </div>
    <div class="description-container _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/units/tank-1.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">Tank</h3>
        <p class="_color -white _text -s">A costly unit with a lot of firepower and a high defense bonus, making them hard to destroy! Nice, if you can afford them.</p>
      </div>
    </div>
    <div class="description-container _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/units/artillery-2.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">Artillery</h3>
        <p class="_color -white _text -s">With a large attack range and strong firepower, they are a very useful unit! Unfortunately, they are costly and do not have good mobility capacity.</p>
      </div>
    </div>
  </section>
  <section>
    <h2 class="_color -white _text -l -center">Landscapes</h2>
    <div class="description-container -landscape _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/cells/cell-grass.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">Grass</h3>
        <p class="_color -white _text -s">A good old grass. Doesn't provide any cover and is more costly than a road. But hey, sometimes, you don't have a choice!</p>
      </div>
    </div>
    <div class="description-container -landscape _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/cells/cell-moutain-on-grass.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">Mountain</h3>
        <p class="_color -white _text -s">Mountains are very costly to move on but they give you a very high defense bonus.</p>
      </div>
    </div>
    <div class="description-container -landscape _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/cells/cell-forest-on-grass.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">Forest</h3>
        <p class="_color -white _text -s">What's better than a little forest stroll? Costly to move on, but provides a little defense bonus.</p>
      </div>
    </div>
    <div class="description-container -landscape _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/cells/cell-road-corner-bottom.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">Road</h3>
        <p class="_color -white _text -s">The most convenient way to reach a place. The least costly landscape to move on, no defense bonus.</p>
      </div>
    </div>
    <div class="description-container -landscape _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/cells/cell-water.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">Water</h3>
        <p class="_color -white _text -s">Only ships and flying units can move on it. Be careful, it's wet.</p>
      </div>
    </div>
  </section>
  <section>
    <h2 class="_color -white _text -l -center">Buildings</h2>
    <div class="description-container -landscape _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/cells/cell-city-on-grass.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">City</h3>
        <p class="_color -white _text -s">People live and work in these places. This is where money is made. Without cities, you cannot afford to buy fancy military units to show your power to the world.</p>
      </div>
    </div>
    <div class="description-container -landscape _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/cells/cell-factory-on-grass.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">Factory</h3>
        <p class="_color -white _text -s">This is where new units are created and trained. It smells terrible. They are currently recruiting, so send your CV.</p>
      </div>
    </div>
    <div class="description-container -landscape _flex -wrap -aligncenter -justifycenter">
      <img src="./assets/cells/cell-hospital-on-grass.png">
      <div class="description-subcontainer _flex -column">
        <h3 class="_color -white _text -m">Hospital</h3>
        <p class="_color -white _text -s">No one likes to be there, but it's better than dying in the wilderness. This is where your units can get healing and recover from the damage they have received.</p>
      </div>
    </div>
  </section>
  <section>
    <h2 class="_color -white _text -l -center">Support Us!</h2>
    <p class="_color -white">You can contribute to the development of the game in various ways: play the game (and send us your feedback), join the team, or contribute financially. For more information, send an email to hello@johndoesit.be.</p>
  </section>
  <footer>
    <p class="_color -white _text -center">Credits: Programming - <a class="_color -white _text -underlined" href="https://johndoesit.be" title="Go to John Does it website">John Does it</a> | Graphic assets - <a class="_color -white _text -underlined" href="https://www.kenney.nl" title="Go to Kenney website">Kenney</a> | Sounds - <a class="_color -white _text -underlined" href="https://pixabay.com/fr/sound-effects" title="Go to Pixabay website">Pixabay</a> | Music - <a class="_color -white _text -underlined" href="https://arcofdream.bandcamp.com/album/monolith-official-soundtrack" title="Go to Monolith website">Monolith</a> | QA - Gauthier Miessen</p>
  </footer>
</body>
</html>