// global variables here

function myHitOther(my1, my2) {

    let left1   = parseInt(document.getElementById(my1).style.left);
    let right1  = left1 + parseInt(document.getElementById(my1).style.width);
    let top1    = parseInt(document.getElementById(my1).style.top);
    let bottom1 = top1 + parseInt(document.getElementById(my1).style.height);

    let left2   = parseInt(document.getElementById(my2).style.left);
    let right2  = left2 + parseInt(document.getElementById(my2).style.width);
    let top2    = parseInt(document.getElementById(my2).style.top);
    let bottom2 = top2 + parseInt(document.getElementById(my2).style.height);

    if ((right1 >= left2) &&
        (bottom1 >= top2) &&
        (left1 <= right2) &&
        (top1 <= bottom2)) {
        return true;
    }
    return false; // Explicitly return false if no hit
}


function myCheckHit() {
    if (myHitOther('myImg01', 'myImg02')) {
        alert('you lose');
        document.getElementById('myImg01').style.left = '20px';
        location = 'index.html'; // go to your next level
    }
}
</script>


<br><br><h2 align=center>t2a21-collision-fred.html</h2>

<img id="myImg01" src="myImage01.jpg" style="position:absolute; left:0px; top:0px; width:50px; height:30px;">

<img id="myImg02" src="myImage02.jpg" src="myImage02.jpg" style="position:absolute; left:100px; top:0px; width:50px; height:30px;"><br>

<input type=button value="Move" onclick="{
document.getElementById('myImg01').style.left = parseInt(document.getElementById('myImg01').style.left) + 10 + 'px';
    myCheckHit();
}"><br>