Skip to content

Game 2 #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RGUD0 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Game 2 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
62e709b
New Game 2 Settings
RGUD0 Oct 19, 2023
e79b972
Improved Game 2 Settings
RGUD0 Oct 31, 2023
10fbb34
Game 2 Added (Not Yet Complete)
RGUD0 Dec 13, 2023
33804f2
Finishing Game 2, 0
RGUD0 Dec 14, 2023
7bf6180
Game 2 Finished
RGUD0 Dec 14, 2023
79f8a41
Fixed Box Width
RGUD0 Dec 14, 2023
99760c0
Difficulty Time + Title
RGUD0 Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions game1Settings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@
</head>
<body>
<div class="row">
<div class="leftcolumn">
<div class="clearbox"></div>
</div>
<div class="middlecolumn">
<div class="box">
<h1>Matching</h1>
<h2>Game mode</h2>
Expand Down Expand Up @@ -59,8 +55,6 @@ <h2>Directions</h2>
flipped so you can create a match! A match happens when you select two cards with <br>
the same image on them.
</p>


</div>
</div>
<div class="rightcolumn">
Expand Down
137 changes: 137 additions & 0 deletions game2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
/* Settings 2 */

body {
/*display: flex;
justify-content: center;*/
/* align-items: center; */
height: 100vh; /* This ensures the container takes up the full viewport height */
margin: 0; /* Remove default body margin */
background-color: #f0f0f0; /* Background color for the entire page */
}

a,#gameValues,#settingValues {
display: block;
background-color: #007bff;
color: white;
text-decoration: none;
padding: 10px;
margin-top: 20px;
max-width: 300px;
margin-left: auto;
margin-right: auto;
border: none;
font: inherit;
}

button {
display: inline-block;
background-color: #007bff;
color: white;
text-decoration: none;
padding: 10px;
margin-top: 20px;
max-width: 300px;
margin-left: auto;
margin-right: auto;
border: none;
font: inherit;
}

.leftcolumn {
float: left;
width: 25%;
/*padding-right: 20px;*/
}

.middlecolumn {
float: left;
width: 50%;
height: 100%;
background-color: #f1f1f1;
}

.rightcolumn {
float: left;
width: 25%;
/*padding-left: 20px;*/
}

.box {
float: center;
text-align: center;
background-color: white;
padding: 20px;
width: 100%;
max-width: 500px;
height: 100%;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}

.clearbox {
background-color: none;
padding: 20px;
height: fit-content;
margin-top: 10px;
margin-bottom: 10px;
}

.row::after {
content: "";
display: table;
clear: both;
}

.center {
display: block;
text-align: center;
}

.gameGrid {
display: grid;
gap: 5px;
padding-top: 100%;
margin: auto;
padding: auto;
border: none;
}

/*
.gameCell {
background-color: #ffffff;
/*
position: relative;
margin: 0px;
border: none;
animation-name: pulse;
--startColor: none;
--pulseColor: none;

} */
/*
.easyPulse {
animation-duration: 1s;
}
@keyframes pulse {
from { background-color: var(--startColor); }
to { background-color: var(--pulseColor); }
}
*/

/* Responsive layout - when the screen is less than 800px wide, make the three
columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .middlecolumn, .rightcolumn {
width: 100%;
padding: 0;
}
.box, .clearbox {
margin-top: 20px;
margin-bottom: 20px;
}
}
/**/

/* Copy Game */
48 changes: 35 additions & 13 deletions game2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="nav.css">
<title>Game 2</title>
</head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="game2.css">
<script src="js/game2.js"></script>
<title>Game 2</title>
</head>
<body>
<div class="row">
<div class="leftcolumn">
<div class="clearbox"></div>
</div>
<div class="middlecolumn">
<div class="box">
<h1>Copy Game</h1>
<!-- Game 2 Grid -->
<div id="game2Grid" class="gameGrid">

<footer>
<nav>
<div class="black-box">
<a href = "index.html" class="option">Home</a> <br>
<a href = "game2settings.html" class="option">Game 2 Settings</a> <br>
</div>
<button id="startGameBtn" onclick="memoryGame()">Start Game</button>
<button id="startLevelBtn" onclick="startLevel()" disabled>Start Level</button>
<button id="gameScore">Score: 0</button>
<button id="highScore">High Score: 0</button>
<a href="index.html">Home</a>
<a href="game2settings.html">Game 2 Settings</a>
<p id="gameValues">Values: 2 easy #1c87c9</p>
<script>
setValues();
</script>
</div>
</div>
<div class="rightcolumn">
<div class="clearbox"></div>
</div>
</div>
</nav>
</footer>
</body>
</html>
108 changes: 62 additions & 46 deletions game2settings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="nav.css">
<link rel="stylesheet" type="text/css" href="game2.css">
<script src="js/game2.js"></script>
<title>Game 2 Settings</title>
<script type="text/javascript" scr="js/scripts.js"></script>
</head>
<body>
<div class="row">
Expand All @@ -15,62 +14,79 @@
</div>
<div class="middlecolumn">
<div class="box">
<h1>Copy Creation</h1>
<h1>Copy Game Settings</h1>
<!-- Size -->
<h2>Grid Size</h2>
<p>
Using the slider below, please select the size of grid you would like to start with. <br>
The size will become larger as the pattern continues to get larger.
Use the slider to select the size of grid. <br>
The size will increase as you progress.
</p>
<div class="slidecontainer">
<h3>Size: <input type="range" min="1" max="5" value="1" class="slider" id="myRange"> <span id="demo">1</span></h3>
<h3>Size: <input type="range" min="2" max="5" value="2" class="slider" id="sizePick"> <span id="sizeOutput">2 x 2</span></h3>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value + " x " + slider.value;
slider.oninput = function() {
output.innerHTML = this.value + " x " + this.value;
}
</script>
<h2>Level Select</h2>
<!-- Difficulty -->
<h2>Difficulty Select</h2>
<p>
Select a difficulty for the game. <br>
This determines the duration of cell flashes.<br>
The duration decreases with difficulty.
</p>
<div class="container">
<input type="radio" id="diffPick1" name="difficulty" value="easy" checked><span>Easy 1s</span>
<input type="radio" id="diffPick2" name="difficulty" value="medium"><span>Medium 0.5s</span>
<input type="radio" id="diffPick3" name="difficulty" value="hard"><span>Hard 0.25s</span>
</div>
<!-- Color -->
<h2>Color Select</h2>
<p>
Pick a color below. <br>
The color is what the cells will flash to when they <br>
light up during the game, then flash back to white.
</p>
<input type="color" id="colorPick" name="colorPick" value="#1c87c9">
<label id="colorValue">#1c87c9</label>
<!-- Keep -->
<h2>Keep Select</h2>
<p>
Pick a level below. <br>
Each level corresponds to the amount of time each square in the pattern will flash <br>
The harder the level, the less time you will have to look at the lit up square.
Select whether to keep the settings.<br>
If you go back to the settings page, values will be kept.
</p>
<div class="container">
<input type="radio" name="LevelSelector">
<label>Easy</label>
<input type="radio" name="LevelSelector">
<label>Medium</label>
<input type="radio" name="LevelSelector">
<label>Hard</label>
</div>

<h2>Directions</h2>
<p>
Once the game begins, a card in the grid will light up. When the light turns off you will<br>
click it. Once again the card will light up, with a second light afterwards. You will then <br>
click the cards in the right order. You have beat the level when you have reached the <br>
longest pattern for that sized grid. You will then move to a new, larger grid where the <br>
pattern will restart with one light.

<input type="radio" id="keepPick1" name="keep" value="false" checked><span>Not Keep</span>
<input type="radio" id="keepPick2" name="keep" value="true" ><span>Keep</span>
</div>
<button onclick="updateSetVals()">Update Values</button>
<h2>Directions</h2>
<p>
Once you click "Play": <br>
Click "Start Game", then "Start Level"<br>
A series of cells will pulse on the grid<br>
After the pulses, click on the cells in the correct order<br>
If you click on the correct cells: <br>
Click "Start Level" for the next level<br>
A longer series of cells will pulse as you progress<br>
If you click on the wrong cell: <br>
It is Game Over<br>
Start Game will light up and click to play again<br>
</p>
<p>
Click "Play" to begin, or "Home" to return<br>
</p>


<div class="center">
<a href="game2.html">Play</a>
<a href="index.html">Home</a>
</div>
<!-- Script to get values -->
<p id="settingValues">Values: 2 easy #1c87c9</p>
<script>
setInputElements();
getValues();
</script>
</div>
</div>
<div class="rightcolumn">
<div class="clearbox"></div>
</div>
</div>

<nav>
<div class="black-box">
<a href = "index.html" class="option">Home</a> <br>
<a href = "game2.html" class="option">Play</a> <br>
</div>
</nav>

</body>
</html>
</html>
1 change: 0 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="nav.css">
<title>Home Page</title>
</head>
Expand Down
Loading