CARGO Project The main character of the game

Probably, the first brick for the construction of a game of this type is the protagonist.
Usually equipped with a superhuman patience, it obeys your every request.
Often walking, and sometimes speaks, he collects objects and performs actions that often surprise you (or rather should surprise you).
Specifically my actor whith I named "steve" moves only left or right.

The javascript code that drives the protagonist to be included in the file index.js:

Let's start by defining some global variables:

var steve;
var steveAspect = 'img/mainfigure/man.png';
var steveHeight = 22;
var steveWidth;
var stevePosX = 50;
var steveTop = 60;
var myWalk;
var steveMoveToX;
var steveMoveDir;
var steveSpeed=0.3;

and the starting function:

window.onload=function(){
load();
};

function load(){
setNewscene('img/scnr1/S0.jpg'); //carico una immagine di fondo
addSteve(steveAspect); //creo il protagonista
document.getElementById("backImg").addEventListener("mouseup", goWalk, false);
}

function setNewscene(sceneName)
{
document.getElementById("backImg").setAttribute("src", sceneName);
}

function addSteve(aspect)
{
if (steve==null){
steve = new Image();
steve = document.createElement('img');
steve.id = 'steve';
steve.setAttribute("src", aspect);
steve.style.cssText = 'position:absolute;top:'+steveTop+'%;left:'+stevePosX+'%;height:'+steveHeight+'%;width:auto;background-color:blue;pointer-events:none;opacity:1;z-index:100;';
document.body.appendChild(steve);
}else{
steve.style.cssText = 'position:absolute;top:'+steveTop+'%;left:'+stevePosX+'%;height:'+steveHeight+'%;width:auto;background-color:blue;pointer-events:none;opacity:1;z-index:100;';
}
}

the following function will be executed after the mouseup event:

function goWalk(e) {
steveMoveToX = parseFloat((e.clientX-this.offsetLeft) / this.offsetWidth * 100);
steveWidth = parseFloat($("#steve").width() / this.offsetWidth * 100)/2;
startWalking();
}

I check if  "steve" is not null and the direction to go; dx o sx.

function startWalking()
{
if (steve!=null){
useWith='';
stopWalking();
if (parseFloat(steve.style.left) > steveMoveToX){
steveMoveDir = "left";
steveAspect = "img/mainfigure/man.png";
}else{
steveMoveDir = "right";
steveAspect = "img/mainfigure/man.png";
}
myWalk = setInterval(walkHandler, 30);
}
}

function stopWalking()
{
clearInterval(myWalk);
}

and now I move "steve" to the mouseup click point.

function walkHandler()
{
if (steveMoveDir == "left"){
if (parseFloat(steve.style.left) > (steveMoveToX - steveWidth)){
stevePosX = (parseFloat(steve.style.left) - steveSpeed);
steve.style.left = stevePosX + "%";
}else{
stopWalking();
}
}else{
        if (parseFloat(steve.style.left) < (steveMoveToX - steveWidth)){
stevePosX = (parseFloat(steve.style.left) + steveSpeed);
steve.style.left = stevePosX + "%";
}else{
stopWalking();
}
}
}

And this is our  "steve" (red rect) moving on the scene

Here you can find all files.

 CARGO Google Play