pacman_animacion.html

<canvas id="canvas" width="300" height="300"></canvas>
<script src="../web-lib/processing.js"></script>
<script src="../web-lib/functional-light.js"></script>
<script>
//Vamos a usar http://processingjs.org/
// o https://p5js.org/reference/

const ANCHO = 400;
const ALTO = 400;
const ESCALA = 50;

// Importamos las librerias
let { append, cons, first, isEmpty, isList, length, rest } = functionalLight;

function make(data, attribute) {
	return Object.assign({}, data, attribute);
}

//Un dibujo o grafico de pacman

function sketchProc(processing) {
	/**
	 * Esto se llama antes de iniciar el juego
	 */
	processing.setup = function() {
		processing.frameRate(10);
		processing.size(ANCHO, ALTO);
		processing.state = {
			tiempo: 0,
			pacman: { x: ESCALA / 2, y: ESCALA / 2 },
			galleta1: { x: 2.5, y: 1, visible: true },
			galleta2: { x: 3.5, y: 1, visible: true },
			galleta3: { x: 4.5, y: 1, visible: true },
			galleta4: { x: 5.5, y: 1, visible: true }
		};
	};

	// Dibuja algo en el canvas. Aqui se pone todo lo que quieras pintar
	processing.drawGame = function(world) {
		const pac = world.pacman;

		processing.noStroke();
		processing.background(240, 240, 240);
		processing.fill(255, 191, 128);
		if (world.galleta1.visible) {
			processing.ellipse(
				world.galleta1.x * ESCALA,
				(world.galleta1.y * ESCALA) / 2,
				ESCALA / 2,
				ESCALA / 2
			);
		}
		if (world.galleta2.visible) {
			processing.ellipse(
				world.galleta2.x * ESCALA,
				(world.galleta2.y * ESCALA) / 2,
				ESCALA / 2,
				ESCALA / 2
			);
		}
		if (world.galleta3.visible) {
			processing.ellipse(
				world.galleta3.x * ESCALA,
				(world.galleta3.y * ESCALA) / 2,
				ESCALA / 2,
				ESCALA / 2
			);
		}
		if (world.galleta4.visible) {
			processing.ellipse(
				world.galleta4.x * ESCALA,
				(world.galleta4.y * ESCALA) / 2,
				ESCALA / 2,
				ESCALA / 2
			);
		}

		processing.fill(255, 204, 0);
		if (world.tiempo == 0) {
			processing.arc(
				world.pacman.x,
				world.pacman.y,
				ESCALA,
				ESCALA,
				Math.PI / 4,
				(Math.PI * 7) / 4
			);
		} else if (world.tiempo == 1 || world.tiempo == 3) {
			processing.arc(
				world.pacman.x,
				world.pacman.y,
				ESCALA,
				ESCALA,
				(Math.PI * 0.5) / 4,
				(Math.PI * 7.5) / 4
			);
		} else if (world.tiempo == 2) {
			processing.arc(
				world.pacman.x,
				world.pacman.y,
				ESCALA,
				ESCALA,
				0,
				Math.PI * 2
			);
		}

		//Rejilla de 50x50, únicamente funciona correctamente cuando la ESCALA es 50
		processing.fill(0, 0, 0);
		processing.rect(0, 0, 1, 400);
		processing.rect(ESCALA, 0, 1, 400);
		processing.rect(ESCALA * 2, 0, 1, 400);
		processing.rect(ESCALA * 3, 0, 1, 400);
		processing.rect(ESCALA * 4, 0, 1, 400);
		processing.rect(ESCALA * 5, 0, 1, 400);
		processing.rect(ESCALA * 6, 0, 1, 400);
		processing.rect(ESCALA * 7, 0, 1, 400);
		processing.rect(ESCALA * 8, 0, 1, 400);
		processing.rect(0, 0, 400, 1);
		processing.rect(0, ESCALA, 400, 1);
		processing.rect(0, ESCALA * 2, 400, 1);
		processing.rect(0, ESCALA * 3, 400, 1);
		processing.rect(0, ESCALA * 4, 400, 1);
		processing.rect(0, ESCALA * 5, 400, 1);
		processing.rect(0, ESCALA * 6, 400, 1);
		processing.rect(0, ESCALA * 7, 400, 1);
		processing.rect(0, ESCALA * 8, 400, 1);
	};
	//Actualiza el mundo despues de cada frame. En este ejemplo, no cambia nada, solo retorna una copia del mundo
	processing.onTic = function(world) {
		if (world.tiempo == 3) {
			return make(world, { tiempo: 0 });
		} else {
			return make(world, { tiempo: world.tiempo + 1 });
		}
	};

	//Implemente esta función si quiere que su programa reaccione a eventos del mouse
	processing.onMouseEvent = function(world, event) {
		// Por ahora no cambia el mundo. Solo retorna una copia del mundo actual
		return make(world, {});
	};

	//Implemente esta función si quiere que su programa reaccione a eventos del teclado
	processing.onKeyEvent = function(world, event) {
		// Por ahora no cambia el mundo. Solo retorna una copia del mundo actual
		return make(world, {});
	};

	// ******************** De aquí hacia abajo no debe cambiar nada. ********************

	// Esta es la función que pinta todo. Se ejecuta 60 veces por segundo.
	// No cambie esta función. Su código debe ir en drawGame
	processing.draw = function() {
		processing.drawGame(processing.state);
		processing.state = processing.onTic(processing.state);
	};

	// Esta función se ejecuta cada vez que presionamos una tecla.
	// No cambie esta función. Su código debe ir en onKeyEvent
	processing.keyPressed = function() {
		processing.state = processing.onKeyEvent(
			processing.state,
			processing.keyCode
		);
	};

	// Esta función se ejecuta cada vez movemos el mouse.
	// No cambie esta función. Su código debe ir en onKeyEvent
	processing.mouseMoved = function() {
		processing.state = processing.onMouseEvent(processing.state, {
			action: 'move',
			mouseX: processing.mouseX,
			mouseY: processing.mouseY
		});
	};

	// Estas funciones controlan los eventos del mouse.
	// No cambie estas funciones. Su código debe ir en OnMouseEvent
	processing.mouseClicked = function() {
		processing.state = processing.onMouseEvent(processing.state, {
			action: 'click',
			mouseX: processing.mouseX,
			mouseY: processing.mouseY,
			mouseButton: processing.mouseButton
		});
	};

	processing.mouseDragged = function() {
		processing.state = processing.onMouseEvent(processing.state, {
			action: 'drag',
			mouseX: processing.mouseX,
			mouseY: processing.mouseY,
			mouseButton: processing.mouseButton
		});
	};

	processing.mousePressed = function() {
		processing.state = processing.onMouseEvent(processing.state, {
			action: 'press',
			mouseX: processing.mouseX,
			mouseY: processing.mouseY,
			mouseButton: processing.mouseButton
		});
	};

	processing.mouseReleased = function() {
		processing.state = processing.onMouseEvent(processing.state, {
			action: 'release',
			mouseX: processing.mouseX,
			mouseY: processing.mouseY,
			mouseButton: processing.mouseButton
		});
	};
	// Fin de los eventos del mouse
}

var canvas = document.getElementById('canvas');

// Adjuntamos nuestro sketch al framework de processing
var processingInstance = new Processing(canvas, sketchProc);
</script>