Untitled

 <!DOCTYPE html>

<html>
<head>
<title>JAVA</title>
<style >
body{
position:relative;
background-color:white;
}
img{
position:absolute;
width:150px;
height:150px;
z-index:-1;

}
</style>
</head>
<body onload="init();" style="relative;">

<button onclick="start();">start</button>
<button onclick="move();">move</button>
<button onclick="repeat();">repeat</button>

<div id = "snimki" style="border:2px solid black; width:100%; height:600px; position:relative; margin:0 auto;">
<img id="pracence" src="pig.png" style="top:20px; left:-150px; " />
<img id="4ovece" src="snow.png" style="top:220px; left:-150px;"/>
<img id="risyncica" src="gun.png" style="top:0px; left:0px;"/>
</div>


<script>

var started;
var pigSpeed = 20;
var snowSpeed = 30;
var pigPosition = -150;
var snowPosition = -150;
var gunPosition = 0;
var pigTop = 20;
var snowTop = 220;
var gunTop = 0;
let move = function()
{
let width = window.innerWidth;
pigPosition=pigPosition+pigSpeed;
if (pigPosition >= width){
pigPosition = -150;

}
var pig = document.getElementById("pracence");
pig.style.left=pigPosition+"px";
//document.getElementById("pracence").src="pig.png";

snowPosition = snowPosition+snowSpeed;
if (snowPosition > width){
snowPosition = -150;
}
var snow = document.getElementById("4ovece");
snow.style.left = snowPosition+"px";
//document.getElementById("4ovece").src="snow.png";
}

function repeat() {
document.getElementById("pracence").src="pig.png";
document.getElementById("4ovece").src="snow.png";
}

let msg=function()
{
alert("hiiiiiii ");
}
function start(){
if (started == undefined) {
started = setInterval(move, 100);
}
}
function kill(){
let pigLeft = document.getElementById("pracence").style.left;
let snowLeft = document.getElementById("4ovece").style.left;
alert(pigLeft);
alert(snowLeft);
}
function init(){
document.body.addEventListener("keypress", keys )
}
function keys(event){
let userKey = event.char||event.charCode||event.which;
//alert(typeof(userKey));
switch(userKey){
case 56:gunTop = gunTop + -20;document.getElementById("risyncica").style.top= gunTop + "px";break;//up
case 54:gunPosition = gunPosition + 20;document.getElementById("risyncica").style.left = gunPosition + "px";break;//right
case 52:gunPosition = gunPosition + -20;document.getElementById("risyncica").style.left = gunPosition + "px";break;//left
case 50:gunTop = gunTop + 20;document.getElementById("risyncica").style.top = gunTop + "px";break;//down
case 13:strike();break;
}
var pig = document.getElementById("pracence");
gun.style.left=gunPosition+"px";
gun.style.top=gunTop+"px";
}
function strike() {
var pigLeftD=gunPosition-pigPosition;
var pigTopD=gunPosition-pigTop;
let check=(pigLeftD>-120 &&pigLeftD<120) && (pigTopD>-120 && pigTopD<120);

if(check){
//alert("bravo");

pigPosition = -150;
var pig = document.getElementById("pracence");
pig.style.left=pigPosition+"px";
}else{
alert("ne stavash");
}
}


</script>

</body>
</body>