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 HyperText Markupt Language, that is, it makes use of tags <>, with starting tag
/*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 variable, beacuse always have the same value.
It means the word teclado (in english "keyboard") is equal to a code 32 of the keyboard, namely the space bar of a computer.
The word touch means to click with a mobile phone or tablet. So this game is compatible with mobile, tablet 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 the event that the computer are waiting for?
The computer is waiting that we touch the screen because it is written if (touch) {do something}
Console.log("message"); means right message in the console of the browser
document .addEventListener('click', function(evento){
if (touch) {
console.log("salta con touch");
/* This information explains the velocity, positions and levels of the elements in the game.You can adjust it to be wider or taller,
or adjust its speed, so that it goes faster or slower.*/
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;
}
}
});
/* In this part of the code we have to add the files (photos) for then the fotos charge in the game*/
var imgRex, imgNube, imgCactus, imgSuelo;
function cargarImagenes(){
imgRex = new Image();
imgNube = new Image();
imgCactus = new Image();
imgSuelo = new Image();
/* We have to put the entire adress of the photo for it looks well on our website. With the Function application,
what we do is allow the image to be viewed and it adapts and does what we have previously ordered.*/
imgRex.src = 'imagen/T-rex.png';
imgNube.src = 'imagen/Nube.png';
imgCactus.src = 'imagen/Cactus.png';
imgSuelo.src = 'imagen/Suelo.png';
}
/* Canvas is used to delimit the frame of the game and not occupy the entire page*/
var ancho = 700;
var alto = 300;
var canvas, ctx ;
/* With "function inicializa" what we're doing is getting the game to start*/
function inicializa(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
cargarImagenes();
}
/*"Function borraCamvas" makes it invisible allowing us to see other types of elements in the game*/
function borraCamvas(){
canvas.width = ancho;
canvas.heght = alto;
}
/* Var accompanied by an element and a number in this case is to define the gravity, the length of the jump, the marker and when or how it should die*/
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};
/*With "function dibuja..." we manage to delimit the lenghts of our photos/elements getting them to stay as we would like them to look,
we can also say the type of speed at wich we want it to go, just we have to add the name of the element we want see and their adress code,
for example in the T-rex game we found a Cactus, a T-rex, a cloud an a floor, but here we can especify the jump, the score and the collision too
(Saltar, puntuación y colisión in spanish) "dibuja" means that the photo we select will appear, and "logica"
means that the photo we select do what we want*/
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 ,130,60);
}
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,300,0,suelog.y ,700,300);
}
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 ,82,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;
}
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);
}
}
/*With "bucle principal" it makes everything that we have written before activess and thus
makes the game work, under the "bucle principal" you have to add all sections that we have introduced in the game to make
it work, and by putting a "bucle" what we get is that this action is repeated all the time and
not only one game is played but you can do moe than one*/
//Bucle principal------------------------------------
var FPS = 50;
setInterval(function(){
principal();
},1000/FPS);
function principal(){
borraCamvas();
colision();
logicaSuelo();
logicaCactus();
logicaNube();
dibujaSuelo();
dibujaNube();
dibujaRex();
dibujaCactus();
gravedad();
puntuacion();
}