<HTML>
<HEAD>
<TITLE>Patterns</TITLE>
<STYLE>
BODY {
background: darkgreen;
}
A {
text-decoration: none;
color: darkgreen;
font-size: 24px;
text-align: center;
}
.points {
position: absolute;
z-index: 2;
visibility: hidden;
width: 25%;
height: 25%;
color: white;
background: darkgreen;
font-weight: bold;
font-family: arial;
font-size: 24px;
text-align: center;
}
.info {
position: absolute;
z-index: 1;
color: darkgreen;
background: white;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 24px;
font-weight: bold;
font-family: arial;
text-align: center;
}
.arena {
position: absolute;
z-index: 1;
top: 17%;
left: 25%;
width: 50%;
height: 66%;
color: darkgreen;
background: white;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 14px;
font-weight: bold;
font-family: arial;
text-align: left;
}
.major {
position: absolute;
z-index: 1;
color: darkgreen;
font-size: 32px;
font-weight: bold;
font-family: arial;
text-align: center;
}
</STYLE>
<SCRIPT LANGUAGE = "JavaScript">
// Sound for match, miss, and next
var match;
var miss;
var next;
// Do we have sound card?
var haveSound;
// Array for pattern points
var points;
// Current level of play
var level = 1;
// Max level
var maxLevel;
// Patterns in play
var patterns;
// Current pattern
var currentPattern;
// Your turn?
var playerTurn = false;
// Total score
var realScore = 0;
// Total possible
var possibleScore = 0;
// get seed for random number
var now = new Date();
var seed = now.getTime() % 0xffffffff;
function rand(n) {
seed = (0x015a4e35 * seed) % 0x7fffffff;
return (seed >> 16) % n;
}
function makeGameSound(file, start, end) {
this.sound = Mixer.newSound("URLWav");
this.channel = Mixer.newChannel();
this.channel.input = this.sound;
this.sound.loadMedia(file, start, end);
this.play = playGameSound;
}
function playGameSound() {
this.channel.time = 0;
this.channel.play();
}
function showScore() {
var outPercent = Math.round(100 * (realScore/((possibleScore == 0) ? 1 : possibleScore)));
score.innerText = outPercent;
}
function clearPoints() {
for (var i = 0; i < points.length; i++) {
points[i].style.visibility = 'hidden';
score.innerText = '';
}
}
function showPoint(point, value) {
points[point].style.visibility = 'visible';
points[point].innerText = value;
}
function showBegin() {
clearPoints();
setTimeout('document.all.gameSub.style.display = \'none\'; document.all.logo.style.visibility = \'hidden\'; document.all.finished.style.visibility = \'hidden\'', 500);
setTimeout('next.play(); document.all.begin.style.visibility = \'visible\'', 1000);
setTimeout('document.all.begin.style.visibility = \'hidden\'; initVars(); compilePatterns();', 2000);
}
function showEnd() {
setTimeout('next.play(); clearPoints(); document.all.finished.style.visibility = \'visible\'; slide(0, 38);', 500);
}
function slide(currentPos, finalPos) {
if (currentPos < finalPos) {
currentPos += 4;
document.all.finished.style.top = currentPos + '%';
setTimeout('slide(' + currentPos + ',' + finalPos + ')', 25);
}
}
function compilePatterns() {
playerTurn = false;
currentPattern = 0;
patterns = new Array();
var i = 0;
while (i < level) {
patterns[i] = rand(4);
if (i > 0) {
if (patterns[i] != patterns[i - 1]) i++;
}
else i++;
}
showPatterns();
}
function showPatterns() {
clearPoints();
if (currentPattern < patterns.length) {
showPoint(patterns[currentPattern], currentPattern + 1);
match.play();
currentPattern++;
setTimeout('showPatterns()', 500);
}
else {
currentPattern = 0;
currentPatternPart = 0;
playerTurn = true;
}
showScore();
}
function reproducePatterns() {
if (playerTurn) {
var key = event.keyCode;
if (currentPattern < patterns.length) {
var point = patterns[currentPattern];
if (key == 38 || key == 39 || key == 40 || key == 37) {
clearPoints();
if ((point == 0 && key == 38) || (point == 1 && key == 39) || (point == 2 && key == 40) || (point == 3 && key == 37)) {
showPoint(point, currentPattern + 1);
match.play();
realScore++;
}
else {
showPoint(4, '0');
miss.play();
}
possibleScore++;
currentPattern++;
showScore();
}
}
if (currentPattern == patterns.length) {
level++;
playerTurn = false;
if (level <= maxLevel) {
setTimeout('next.play(); clearPoints()', 500);
setTimeout('compilePatterns()', 1000);
}
else {
showEnd();
}
}
}
}
function controlExpand() {
var parent = event.srcElement.id; // current name
if (parent != '') {
var child = document.all[(event.srcElement.id + "Sub")] // name with "Sub"
if (child != null) {
child.style.display = (child.style.display == 'none') ? '' : 'none';
}
}
}
function initVars() {
window.focus();
level = 1;
realScore = 0;
possibleScore = 0;
match = new makeGameSound('match.wav', 1, 1000);
miss = new makeGameSound('miss.wav', 1, 1000);
next = new makeGameSound('next.wav', 1, 1000);
points = new Array(document.all.top, document.all.right, document.all.bot, document.all.left, document.all.mid);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR = "#FFFFFF" onLoad = "initVars()" onKeyDown = "reproducePatterns()">
<DIV CLASS = "arena" ID = "real">
<DIV CLASS = "points" STYLE = "top: 0%; left: 38%;" ID = "top"></DIV>
<DIV CLASS = "points" STYLE = "top: 75%; left: 38%;" ID = "bot"></DIV>
<DIV CLASS = "points" STYLE = "top: 38%; left: 0%;" ID = "left"></DIV>
<DIV CLASS = "points" STYLE = "top: 38%; left: 75%;" ID = "right"></DIV>
<DIV CLASS = "points" STYLE = "top: 38%; left: 38%;" ID = "mid"></DIV>
<DIV CLASS = "major" ID = "logo" STYLE = "top: 38%; z-index: 3;">Pattern
<DIV STYLE = "font-size: 14; color: gray;">A Simple Game</DIV>
</DIV>
<DIV CLASS = "major" ID = "begin" STYLE = "top: 38%; visibility: hidden; z-index: 3">Begin
<DIV STYLE = "font-size: 14; color: gray;">Get Ready...</DIV>
</DIV>
<DIV CLASS = "major" ID = "finished" STYLE = "top: 0%; visibility: hidden; z-index: 3">Finished
<DIV STYLE = "font-size: 14; color: gray;">The game is over.</DIV>
</DIV>
</DIV>
<DIV CLASS = "info" STYLE = "top: 17%; left: 6%; width: 17%; height: 66%; font-size: 12; margin-left: 5pt;" onClick = "controlExpand()">
<A HREF = "#" ID = "game" STYLE = "text-align: left;">Game</A>
<DIV ID = "gameSub" STYLE = "display: none;">
<A ID = "start" HREF = "#" STYLE = "text-align: left; font-size: 16;">Start</A>
<FORM ID = "startSub" STYLE = "text-align: left; display: none;" onClick = "if (event.srcElement.tagName == 'INPUT') { showBegin(); }">
Play Pattern at what skill level?<BR><BR>
<INPUT NAME = "level" TYPE = "RADIO" onClick = "maxLevel = 7;"> Easy<BR>
<INPUT NAME = "level" TYPE = "RADIO" onClick = "maxLevel = 10;"> Medium<BR>
<INPUT NAME = "level" TYPE = "RADIO" onClick = "maxLevel = 13;"> Hard<BR>
</FORM>
<A ID = "rules" HREF = "#" STYLE = "text-align: left; font-size: 16;">Rules</A>
<DIV ID = "rulesSub" STYLE = "text-align: left; display: none;"><BR>
The rules to Pattern are simple; use the arrow keys (up, down, left, and right) to reproduce the patterns that you see on the screen. You will be scored by percentage.
</DIV>
</DIV>
</DIV>
<DIV CLASS = "info" STYLE = "top: 83%; left: 25%; width: 50%; height: 12%;">
Score: <SPAN ID = "score">0</SPAN>
</DIV>
<OBJECT ID = "Mixer" CLASSID="CLSID:9A7D63C1-5391-11D0-8BB6-0000F803A803"></OBJECT>
</BODY>
</HTML>