Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
129 lines (117 sloc) 5.63 KB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="Web Based Game">
<meta name="keywords" content="HTML, CSS">
<meta name="author" content="BumbleBoks">
<title>Raze A Maze</title>
<link rel="stylesheet" href="./stylesheets/gamepage.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="lib/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/globals.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/svgutils.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/boardutils.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/algorithmpaths.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/animation.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/algorithm.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/engine.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/userinput.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/timemonitor.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/scorekeeper.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/controlboard.js" type="text/javascript" charset="utf-8"></script>
<!-- starting point document.ready -->
<script src="javascripts/layout.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="gamepage">
<svg id="svg-board" xmlns="http://www.w3.org/2000/svg" version="1.1"
x="0" y="0" width="1250" height="660" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- main layout width:height = 5:3 add pattern -->
<defs>
<pattern id="Tiles">
</pattern>
</defs>
<rect id = "board" fill="url(#Tiles)" x="150" y="50" width="1000" height="600" />
<!-- game title -->
<defs>
<linearGradient id="TitleGradient">
<stop offset="5%" stop-color="chocolate" />
<stop offset="25%" stop-color="darkorange" />
<stop offset="50%" stop-color="chocolate" />
<stop offset="75%" stop-color="darkorange" />
<stop offset="95%" stop-color="chocolate" />
</linearGradient>
</defs>
<g id="game-title" transform="translate(400,375)" visibility="visibile">
<text id="title" fill="url(#TitleGradient)">Raze A Maze</text>
<animate attributeType="CSS" attributeName="opacity"
from="0" to="1" dur="1s" fill="freeze" />
</g>
<!-- start/quit/reset button -->
<defs>
<linearGradient id="ButtonGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="5%" stop-color="goldenrod" />
<stop offset="50%" stop-color="yellow" />
<stop offset="95%" stop-color="goldenrod" />
</linearGradient>
</defs>
<g id="start-stop-block" transform="translate(10,100)">
<rect fill="url(#ButtonGradient)" stroke="lightgray" stroke-width="2"
x="0" y="0" width="100" height="50"></rect>
<text id="start-stop" x="10" y="35"></text>
</g>
<!-- brief info about the game - hides when game starts -->
<g id="game-info" transform="translate(10, 400)" visibility="visible">
<rect x="0" y="0" width="130" height="400" fill="none"></rect>
<text x="0" y="30" font-family="arial" font-size="14" fill="darkslategray">
Blaze a path to goal
<tspan x="0" y="50"> Use arrows to move</tspan>
<tspan x="0" y="70"> Branches are good</tspan>
<tspan x="0" y="90"> So are loops</tspan>
<tspan x="0" y="110"> Do hit the goal</tspan>
</text>
</g>
<!-- display for time - becomes visible when game starts -->
<defs>
<linearGradient id="TimeGradient">
<stop offset="0%" stop-color="lightgray" />
<stop offset="10%" stop-color="dimgray" />
<stop offset="90%" stop-color="dimgray" />
<stop offset="100%" stop-color="lightgray" />
</linearGradient>
</defs>
<g id= "time-block" transform="translate(10,400)" visibility="hidden">
<rect x="0" y="0" width="100" height="50" fill="url(#TimeGradient)"></rect>
<text id = "time-display" x="10" y="40"></text>
</g>
<!-- display for score - becomes visible when game starts -->
<defs>
<linearGradient id="ScoreGradient">
<stop offset="0%" stop-color="khaki" />
<stop offset="10%" stop-color="peru" />
<stop offset="90%" stop-color="peru" />
<stop offset="100%" stop-color="khaki" />
</linearGradient>
</defs>
<g id="score-block" transform="translate(10,500)" visibility="hidden">
<rect x="0" y="0" width="100" height="50" fill="url(#ScoreGradient)"></rect>
<text id = "score-board" x="90" y="40"></text>
</g>
<!-- summary of path - becomes visible when game stops -->
<g id="game-summary" transform="translate(10, 300)" visibility="hidden">
<rect x="0" y="0" width="130" height="80" fill="none"></rect>
<line id="finalpath" x1 ="5" y1="15" x2="15" y2="15"></line>
<text x="20" y="20" font-size="14" font-family="arial" fill="darkslategray">
Final Path</text>
<line id="loop1" x1 ="5" y1="35" x2="15" y2="35"></line>
<text x="20" y="40" font-size="14" font-family="arial" fill="darkslategray">
Loop</text>
<line id="branchpath" x1 ="5" y1="55" x2="15" y2="55"></line>
<text x="20" y="60" font-size="14" font-family="arial" fill="darkslategray">
Branch</text>
<line id="completepath" x1 ="5" y1="75" x2="15" y2="75"></line>
<text x="20" y="80" font-size="14" font-family="arial" fill="darkslategray">
Other Paths</text>
</g>
</svg>
</body>
</html>