<!DOCTYPE html>
<html>
<!-- http://datastudioaba.graphics/game/sprites/ -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,body {
margin: 0px;
height:10000px;
width: 10000px;
background-image: url('http://datastudioaba.graphics/game/sprites/bg_8.png');
}
#htmlPage {
width:100%;
height:100%;
}
#c {
position:relative;
background-color: green;
width:50px;
height:50px;
left:50px;
top:50px;
}
#p1 {
position:absolute;
/*background-color: red;*/
width:50px;
height:50px;
left:50px;
top:50px;
transform:scaleX(1);
}
#caldrum {
position:absolute;
/*background-color: red;*/
width:400px;
height:400px;
left:100px;
top:150px;
transform:scaleX(1);
}
#viewBox {
left:0px;
top:0px;
width:500px;
height:500px;
}
::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body id="htmlPage" onclick="showCoords(event)" onmouseup="animation()">
<p id="c"></p>
<p id="p1"> <img style="width:50px; height:50px;" id="myImg" src="http://datastudioaba.graphics/game/sprites/lv_1_right_stay.gif"></p>
<p id="p1"> <img style="width:50px; height:50px;" id="caldrum" src="http://datastudioaba.graphics/game/sprites/cauldrum_v1.gif"></p>
<script>
//sprites/
var spr_lv_1_stay = 'http://datastudioaba.graphics/game/sprites/lv_1_right_stay.gif';
var spr_lv_1_walk = 'http://datastudioaba.graphics/game/sprites/lv_1_right_walk.gif';
//lets set some boundaries
document.getElementById("p1").style.top = "5000px";
document.getElementById("p1").style.left = "5000px";
document.getElementById("c").style.top = "5000px";
document.getElementById("c").style.left = "5000px";
//this is what moves the mouse when you click, its a js ever box that edits the CSS
var myCanvas = document.querySelector('#htmlPage');
myCanvas.addEventListener('click', function(event) {
var rect = myCanvas.getBoundingClientRect();
var cX = event.clientX - rect.left;
var cY = event.clientY - rect.top;
console.log("x: " + cX + " y: " + cY);
document.getElementById("c").style.left = cX -25 + "px";
document.getElementById("c").style.top = cY -40 + "px";
}, false)
function moveDir() {
//his is controller
c1mxy = document.getElementById("c");
c1CSSX1 = window.getComputedStyle(c1mxy).getPropertyValue("left");
c1CSSX1 = c1CSSX1.slice(0,-2);
c1CSSY1 = window.getComputedStyle(c1mxy).getPropertyValue("top");
c1CSSY1 = c1CSSY1.slice(0,-2);
//this is player 1 CSS variables
p1mxy = document.getElementById("p1");
p1CSSX1 = window.getComputedStyle(p1mxy).getPropertyValue("left");
p1CSSX1 = p1CSSX1.slice(0,-2);
p1CSSY1 = window.getComputedStyle(p1mxy).getPropertyValue("top");
p1CSSY1 = p1CSSY1.slice(0,-2);
//turning the results into intergers
var cnx = parseInt(c1CSSX1);
var cny = parseInt(c1CSSY1);
var p1x = parseInt(p1CSSX1);
var p1y = parseInt(p1CSSY1);
//the movement engine
var walk = false;
if (p1CSSX1 < cnx) {
p1CSSX1 ++;
document.getElementById("p1").style.left = p1CSSX1 + "px";
document.getElementById("p1").style.transform = "scaleX(1)";
walk = true;
}
if (p1CSSX1 > cnx) {
p1CSSX1 --;
document.getElementById("p1").style.left = p1CSSX1 + "px";
document.getElementById("p1").style.transform = "scaleX(-1)";
walk = true;
}
if (p1CSSY1 < cny) {
p1CSSY1 ++;
document.getElementById("p1").style.top = p1CSSY1 + "px";
walk = true;
}
if (p1CSSY1 > cny) {
p1CSSY1 --;
document.getElementById("p1").style.top = p1CSSY1 + "px";
walk = true;
}
if (walk == false) {
document.getElementById("myImg").src = spr_lv_1_stay;
}
}
var t = setInterval(moveDir,2);
function animation() {
document.getElementById("myImg").src = spr_lv_1_walk;
}
setInterval(function(){
var elmnt = document.getElementById("p1");
elmnt.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
}, 1);
</script>
</body>
</html>