<!DOCTYPE html>
<html>
<meta charset=utf-8>
<script>
var had = [[3, 2], [4, 2]];
var potrava = [1, 1];
var obsah_zaludku = 0;
var hriste = [60, 96];
var velikost_mrizky = 50;
var smer = [-1, 0];
var ctx;

function stejne(a, b) {
    return a[0] == b[0] && a[1] == b[1];
}

function odecti(a, b) {
    return [a[0] - b[0], a[1] - b[1]];
    var vysledek = [a[0] - b[0], a[1] - b[1]];
    vysledek[0] -= hriste[0] * Math.round(vysledek[0] / hriste[0]);
    vysledek[1] -= hriste[1] * Math.round(vysledek[1] / hriste[1]);
    return vysledek;
}

window.onresize = function() {
    obraz.width = window.innerWidth;
    obraz.height = window.innerHeight;
    hriste[0] = Math.floor(obraz.width / velikost_mrizky);
    hriste[1] = Math.floor(obraz.height / velikost_mrizky);
}


window.onload = function() {
    window.onresize();
    window.setInterval(hra, 1000/10);
    ctx = obraz.getContext("2d");
    window.onkeydown = window.onkeypress = window.onkeyup = stiskl_klavesu;
}

function hra() {
    posun_hada();
    if (kolize()) {
        alert("prohráls.");
        had = [[3, 2], [4, 2]];
    }
    zpracuj_potravu();
    vymaz_celou_obrazovku();
    namaluj_hada();
    namaluj_potravu();
}

function vymaz_celou_obrazovku() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, obraz.width, obraz.height);
}

function stiskl_klavesu(udalost) {
    if (udalost.key == "ArrowLeft" && smer[0] != 1) {
        smer = [-1, 0];
    } else if (udalost.key == "ArrowRight" && smer[0] != -1) {
        smer = [1, 0];
    } else if (udalost.key == "ArrowUp" && smer[1] != 1) {
        smer = [0, -1];
    } else if (udalost.key == "ArrowDown" && smer[1] != -1) {
        smer = [0, 1];
    } else {
        return;
    }
    udalost.preventDefault();
}

function obracene(i) {
	return (i + 2) % 4;
}

function smer_hada (i) {                 
if (i == 0) {
	return obracene(smer_hada(1));
} else if (i == had.length) {
	return obracene(smer_hada(had.length - 1));
}
var a=had[i],
    b=had[i-1];
	var r=odecti (b, a);
	if (r[0]==-1) return 3;
	if (r[0]==1) return 1;
	if (r[1]==-1) return 02;
	if (r[1]==1) return 20;
}

function namaluj_hada() {
	ctx.fillStyle = "black";
	for (var a=0; a < had.length; a+=1) {
		var x=smer_hada(a)*100;
		var y=obracene(smer_hada(a+1))*100;
		ctx.drawImage(puntik, x, y, 100, 100, had[a][0] * velikost_mrizky, had[a][1] * velikost_mrizky, velikost_mrizky, velikost_mrizky);
	}
}

function namaluj_potravu() { 
    ctx.fillStyle = "red";
    ctx.drawImage(jablko, potrava[0] * velikost_mrizky, potrava[1] * velikost_mrizky, velikost_mrizky, velikost_mrizky);
}

function posun_hada() {
    if (obsah_zaludku > 0) {
        obsah_zaludku -= 1;
        var posledni = had[had.length-1];
        had.push([posledni[0], posledni[1]]);
    }
    for (var i = had.length - 1; i > 0; i -= 1) {
        had[i] = had[i - 1];
    }
    var hlava_x = had[0][0], hlava_y = had[0][1];
    hlava_x += smer[0];
    hlava_y += smer[1];
    if (hlava_x >= hriste[0]) {
        hlava_x = 0;
    }
    if (hlava_y >= hriste[1]) {
        hlava_y = 0;
    }
    if (hlava_x < 0) {
        hlava_x = hriste[0]-1;
    }
    if (hlava_y < 0) {
        hlava_y = hriste[1]-1;
    }
    had[0] = [hlava_x, hlava_y];
}

function zpracuj_potravu () {
    if(stejne(had[0], potrava)) {
        obsah_zaludku += 3;
        potrava[0] = Math.floor(Math.random()*hriste[0]);
        potrava[1] = Math.floor(Math.random()*hriste[1]);
    }
}

function kolize() {
    for (var a=1; a<had.length; a+=1) {
        if (stejne(had[0], had[a])) {
            return true;
        }
    }
    return false;
}

</script>
<body style='margin: 0; overflow: hidden;'>
<canvas style="border: 1px solid gray;" id=obraz></canvas>
<img src="http://krouzek.dominec.eu/had3/green.png" id=puntik style="display:none">
<img src="http://krouzek.dominec.eu/had3/apple.png" id=jablko style="display:none">
</body>
</html>