window.onload = function (){ alert("I guess mobiles have to scroll horizontally to view full area"); var pal = document.getElementById("player"); var bg = document.getElementById("gamearea"); var enemy = document.getElementsByClassName("enemy")[0]; var enemy2 = document.getElementsByClassName("enemy")[1]; bg.addEventListener("click",gopos); function gopos() { var palXp = parseInt(document.getElementById("player").style.left,10); var palYp = parseInt(document.getElementById("player").style.top,10); var x = window.event.clientX - bg.offsetLeft - parseInt(pal.style.width,10); var y = window.event.clientY - bg.offsetTop - parseInt(pal.style.height,10); if (palXp < x) { document.getElementById("player").style.left = palXp + 10 + "px"; } if (palXp > x) { document.getElementById("player").style.left = palXp - 10 + "px"; } if (palYp < y) { document.getElementById("player").style.top = palYp + 10 + "px"; } if (palYp > y) { document.getElementById("player").style.top = palYp - 10 + "px"; } if (parseInt(pal.style.left)>parseInt(bg.style.width)-30&&pal.style.backgroundColor != "red") reset(); } /******************************** -------------ENEMY 1------------- ********************************/ var z = setInterval(function(){gopos2();},30); z; function gopos2() { palX = parseInt(pal.style.left,10); palY = parseInt(pal.style.top,10); eneX = parseInt(enemy.style.left,10); eneY = parseInt(enemy.style.top,10); if (eneX < palX) { enemy.style.left = eneX + 1 + "px"; } if (eneX > palX) { enemy.style.left = eneX - 1 + "px"; } if (eneY < palY) { enemy.style.top = eneY + 1 + "px"; } if (eneY > palY) { enemy.style.top = eneY - 1 + "px"; } } var h = setInterval(function(){dist();},10); h; function dist() { var pal = document.getElementById("player"); var enemy = document.getElementsByClassName("enemy")[0]; var palX = parseInt(pal.style.left,10) + 15; var palY = parseInt(pal.style.top,10) + 15; var eneX = parseInt(enemy.style.left,10) + 15; var eneY = parseInt(enemy.style.top,10) + 15; var a = palX - eneX; var b = palY - eneY; var dis = Math.sqrt( a*a + b*b ); var mindis = 30; document.getElementById("p").innerHTML = dis; if (dis <= mindis) { myfunc(); document.getElementById("p").innerHTML += "
You Lost"; pal.style.backgroundColor = "red"; } } function myfunc() { clearInterval(h); clearInterval(z); } /******************************** -------------ENEMY 2------------- ********************************/ var z2 = setInterval(function(){gopos22();},1000); z2; function gopos22() { palX = parseInt(pal.style.left,10); palY = parseInt(pal.style.top,10); eneX = parseInt(enemy2.style.left,10); eneY = parseInt(enemy2.style.top,10); if (eneX < palX) { enemy2.style.left = eneX + 10 + "px"; } if (eneX > palX) { enemy2.style.left = eneX - 10 + "px"; } if (eneY < palY) { enemy2.style.top = eneY + 10 + "px"; } if (eneY > palY) { enemy2.style.top = eneY - 10 + "px"; } } var h2 = setInterval(function(){dist2();},1000); h2; function dist2() { var pal = document.getElementById("player"); var enemy = document.getElementsByClassName("enemy")[1]; var palX = parseInt(pal.style.left,10) + 15; var palY = parseInt(pal.style.top,10) + 15; var eneX = parseInt(enemy2.style.left,10) + 30; var eneY = parseInt(enemy2.style.top,10) + 30; var a = palX - eneX; var b = palY - eneY; var dis = Math.sqrt( a*a + b*b ); var mindis = 45; document.getElementById("p").innerHTML = dis; if (dis <= mindis) { myfunc2(); document.getElementById("p").innerHTML += "
You Lost"; pal.style.backgroundColor = "red"; } } function myfunc2() { clearInterval(h2); clearInterval(z2); } document.getElementById("reset").addEventListener("click",reset); function reset() { pal.style.left ="30px"; pal.style.top = "225px"; enemy.style.left ="200px"; enemy.style.top = "400px"; enemy2.style.left = "100px"; enemy2.style.top = "0px" setInterval(function(){dist2();},1000); setInterval(function(){gopos22();},1000); setInterval(function(){dist();},10); setInterval(function(){gopos2();},100); pal.style.backgroundColor="white"; } }

Zombie game concept