Ejercicio - Tres en raya

Hacer el juego del tres en raya para dos jugadores.

Puede ser útil utilizar un array para almacenar las diferentes posiciones del array.

Ver solución

Ejercicio – Tres en raya - un solo jugador

El método juegaPlayer1() quedará así:

function juegaPlayer1(){
	board[getComputerMove()] = "X";
}

Por tanto, debemos crear un método getComputerMove() que creará una copia del tablero, moverá la ficha sobre esta copia y en función del resultado decidirá dónde mover en el tablero real. Para realizar el movimiento:

  1. Comprobamos si la máquina puede hacer un movimiento y ganar la partida. (utilizaremos el método evaluateWin, creado en el ejercicio anterior).
  2. Comprobamos si tras mover, el humano puede hacer un movimiento y ganar la partida.
  3. Comprueba si hay alguna esquina libre. Si lo está, la máquina mueve a la esquina.
  4. Comprueba si el centro está libre. Si lo está, la máquina mueve al centro.
  5. Mueve a cualquiera de las casillas restantes.
Ver solución

Cambiar SVG dinámicamente

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
  <circle id="circle1" r="30" cx="34" cy="34" 
            style="fill: red; stroke: blue; stroke-width: 2"/>
  </svg>
<button onclick="circle1.style.fill='yellow';">Click to change to yellow</button>
Cambiar SVG dinámicamente

Deconstrucción

Nos permite almacenar los valores de una entidad compleja (un array o un objeto) en variables independientes.

Deconstrucción de array

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Deconstrucción de un objeto

let {a: a, b: b, c: c} = obj;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Rest operator/ spread operator (...)

Rest operator

function doMath(operator, ...numbers) {
	console.log(operator);
	console.log(numbers);
}
 
doMath('add', 1, 2, 3);

Spread operator

const a = [1,2,3];

const b = [...a, 4,5,6]; // [1, 2, 3, 4, 5, 6]

Códigos para homenagear

fetch

Las peticiones fetch permiten hacer peticiones a un servidor cuyos resultados serán gestionados mediante promesas.

Ejemplos de uso de fetch

Petición GET sin parámetros
fetch('https://swapi.co/api/people/1/')
.then(res => res.json())
.then(callback);

function callback(data){
	console.log(data)
}
Petición GET sin parámetros (este código es quivalente al anterio)
fetch('https://swapi.co/api/people/1/')
.then(parseResponse)
.then(callback);

function parseResponse(data){
		return data.json();
}
function callback(data){
	console.log(data)
}
Petición POST con parámetrosfetch('http://localhost:13289/escenas/recuperar_escenas_obra', {
    method:"POST",
    headers:{
      'Content-Type': 'application/json'
    },
    body:JSON.stringify({id:1})},
  )
    .then(res => res.json())
    .then(escenas => {
      console.log(escenas);
      return escenas;
    });

Codigo para simplificar las peticiones

const API_URL = 'http://localhost:13289';

const fetchData = (url, options = {}) => {
  return fetch(API_URL + url, {
    headers: {
      'Content-Type': 'application/json'
    },
    ...options,
  }).then(res => res.json())
};

export const getJson = (url, params) => {
  const urlParams = params && Object.entries(params)
    .reduce((acc, [name, value]) => `${acc}${name}=${value}&` , '?')
    .slice(0, -1);
 return fetchData(url + urlParams);
};

export const postJson = (url, params) => {
  return fetchData(url, {
    method: 'POST',
    body:JSON.stringify(params)
  });
};
Para usarlo:import {getJson, postJson} from "../http";
  const escenas2 = getJson('/escenas/recuperar_escenas_obra', {id: 1, amor: 'mucho'})
};

Promise

Las promesas nos permiten gestionar código asincrónico. Las promesas de Javascript nativo, son similares a las promesas de jquery.

$.get('url.php', callback);

Antes de tener disponibles las promesas nativas para gestionar estas peticiones asíncronas, teníamos que usar este código:

function get(url, callback) {
	var req = new XMLHttpRequest();
	req.open('GET', url);

	req.onload = function() {
		if (req.status === 200) {
			callback(req.response);
		}
	};

	req.send();
}

get('url.php', callback)

El equivalente con promesas nativas de Javascript, sería esto:

fetch('url.php').then(callback);

Crear una promesa (ejecutar una función de forma asincrónica)

En Javascript todo el código es sincrónico. Las funciones asincrónicas se ejecutas después de las asincrónicas (no entre medias).

Definimos una función sincrónica

const add = (num1, num2) => num1 + num2;
const makeSumPromise = () => new Promise((resolve) => {
	resolve(add(3,2))
});

num contendrá el valor que devuelve el resolve

makeSumPromise.then(num => )

La función fetch devuelve una promesa

let promesa = fetch('url.php');
promesa.then(...)

Promise.race

Este método nos permite evaluar varios códigos (request, timeoutPromise, ...) creados a partir de la API de de Promise. El que termine de ejecutarse antes es el que se guardará como valor de retorno de la promise.

En el siguiente ejemplo, hago una carrera entre dos promises. Si la promise request tarda más que la promise timeoutPromise, el valor devuelto será el que devuelva un timeout.

Promise.race([
	request, // 1s
	timeoutPromise, // 0.5s

]).then((res) => {
	clearTimeout(timeoutId);
	return res;
});


const request = fetch(path); //El método fetch devuelve una promesa

const timeoutPromise = createRequestTimeout(setTimeoutReference);

let timeoutId;

const setTimeoutReference = (timeout) => { timeoutId = timeout; };

const createRequestTimeout = setTimeoutReference => new Promise((resolve, reject) => {
	setTimeoutReference(setTimeout(() => {
		reject(createHttpError({
			statusCode: 504,
			statusMessage: 'Request timeout error',
		}));
	}, 10000));
});
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?