Jquery-remember-right-game

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

Pelaa peliä

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/

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out /  Muuta )

Google photo

Olet kommentoimassa Google -tilin nimissä. Log Out /  Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out /  Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out /  Muuta )

Muodostetaan yhteyttä palveluun %s