Probabilmente, il primo mattoncino per la costruzione di un gioco di questo tipo è il protagonista.
Solitamente dotato di una pazienza sovrumana, obbedisce ad ogni vostra richiesta.
Spesso cammina e a volte parla, raccoglie oggetti e compie azioni che spesso vi sorprendono (anzi devono sorprendervi).
Nello specifico il mio attore che nel codice chiamerò "steve" si muove solamente verso destra o sinistra.
Il codice javascript che anima il protagonista da inserire nel file index.js
Cominciamo con il definire alcune variabili globali:
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;
e la funzione di partenza:
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;';
}
}
sul mouseup dell'immagine di fondo viene lanciata la seguente funzione:
function goWalk(e) {
steveMoveToX = parseFloat((e.clientX-this.offsetLeft) / this.offsetWidth * 100);
steveWidth = parseFloat($("#steve").width() / this.offsetWidth * 100)/2;
startWalking();
}
Se "steve" esiste determino la direzione 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);
}
e muovo "steve" fino al punto del mouseup sull'immagine di fondo.
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();
}
}
}
Ed ecco il nostro "steve" (il rettangolo rosso) che si muove sulla scena.
Qui potete trovare i file appena descritti:
E qui sotto i link al gioco finito:
