testing
Testing
%%html
<style>
body{
}
.wrap{
margin-left: auto;
margin-right: auto;
}
canvas{
display: none;
border-style: solid;
border-width: 10px;
border-color: #FFFFFF;
}
canvas:focus{
outline: none;
}
/* All screens style */
#gameover p, #setting p, #menu p{
font-size: 20px;
}
#gameover a, #setting a, #menu a{
font-size: 30px;
display: block;
}
#gameover a:hover, #setting a:hover, #menu a:hover{
cursor: pointer;
}
#gameover a:hover::before, #setting a:hover::before, #menu a:hover::before{
content: ">";
margin-right: 10px;
}
#menu{
display: block;
}
#gameover{
display: none;
}
#setting{
display: none;
}
#setting input{
display:none;
}
#setting label{
cursor: pointer;
}
#setting input:checked + label{
background-color: #808080;
color: #000;
}
</style>
<div class="container">
<header class="pb-3 mb-4 border-bottom border-primary text-dark">
<p class="fs-4">By Gavin, John, Ian, and Matthew</p>
</header>
<div class="container bg-secondary" style="text-align:center;">
<!-- Main Menu -->
<div id="menu" class="py-4 text-light">
<p>Welcome to Snake, press <span style="background-color: #FFFFFF; color: #000000">space</span> to begin</p>
<a id="new_game" class="link-alert">new game</a>
<a id="setting_menu" class="link-alert">settings</a>
</div>
<!-- Game Over -->
<div id="gameover" class="py-4 text-light">
<p>Game Over, press <span style="background-color: #FFFFFF; color: #000000">space</span> to try again</p>
<a id="new_game1" class="link-alert">new game</a>
<a id="setting_menu1" class="link-alert">settings</a>
</div>
<!-- Play Screen -->
<canvas id="game" class="wrap" width="320" height="320" tabindex="1"></canvas>
<!-- Settings Screen -->
<div id="setting" class="py-4 text-light">
<p>Settings Screen, press <span style="background-color: #FFFFFF; color: #000000">space</span> to go back to playing</p>
<a id="new_game2" class="link-alert">new game</a>
<br>
<p>Speed:
<input id="speed1" type="radio" name="speed" value="120" checked/>
<label for="speed1">Slow</label>
<input id="speed2" type="radio" name="speed" value="75"/>
<label for="speed2">Normal</label>
<input id="speed3" type="radio" name="speed" value="35"/>
<label for="speed3">Fast</label>
</p>
<p>Wall:
<input id="wallon" type="radio" name="wall" value="1" checked/>
<label for="wallon">On</label>
<input id="walloff" type="radio" name="wall" value="0"/>
<label for="walloff">Off</label>
</p>
</div>
</div>
</div>
<script>
</script>
%%html
<title>Code Climbers</title>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
background-color: #87CEEB; /* Sky Blue */
text-align: center;
}
.screen {
display: none;
}
#menu {
display: block;
}
h1 {
color: #FFD700; /* Gold */
}
a {
display: block;
margin: 10px;
padding: 15px;
background-color: #4CAF50; /* Green */
color: white;
text-decoration: none;
font-size: 24px;
border-radius: 8px;
}
a:hover {
background-color: #45a049; /* Darker Green on hover */
}
</style>
<body>
<div id="menu" class="screen">
<h1>Code Climbers</h1>
<a href="#" id="startButton">Start Game</a>
<a href="#" id="settingsButton">Settings</a>
<a href="#" id="aboutButton">About</a>
</div>
<div id="about" class="screen">
<h1>About Code Climbers</h1>
</div>
</body>