First we create a canva, where inside we can put different images. We have to download the images that we want to put into the canva in “png” format. Then in the canva we have the width and the length,which can be changed to your liking.We have to program with document .AddEventListener so that when pressing a key it does the function you ask for, for the space key it is number 32, but any other key can be programmed.Every 10 times per second it recharges and the same happens continuously. We check if the functions are working correctly, and if so we can start drawing / putting the images inside the canva. Variables are set for example: Imgrex. Images will be loaded, the variable will be asked to convert it into a new image. After the jump function. You have to act jump with TRUE. Variables are created for ground, gravity, jumps, no bounce, and speed. To draw the cactus, create a variable for the cactus with the dimensions and position. Logicacactus function, for the movement of the cactus so that it changes the screen each time the screen changes. To detect collisions, collision function looks at variables of the t-rex and cactus. For example if the position of the T-rex is higher or lower than the cactus with the variable soil as well. Dead.level = true: if this happens the T-rex dies. We let the velocity = 0 and the cloud velocity. By hitting the space =, the game starts over.
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
/*The two previous forward slashes means a line comment for human beings and it is ignored by the
The previous forwrad 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 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 is waiting for?
The computer is waiting that we touch the screen because it is written if (touch) do something
console.log("message"); means write message in the console
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,300,0,suelog.y ,70,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 ,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);
}
}
//Bucle principal------------------------------------
var FPS = 50;
setInterval(function(){
principal();
},1000/FPS);
function principal(){
borraCamvas();
colision();
logicaSuelo();
logicaCactus();
logicaNube();
dibujaSuelo()
dibujaNube();
dibujaRex();
dibujaCactus();
gravedad();
puntuacion();
}