← back to Baguette Brawl
src/index.html
87 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Baguette Brawl — Duel de Paris</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🥖</text></svg>">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="wrap">
<canvas id="c" width="960" height="540"></canvas>
<!-- MENU -->
<div id="menu" class="overlay">
<div class="kicker">Sous la lune de Montmartre</div>
<h1>Baguette <span class="em">Brawl</span></h1>
<p class="sub">Two crusty duelists face off beneath the Eiffel Tower. Swing your loaf, guard your crust, charge the meter and unleash the <b>Crust Crusher</b>. First to <b>2 rounds</b> wins the boulangerie.</p>
<div class="diffrow">
<label for="difficulty">Chef IA</label>
<select id="difficulty">
<option value="easy">Apprenti (facile)</option>
<option value="normal" selected>Boulanger (normal)</option>
<option value="hard">Maître (difficile)</option>
</select>
</div>
<div class="btns">
<button class="play" data-mode="1">Solo vs. Chef IA</button>
<button class="play alt" data-mode="2">Deux Joueurs</button>
<button class="play train" data-mode="3">Entraînement</button>
</div>
<div class="controls">
<div class="ctrlcard">
<h4>Pierre · Joueur 1</h4>
<div class="row"><span>Move / Jump</span><span><kbd>A</kbd><kbd>D</kbd><kbd>W</kbd></span></div>
<div class="row"><span>Jab · Heavy</span><span><kbd>J</kbd><kbd>K</kbd></span></div>
<div class="row"><span>Guard · Super</span><span><kbd>L</kbd><kbd>U</kbd></span></div>
</div>
<div class="ctrlcard">
<h4>Gaston · Joueur 2</h4>
<div class="row"><span>Move / Jump</span><span><kbd>←</kbd><kbd>→</kbd><kbd>↑</kbd></span></div>
<div class="row"><span>Jab · Heavy</span><span><kbd>,</kbd><kbd>.</kbd></span></div>
<div class="row"><span>Guard · Super</span><span><kbd>/</kbd><kbd>;</kbd></span></div>
</div>
</div>
<div class="foot">Pause <kbd>P</kbd> · Mute <kbd>M</kbd> · Entraînement: <kbd>1</kbd>/<kbd>2</kbd>/<kbd>3</kbd> dummy, <kbd>R</kbd> reset · Un jeu de pain · Paris</div>
</div>
<!-- PAUSE -->
<div id="pause" class="overlay hide">
<div class="kicker">Pause</div>
<h1>En pause</h1>
<div class="btns">
<button class="play" data-pause="resume">Reprendre</button>
<button class="play alt" data-pause="menu">Menu</button>
</div>
<div class="foot"><kbd>P</kbd> pour reprendre</div>
</div>
<!-- ROUND / RESULT -->
<div id="result" class="overlay hide">
<div class="kicker" id="resKicker">Manche terminée</div>
<h1 id="resTitle">—</h1>
<p class="sub" id="resSub"></p>
<div class="btns" id="resBtns"></div>
</div>
<!-- TOUCH CONTROLS (mobile) -->
<div id="touch">
<div class="pad">
<button data-key="a">◀</button>
<button data-key="w">▲</button>
<button data-key="d">▶</button>
</div>
<div class="acts">
<button data-key="l">🛡</button>
<button data-key="j">J</button>
<button data-key="k">K</button>
<button data-key="u" class="sup">SUP</button>
</div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>