The web site of snizhana4211

Code Explanation

There are three programming languages to create an online vieogame: Javascript, HTML and CSS.

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

//The two previous forward slashes means a one line comment for human beings and it is ingnored by the compter.
/*The previous forward slash and star means a 
multiple line comment.*/
/*All the comment below is javascript 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 variable because always have the same values.
It means the word teclado (in english keyboard) is equal to the code 32of the keyboard, namely space bar of a computer.
The word touch means to click with a mobile phone or tablet. So this game is compatible with mobile, tablets and computers.
const teclado = (() =>{ evento.keyCode == 32})
const touch = (()=>{ })

/*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 screeen beacuse it is written if (touch){do something}
console.log("message"); means right message in the console of the browser*/
document.addEventListener('click', function(evento){
        console.log("salta con touch");
/*This information explains the velociti, positions and levels of the elements that are in the devil's bridge game.*/
        if(nivel.muerto ==false)
            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){
        console.log("salta con tecla");

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


/*In this part of the code we have to add the archives(photos) for then we can charge the photos on the game and play it.*/
var imgRex, imgNube, imgCactus, imgSuelo;

function cargarImagenes(){
    imgRex = new Image();
    imgNube = new Image();
    imgCactus = new Image();
    imgSuelo = new Image();
/*We write the address of the archives for that the code can find them in all the archives we put in our website.*/
    imgRex.src = 'imagen/T-rex.png';
    imgNube.src = 'imagen/Nube.png';
    imgCactus.src = 'imagen/Cactus.png';    
    imgSuelo.src = 'imagen/Suelo.png';
/*That lines of code represents the shape that delimited the game, we indicate the mesures that we want.*/
var ancho = 700;
var alto = 300;
var canvas, ctx ;

/*This function is for the game work well and send the information to run.*/
function inicializa(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

/*Is for that the "Camvas" turn invisible and in that way the game can work and we can play it well.*/
function borraCamvas(){
 canvas.width = ancho;
 canvas.heght = alto;

/*That part is for indicate the gravity, velocity, size, etc. Of the elements that then we can play it in the game.*/
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};

/*The "function dibuja..." indicate the positions on the game and the size that he will have in it. 
The image that we use for the game is very important that it has the appropriate size because otherwise it will be deformed and the game will be bad. 
We make different sections with each element of the game and indicate its properties. The other "function logica..." makes the images do what we indicate, 
move through the game in the direction we want, go up or down and most importantly, at the speed we want it to go.*/
function dibujaRex(){
function dibujaCactus(){
    ctx.drawImage(imgCactus,0,0,69,135,cactus.x,cactus.y ,130,60);

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

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

        suelog.x += nivel.velocidad;

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;

/*"Function SALTAR" makes the T-Rex in this case jump to the height we want. "Function gravedad" we use it to indicate the severity that the element must have, 
in the case of the T-Rex we use it so that when it comes to jumping it falls in the way we want. That is why we indicate gravity. 
"Function colision" it is used to indicate at what point we determine the collision between two elements of the game, in our case the T-Rex and the cactus. 
And also when they collide, the movement of each element stops. And finally "function puntuacion" makes when the T-Rex overcomes the cactus add point to the game marker, 
in this way when otherwise they collide the counter will stop and thanks to the previous function the movement of the game and the counter will stop.*/

//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;
        trex.vy -= trex.gravedad;
        trex.y -= trex.vy

function colision(){

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

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

/*"Bucle principal" this last section makes all the files that we have previously explained, 
added to the game and we have ordered them how they have to act in the game. 
They are initialized in the game itself and work with each other, obviously with only this section not everything will work perfectly, 
many code errors can be committed and we must solve them in order to enjoy our code.*/
//Bucle principal------------------------------------

var FPS = 50;

function principal(){