Boxing game

Tecnologías

• p5.js
• ml5.js

Ejemplo de uso de p5.js

              
                // HealthBar.js
                draw(health) {
                  if (health < 0) return;
                  // Outer border
                  p5.stroke(0);
                  p5.strokeWeight(4);
                  p5.noFill();
                  p5.rect(this.x, this.y, this.width, this.height);
                  // Inner (health) bar
                  p5.noStroke();
                  p5.fill(255, 0, 0); // fill RED
                  p5.rect(this.x, this.y, p5.map(health, 0, 100, 0, this.width), this.height);
                }
              
            

Tecnologías

• p5.js
• ml5.js

Ejemplo de uso de ml5.js

              
                // HumanPlayer.js 
                export default class HumanPlayer extends Player {
                  constructor(video, x, y, width, height, health) {
                    super(x, y, width, height, health);
                    this.media = p5.createCapture(video); // we capture the webcam
                    this.media.size(width, height); // we fit the video to the width and height
                    // We load the model from the camera source :D
                    this.poseNet = ml5.poseNet(this.media);
                    this.poseNet.on("pose", (poses) => this.updatePose(poses));
                    this.media.hide(); // hide the video element, only show the canvas
                  }
                }
              
            

Fases del desarrollo

• Diseño
• Implementación
• Pruebas
• Despligue

Diseño

Fases del desarrollo

• Diseño
• Implementación
• Pruebas
• Despligue

Implementación

Fases del desarrollo

• Diseño
• Implementación
• Pruebas
• Despligue

Pruebas

Fases del desarrollo

• Diseño
• Implementación
• Pruebas
• Despligue

Despliegue

              
                // package.json
                "scripts": {
                  "start": "webpack-dev-server --progress --config webpack.config.dev.js",
                  "build": "webpack --config webpack.config.build.js",
                  "predeploy": "npm run build",
                  "deploy": "gh-pages -d dist"
                }