Skip to content

Latest commit

 

History

History
73 lines (57 loc) · 1.9 KB

2022-08.md

File metadata and controls

73 lines (57 loc) · 1.9 KB

Weekly Coding Challenge 2022-08: Minimal Tetris Clone with P5.js

We will use p5 to built a Tetris-like clone.

Every student that finished the p5 module can solve this Challenge.

Requirements

  • Single blocks will travel from top to bottom
  • The left and right keys are used to move the blocks horizontally
  • All blocks have the same size but different colors
  • When two blocks with the same color are stacked on top or next to each other the player gets a point
  • The frameRate() methods of p5 is used to set the speed (level) of the game
  • The game gets faster after a specific amount of points are won
    • Level 1 = 0 - 10 Points = Framerate 5
    • Level 2 = 11 - 20 Points = Framerate 6
    • Level 3 = 21 - 30 Points = Framerate 7
    • Level 4 = 31 - xxx Points = Framerate 8

Hints

Use the frameRate() method to set the game speed.

function setup() {
  frameRate(5); // 5 frames will be rendered per second
}

Use the keyPressed() function as an event handler for the game.

function keyPressed(e) {
  const pressedKey = e.code;
  console.log(pressedKey);
}

image

You can also embed the p5 library into a HTML file to use VS Code for this Challenge.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>P5 in HTML File - yeah!</title>
</head>
<body>
  <main id="canvas"></main>
  <script src="https://unpkg.com/p5"></script>
  <script>
     function setup() {
       createCanvas(200,200);
       background(0);
     }
    
     function draw() {
       fill("red");
       circle(mouseX, mouseY, 20);
     }
  </script>
</body>
</html>

Demo

The Demo does not count points yet.

p5-tetris.mov