Code explanation

There are three progamming lenguages to create an online videogame: Javascript,HTML and css.

The main lenguage in the videogame is Javascript. It creates variables and functions. HTML means HyperText Markup Language, that's it it makes use of tags <>, with strarting tag and ending tag . These tags allow to create these static contents and Javascript the changing or dinamic contents (variables, function) CSS is Cascade Style Sheets to produce website (≠font types, spaces, colours, borders)

  //The two previous forward slashes means a one line comment for human beignsand it's ignored by the computer
  /*the previous forward slash and star means a multiple line comment*/
  /*All the code  is a javascript code to create a game similar to the famous T-rex game form 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: keyboard) is equal to de code 32 of the keyborad, namely space bar of a computer.
  The word touch means to click with a mobile phone o tablet. So this game is campatible with mobiles, tablets and computers
  */
  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 the 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 message 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;

            
        }
    }
});
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;

            
        }
    }
});

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';
}

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

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

function borraCamvas(){
 canvas.width = ancho;
 canvas.heght = alto;
}
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};

function dibujaRex(){
    ctx.drawImage(imgRex,0,0,413,549,100,trex.y,50,60);
}
//-------------------------CACTUS------------------------
function dibujaCactus(){
    ctx.drawImage(imgCactus,0,0,69,135,cactus.x,cactus.y ,38,75);
}




function logicaCactus(){
if(cactus.x < -100){
    cactus.x = ancho +100;
    nivel.marcador++;
} else{
    cactus.x -= nivel.velocidad;
}
}
//-------------------------SUELO----------------------------
function dibujaSuelo(){
    ctx.drawImage(imgSuelo,suelog.x,0,700,30,0,suelog.y ,900,30);
}

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

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


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

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






//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
    }
    }
}
//--------------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;
    }
}
}


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);  
    }
}


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

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

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