Jquery-remember-right-game

Julkaistu kirjoittanut Petri Mäki

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/

Advertisement

JQuery aloitus

Julkaistu kirjoittanut Petri Mäki

Tässä viestissä käydään lävitse JQueryn asennus ja käyttöönotto, sekä yksinkertainen Hello World JQuerylla. Kaikki allaolevat koodit ovat vapaasti käytettävissä.

JQuery asennus ja käyttöönotto
Aluksi lataa JQuery osoitteesta http://www.jquery.com ja tallenna se. Itse tallensin kyseisen tiedoston /js kansioon index.html tiedoston alle, jonka loin samalla. Nyt olet asentanut JQueryn.

JQuery hello world

<!DOCTYPE html>
<html>
    <head>
		<title>Hello JQuery world</title>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>
	<body>
			<script type ="text/javascript">
				$(document).ready(function(){
					$("#msgid").html("Hello world from JQuery");
				});

			</script>
			<p>HTML text</p>

			<div id="msgid"></div>
	</body>
</html>

Fadeout & Lomakkeen arvon lukeminen

Seuraavassa esimerkissä luetaan lomakkeesta arvo. Mikäli arvo on ”salainen” niin kerrotaan käyttäjälle että se on oikein. Muistathan että kyseinen ratkaisu ei ole tietoturvallinen salasanojen kyselyyn!

<!DOCTYPE html>
<html>
    <head>
		<title>Hello JQuery world</title>
		<style>span {display:none;}</style>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>
	<body>
  <form action="javascript:alert('Oikein!');">
    <div>

	  <p>Salainen sana: <input type="password" /><br> <span id="vinkki" ></span></p>
      <input type="submit" />
    </div>
  </form>
  <span id="result"></span>
<script>

$("form").submit(function() {
  if ($("input:first").val() == "salainen") {
    $("#result").text("Oikein...").show(); //Tulostetaan span id="result" kenttään
    return true;
  }
  $("#result").text("Pieleen meni! Muista salainen").show().fadeOut(1000); //fadeOut = 1000 ms
  return false;
});

$("p").focusin(function() {
	$("#vinkki").text("Vinkki: Salaisen sanan tulee olla salainen").show().fadeOut(6000); //fadeOut = 6000 ms
});
</script>

</body>
</html>

Yksinkertaista lukujen kertomista

Syöttämällä 2 lukua JQuery kertoo ne.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Yksinkertaista kertomista</title>
  <style>

  p { color:blue; margin:8px; }
  	</style>
  <script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
  Anna luku1: <input id="first" type="text" value="2"/><br><br>
  Anna luku2:<input id="second" type="text" value="3"/>
  <p></p>
<script>
    $("input").keyup(function () {
      var firstValue = $("#first").val();
	  var secondValue = $("#second").val();
	  if($.isNumeric(firstValue)&&$.isNumeric(secondValue)) //Vain numeerisia arvoja
	  {
		var result = firstValue * secondValue;
	        $("p").text("Tulos: " + result);
	  } else {
		$("p").text("Vain numeroita!");
	  }
    }).keyup();
</script>

</body>
</html>

Lähteet

http://api.jquery.com/
http://www.terokarvinen.com

Lisenssi

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html