Szubienica JS - skaczący obrazek - Forum Pasja Informatyki

Hej!
Napisałam gierkę "Szubienica" z odcinka pana Mirosława dot. JS'a. Jednakże, obrazki szubienicy przy zmianie skaczą. Co więcej, przez chwile nawet widać, że alfabet "zeskakuje" na lewą stronę, ale jednocześnie zostaje tam, gdzie powinien być (jak dla mnie mega dziwne xD z rodem paranormal activity). Testowane na Firefoxie. Testowałam również na Chromie i tam jest lepiej, w tym znaczeniu, że rzadziej skacze obraz (lub prawie wcale) oraz alfabet siedzi tam, gdzie powinien.

Po odpaleniu kodu pana Mirosława wszystko działa OK, bez względu na przeglądarkę.

Proszę Was o wyjaśnienie, dlaczego tak się dzieje i ewentualne tipy, jak to rozwiązać :)

Jeżeli opis jest niezrozumiały, to na prośbę dodam filmik dokumentujący to "zjawisko" :D

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	
	<link type="text/css" rel="stylesheet" href="style.css" />
	<script src="szubienica.js"></script>
	
	<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&amp;subset=latin-ext" rel="stylesheet"> 
	
</head>
<body>

	<div id="pojemnik">
		<div id="plansza"></div>
		<div id="szubienica">
			<img src="img/s0.jpg" alt="" />
		</div>
		<div id="alfabet"></div>
		<div style="clear:both;"></div>
	</div>

</body>
</html>

body
{
	background-color: #000000;
	color: lightgray;
	font-size: 28px;
	font-family: 'Source Code Pro', monospace;
}

#pojemnik
{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

#plansza
{
	width: 900px;
	min-height: 60px;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 48px;
	letter-spacing: 3px;
}

#szubienica
{
	float: left;
	width: 450px;
	min-heigh: 280px;
	text-align: center;
}

#alfabet
{
	float: left;
	width: 450px;
	min-heigh: 280px;
	text-align: center;
}

.litera
{
	float: left;
	height: 30px;
	width: 30px;
	margin: 3px;
	padding: 5px;
	border: 3px solid lightgray;
	text-align: center;
	border-radius: 15px;
}

.litera:hover
{
	background-color: #222222;
	border: 3px solid white;
	color: white;
	cursor: pointer;
}

.reset
{
	color: green;
	font-size: 48px;
	cursor: pointer;
}

.reset:hover
{
	color: white;
	font-size:48px;
}

var haslo = "Bez pracy nie ma kołaczy";
haslo = haslo.toUpperCase();

var dlugosc = haslo.length;
var haslo1 = "";

for(i=0;i<dlugosc;i++)
{
	if(haslo.charAt(i) == " ") haslo1 = haslo1 + " ";
	else haslo1 = haslo1 + "-";
}

window.onload = start;

var ile_skuch = 0;

var yes = new Audio("yes.wav");
var no = new Audio("no.wav");

var litery = new Array(35);
	
litery[0] = "A";
litery[1] = "Ą";
litery[2] = "B";
litery[3] = "C";
litery[4] = "Ć";
litery[5] = "D";
litery[6] = "E";
litery[7] = "Ę";
litery[8] = "F";
litery[9] = "G";
litery[10] = "H";
litery[11] = "I";
litery[12] = "J";
litery[13] = "K";
litery[14] = "L";
litery[15] = "Ł";
litery[16] = "M";
litery[17] = "N";
litery[18] = "Ń";
litery[19] = "O";
litery[20] = "Ó";
litery[21] = "P";
litery[22] = "Q";
litery[23] = "R";
litery[24] = "S";
litery[25] = "Ś";
litery[26] = "T";
litery[27] = "U";
litery[28] = "V";
litery[29] = "W";
litery[30] = "X";
litery[31] = "Y";
litery[32] = "Z";
litery[33] = "Ż";
litery[34] = "Ź";

function zmien_haslo()
{
	document.getElementById("plansza").innerHTML = haslo1;
}

function start()
{
	var tresc_diva = "";
	
	for(i=0; i<=34; i++)
	{
		var element = "lit" + i;
		tresc_diva=tresc_diva + '<div class="litera" id="'+element+'" onclick="sprawdz('+i+')">'+litery[i]+'</div>';
		if((i+1)%7==0) tresc_diva = tresc_diva + '<div style="clear:both;"></div>';
	}
	
	document.getElementById("alfabet").innerHTML = tresc_diva;
	
	zmien_haslo();
}

String.prototype.ustawZnak = function(miejsce, znak)
{
	if(miejsce > this.length-1) return this.toString();
	else return this.substr(0,miejsce) + znak + this.substr(miejsce +1);
}

function sprawdz(nr)
{
	
	//flaga
	var trafiona = false;
	
	for(i=0;i<dlugosc;i++)
	{
		if(haslo.charAt(i) == litery[nr])
		{
			haslo1 = haslo1.ustawZnak(i, litery[nr]);
			trafiona = true;
		}
	}
	
	if(trafiona == true)
	{
		var element = "lit" + nr;
		yes.play();
		
		document.getElementById(element).style.background = "#003300";
		document.getElementById(element).style.color = "#00C000";
		document.getElementById(element).style.border = "3px solid #00C000";
		document.getElementById(element).style.cursor = "default";
		
		zmien_haslo();
	}
	else
	{
		ile_skuch++;
		var element = "lit" + nr;
		no.play();
		
		
		document.getElementById(element).style.background = "#330000";
		document.getElementById(element).style.color = "#C00000";
		document.getElementById(element).style.border = "3px solid #C00000";
		document.getElementById(element).style.cursor = "default";
		document.getElementById(element).setAttribute("onclick", ";");
		
		var obraz = "img/s"+ ile_skuch + ".jpg";
		document.getElementById("szubienica").innerHTML = '<img src="'+obraz+'" alt=""/>';
	}
	
	//wygrana
	if(haslo1 == haslo)
	{
		document.getElementById("alfabet").innerHTML = "Brawo!<br /> Odkryto poprawne hasło<br />" + haslo + '<br /><br /><span class="reset" onclick="location.reload()">JESZCZE RAZ?</span>';
	}
	
	//przegrana
	if(ile_skuch>=9)
	{
		document.getElementById("alfabet").innerHTML = "Niestety, nie udało się!!<br /> Poprawne hasło<br />" + haslo + '<br /><br /><span class="reset" onclick="location.reload()">JESZCZE RAZ?</span>';
	}
	
	
}