CCF_100/ASDV-WebDev
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lab17js

Browse Source
This commit is contained in:
Chloe Fontenot 🏳️‍⚧️
2023-04-12 17:37:37 -05:00
parent e190e73b08
commit c798ae5486
39 changed files with 1315 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
Chapter ZIPs/JavaScript/ch8/greg/greg.css Executable file
View File

@@ -0,0 +1,122 @@
body { background-color: #000040;
background-image: url(background.gif);
color: #88ffff;
font-family: Verdana, Arial, sans-serif;
}
#container { margin-left: auto;
margin-right: auto;
width:80%;
min-width:700px;
}
#logo {
text-align:center;
margin: 0;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding-top: 30px;
padding-bottom: 20px;
}
#nav {
float: left;
width: 200px;
padding-top: 10px;
text-align:left;
color: #88FFFF;
font-size: 12px;
}
#nav a {text-decoration:none;
margin: 15px;
display: block;
color: #88FFFF;
font-size: 12px;
}
#content {
margin-left: 150px;
padding: 30px;
overflow:auto;
border: medium groove #88FFFF;
line-height: 135%;
}
.floatright {padding-left:20px;
float:right;
}
.floatleft {
float:left;
padding: 30px 0px 20px;
}
#footer { font-size: .60em;
font-style: italic;
text-align: center;
border-top: 2px double #000040;
padding-top: 20px;
padding-bottom: 20px;
}
h2 { text-transform: uppercase;
color: #88ffff;
font-size: 1.2em;
border-bottom: 1px none;
margin-right: 20px;
}
h3 {
color: #88ffff;
font-size: 1.2em;
border-bottom: 1px solid #000000;
margin-right: auto;
text-align: left;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
line-height: 120%;
}
.details { padding-left:20%;
padding-right:20%;
}
img {border:0; }
.content {
margin: 20px;
padding: 20px;
height: 3700px;
width: 500px;
}
a {text-decoration:none;
margin: 15px;
display: block;
color: #88FFFF;
font-size: 12px;
}
a:hover {
color: #000040;
background-color: #88ffff;
}
span {
font-size: 20px;
font-weight: bold;
font-family: "Courier New", Courier, mono;
color: #88ffff;
background-position: center center;
text-align: center;
vertical-align: middle;
}
table {
border-collapse: collapse
}
td {
border: 2px solid #88ffff;
width: 5em;
color: #88ffff;
text-align: center;
}
.nobdr {
border: none;
cell-padding: 5px;
}

135
Chapter ZIPs/JavaScript/ch8/greg/greg_game_15.html Executable file
View File

@@ -0,0 +1,135 @@
<html>
<head>
<title>Greg's Gambits | Greg's 15</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<script type = "text/javascript">
var cells;
var swapped;
function setup()
{
cells = new Array([document.getElementById("cell00"),document.getElementById("cell01"), document.getElementById("cell02"), document.getElementById("cell03")],
[document.getElementById("cell10"), document.getElementById("cell11"),document.getElementById("cell12"), document.getElementById("cell13")],
[document.getElementById("cell20"), document.getElementById("cell21"),document.getElementById("cell22"), document.getElementById("cell23")],
[document.getElementById("cell30"), document.getElementById("cell31"), document.getElementById("cell32"), document.getElementById("cell33")]);
placeNumbers();
}
function placeNumbers()
{
var numbers = new Array();
for (var i=0; i<=16; i++)
numbers[i] = i;
var randomLoc;
var temp;
for (i= 0; i < 16 ; i++)
{
randomLoc = Math.floor(Math.random()* 15 + 1);
temp = numbers[i];
numbers[i] = numbers[randomLoc];
numbers[randomLoc] = temp;
}
i = 0;
for (var rows = 0; rows < 4; rows++)
{
for (var cols = 0; cols< 4; cols++)
{
if (numbers[i] != 0)
cells[rows][cols].innerHTML = numbers[i];
else
cells[rows][cols].innerHTML = "";
++i;
}
}
}
function doClick(row, col)
{
var top = row - 1;
var bottom = row + 1;
var left = col - 1;
var right = col + 1;
swapped = false;
if(top != -1 && cells[top][col].innerHTML == "")
swap(cells[row][col], cells[top][col]);
else
if(right != 4 && cells[row][right].innerHTML == "")
swap(cells[row][col], cells[row][right]);
else
if(bottom != 4 && cells[bottom][col].innerHTML == "")
swap(cells[row][col], cells[bottom][col]);
else
if (left != -1 && cells[row][left].innerHTML == "")
swap(cells[row][col], cells[row][left]);
else
alert("Illegal move.");
checkWinner();
}
function swap(firstCell, secondCell)
{
swapped = true;
secondCell.innerHTML = firstCell.innerHTML;
firstCell.innerHTML = "";
}
function checkWinner()
{
var win = true;
for (var i = 0; i < 4; i++)
{
for (var j = 0; j < 4; j++)
{
if (!(cells[i][j].innerHTML == i*4 + j + 1))
if (!(i == 3 && j == 3))
win = false;
}
}
if (win)
{
alert("Congratulations! You won!");
if (window.prompt("Play again?", "yes"))
placeNumbers();
}
}
</script>
</head>
<body onload ="setup()">
<div id="container">
<img src="images/superhero.jpg" class="floatleft" />
<h1 id="logo"><em>Greg's 15</em></h1>
<p>&nbsp;</p>
<div id="nav">
<p><a href="index.html">Home</a>
<a href="greg.html">About Greg</a>
<a href="play_games.html">Play a Game</a>
<a href="sign.html">Sign In</a>
<a href="contact.html">Contact Us</a></p>
</div>
<div id="content">
<p><input type="button" value = "Start the game" onclick="setup();" /></p>
<p>You can move any number into an empty spot by moving up, down,right, or left. Diagonal moves are not allowed. The object is to get all the numbers into correct order, from 1 through 15 with the empty space at the end. </p>
<table width = "60%" align = "center">
<tr>
<td height = "60"><span onclick = "doClick(0,0)" id = "cell00" />&nbsp;</td>
<td><span onclick = "doClick(0,1)" id = "cell01" />&nbsp;</td>
<td><span onclick = "doClick(0,2)" id = "cell02" />&nbsp</td>
<td><span onclick = "doClick(0,3)" id = "cell03" />&nbsp;</td>
</tr> <tr>
<td height = "60"><span onclick = "doClick(1,0)" id = "cell10" />&nbsp;</td>
<td><span onclick = "doClick(1,1)" id = "cell11" />&nbsp;</td>
<td><span onclick = "doClick(1,2)" id = "cell12" />&nbsp;</td>
<td><span onclick = "doClick(1,3)" id = "cell13" />&nbsp;</td>
</tr> <tr>
<td height = "60"><span onclick = "doClick(2,0)" id = "cell20" />&nbsp;</td>
<td><span onclick = "doClick(2,1)" id = "cell21" />&nbsp;</td>
<td><span onclick = "doClick(2,2)" id = "cell22" />&nbsp;</td>
<td><span onclick = "doClick(2,3)" id = "cell23" />&nbsp;</td>
</tr> <tr>
<td height = "60"><span onclick = "doClick(3,0)" id = "cell30" />&nbsp;</td>
<td><span onclick = "doClick(3,1)" id = "cell31" />&nbsp;</td>
<td><span onclick = "doClick(3,2)" id = "cell32" />&nbsp;</td>
<td><span onclick = "doClick(3,3)" id = "cell33" />&nbsp;</td>
</tr>
</table>
</div>
<div id="footer">Copyright &copy; 2013 Greg's Gambits<br />
<a href="mailto:yourfirstname@yourlastname.com">
yourfirstname@yourlastname.com</a></div>
</div>
</body></html>

BIN
Chapter ZIPs/JavaScript/ch8/greg/images/superhero.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

44
Chapter ZIPs/JavaScript/ch8/greg/play_games.html Executable file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Greg's Gambits | Games Menu</title>
<link href="greg.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<img src="images/superhero.jpg" width="120" height="120" class="floatleft" />
<h1 id="logo"><em>Play A Game</em></h1>
<div style ="clear:both;"></div>
<div id="nav">
<p><a href="index.html">Home</a>
<a href="greg.html">About Greg</a>
<a href="play_games.html">Play a Game</a>
<a href="sign.html">Sign In</a>
<a href="contact.html">Contact Us</a></p>
</div>
<div id="content">
<p>Menu of Available Games </p>
<table width="90%" border="0" cellpadding="5">
<tr>
<td width="50%"><a href="greg_tales.html">Greg's Tales</a> </td>
<td width="50%"><a href ="gregs_fortune.html">Madame Vadoma Sees All</a></td>
</tr>
<tr>
<td width="50%"><a href="greg_encoder.html">The Secret Message Encoder</a> </td>
<td><a href = "greg_battle.html">Battle the Evil Troll</a></td>
</tr>
<tr>
<td><a href="greg_game_15.html">The Game of 15</a> </td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
</div>
<div id="footer">Copyright &copy; 2013 Greg's Gambits<br />
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a></div>
</div>
</body>
</html>