There are the 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 HyperTextMarkupLanguage it makes use of tags <>, with starting tag
const teclado = (() =>{ evento.keyCode == 32})
// To make the function "evento", we have to click the key number 32 (the space).
const touch = (()=>{evento.click})
//This code says that with a constant touching on the space key, the "evento" (event) will happen.
/*The document is all the code we're using. at addEventListener means the computer are listening or waiting for an event to happen.
Whaat is the event the computer is waiting for?
{do something}
console.log("message)"; means write message in the console of the browser
document.addEventListener('click', function(evento){
// We use: "document.addEventListener('click', function(evento){" because we want the computer waits for us to do something, in this case, the computer waits for a click to //execute a function wich it names is "evento".
if(touch){
console.log("salta con touch");
if(nivel.muerto ==false)
saltar();
else{
// Else{ it's used to say a contradition, like "in the other way" or "otherwise"
nivel.velocidad = 9;
nube.velocidad = 1;
cactus.x = ancho + 100;
//"cactus.x=ancho+100;" means the width of the cactus.
nube.x = ancho + 100;
// "nube.x = ancho + 100;" means the width of the cloud.
nivel.marcador = 0;
// This means that the predetermined level of the marker is 0.
nivel.muerto = false;
// To begin, we have to use a code called:"document.addEventListener('click', function(evento){". We use it because we want the computer has to wait for us for doing something (in this case the computer waits for us to excecute a function wich it names is "evento". Then we have to appoint wich key we want the computer makes the function evento, in my case the number 32 (space).
// This function: " console.log("salta con touch");", means that the computer detectes as "salta con touch" the function evento.
// " nivel.velocidad = 9;" express the velocity of the level (9).
}
}
});
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;
// This function allow us to write img + the name of the element instead of writting var + img + the element.
function cargarImagenes(){
// When the page loads, the images and the var will be loaded, that's the purpose of this function ( function cargarImagenes(){ ).
imgRex = new Image();
imgNube = new Image();
imgCactus = new Image();
imgSuelo = new Image();
imgRex.src = 'imagen/Trex.png';
imgNube.src = 'imagen/Nube.png';
imgCactus.src = 'imagen/Cactus.png' ;
imgSuelo.src = 'imagen/Suelo.png' ;
// The attribute "src" indicates the route or the direction or name of the image, so, we have to mention all the images we have and add them the attribute src.
}
var ancho = 700;
var alto= 300;
var canvas, ctx ;
// The variable: "var canvas, ctx ;" Means the context the canvas has, and the variable " var ancho= 700; means the width of the var. Also the variable " var alto= 300; means the hight of it.
function inicializa(){
canvas= document.getElementById('canvas');
// This variable:" canvas= document.getElementById('canvas');" It's an element of the "html", we use it because it does that we only have to write "canvas" instead of//:"canvas= document.getElementById('canvas');".
ctx = canvas.getContext('2d') ;
// The context of the canvas: " ctx = canvas.getContext('2d') ;" explains how the canvas works, in our case, it's a screen in 2D (second dimension).
cargarImagenes();
}
function borraCanvas(){
canvas.width = ancho;
canvas.heght = alto;
// The function "borraCanvas" is used to eliminate the canvas, to do it we only have to change the canva's width and it's height.
}
var suelo =200;
var trex ={y: suelo , vy:0 , gravedad:2 ,salto:28 , vymax:9 , saltando: false};
// Here we begin to use attributes: An attribute is a property or a characteristic of an image. In my case, I use the letters "y" and "vy" as attributes.
// The attribute "y" means the vertical position, "vy" ( velocity of y)
// So, the "vy:0" means the velocity vertical is 0, the valor of gravity is 2, the maxim vertical velocity is 28. That means that every time the trex jumps, 2 pixels per frame// (fps) will be subtracted by the gravity effect.
var nivel = {velocidad:9, marcador: 0, muerto:false};
// The utility of this code is to indicate that all the objects (floor "suelo", cactus "cactus") are moving at the same velocity (9), it indicates the signpost and when the //Trex craches with the cactus, the game finishes so we assing it like "muerto" (died).
var cactus ={x: ancho +100 ,y: suelo-25,};
// Since the cactus only moves horizontally, we apply a variable called "x" (horizontal speed). The variable "y" means the ground (-25), also the width of it is 100, and the //height -25.
var nube = {x: 400, y:100,velocidad:1};
// X is equal to width and Y to hight, so the cloud has 400 pixels of width and 100 pixels of hight, with a velocity of 1.
var suelog = {x:0, y:suelo+30};
// The var of the ground is equal to 0 of width and 30 pixels of "y" (height).
function dibujaRex(){
// We use the function: "function dibujaRex(){" because it loads the image (in this case the rex image)
ctx.drawImage(imgRex,0,0,413,549,100,trex.y,50,60);
// This is the context of the trex image, then the coordinates of the trex are written (0,0,100), the the real dimensions of it (413,549) and the image dimension in the var (50,60).
}
//-------------------------CACTUS------------------------
function dibujaCactus(){
// We use the function: "function dibujaCactus(){" because it loads the image (in this case the cactus image).
ctx.drawImage(imgCactus,0,0,69,135,cactus.x,cactus.y ,100,60);
}
function logicaCactus(){
// This function determinates the movement of the cactus.
if(cactus.x < -100)
cactus.x = ancho +100;
// We are going to use a common resource that consists on: the cactus appears from the right side of the screen and moves to the left side at the speed of the level. When //the cactus passes the value 0, the position of the cactus has been updated so as the cactus appears again from the right side of the screen.
nivel.marcador++;
// This attribute means that when the position of the cactus get reseted or is updated, then one 1 will be added to the score.
} else{
cactus.x -= nivel.velocidad;
}
}
//-------------------------SUELO------------------------
function dibujaSuelo(){
// We use the function: "function dibujaSuelo(){" because it loads the image (in this case the floor image).
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(){
// We use the function: "function dibujaNube(){" because it loads the image (in this case the nube image).
ctx.drawImage(imgNube,0,0,533,289,nube.x,nube.y ,82,31);
//This code means the size of the cloud, the width of it is 82 pixels, and the height is about 31.
}
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;
// The equality of --> trex.vy = trex.salto; says that the force jumping that the trex excecutes is of 28 pixels.
}
function gravedad(){
// This is the function wich makes the effect of gravity when the trex goes down.
if(trex.saltando == true){
// The meaning of this function is that if the trex is jumping (in the air) the gravity doesn't have to affect him.
if(trex.y - trex.vy -trex.gravedad > suelo){
// Before I explain why I use this function, we have to know that the trex with this values--> "trex.vy -= trex.gravedad;" and " trex.y -= trex.vy" realizes like a bounce,// because of the substraction of the y and the vy.
// So, this function corrects that bounce effect, that's why the reason of it's utility.
trex.saltando = false;
trex.vy = 0;
trex.y = suelo;
// The role of this function means when the vertical position (hight) is more or equal to the ground, signify the function--> "trex.saltando = false;" because the gravity will not affect to him.
// We have to initalize the variables, so that's why the existance of the function -->"trex.vy = 0;". This functions means the velocity of the jump is equal to 0 (because the Trex have stopped on the floor.
// And for say the computer that the Trex have to be in the ground, we use the function --> "trex.y = suelo;" (it means the vertical position is equal to the floor).
}
else{
trex.vy -= trex.gravedad;
// The role of this function is that when the Trex is on the air, every time, it will jump slowlier so in one moment it will fall down.
trex.y -= trex.vy
// The substraction means that we substract the vertical position prep the velocity.
}
}
}
//--------------COLISION-------------------------------
function colision(){
//cactus.x
//trex.y
// We write the variables:"cactus.x" and "trex.y" because we are going to work with them in this topic.
if(cactus.x >= 100 && cactus .x <= 150){
// The purpose of this function is that if the cactus is between the numerbs 100 and 150, then the colision has done.
if(trex.y >=suelo-25){
// If the vertical position of the Trex it's more than the hight of cactu's hight then:
nivel.muerto =true;
// This function has the role of indicates to the computer that the Trex "died" and we lost the game.
nivel.velocidad= 0;
nube.velocidad= 0;
// When the colision happens, all the objects have to stop, that's why the value 0 of the level and the cloud.
}
}
}
function puntuacion(){
ctx.font ="30px impact";
// The attribute "font" indicates the source, "px" indicates the size (in this case 30), and the "impact" that indicates the type of the letter.
ctx.fillStyle = '#000000';
// The attribute "fillStyle" says the color of the letters.
ctx.fillText(`${nivel.marcador}`,620,50);
// The attribute "fillText" is the one that write what we want to say, in our case we want to say the puntuation we have. Also the numbers "620" and "50" are //the coordinates where the text have to be.
if(nivel.muerto == true){
ctx.font ="60px inpact";
ctx.fillText(`GAME OVER`,150,150);
// If we die, in the screen will appear in the size 60, the type of letter inpact the phrase: GAME OVER (with the size 150 and 150).
}
}
//Bucle principal------------------------------------
var FPS = 50;
// 50 are the FPS ( frames per second) with which the game works.
setInterval(function(){
principal();
},1000/FPS);
function principal(){
borraCanvas();
colision();
logicaSuelo();
logicaCactus();
logicaNube();
dibujaSuelo();
dibujaNube();
dibujaRex();
dibujaCactus();
gravedad();
puntuacion();
// Here are all the functions I used to program the Trex game.
}
// The frame rate (or FPS) of the var is 50, we have to know that the function: "setInterval(function(){" determinates the period or the interval time that the function "principal" is excecuted, in this case that interval time is about 1000/FPS.