There are three programming languages to create 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 < >, with starting tag <tag> and ending tag </tag>. These tags allow to create the static contents and Javascript the changing or dynamic contents (variables, functions) CSS is C ascade 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 ignored by the computer
/*the previous forward slash and star means a
multiple line comment*/
/*all the code 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 variables because always have the same value
It means the word teclado (in English language "keyboard") is equal to the code 32 of the keyboard, namely space bar.
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 = (()=>{evento.click })
/*The document is all the code we are using, addEventListener means the computer are listening or wating for and event to happen.
What is the event that the computer is waiting for?
The computer is wating that we touch the screen because it is written if (touch){do something}*/
console.log("message"); means write 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;
}
}
});
/*To continue we do the same as in the previous step but when we press a key on our computer keyboard.*/
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;
}
}
});
/*In the first line of this block of code we declare four variables,”imgRex”, “imgNube”, “imgCactus” i “imgSuelo”
and after it creates a function that it’s called “cargarImagenes” what does it tell us the previous variables are
images, in the following lines we assign the corresponding image to each variable, (for example to the “imgRex”.
variable we assign an png archive of a dinosaur).*/
var imgRex, imgNube, imgCactus, imgSuelo;
function cargarImagenes(){
imgRex = new Image();
imgNube = new Image();
imgCactus = new Image();
imgSuelo = new Image();
imgRex.src = 'image/T-rex.png';
imgNube.src = 'image/nube.png';
imgCactus.src = 'image/Cactus.png';
imgSuelo.src = 'image/Suelo.png';
}
/*Here we create four variables, “ancho” with a value of 700, “alto” with a value of 300, “canvas” and“ctx” that
have not yet been granted any value.*/
var ancho = 700;
var alto = 300;
var canvas, ctx ;
/*On these lines we create a function called “inicializa” and we give a value to the variables “canvas” that delimits
the space occupied by the game on our website (it is rectangular and in this case we have put in blue, because it’s
more pretty for me), and the variable “ctx” being told that the game is in two dimensions.*/
function inicializa(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
cargarImagenes();
}
/*Here we creates a function with the name of “borraCamvas”, inside the function we say the weight and height
of canvas, declared previously in the variables “ancho” with the value 700 and “alto” with the value 300.*/
function borraCamvas(){
canvas.width = ancho;
canvas.height = alto;
}
/*In this block of code we declare six variables, “suelo”, “trex”, “nivel”, “cactus”, “nube” and “suelog”,
in which values are given to the different objects of the game, such as position or marker.*/
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};
/*Here we create a function with the name “dibujaRex”, it is used for draw the
T-Rex indicating values such as position, width or height.*/
function dibujaRex(){
ctx.drawImage(imgRex,0,0,413,549,100,trex.y,50,60);
}
/*Below is a comment, which as i explained above makes the computer not read it as code, (we use “//”)and
then create another function called “drawCactus” that serves the same purpose as above (drawRex), draws the
Cactus using values such a position, width or height.*/
//-----------------------CACTUS------------------------
function dibujaCactus(){
ctx.drawImage(imgCactus,0,0,69,135,cactus.x,cactus.y ,100,60);
}
/*Here we create a function called “logicaCactus”, the function it checks that if the position of Cactus
on the X axis is smaller than -100, the position of Cactus on the X axis will be equal to the variable
“width” plus 100 and will add a point to the scoreboard. But if this is not fulfilled the Cactus will
continue moving.*/
function logicaCactus(){
if(cactus.x < -100){
cactus.x = ancho +100;
nivel.marcador++;
} else{
cactus.x -= nivel.velocidad;
}
}
/*Then we make a comment called “suelo”, so we better understand this piece of code, we see how there
is a function called “dibujaSuelo”, where the same thing happens as in the two previous functions, we
draw “suelo”. We also find the function “logicaSuelo” where the same thing we explained in the previous
point “logicaCactus”.*/
//------------------------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;
}
}
/*In this block, as in the previous ones, it is used to draw the objects and to control or move it.*/
//-------------------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 first we can see in this block of code has a comment with the text “Function SALTAR”, in the next
line has a function called “saltar”, this function first says that the dinosaur is jumping, and the next
line assigns the value of the “trex.salto”.
Then there are another function called “gravity” , this function the first thing it does is check that the
dinosaur is jumping, if it is check if “trex.y” minus “trex.vy” minus “trex.gravedad” is bigger than the
variable called “suelo”, if it is says that the dinosaur is not jumping, sets the variable “trex.vy” to 0
and sets the variable “trex.y” equal to the variable “suelo”, if this is not fulfilled wha it would do would
be to say that the variable “trex.y” is equal to the variable “trex.vy” minus the variable “trex.gravedad” and
says that the variable “trex,y” is equal to the variable “trex.y” minus the variable “trex.vy”.*/
//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
}
}
}
/*Here we see a function called “colision” what does it means? Well, it explains us what happens when the T-Rex
crash in this case with the object “Cactus”, it tell us if the Cactus in the X axis is major or equal to one hundred
and the Cactus in the same axis is less or equal to 150, the T-Rex will be dead and the speed to the level and the
cloud will be zero, it means that the game will stop.*/
//------------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, that means “puntuacion”, ,we chose through ctx the letter we want, the size, color,
position… Of the marker and the message which appears on the scream if we lose, in this case appears “GAME OVER”.*/
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);
}
}
/*It starts with a comment that tells us that these last two blocks are ones that really make the game work, without
theme we will still have the game but it couldn’t work. We can see that first we make a variable, it tell us that the
FPS (frames per second) are 50, and then the “principal” function is executed, which i will explain later, then we divide
1000 by 50, wich are the FPS.*/
//Bucle principal---------------------------------------
var FPS = 50;
setInterval(function(){
principal();
},1000/FPS);
/*The last piece of code what it does is create a function with the name “principal”, what this function does is run all
the functions created previously, and make the game work.*/
function principal(){
borraCamvas();
colision();
logicaSuelo();
logicaCactus();
logicaNube();
dibujaSuelo()
dibujaNube();
dibujaRex();
dibujaCactus();
gravedad();
puntuacion();
}