Jquery remember right game
Release version
<!doctype html>
<html>
<head>
<title>Remember Right | Game</title>
<script src="js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="game.css">
</head>
<body>
<center>
<b>Ohje:</b> Katso oikea järjestys ja valitse tämän jälkeen värit samassa järjestyksessä.
<form>
<input id="start" type="submit" value="Aloita peli" />
</form>
</center>
<div id="div1"><span id="w1">X<span></div>
<div id="div2"><span id="w2">X<span></div>
<div id="div3"><span id="w3">X<span></div>
<div id="div4"><span id="w4">X<span></div>
<script type="text/javascript">
// Game made by: Petri Mäki
// http://www.petrimaki.wordpress.com
// This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
// More info about license: http://creativecommons.org/licenses/by-nc-nd/3.0/
var rungame = false;
var level = 1;
var ms = ["#w1", "#w2", "#w3", "#w4" ];
var myArray = []; // contains right moves each round
var sFull = ""; // max moves every round
var s = 0; // current move
$("#start").click(function(){
$(this).hide();
newGame();
return false;
});
var move = "";
$( "#div1" ).click(function() {
if(rungame) {
move = "#w1";
checkMove(move);
}
});
$( "#div2" ).click(function() {
if(rungame) {
move = "#w2";
checkMove(move);
}
});
$( "#div3" ).click(function() {
if(rungame) {
move = "#w3";
checkMove(move);
}
});
$( "#div4" ).click(function() {
if(rungame) {
move = "#w4";
checkMove(move);
}
});
function checkMove(move) {
if (myArray[ 0 ] == move) {
s++;
$("p").text("Oikea siirto! " + s + "/" + sFull);
myArray.shift() //Remove 0 index from array
} else {
rungame = false;
s = 0;
$("p").text("Valitsit väärän värin! Peli ohitse. Pääsit tasolle: " +level);
level = 1;
$('#start').val('Haluatko yrittää uudestaan?');
$('#start').show();
}
if (myArray.length == 0) { // Player won
rungame = false;
s = 0;
level++;
$("p").text("Muistit kaikki oikein! Seuraava taso on: " + level);
$('#start').val('Siirry seuraavalle tasolle');
$('#start').show();
myArray = ["#w1", "#w2", "#w3", "#w4" ];
}
}
function newGame() {
myArray = [];
for (var w =0; w < level + 3;w++) {
var n = Math.floor((Math.random()*4));
myArray.push(ms[n]); // Add random spans to array
}
sFull = myArray.length;
var lastI = myArray.length - 1;
$("p").text("Sinun tulee muistaa " + myArray.length+ " siirtoa. Taso: " + level);
$.each(myArray, function(i, val) {
setTimeout(function() {
$(myArray[i]).fadeIn("normal", function() {
$(this).fadeOut("normal");
if (i == lastI) { // If last array index let player start game
rungame = true;
$("p").text("Aloita!");
}
});
}, i * 2500);
});
}
</script>
</body>
<html>
Demo
Lähteet
* Terokarvinen.com
* Jquery.com
Lisenssi
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
More info about license: http://creativecommons.org/licenses/by-nc-nd/3.0/
Petri Mäki 