Untitled


<!DOCTyPE html>

<html lang="et">

	<head>

		<meta charset="UTF-8">

		<title>kirbumang</title>

		<style>

			img{

				width: 150px;

				height: 150px;

			}

            body{

                line-height: 2px;

                margin-top: 5px;

            }

		</style>

		<script>

			kirpx = 1;

			kirpy = 1;

			kirpHypeteLoendur = 0

			vastanex = 4;

			vastaney = 1;

			vastaneTaimer=false;

			m2ngk2ib = true;

			function vastaneHyppa(){

				if(vastanex===4 && vastaney===4){

					//alla nurka pilt ma ei tea

					document.getElementById("a"+vastanex+vastaney).src = "happy.jpg";

				}else{

					//ülejäänud pildid asendab taustaga

					document.getElementById("a"+vastanex+vastaney).src = "taust.png";

				}

					if(Math.random()<0.5){

						if(vastanex===1){

							vastanex++;

						}else if(vastanex===4){

							vastanex--;

						}else if(Math.random()<0.5){

							vastanex++;

						}else{

							vastanex--;

						}

					}else{

						if(vastaney===1){

							vastaney++;

						}else if(vastaney===4){

							vastaney--;

						}else if(Math.random()<0.5){

							vastaney++;

						}else{

							vastaney--;

						}

					}

                 //uues kohas nähtavale vm

                 document.getElementById("a"+vastanex+vastaney).src = "vastane.png";

                 //Kui vastane hüppas mulle peal

                 if(kirpx====vastanex && kirpy====vastaney){

					m2ngk2ib = false;

					window.clearInterval(vastaneTaimer);

					vastaneTaimer = false;

					document.getElementById("a"+vastanex+vastaney).src = "suvetoo.png";

					document.getElementById("info").innerHTML = "Sa lähed suvetööle!";

				}

			}

			function hyppa(x, y){

				if(kirpx===x && kirpy===y && m2ngk2ib){

					if(!vastaneTaimer){

						vastaneTaimer = window.setInterval(vastaneHyppa, 1000);

					}

					if(Math.random()<0.5){

						if(kirpx===1){

							kirpx++;

						}else if(kirpx===4){

							kirpx--;


						}else if(Math.random()<0.5){

							kirpx++;

						}else{

							kirpx--;

						}

					}else{

						if(kirpy===1){

							kirpy++;

						}else if(kirpy===4){

							kirpy--;

						}else if(Math.random()<0.5){

							kirpy++;

						}else{

							kirpy--;

						}

					}

					kirpHypeteLoendur++;

					document.getElementById("a"+x+y).src = "taust.png";

 							//Asendame kirbu uue asukoha

					document.getElementById("a"+vastanex+vastaney).src = "kirp.png";

					document.getElementById("info").innerHTML = "kirp on hüppanud " + hypped + " korda";

					if(kirpx===vastanex && kirpy===vastaney){

						window.clearInterval(vastaneTaimer);

						vastaneTaimer = false;

						document.getElementById("a"+vastanex+vastaney).src = "taust.png";

						vastanex = 4;

						vastaney = 1;

						document.getElementById("a"+vastanex+vastaney).src = "vastane.png";

				//siin oli mingi alternatiiv vist

					if(kirpx====4 && kirpy====1){

						kirpx = 1;

					}

					document.getElementById("a"+kirpx+kirpy).src = "kirp.jpg";

					}

					if(kirpx===4 && kirpy===4){

						m2ngk2ib = false;

						window.clearInterval(vastaneTaimer);

						vastaneTaimer = false;

						document.getElementById("a"+kirpx+kirpy).src = "happy.jpg";

						document.getElementById("info").innerHTML = "Jõudsid suveni" + kirbuHypeteLoendur + " hüppega";

					}

				}

			}

		</script>

	</head>

	<body>

		<img src="kirp.png" id="a11" onclick="hyppa(1,1)"><img src="taust.png" id="a21" onclick="hyppa(2,1)"><img src="taust.png" id="a31" onclick="hyppa(3,1)"><img src="vastane.png" id="a41" onclick="hyppa(4,1)"><br>

		<img src="taust.png" id="a12" onclick="hyppa(1,2)"><img src="taust.png" id="a22" onclick="hyppa(2,2)"><img src="taust.png" id="a32" onclick="hyppa(3,2)"><img src="taust.png" id="a42" onclick="hyppa(4,2)"><br>

		<img src="taust.png" id="a13" onclick="hyppa(1,3)"><img src="taust.png" id="a23" onclick="hyppa(2,3)"><img src="taust.png" id="a33" onclick="hyppa(3,3)"><img src="taust.png" id="a43" onclick="hyppa(4,3)"><br>

		<img src="taust.png" id="a14" onclick="hyppa(1,4)"><img src="taust.png" id="a24" onclick="hyppa(2,4)"><img src="taust.png" id="a34" onclick="hyppa(3,4)"><img src="suvi.png" id="a44" onclick="hyppa(4,4)"><br>>

		<h1 id="info">Päästa mind suvetööst!</h1>

	</body>

</html>