Que tan lejos estamos en un juego de javascript [13]
En este tutorial vamos a que tan lejos estamos en un juego de javascript siguiendo estos pasos:
- Math.pow
- Math.sqrt
- Descubrir que tan lejos estamos de vender el avión.
- Teorema de pitágoras.
Codigo: https://github.com/programadornovato/avionJavascript/commit/fc7fe8741085f7247ef9269bbf6390f54a7c927c
css/css.css
body{
margin: 0px;
padding: 0px;
background-color:#b4dcfc;
cursor: crosshair;
}
#mapa{
user-select: none;
position: absolute;
width: 1024px;
}
#canvas{
position: absolute;
left: 0px;
}
#avion{
position: absolute;
top: 500px;
left: 20px;
z-index: 100;
width: 70px;
display: none;
transition: left 2s cubic-bezier(0.42, -0.3, 0.78, 1.25), top 2s cubic-bezier(0.42, -0.3, 0.78, 1.25);
}
#no{
position: absolute;
top: 500px;
left: 20px;
z-index: 100;
width: 30px;
display: none;
transition: left 2s cubic-bezier(0.42, -0.3, 0.78, 1.25), top 2s cubic-bezier(0.42, -0.3, 0.78, 1.25);
}
#fuego{
position: absolute;
top: 500px;
left: 20px;
z-index: 200;
width: 600px;
display: none;
}
#llora{
position: absolute;
top: 520px;
left: 20px;
z-index: 200;
width: 100px;
display: none;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ayudame a vender mi avion!!!!</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<img src="img/mapa.png" id="mapa" >
<img src="img/avion.png" id="avion">
<img src="img/no.gif" id="no">
<img src="img/fuego.gif" id="fuego">
<img src="img/llora.png" id="llora">
<script src="js/juego.js"></script>
</body>
</html>
js/juego.js
//alert("hola desde javascript");
var mapa = document.getElementById('mapa');
var anchoMapa = mapa.clientWidth;
var altoMapa = mapa.clientHeight;
var canvas = document.createElement('canvas');
canvas.width = anchoMapa;
canvas.height = altoMapa;
var matriz=[];
var contador=0;
var verPais=false;
var numFallos=0;
var limiteFallos=5;
var xy=null;
var oportunidadesRestantes=limiteFallos-numFallos;
window.onload = function (event) {
var ctx=canvas.getContext('2d');
ctx.drawImage(mapa, 0, 0, anchoMapa, this.altoMapa);
document.body.appendChild(canvas);
canvas.setAttribute('id', 'canvas');
ctx.fillStyle="red";
ctx.font="20px Arial";
ctx.fillText(`Oportunidades ${oportunidadesRestantes}`,10,500);
buscaPais();
do{
xy=buscaPais();
if(xy==null){
location.reload();
break;
}else{
llenarUnPais(xy['posAleatoriaMapaX'],xy['posAleatoriaMapaY']);
}
}
while(contador<800);
}
function llenarUnPais(x,y) {
contador=0;
llenarArea(x,y,1);
llenarArea(x,y,-1);
if(verPais==true){
llenarTodo();
}
}
function buscaPais(){
var con=0;
do{
var posAleatoriaMapaX=numeroAleatorio(anchoMapa);
var posAleatoriaMapaY=numeroAleatorio(altoMapa);
var datosDelPixel=canvas.getContext('2d').getImageData(posAleatoriaMapaX,posAleatoriaMapaY,1,1).data;
//var ctx=canvas.getContext('2d');
//ctx.fillStyle='rgb(0, 102, 0)';
//ctx.fillRect(posAleatoriaMapaX,posAleatoriaMapaY,8,8);
con++;
if(con>50)return null;
}while(datosDelPixel[0]!=255 && datosDelPixel[1]!=255 && datosDelPixel[2]!=255);
return {posAleatoriaMapaX,posAleatoriaMapaY};
}
function llenarArea(x, y,haciaArribaAbajo) {
var posx = x;
var posy = y;
var datosDelPixel = canvas.getContext('2d').getImageData(posx, posy, 1, 1).data;
var haciaDerechaIzquierda=1;
var perdida=15;
while (datosDelPixel[0] == 255 && datosDelPixel[1] == 255 && datosDelPixel[2] == 255) {
while (datosDelPixel[0] == 255 && datosDelPixel[1] == 255 && datosDelPixel[2] == 255) {
datosDelPixel = canvas.getContext('2d').getImageData(posx, posy, 1, 1).data;
posx = posx + haciaDerechaIzquierda;
matriz[contador]={posx,posy};
contador++;
}
posy=posy+haciaArribaAbajo;
haciaDerechaIzquierda=haciaDerechaIzquierda*-1;
for (let i = 0; i < perdida; i++) {
posx=posx+haciaDerechaIzquierda;
matriz[contador]={posx,posy};
contador++;
}
datosDelPixel = canvas.getContext('2d').getImageData(posx, posy, 1, 1).data;
}
}
function llenarTodo() {
for (let i = 0; i < contador; i++) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0, 0, 204)";
ctx.fillRect(matriz[i]['posx'],matriz[i]['posy'],1,1);
}
}
function numeroAleatorio(limiteMax){
return Math.floor(Math.random()*limiteMax);
}
canvas.addEventListener('click',clickCanvas);
function clickCanvas (event) {
var encontrado=false;
var avion=document.getElementById('avion');
var fuego=document.getElementById('fuego');
var no=document.getElementById('no');
for (let i = 0; i < contador; i++) {
if(
(matriz[i]['posx']==event.offsetX && matriz[i]['posy']==event.offsetY) ||
(matriz[i]['posx']==event.offsetX && matriz[i]['posy']==event.offsetY+1) ||
(matriz[i]['posx']==event.offsetX && matriz[i]['posy']==event.offsetY-1)
){
encontrado=true;
break;
}
}
if(encontrado==true){
avion.style.display="inline";
fuego.style.display="inline";
mueveElemento(event.offsetX,event.offsetY,avion);
mueveElemento(event.offsetX,event.offsetY,fuego);
var jet=new Audio('audio/jet.mp3');
jet.play();
var tiempoEspera=setInterval(function(){
var respuesta=confirm("Felicidades has vendido el avion presidencia!!!¿Desear jugar otra partida?");
if(respuesta==true){
location.reload();
}
clearInterval(tiempoEspera);
},3000);
}
else{
//console.log('Nop aqui no queremos un avion tan lujosos');
var pierde=new Audio('audio/pierde.mp3');
pierde.play();
no.style.display="inline";
mueveElemento(event.offsetX,event.offsetY,no);
var ctx=canvas.getContext('2d');
ctx.fillStyle="blue";
ctx.clearRect(10,480,230,50);
ctx.fillStyle="red";
ctx.font="20px Arial";
numFallos++;
oportunidadesRestantes=limiteFallos-numFallos;
ctx.fillText(`Oportunidades ${oportunidadesRestantes}`,10,500);
var distancia=distanciaEntrePuntos(event,xy);
var mensaje=muestraDistancia(distancia);
ctx.fillText(mensaje,10,520);
if(oportunidadesRestantes<0){
document.getElementById('llora').style.display='inline';
ctx.clearRect(10,480,230,50);
ctx.fillText(`Oportunidades 0`,10,500);
ctx.fillText(mensaje,10,520);
canvas.removeEventListener('click',clickCanvas);
llenarTodo();
var tiempoEspera=setInterval(function(){
var respuesta=confirm("Lo siento no pudiste vender el avion presidencia!!!¿Desear jugar otra partida?");
if(respuesta==true){
location.reload();
}
clearInterval(tiempoEspera);
},2000);
}
}
}
function mueveElemento(x,y,elemento) {
var contenedor=document.getElementsByTagName('body')[0];
var xPosicion=x-contenedor.getBoundingClientRect().left-(elemento.clientWidth/2);
var yPosicion=y-contenedor.getBoundingClientRect().top-(elemento.clientHeight/2);
elemento.style.left=xPosicion+"px";
elemento.style.top=yPosicion+"px";
}
function distanciaEntrePuntos(event,xy){
var difX=event.offsetX-xy['posAleatoriaMapaX'];
var difY=event.offsetY-xy['posAleatoriaMapaY'];
var distancia=Math.sqrt(Math.pow(difX,2)+Math.pow(difY,2));
return distancia;
}
function muestraDistancia(distancia){
if(distancia<100){
return "Casi te quemas";
}
else if(distancia<200){
return "Muy caliente";
}
else if(distancia<300){
return "Caliente";
}
else if(distancia<400){
return "Templado";
}
else if(distancia<600){
return "Frio";
}
else if(distancia<800){
return "Muy Frio";
}
else{
return "congelado";
}
}
Colors picker: https://www.w3schools.com/colors/colors_picker.asp
[Curso] TensorFlow js en Español 🇪🇸: https://www.youtube.com/playlist?list=PLCTD_CpMeEKSEOKBFyG6PxQOAvQc7HZSB
[Curso] Machine Learning JavaScript en Español 🇪🇸 con ML5: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQYuoil2uSTX19S8Mfmny6B
[Curso] Java Netbeans Completo☕: https://www.youtube.com/playlist?list=PLCTD_CpMeEKTT-qEHGqZH3fkBgXH4GOTF
Como sacar las comillas invertidas: https://platzi.com/discusiones/1339-fundamentos-javascript/52373-hola-a-todos-tengo-una-consulta-alguien-sabe-como-hacer-las-comillas-invertidas-con-el-teclado/
🎦 Esta lista de reproducción: https://www.youtube.com/playlist?list=PLCTD_CpMeEKRTg39rjg2AqNxQCTz_UiBR .
Codigos en gdrive: https://drive.google.com/drive/folders/1v6u0tPYPRm_7qSbEt6IPghdzr9A9f08a?usp=sharing
🔗 Facebook: https://facebook.com/ProgramadorNovatoOficial
🔗 Twitter: https://twitter.com/programadornova
🔗 Linkedin: https://www.linkedin.com/in/programadornovato/
🔗 Instagram: https://www.instagram.com/programadornovato/
<<Anterior tutorial Siguiente tutorial >>
