Untitled

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>JS</title>
	<style>
		table, td
		{
			border: 3px solid #000000;
		}
		div
		{
			font-size: 20px;
		}
	</style>
	<script language="javascript">
		var czas = 60;
		var czasLicznik = null;
		var pozycja = 0;
		var licznik = 0;
		var punkt;
		window.onload = ruch;
		function start()
		{
			punkt = nowaPozycja(0);
			document.images[punkt].src = "yellow.png";
			document.getElementById("licznik").innerHTML = licznik;
			tura++;
			sTimer();
		}
		function sTimer()
		{
			document.getElementById("czasl").innerHTML = czas;
			czas--;
			sleep(1);
			sTimer();
		}
		function ruch(event)
		{
			klawisz = event.keyCode;
			if (klawisz == 39) //right
			{
				pozycja++;
				if (pozycja != 4 && pozycja != 8 && pozycja != 12 && pozycja != 16)
				{
					document.images[pozycja].src = "1200px-Pac_Man.svg.png";
					document.images[pozycja - 1].src = "217821_2.jpg";
					if (punkt == pozycja)
					{
						punkt = nowaPozycja(punkt);
						document.images[punkt].src = "yellow.png";
						licznik++;
						document.getElementById("licznik").innerHTML = licznik;
					}
				}
				else
				{
					pozycja--;
				}
			}
			else if (klawisz == 37) //left
			{
				pozycja--;
				if (pozycja != -1 && pozycja != 3 && pozycja != 7 && pozycja != 11)
				{
					document.images[pozycja].src = "1200px-Pac_Man.svg.png";
					document.images[pozycja + 1].src = "217821_2.jpg";
					if (punkt == pozycja)
					{
						punkt = nowaPozycja(punkt);
						document.images[punkt].src = "yellow.png";
						licznik++;
						document.getElementById("licznik").innerHTML = licznik;
					}
				}
				else
				{
					pozycja++;
				}
			}
			else if (klawisz == 40) //down
			{
				pozycja += 4;
				if (pozycja < 16)
				{
					document.images[pozycja].src = "1200px-Pac_Man.svg.png";
					document.images[pozycja - 4].src = "217821_2.jpg";
					if (punkt == pozycja)
					{
						punkt = nowaPozycja(punkt);
						document.images[punkt].src = "yellow.png";
						licznik++;
						document.getElementById("licznik").innerHTML = licznik;
					}
				}
				else
				{
					pozycja -= 4;
				}
			}
			else if (klawisz == 38) //up
			{
				pozycja -= 4;
				if (pozycja > -1)
				{
					document.images[pozycja].src = "1200px-Pac_Man.svg.png";
					document.images[pozycja + 4].src = "217821_2.jpg";
					if (punkt == pozycja)
					{
						punkt = nowaPozycja(punkt);
						document.images[punkt].src = "yellow.png";
						licznik++;
						document.getElementById("licznik").innerHTML = licznik;
					}
				}
				else
				{
					pozycja += 4;
				}
			}
		}
		function nowaPozycja(lastPosition)
		{
			var newPosition = lastPosition;
			while (lastPosition == newPosition)
			{
				newPosition = Math.floor(Math.random() * 16);
			}
			console.log(newPosition);
			return newPosition;
		}
	</script>
</head>
<body onkeydown="ruch(event)">
	<table>
		<tr>
			<td><img src="1200px-Pac_Man.svg.png" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
		</tr>
		<tr>
			<td><img src="217821_2.jpg" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
		</tr>
		<tr>
			<td><img src="217821_2.jpg" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
		</tr>
		<tr>
			<td><img src="217821_2.jpg" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
			<td><img src="217821_2.jpg" width=100 height=100></td>
		</tr>
	</table>
	<div id="text"></div>Wynik: <div id="licznik"></div>
	<input type="button" value="start" onclick="start()">
	<div id="czasl"></div>
</body>
</html>