Add new project

web/public/projects/02-arkanoid-game/index.html

@@ -43,6 +43,8 @@
  let dy = -3
 
  /* VARIABLES DE LA PALETA */
+ const PADDLE_SENSITIVITY = 8
+
  const paddleHeight = 10;
  const paddleWidth = 50;
 
@@ -86,8 +88,6 @@
  }
 
 
- const PADDLE_SENSITIVITY = 8
-
  function drawBall() {
  ctx.beginPath() // iniciar el trazado
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2)
@@ -133,6 +133,10 @@
  }
  }
 
+ function drawUI() {
+ ctx.fillText(`FPS: ${framesPerSec}`, 5, 10)
+ }
+
  function collisionDetection() {
  for (let c = 0; c < brickColumnCount; c++) {
  for (let r = 0; r < brickRowCount; r++) {
@@ -180,7 +184,7 @@
  if (isBallSameXAsPaddle && isBallTouchingPaddle) {
  dy = -dy // cambiamos la dirección de la pelota
  } else if ( // la pelota toca el suelo
- y + dy > canvas.height - ballRadius
+ y + dy > canvas.height - ballRadius || y + dy > paddleY + paddleHeight
  ) {
  console.log('Game Over')
  document.location.reload()
@@ -209,37 +213,65 @@
 
  function keyDownHandler(event) {
  const { key } = event
- if (key === 'Right' || key === 'ArrowRight') {
+ if (key === 'Right' || key === 'ArrowRight' || key.toLowerCase() === 'd') {
  rightPressed = true
- } else if (key === 'Left' || key === 'ArrowLeft') {
+ } else if (key === 'Left' || key === 'ArrowLeft' || key.toLowerCase() === 'a') {
  leftPressed = true
  }
  }
 
  function keyUpHandler(event) {
  const { key } = event
- if (key === 'Right' || key === 'ArrowRight') {
+ if (key === 'Right' || key === 'ArrowRight' || key.toLowerCase() === 'd') {
  rightPressed = false
- } else if (key === 'Left' || key === 'ArrowLeft') {
+ } else if (key === 'Left' || key === 'ArrowLeft' || key.toLowerCase() === 'a') {
  leftPressed = false
  }
  }
  }
 
+ // a que velocidad de fps queremos que renderice nuestro juego
+ const fps = 60
+
+ let msPrev = window.performance.now()
+ let msFPSPrev = window.performance.now() + 1000;
+ const msPerFrame = 1000 / fps
+ let frames = 0
+ let framesPerSec = fps;
+
  function draw() {
+ window.requestAnimationFrame(draw)
+
+ const msNow = window.performance.now()
+ const msPassed = msNow - msPrev
+
+ if (msPassed < msPerFrame) return
+
+ const excessTime = msPassed % msPerFrame
+ msPrev = msNow - excessTime
+
+ frames++
+
+ if (msFPSPrev < msNow)
+ {
+ msFPSPrev = window.performance.now() + 1000
+ framesPerSec = frames;
+ frames = 0;
+ }
+
+ // ... render code
  cleanCanvas()
  // hay que dibujar los elementos
  drawBall()
  drawPaddle()
  drawBricks()
- // drawScore()
+ drawUI()
 
  // colisiones y movimientos
  collisionDetection()
  ballMovement()
  paddleMovement()
 
- window.requestAnimationFrame(draw)
  }
 
  draw()

web/public/projects/03-midu-typing-game/data.js

@@ -0,0 +1,175 @@
+export const words = [
+ "a",
+ "again",
+ "all",
+ "also",
+ "and",
+ "another",
+ "any",
+ "around",
+ "as",
+ "ask",
+ "at",
+ "back",
+ "because",
+ "become",
+ "before",
+ "begin",
+ "both",
+ "but",
+ "by",
+ "call",
+ "can",
+ "change",
+ "child",
+ "come",
+ "could",
+ "course",
+ "day",
+ "develop",
+ "each",
+ "early",
+ "end",
+ "even",
+ "eye",
+ "face",
+ "fact",
+ "few",
+ "first",
+ "follow",
+ "from",
+ "general",
+ "get",
+ "give",
+ "good",
+ "govern",
+ "group",
+ "hand",
+ "have",
+ "he",
+ "head",
+ "help",
+ "here",
+ "high",
+ "hold",
+ "home",
+ "how",
+ "however",
+ "if",
+ "increase",
+ "interest",
+ "it",
+ "know",
+ "large",
+ "last",
+ "lead",
+ "leave",
+ "life",
+ "like",
+ "line",
+ "little",
+ "look",
+ "make",
+ "man",
+ "may",
+ "mean",
+ "might",
+ "more",
+ "must",
+ "need",
+ "never",
+ "new",
+ "no",
+ "now",
+ "number",
+ "of",
+ "off",
+ "old",
+ "on",
+ "one",
+ "open",
+ "or",
+ "order",
+ "out",
+ "over",
+ "own",
+ "part",
+ "people",
+ "person",
+ "place",
+ "plan",
+ "play",
+ "point",
+ "possible",
+ "present",
+ "problem",
+ "program",
+ "public",
+ "real",
+ "right",
+ "run",
+ "say",
+ "see",
+ "seem",
+ "show",
+ "small",
+ "some",
+ "stand",
+ "state",
+ "still",
+ "such",
+ "system",
+ "take",
+ "than",
+ "that",
+ "the",
+ "then",
+ "there",
+ "these",
+ "they",
+ "thing",
+ "think",
+ "this",
+ "those",
+ "time",
+ "to",
+ "under",
+ "up",
+ "use",
+ "very",
+ "way",
+ "what",
+ "when",
+ "where",
+ "while",
+ "will",
+ "with",
+ "without",
+ "work",
+ "world",
+ "would",
+ "write",
+ "you",
+ "she",
+ "set",
+ "we",
+ "long",
+ "in",
+ "many",
+ "do",
+ "after",
+ "which",
+ "so",
+ "same",
+ "other",
+ "house",
+ "during",
+ "much",
+ "just",
+ "consider",
+ "since",
+ "should",
+ "only",
+ "tell",
+ "about"
+]