490 lines
18 KiB
HTML
490 lines
18 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=240">
|
|
<style type="text/css">
|
|
body{ margin:0px; text-align: center; }
|
|
#topscreen, #bottomscreen { width:240px; height:176px; overflow:hidden; }
|
|
#topscreen { background-color: #000; }
|
|
#bottomscreen { background-color: #000 }
|
|
#logo { margin-top: 27px; }
|
|
#scoreTxt { font-size: 13pt; font-family: Verdana, Helvetica, Arial, sans-serif; margin-top: 16px; color: white; }
|
|
#credits { font-size: 10pt; font-family: Verdana, Helvetica, Arial, sans-serif; margin-top: 40px; color: white; }
|
|
#field { z-index: 1; padding: 0px; width: 160px; height: 160px; margin: auto; margin-top: 6px; }
|
|
#gameover { position: absolute; top:196px; left: 14; z-index: 2; }
|
|
|
|
.tile { background: url(imgs/tiles.png) no-repeat; width: 20px; height: 20px; float: left; }
|
|
.gray { background-position: 0px 0px; }
|
|
.green { background-position: 0px -20px; }
|
|
.blue { background-position: 0px -40px; }
|
|
.yellow { background-position: 0px -60px; }
|
|
.purple { background-position: 0px -80px; }
|
|
.red { background-position: 0px -100px; }
|
|
|
|
#popup { position: absolute; left: 18px; top: 16px; width: 200px; height: 312px; border: 4px solid #777777; background-color: #DDDDDD; display: none; z-index: 50; }
|
|
#infoarea { margin: 5px; width: 190px; height: 278px; overflow: hidden; font-size: 8px; font-family: sans-serif; color: black; }
|
|
#buttonarea { margin: 5px; width: 190px; height: 18px; line-height: 18px; background-color: #F2AEEA; color: #DDDDDD; }
|
|
#hiscores, #instructions { float: left; text-align: center; width: 95px; height: 18px; font: 12px sans-serif; }
|
|
.selected { background-color: #D90BC1; color: white; }
|
|
</style>
|
|
|
|
<script src="../js/json2.js"></script>
|
|
<script src="../js/highscores.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var hiscores = new HighScores("farg");
|
|
|
|
var i;
|
|
var j;
|
|
var k;
|
|
var b;
|
|
var I;
|
|
var J;
|
|
var tileN;
|
|
var fieldA;
|
|
var killA;
|
|
var colour;
|
|
|
|
var paused = false;
|
|
|
|
var score = 0;
|
|
var count = 0;
|
|
var taps = 0;
|
|
var gameOverSrc = new Image(); gameOverSrc.src = "imgs/gameover.png";
|
|
|
|
var tiles = [];
|
|
var tileList = ["gray", "green", "blue", "yellow", "purple", "red"];
|
|
|
|
makeField = function() {
|
|
var container = document.getElementById("field");
|
|
var row;
|
|
var cell;
|
|
|
|
for (i=0; i<8; i++) {
|
|
row = document.createElement("div");
|
|
for (j=0; j<8; j++) {
|
|
tileN = "t"+i+"_"+j;
|
|
|
|
cell = document.createElement("div");
|
|
cell.id = tileN;
|
|
cell.name = tileN;
|
|
cell.className = "tile gray";
|
|
|
|
tiles.push(cell);
|
|
row.appendChild(cell);
|
|
}
|
|
container.appendChild(row);
|
|
}
|
|
}
|
|
|
|
restart = function () {
|
|
gameover.innerHTML = "";
|
|
colourField();
|
|
score = 0;
|
|
count = 0;
|
|
taps = 0;
|
|
updateScore();
|
|
}
|
|
|
|
colourField = function() {
|
|
do {
|
|
fieldA = new Array();
|
|
for (i=0; i<8; i++) {
|
|
fieldA.push(new Array());
|
|
for (j=0; j<8; j++) {
|
|
r = Math.floor(Math.random()*5+1);
|
|
fieldA[i].push(r);
|
|
tileN = "t"+i+"_"+j;
|
|
document.getElementById(tileN).Y = i;
|
|
document.getElementById(tileN).X = j;
|
|
document.getElementById(tileN).className = "tile " + tileList[fieldA[i][j]];
|
|
document.getElementById(tileN).onmousedown = start;
|
|
}
|
|
}
|
|
for (k=0; k<64; k+=2) {
|
|
for (i=0; i<8; i++) {
|
|
for (j=0; j<8; j++) {
|
|
tileN = "t"+i+"_"+j;
|
|
document.getElementById(tileN).checked = false;
|
|
}
|
|
}
|
|
I = Math.floor(k*0.125); //1/8 = 0.125
|
|
J = k-(I*8);
|
|
colour = fieldA[I][J];
|
|
killA = new Array();
|
|
checkMe(I, J);
|
|
if(killA.length >= 3) {
|
|
b = true;
|
|
I = 8;
|
|
J = 8;
|
|
}
|
|
}
|
|
} while(!b);
|
|
}
|
|
|
|
updateField = function() {
|
|
for (i=0; i<8; i++) {
|
|
for (j=0; j<8; j++) {
|
|
tileN = "t"+i+"_"+j;
|
|
|
|
tiles[i * 8 + j].className = "tile " + tileList[fieldA[i][j]];
|
|
}
|
|
}
|
|
}
|
|
|
|
updateScore = function() {
|
|
document.getElementById('scoreTxt').innerHTML = "Score: "+score;
|
|
}
|
|
|
|
start = function() {
|
|
if(!paused) {
|
|
for (i=0; i<8; i++) {
|
|
for (j=0; j<8; j++) {
|
|
tileN = "t"+i+"_"+j;
|
|
document.getElementById(tileN).checked = false;
|
|
}
|
|
}
|
|
colour = fieldA[this.Y][this.X];
|
|
killA = new Array();
|
|
checkMe(this.Y, this.X);
|
|
if(killA.length >= 3) {
|
|
score += killA.length*killA.length-killA.length;
|
|
count += killA.length;
|
|
taps++;
|
|
destroy();
|
|
}
|
|
}
|
|
}
|
|
|
|
gameOver = function() {
|
|
gameover.innerHTML = "<img name='goImg' onMouseDown='restart();'>";
|
|
document["goImg"].src = gameOverSrc.src;
|
|
|
|
setTimeout(function() {
|
|
if(hiscores.isScoreHigher(score)) showScoreSubmit();
|
|
}, 1000);
|
|
}
|
|
|
|
checkMe = function(Y, X) {
|
|
if((X!=-1) && (X!=8) && (Y!=-1) && (Y!=8)) {
|
|
tileN = "t"+Y+"_"+X;
|
|
if(!tiles[Y * 8 + X].checked) {
|
|
tiles[Y * 8 + X].checked = true;
|
|
if(fieldA[Y][X]==colour) {
|
|
killA.push(new Array());
|
|
killA[killA.length-1].push(Y);
|
|
killA[killA.length-1].push(X);
|
|
checkMe(Y+1, X);
|
|
checkMe(Y-1, X);
|
|
checkMe(Y, X+1);
|
|
checkMe(Y, X-1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
destroy = function() {
|
|
paused = true;
|
|
for(i=0; i<killA.length; i++) {
|
|
tileN = "t"+killA[i][0]+"_"+killA[i][1];
|
|
fieldA[killA[i][0]][killA[i][1]] = 0;
|
|
}
|
|
//updateField();
|
|
flash();
|
|
timer=setTimeout(grey, 1000);
|
|
// timer=setTimeout(continueDes, 1000);
|
|
}
|
|
|
|
flash = function() {
|
|
for(i=0; i<killA.length; i++) {
|
|
tileN = "t"+killA[i][0]+"_"+killA[i][1];
|
|
if(fieldA[killA[i][0]][killA[i][1]]==0) {
|
|
fieldA[killA[i][0]][killA[i][1]] = colour;
|
|
} else {
|
|
fieldA[killA[i][0]][killA[i][1]] = 0;
|
|
}
|
|
|
|
document.getElementById(tileN).className = "tile " + tileList[fieldA[killA[i][0]][killA[i][1]]];
|
|
}
|
|
//updateField();
|
|
flasher=setTimeout(flash, 150);
|
|
}
|
|
|
|
grey = function() {
|
|
for(i=0; i<killA.length; i++) {
|
|
tileN = "t"+killA[i][0]+"_"+killA[i][1];
|
|
fieldA[killA[i][0]][killA[i][1]] = 0;
|
|
}
|
|
clearTimeout(flasher);
|
|
updateField();
|
|
|
|
setTimeout(continueDes, 10);
|
|
}
|
|
|
|
continueDes = function() {
|
|
clearTimeout(timer);
|
|
for(i=0; i<killA.length; i++) {
|
|
fieldA[killA[i][0]][killA[i][1]] = 0;
|
|
}
|
|
for (var k=0; k<8; k++) {
|
|
for (i=0; i<7; i++) {
|
|
for (j=0; j<8; j++) {
|
|
if(fieldA[i+1][j]==0) {
|
|
fieldA[i+1][j] = fieldA[i][j];
|
|
fieldA[i][j] = 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
for (i=0; i<7; i++) {
|
|
for (j=0; j<8; j++) {
|
|
if(fieldA[i][j]==0) {
|
|
fieldA[i][j] = Math.floor(Math.random()*5+1);
|
|
}
|
|
}
|
|
}
|
|
updateField();
|
|
paused = false;
|
|
|
|
b = false;
|
|
for (k=0; k<64; k+=2) {
|
|
for (i=0; i<8; i++) {
|
|
for (j=0; j<8; j++) {
|
|
tileN = "t"+i+"_"+j;
|
|
tiles[i * 8 + j].checked = false;
|
|
}
|
|
}
|
|
I = Math.floor(k*0.125); //1/8 = 0.125
|
|
J = k-(I*8);
|
|
colour = fieldA[I][J];
|
|
killA = new Array();
|
|
checkMe(I, J);
|
|
if(killA.length >= 3) {
|
|
b = true;
|
|
I = 8;
|
|
J = 8;
|
|
}
|
|
}
|
|
|
|
if(!b) {
|
|
gameOver();
|
|
}
|
|
updateScore();
|
|
}
|
|
|
|
</script>
|
|
|
|
<script>
|
|
function showHighScores()
|
|
{
|
|
var scores = hiscores.getScores();
|
|
var info = document.getElementById("infoarea");
|
|
var table;
|
|
var row;
|
|
var cell;
|
|
|
|
clearElement(info);
|
|
|
|
document.getElementById("hiscores").className = "selected";
|
|
document.getElementById("instructions").className = "";
|
|
|
|
if(scores.length < 1)
|
|
{
|
|
info.appendChild(document.createTextNode("No scores are currently available."));
|
|
return;
|
|
}
|
|
|
|
table = document.createElement("table");
|
|
table.cellSpacing = "0";
|
|
table.cellPadding = "0";
|
|
table.border = "0";
|
|
table.style.width = "190px";
|
|
table.style.fontSize = "8pt";
|
|
table.style.color = "black";
|
|
|
|
|
|
for(var i=0; i<scores.length && i<20; i++)
|
|
{
|
|
row = table.insertRow(-1);
|
|
cell = row.insertCell(-1);
|
|
cell.appendChild(document.createTextNode((i+1)+". "));
|
|
cell = row.insertCell(-1);
|
|
cell.appendChild(document.createTextNode(scores[i].name));
|
|
cell = row.insertCell(-1);
|
|
cell.align = "right";
|
|
cell.appendChild(document.createTextNode(scores[i].score));
|
|
}
|
|
|
|
info.appendChild(table);
|
|
}
|
|
|
|
function clearElement(element)
|
|
{
|
|
while(element.hasChildNodes()) element.removeChild(element.childNodes[0]);
|
|
}
|
|
|
|
function showHidePopup(evt)
|
|
{
|
|
var popup = document.getElementById("popup");
|
|
|
|
if(evt && evt.keyCode != 13) return;
|
|
|
|
if(evt)
|
|
{
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
}
|
|
|
|
if(popup.style.display == "block")
|
|
{
|
|
popup.style.display = "none";
|
|
clearElement(document.getElementById("infoarea"));
|
|
}
|
|
else
|
|
{
|
|
popup.style.display = "block";
|
|
|
|
if(document.getElementById("hiscores").className == "selected") showHighScores();
|
|
else showInstructions();
|
|
}
|
|
}
|
|
|
|
function showInstructions()
|
|
{
|
|
var info = document.getElementById("infoarea");
|
|
var button = document.getElementById("hiscores");
|
|
var instructions = [
|
|
"F\u00E4rg is a classic game of match 3. To play, find a cluster of 3 or more adjacent blocks with the same color. Tap on any of the blocks to clear the cluster and score!",
|
|
"Blocks that are cleared are replaced with more blocks from above. Keep playing until there are no more clusters available.",
|
|
"",
|
|
"",
|
|
"Choose carefully which clusters to clear. The better your choice, the longer the game will continue before no moves remain.",
|
|
"Do you have what it takes to be a F\u00E4rg master?",
|
|
"(Use A to dismiss this window.)"
|
|
];
|
|
|
|
clearElement(info);
|
|
|
|
for(var i=0; i<instructions.length; i++)
|
|
{
|
|
var p = document.createElement("p");
|
|
|
|
p.style.textAlign = "justify";
|
|
p.style.paddingLeft = "5px";
|
|
p.style.paddingRight = "5px";
|
|
|
|
p.appendChild(document.createTextNode(instructions[i]));
|
|
info.appendChild(p);
|
|
}
|
|
|
|
document.getElementById("hiscores").className = "";
|
|
document.getElementById("instructions").className = "selected";
|
|
}
|
|
|
|
function showScoreSubmit()
|
|
{
|
|
var info = document.getElementById("infoarea");
|
|
var line;
|
|
var input;
|
|
|
|
clearElement(info);
|
|
|
|
line = document.createElement("div");
|
|
line.align = "center";
|
|
line.style.fontSize = "16px";
|
|
line.style.color = "black";
|
|
line.style.fontWeight = "bold";
|
|
line.appendChild(document.createTextNode("A new high score!"));
|
|
info.appendChild(line);
|
|
|
|
line = document.createElement("div");
|
|
line.align = "center";
|
|
line.style.fontSize = "20px";
|
|
line.style.color = "red";
|
|
line.style.fontWeight = "bold";
|
|
line.style.marginTop = "20px";
|
|
line.style.marginBottom = "20px";
|
|
line.appendChild(document.createTextNode(score));
|
|
info.appendChild(line);
|
|
|
|
line = document.createElement("div");
|
|
line.align = "center";
|
|
line.style.fontSize = "16px";
|
|
line.style.color = "black";
|
|
line.style.fontWeight = "bold";
|
|
line.style.marginBottom = "75px";
|
|
line.appendChild(document.createTextNode("Enter your name below to submit your score."));
|
|
info.appendChild(line);
|
|
|
|
line = document.createElement("div");
|
|
input = document.createElement("input");
|
|
line.align = "center";
|
|
line.style.fontSize = "16px";
|
|
line.style.color = "black";
|
|
line.style.fontWeight = "bold";
|
|
line.style.marginBottom = "10px";
|
|
input.style.width = "120px";
|
|
input.id = "user";
|
|
input.maxLength = "16";
|
|
|
|
if(hiscores.getCachedName()) input.value = hiscores.getCachedName().substring(0, 16);
|
|
|
|
line.appendChild(input);
|
|
info.appendChild(line);
|
|
|
|
line = document.createElement("div");
|
|
input = document.createElement("button");
|
|
line.align = "center";
|
|
line.style.fontSize = "16px";
|
|
line.style.color = "black";
|
|
line.style.fontWeight = "bold";
|
|
input.onclick = submitScore;
|
|
input.appendChild(document.createTextNode("Submit"));
|
|
line.appendChild(input);
|
|
info.appendChild(line);
|
|
|
|
document.getElementById("popup").style.display = "block";
|
|
}
|
|
|
|
function submitScore()
|
|
{
|
|
var user = document.getElementById("user").value;
|
|
var high = new HighScore(user, score);
|
|
|
|
if(user.length < 1) return;
|
|
|
|
high.count = count;
|
|
high.taps = taps;
|
|
|
|
hiscores.submitScore(high);
|
|
|
|
showHighScores();
|
|
}
|
|
|
|
document.addEventListener("keypress", showHidePopup, false);
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="topscreen">
|
|
<img src="imgs/logo.png" id="logo" />
|
|
<p id='scoreTxt'>Score: 0</p>
|
|
<p id='credits'>Developed by Johannes Wärn.</p>
|
|
</div>
|
|
<div id="bottomscreen" name="bottomscreen">
|
|
<div id="field"></div>
|
|
<script type="text/javascript">
|
|
makeField();
|
|
colourField();
|
|
</script>
|
|
<div id='gameover'></div>
|
|
</div>
|
|
<script>document.body.scrollTop = 176;</script>
|
|
<div id="popup">
|
|
<div id="infoarea"></div>
|
|
<div id="buttonarea">
|
|
<div id="hiscores" class="selected" onclick="showHighScores(); return false;">High Scores</div>
|
|
<div id="instructions" onclick="showInstructions(); return false;">Instructions</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|