This would be my Javascript code
// variables // load everything on screen
window.onload = function(){
objetos = [];
canvas = document.getElementById("lienzo");
ctx = canvas.getContext("2d");
// objetos
sustantivo=["sofia","soy","la","mejor","cobol","Perro","Gato","amor","altura","virtud","bondad"]
adjetivos=["gordo","flaco","hermoso","inteligente","joven","divertido","calvo","debil","fuerte","enano","alto"]
verbo=["comer", "mirar", "dormir", "soñar","caminar","gritar","hablar","escuchar","pelear","peinar","pintar"]
otro=["Tesla","Spock","lalala","lololo","dcdc","wdcec","kcmd","Hermandad","Clerigo","Zapallo","Tomate"]
diccionario=[]
tipo=[]
function palabraaleatorio(){
for(i=0;i<10;i++){
var cualcategoria=Math.floor(Math.random() * (10-1 ) );
var cualpalabra=Math.floor(Math.random() * (10-1));
if(cualcategoria==1){
diccionario.push(sustantivo[cualpalabra]);
tipo.push(1);
}
if(cualcategoria==2){
diccionario.push(adjetivos[cualpalabra]);
tipo.push(2);
}
if(cualcategoria==3){
diccionario.push(verbo[cualpalabra]);
tipo.push(3);
}
if(cualcategoria==4){
diccionario.push(otro[cualpalabra]);
tipo.push(4);
}
}
}
palabraaleatorio();
objetos.push({
x: 150, y: 130,
width: 50,height: 50,
x2: 150, y2: 130,
width2: 50,height2: 50,
color: "black",
palabra: diccionario[0],
tipo:tipo[0],
tiro:150,
agarro:0,
tira:150
})
objetos.push({
x: 350, y: 130,
width: 50,height: 50,
x2: 350, y2: 130,
width2: 50,height2: 50,
color: "black",
palabra:diccionario[1],
tipo:tipo[1],
tiro:350,
agarro:0,
tira:350
})
objetos.push({
x: 550, y: 130,
width: 50,height: 50,
x2: 550, y2: 130,
width2: 50,height2: 50,
color:"black",
palabra:diccionario[2],
tipo:tipo[2],
tiro:550,
agarro:0,
tira:550
})
objetos.push({
x: 750, y: 130,
width: 50,height: 50,
x2: 750, y2: 130,
width2: 50,height2: 50,
color:"black",
palabra:diccionario[3],
tipo:tipo[3],
tiro:750,
agarro:0,
tira:750
})
objetos.push({
x: 950, y: 130,
y2: 130,
width: 50,height: 50,
x2: 950, y2: 130,
width2: 50,height2: 50,
color:"black",
palabra:diccionario[3],
tipo:tipo[3],
tiro:950,
agarro:0,
tira:950
})
// Mouse event with which I take the elemnto and drag them on the screen
// canvas.onmouseup = function (event) { // currentActual = null;
// objetosActual.agarro=0;}
//tuerca
nube = new Image();
nube.src ="tuerca.png"
//robots
//1
robot1.img.src="robot1.png"
//2
robot2.img.src="robot2.png"
//3
robot3.img.src="robot3.png"
//4
robot4.img.src="robot4.png"
//avion derecha:
img = new Image();
img.src="avionder.png"
//vion izquierda
im2 = new Image();
im2.src="avionIzq.png"
}
var canvas
var ctx
var pos_x=-50;
var pos_y=130; //pocicion X/ida del avion
var positi=1370; //posicion x vuelta del avion
var objetos
var objetoActual= null;
var inicioX = 0
var inicioY = 0;
Array
robots=[];
var robot1={
img:document.createElement('img'),
x:40,
y:480,
ancho:120,
alto:120,
tipo:1
}
var robot2={
img:document.createElement('img'),
x:270,
y:450,
ancho:130,
alto:150,
tipo:2
}
var robot3={
img:document.createElement('img'),
x:1000,
y:460,
ancho:120,
alto:140,
tipo:3
}
var robot4={
img:document.createElement('img'),
x:1200,
y:460,
ancho:130,
alto:140,
tipo:4
}
robots.push(robot1,robot2,robot3,robot4);
function anim(){
ctx.clearRect(0,0,1360,630);//limpia el canvas a medida que va dibujando
//palabras robots
ctx.fillText( "Sustantivo",0,600);
ctx.fillText( "Adjetivo",230,600);
ctx.fillText( "verbo",970,600);
ctx.fillText( "Otro",1170,600 );
//dibuja los cuatro robots
ctx.drawImage(robot1.img,robot1.x,robot1.y,robot1.ancho,robot1.alto ); // caja 1
ctx.drawImage(robot2.img, robot2.x,robot2.y,robot2.ancho,robot2.alto );// caja 2
ctx.drawImage(robot3.img, robot3.x,robot3.y,robot3.ancho,robot3.alto );// caja 3
ctx.drawImage(robot4.img, robot4.x,robot4.y,robot4.ancho,robot4.alto );// caja 4
//avion Ida
ctx.drawImage(img, pos_x,5,80,100 );
//avion vuelta
if(pos_x>1370){ctx.drawImage(im2, positi,5,80,100 );
positi -=3;
}
//dibuja las tuercas con su correspondiente palabra recorriendo cada lugar dentro del arreglo objetos
for(var i=0; i < objetos.length; i++){
ctx.fillStyle = objetos[i].color
if(pos_x>objetos[i].tiro){
ctx.drawImage(nube, objetos[i].x-15,objetos[i].y -40, 70,70);
ctx.fillText( objetos[i].palabra,objetos[i].x, objetos[i].y, objetos[i].width,objetos[i].heigh);
ctx.font="20px Tw Cen MT"
if(objetos[i].agarro==0){
objetos[i].y=objetos[i].y+1 };
}
}
pos_x +=3 //AVION aumenta para la derecha de a 3
canvas.onmousedown = function(event){
for (var i = 0; i < objetos.length; i++) {
if (objetos[i].x < event.clientX && (objetos[i].width + objetos[i].x > event.clientX)
&& objetos[i].y < event.clientY && (objetos[i].height + objetos[i].y > event.clientY)){
objetoActual = objetos[i];
objetos[i].agarro=1;
inicioY = event.clientY - objetos[i].y;
inicioX = event.clientX - objetos[i].x;
break;
}
}
canvas.onmouseup = function(event){
for (var i = 0; i < objetos.length; i++) {
objetos[i].agarro=0;
}
objetoActual = null;
}
};
canvas.onmousemove = function (event) { if (currentAct! = null) { currentAct.x = event.clientX - startX; currentAct.y = event.clientY - startY; } }
function colision(){
for(k=0;k<objetos.length; k++){
for(l=0;l<robots.length; l++){
if( robots[l].x < objetos[k].x + objetos[k].width &&
robots[l].x + robots[l].ancho > objetos[k].x &&
robots[l].y < objetos[k].y + objetos[k].height &&
robots[l].y + robots[l].alto > objetos[k].y){
console.log(robots[l].tipo);
if(robots[l].tipo== objetos[k].tipo){
ctx.fillText("CORRECTO!!!",50,200);
}else{
ctx.fillText("INCORRECTO!!!",50,200);
}
}
}
}
}
colision();
requestAnimationFrame(anim);
}
function ampliar(){
var modal = document.getElementById("modal");
modal.style.display = "none";
anim();
}
</script>