diff options
| author | Rohit T P <tprohit9@gmail.com> | 2024-09-16 04:35:19 +0530 |
|---|---|---|
| committer | Rohit T P <tprohit9@gmail.com> | 2024-09-16 04:35:19 +0530 |
| commit | 012ce933783199469112e1394ddc72fe2784528f (patch) | |
| tree | 426c64b25a4a52e32071b5d123314b961c7978c6 | |
| parent | 4b840f0aa9195b978834e574244b9e169c043b5a (diff) | |
new styles
| -rw-r--r-- | index.css | 107 | ||||
| -rw-r--r-- | index.html | 60 |
2 files changed, 136 insertions, 31 deletions
diff --git a/index.css b/index.css new file mode 100644 index 0000000..766d45f --- /dev/null +++ b/index.css @@ -0,0 +1,107 @@ +body { + font-family: 'Arial', sans-serif; + line-height: 1.6; + color: #333; + background-color: #f4f4f4; + margin: 0; + padding: 0; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +header { + text-align: center; + margin-bottom: 30px; +} + +h1 { + font-size: 3rem; + color: #2c3e50; + text-transform: uppercase; + letter-spacing: 2px; +} + +.game-container { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items: flex-start; + gap: 20px; +} + +.game-board { + flex: 1; + min-width: 300px; + max-width: 500px; +} + +canvas { + border: 2px solid #2c3e50; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.game-info { + flex: 1; + min-width: 300px; + max-width: 500px; +} + +.difficulty-control { + margin-bottom: 20px; +} + +.difficulty-control label { + display: block; + margin-bottom: 5px; + font-weight: bold; +} + +.difficulty-control input[type="range"] { + width: 100%; + margin-bottom: 5px; +} + +.instructions { + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.instructions h2 { + margin-top: 0; + color: #2c3e50; +} + +.game-stats { + background-color: #2c3e50; + color: #fff; + padding: 20px; + border-radius: 5px; + margin-bottom: 20px; +} + +.game-stats p { + margin: 10px 0; +} + +.game-stats span { + font-weight: bold; +} + +@media (max-width: 768px) { + .game-container { + flex-direction: column; + align-items: center; + } + + .game-board, .game-info { + width: 100%; + max-width: none; + } +} @@ -3,23 +3,9 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Maze Trapper Game</title> - <style> - body { - font-family: sans-serif; - } - canvas { - border: 1px solid black; - } + <title>CatchUp</title> + <link rel="stylesheet" href="index.css"> - .main-container { - display: flex; - flex-direction: row; - justify-content: space-evenly; - flex-wrap: wrap; - align-content: center; - } - </style> <script src="enemy.js" defer></script> <script src="maze.js" defer></script> <script src="logic.js" defer></script> @@ -27,21 +13,33 @@ <script src="index.js" defer></script> </head> <body> -<h1 style="text-align: center;font-size: xxx-large;">CatchUp</h1> -<div class="main-container"> - <canvas id="gameCanvas" width="500" height="500"></canvas> - <div> - <label for="hardness">Hardness</label> - <input type="range" min="0.1" max="1" value="0.5" step="0.1" id="hardness"> - <p style="max-width: 40vw"> - You are the blue player. You objective is to trap the red player in the maze. - If you manage to get to a state where the red player has nowhere to go, you win. - Use the arrow keys to move the blue player. Use space bar to switch between the blue players. - </p> - <p style="font-size: large">Current Moves: <b id="moves"></b></p> - <p style="font-size: large">Moves Left: <b id="movesLeft"></b></p> - <p style="font-size: large">Game State: <b id="state"></b></p> - </div> +<div class="container"> + <header> + <h1>CatchUp</h1> + </header> + <main class="game-container"> + <section class="game-board"> + <canvas id="gameCanvas" width="500" height="500"></canvas> + </section> + <section class="game-info"> + <div class="difficulty-control"> + <label for="hardness">Difficulty:</label> + <input type="range" min="0.1" max="1" value="0.5" step="0.1" id="hardness"> + </div> + <div class="game-stats"> + <p>Current Moves: <span id="moves">0</span></p> + <p>Moves Left: <span id="movesLeft">0</span></p> + <p>Game State: <span id="state">Playing</span></p> + </div> + + <div class="instructions"> + <h2>How to Play</h2> + <p>You are the blue player. Your objective is to trap the red player in the maze.</p> + <p>Use the arrow keys to move the blue player. Use the space bar to switch between the blue players.</p> + <p>You move continuously in any direction until there is a wall or you hit another player. The red player can move any number of steps in any direction</p> + </div> + </section> + </main> </div> </body> </html> |