Welcome to my Website!

There are three programming languages to creatate an online videogame:Javascript,HTML and CSS

The main language in the videogame is Javascript. It creates variables and functions HTML means HyperTextMarkup Language,that is, it makes use of tags<>, whith starting tag >tag> and ending tag These tags allow to create the static contents and Javascript the changing or dynamic contents (variables,functions) CSS isCascade Style Sheets to produce a stilysh website(≠font types,spaces,colours,borders)

  
//the two previous forward slashes means a one linecomment for human beins and it is ignoreed by the computer /*the previous forward slash and star means a
line comment*/
/*all the code below is Jaascript code to create a game similar to the famous t-rex game from google chrome browser
//the first two lines of code are variables of a special type: constant variables because always have the same value
It means the word teclado (in English "keybord") is equal to the code 32 of the keybord, namely space bar of a computer.
The word touch means to click with a mobile phone or tablet. So this game is compatible with mobiles, tablets and computer.
*/
const teclado = (() =>{ evento.keyCode == 32})
const touch = (()=>{evento.click })

/*the document is all the code we are using, addEventListener means the computer are listening or waiting for an event to happen.
What is event that the computer is waiting for?
The computer is waiting that we touch the screen because it is written if (touch){do something}
console.log("message"); means write in the console of the browser
document.addEventListener('click', function(evento){
    if(touch){
        console.log("salta con touch");

        if(nivel.muerto ==false)
        saltar();
        else{
            nivel.velocidad = 9;
            nube.velocidad = 1;
            cactus.x = ancho + 100;
            nube.x = ancho + 100;
            nivel.marcador = 0;
            nivel.muerto = false;

            
        }
    }
});

/*After this we repeat the last step pressing a key in our computer*/

document.addEventListener('keydown', function(evento){
    if(teclado){
        console.log("salta con tecla");

        if(nivel.muerto ==false)
        saltar();
        else{
            nivel.velocidad = 9;
            nube.velocidad = 1;
            cactus.x = ancho + 100;
            nube.x = ancho + 100;
            nivel.marcador = 0;
            nivel.muerto = false;

            
        }
    }
});

/ * At the beginning of the code block we declare four variables, "imgCactus", "imgSuelo", "imgNube" and "imgRex",  after you create a function we called "cargarImagenes" what does it tell us what the above variables are images, in the next lines we assign an image to each variable, each variable will have the image that belongs to it (Example: "imgNube". variable we assign an image in png format of a cloud). * / 

var imgRex, imgNube, imgCactus, imgSuelo;

function cargarImagenes(){
    imgRex = new Image();
    imgNube = new Image();
    imgCactus = new Image();
    imgSuelo = new Image();

    imgRex.src = 'imagen/T-rex.png';
    imgNube.src = 'imagen/Nube.png';
    imgCactus.src = 'imagen/Cactus.png';    
    imgSuelo.src = 'imagen/Suelo.png';
}

/* Here we create four variables: "width" with a value of 700 and "height" with a value of 300. At the moment we have not assigned any value to "canvas" and "ctx" which are the other two variables created. */ 

var ancho = 700;
var alto = 300;
var canvas, ctx ;


/ * In these lines we create the function called "inicializa" and "ctx".  
With "function initialize" start the game * / 

function inicializa(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    cargarImagenes();
}


/ * Now we create the function "borraCamvas", It makes it invisible.*/

function borraCamvas(){
 canvas.width = ancho;
 canvas.heght = alto;
}


/*In this pack of codes we declare six variables, “suelo”, “trex”, “nivel”, “cactus”, “nube” and “suelog”,*/ 

var suelo =200;
var trex ={y:  suelo , vy:0 ,gravedad:2 ,salto:28 , vymax:9 , saltando: false};
var nivel = {velocidad:9, marcador: 0, muerto:false};
var cactus ={x: ancho +100 ,y: suelo-25,};
var nube = {x: 400, y:100,velocidad:1};
var suelog = {x:0, y:suelo+30};

/ * In this section we create a function with the name "dibujaRex", it is used to draw the T-Rex indicating height and width. * / 


function dibujaRex(){
    ctx.drawImage(imgRex,0,0,413,549,100,trex.y,50,60);
}


/ * With the "dibujaCactus function" you choose the size of our photos. We can also put a certain speed, a chosen direction. */ 

//-------------------------CACTUS------------------------
function dibujaCactus(){
    ctx.drawImage(imgCactus,0,0,69,135,cactus.x,cactus.y ,100,60);
}

/ * The "Cactus logic" function, checks the position of the Cactus and checks if it has been exceeded * /


function logicaCactus(){
if(cactus.x < -100){
    cactus.x = ancho +100;
    nivel.marcador++;
} else{
    cactus.x -= nivel.velocidad;
}
}


/ * With the "dibujaSuelo function" you choose the size of the photo. We can also put a certain speed, a chosen direction. * /

//-------------------------SUELO----------------------------
function dibujaSuelo(){
    ctx.drawImage(imgSuelo,suelog.x,0,700,300,0,suelog.y ,700,300);
}

function logicaSuelo(){
    if(suelog.x > 120){
        suelog.x = 0;

    }
    else{
        suelog.x += nivel.velocidad;
    }
}


/ * With the "dibujaNube function" you choose the size of the photo. We can also put a certain speed, a chosen direction. * /


//-------------------------NUBE---------------------------
function dibujaNube(){
    ctx.drawImage(imgNube,0,0,533,289,nube.x,nube.y ,82,31);
}

function logicaNube(){
    if(nube.x < -100){
        nube.x = ancho +100;
    } else{
        nube.x -= nube.velocidad;
    }
    }




/ * The most notable of this group are the functions: "function SALTAR", which defines how the jump is going to be and "function gravedad", which adds gravity to our game.*/


//Function SALTAR-------------------------------------------
function saltar(){
    trex.saltando =true;
    trex.vy = trex.salto;

}

function gravedad(){
    if(trex.saltando == true){
        if(trex.y - trex.vy -trex.gravedad > suelo){
         trex.saltando = false;
         trex.vy = 0;
         trex.y = suelo;
        }
        else{
        trex.vy -= trex.gravedad;
        trex.y -= trex.vy
    }
    }
}



/ * In the function called "Colision", this function is the one that occurs when the "Trex" hits the "Cactus"*/

//--------------COLISION-------------------------------



function colision(){
//cactus.x
//trex.y

if(cactus.x >= 100 && cactus.x <= 150){
    if(trex.y >= suelo-25){
        nivel.muerto =true;
        nivel.velocidad = 0;
        nube.velocidad= 0;
    }
}
}



/ * We have another function, which means "puntuación", in which we can customize the size, color, position. Of the marker and the numbers that appear in it. * /

function puntuacion(){
    ctx.font = "30px impact";
    ctx.fillStyle = '#000000';
    ctx.fillText(`${nivel.marcador}`,620,50);

    if(nivel.muerto == true){
        ctx.font ="60px inpact";
        ctx.fillText(`GAME OVER`,150,150);  
    }
}


/ * The "bucle principal" makes what we have written before repeating itself always.
In short, it makes when the T-Rex dies we go back to playing by pressing a key*/


//Bucle principal------------------------------------

var FPS = 50;
setInterval(function(){
    principal();
},1000/FPS);



/* The last thing we do is create the function that we will call "principal", this function executes all the previous ones, therefore it is essential for the correct functioning of the game.*/

function principal(){
    borraCamvas();    
    colision();
    logicaSuelo();
    logicaCactus();
    logicaNube();
    dibujaSuelo()
    dibujaNube();
    dibujaRex();
    dibujaCactus();
    gravedad();
    puntuacion();
}