82 lines
3.9 KiB
HTML
82 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cats vs. Mice</title>
|
|
<script src="js/p5.js"></script>
|
|
<script src="js/p5.dom.min.js"></script>
|
|
<script src="js/p5.sound.min.js"></script>
|
|
<script src="js/scenemanager.js"></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/planck-js/1.3.0/planck.js' integrity='sha512-OpFl/oyutfMxRHH9jnD7DwC14TmOzCsE/2l8Uf2PCGuLtUxX+qAhX/TNSV/rf24XZfANLoa10lmM40BlLMmRwg==' crossorigin='anonymous'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5play/3.26.5/p5play.js' integrity='sha512-/U7V9+DgHiG8HVEtlGUYBRudMHgNB05AtyKOG2e4BduF4XogG4inVXPvEI5NE/I7R28a8K7gAgI7msqIzzBt4Q==' crossorigin='anonymous'></script>
|
|
|
|
<script type="module" src="sketch.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Paytone+One&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<h1 id="title">Cats vs Mice</h1>
|
|
<div id="gameFrame">
|
|
<div id="endingOverlay">
|
|
<h1 id="endingText">Congrats! You've finished level 1!</h1>
|
|
<button class="Button" id="quitGameButton">Quit Game</button>
|
|
</div>
|
|
<div id="upperContainer">
|
|
<div id="controlPanel">
|
|
<img src="assets/cheeseLabel.png" alt="Cheese Label" id="cheeseLabel">
|
|
|
|
<div id="cheeseDisplay">
|
|
<img src="assets/cheese.png" alt="Cheese Icon" id="cheeseIcon">
|
|
<span id="cheeseCount">50</span>
|
|
</div>
|
|
|
|
<img src="assets/catsLabel.png" alt="Cat Label" id="catsLabel">
|
|
|
|
<div id="catToolbar">
|
|
<button class="catButton" id="chefCat">
|
|
<img src="assets/icon/chef_cat_icon.png" alt="Chef Cat" class="catIcon" />
|
|
<span>50</span>
|
|
</button>
|
|
<button class="catButton" id="singleYarnCat">
|
|
<img src="assets/icon/single_yarn_cat_icon.png" alt="Single Yarn Cat" class="catIcon" />
|
|
<span>100</span>
|
|
</button>
|
|
<button class="catButton" id="doubleYarnCat">
|
|
<img src="assets/icon/double_yarn_cat_icon.png" alt="Double Yarn Cat" class="catIcon" />
|
|
<span>200</span>
|
|
</button>
|
|
<button class="catButton" id="sleepyCat">
|
|
<img src="assets/icon/sleepy_cat_icon.png" alt="Sleepy Cat" class="catIcon" />
|
|
<span>150</span>
|
|
</button>
|
|
<button class="catButton" id="iceCat">
|
|
<img src="assets/icon/ice_cat_icon.png" alt="Ice Cat" class="catIcon" />
|
|
<span>150</span>
|
|
</button>
|
|
</div>
|
|
|
|
<span class="divider"></span>
|
|
|
|
<button class="catButton" id="petCage">
|
|
<img src="assets/icon/petCage.png" alt="Pet Cage" id="cageIcon" />
|
|
</button>
|
|
</div>
|
|
<div id="gameProgressWrapper">
|
|
<progress id="gameProgress" value="0" max="100"></progress>
|
|
<label id="gameProgressLabel">Game Progress</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="Button" id="startButton">Start Game</button>
|
|
<div id="menuButton">
|
|
<button class="Button" id="restartButton">Restart Game</button>
|
|
<button class="Button" id="quitButton">Quit Game</button>
|
|
</div>
|
|
</body>
|
|
</html> |