UU_week06

2023/10/19

 留言

Typing Game

First, set the window for the typing game, show Hello World and Red word.

size (500, 500);
textSize(64);
text("Hello World", 100, 100);

fill(255, 0, 0);
text("Red", 100, 200);

 

Sets up a canvas, displays the initial text "Input: " on it, and allows you to append characters to the text by typing on the keyboard. The newly typed characters are displayed on the canvas next to the existing text.

void setup()
{
 size(500, 500);
 textSize(64);
}
String line = "Input: ";
void draw()
{
  text(line, 100, 100);
}
void keyPressed()
{
  line += key;
}

But here’s a questoin:

Some characters not available in the current font, use createFont() to specify a typeface the includes them.

void setup()
{
 size(500, 500);
 textSize(64);
}
String line = "Input: ";
void draw()
{
  text(line, 100, 100);
}
void keyPressed()
{
  if (key>='A' && key<='Z') line += key; // upper characters
  if (key>='a' && key<='z') line += key; // lower characters
}

Sets up a canvas with a black background, displays the initial text "Input: " on it, and allows you to type uppercase and lowercase letters. It also allows you to delete the last character by pressing the Backspace key. The input text is displayed on the canvas with the "Input: " prefix.

void setup()
{
 size(800, 400);
 textSize(64);
}
String line = "";
void draw()
{
  background(0); // black background
  text("Input: "+line, 50, 100);
}
void keyPressed()
{
  if (key>='A' && key<='Z') line += key;
  if (key>='a' && key<='z') line += key;
  if (key==BACKSPACE && line.length()>0) 
    line = line.substring(0, line.length()-1);
}

About substring():

line = line.substring(0, line.length() - 1);

• 0 is the starting index of the substring. In this case, it starts from the beginning of the line string.
• line.length() - 1 is the ending index of the substring. It subtracts 1 from the length of the line to extract all characters from the beginning of the string up to the last character, effectively removing the last character.

The result of this method call is a new string that contains the extracted substring.

Install SoundFill

 

import processing.sound.*;
// https://processing.org/reference/libraries/sound/SoundFile.html
SoundFile file;

void setup() {
  size(640, 360);
  background(255);

  file = new SoundFile(this, "Happiness.mp3");
// https://dova-s.jp/bgm/play19660.html
  file.play();
}      

void draw() {
}

Typing Game Part2

Back to the typing game, add more sounds into the code.

import processing.sound.*;
SoundFile correct_voice, typing_voice, Happiness, wrong_voice;

void setup() {
  size(640, 360);
  textSize(64);
  correct_voice = new SoundFile(this, "correct_voice.mp3");
  typing_voice = new SoundFile(this, "typing_voice.mp3");
  Happiness = new SoundFile(this, "Happiness.mp3");
  wrong_voice = new SoundFile(this, "wrong_voice.mp3");
}      
String line = "";
void draw()
{
  background(0);
  text("Input: "+line, 100, 100);
}
void keyPressed()
{
  if (key>='A' && key<='Z') { line += key; typing_voice.play(); }
  if (key>='a' && key<='z') { line += key; typing_voice.play(); }
  if (key==BACKSPACE && line.length()>0) { 
    line = line.substring(0, line.length()-1);
    wrong_voice.play();
  }
  if (key==ENTER) correct_voice.play();
}

Typing Shooting Game

1. Sets up a canvas, displays the text “hello” at an initial position, and smoothly moves it toward a specified position while also displaying a small circle. The movement is accomplished by calculating the direction vector and normalizing it to control the text’s animation.

void setup()
{
  size(400, 600);
  textSize(20);
}

String Q = "hello", A = "";
float x = 100, y = 100;
void draw()
{
  background(0);
  text(Q, x, y);
  ellipse(200, 550, 20, 20);
  float dx = (200-x), dy = (550-y), d = sqrt(dx*dx+dy*dy);
  x += dx/d;
  y += dy/d;
}

2. These additions enhance the code by adding a dynamic red line that connects the starting point of the circle to the moving text when a key is pressed. The text’s movement has also been adjusted to make it three times faster than the original version.

float dx = (200-x), dy = (550-y), d = sqrt(dx*dx+dy*dy)*3;
  x += dx/d;
  y += dy/d;
  if (keyPressed){
    stroke(255, 0, 0);
    line(200, 550, x, y);

3. Now displays two strings (Q and A) at the same position, with different text colors. It allows you to type characters that match the next character in Q to build string A, and it also shows a red line from the ellipse to the moving text when a key is pressed.

void setup()
{
  size(400, 600);
  textSize(20);
}

String Q = "hello", A = "";
float x = 100, y = 100;
void draw()
{
  background(0);
  fill(#FFFFFF); // Set text color to white
  text(Q, x, y);
  fill(#FF0000); // Set text color to red
  text(A, x, y);
  ellipse(200, 550, 20, 20);
  float dx = (200-x), dy = (550-y), d = sqrt(dx*dx+dy*dy)*3;
  x += dx/d;
  y += dy/d;
  if (keyPressed){
    stroke(255, 0, 0); // Set stroke color to red
    line(200, 550, x, y);
  }
}
void keyPressed()
{
  int i=A.length();
  if (key==Q.charAt(i)) A+=key;
}

4. Last but not less, updated code implements a word guessing game where the user must type a word shown on the screen. When the entire word is correctly typed, a new word is randomly chosen for the user to guess, making the code more interactive.

void setup()
{
  size(400, 600);
  textSize(20);
  randomQ();
}
void randomQ()
{
  int i=int(random(QQ.length));
  Q=QQ[i];
  x=random(0, 300);
  y=random(0, 100);
}
String []QQ = {"void ", "setup", "float", "background", "keyPressed", "display", "string", "different", "moving", "character", "processing", "match", "color"};
String Q = "hello", A = "";
float x = 100, y = 100;
void draw()
{
  background(0);
  fill(#FFFFFF); // Set text color to white
  text(Q, x, y);
  fill(#FF0000); // Set text color to red
  text(A, x, y);
  ellipse(200, 550, 20, 20);
  float dx = (200-x), dy = (550-y), d = sqrt(dx*dx+dy*dy)*3;
  x += dx/d;
  y += dy/d;
  if (keyPressed){
    stroke(255, 0, 0); // Set stroke color to red
    line(200, 550, x, y);
  }
}
void keyPressed()
{
  int i=A.length();
  if (key==Q.charAt(i)){
    A+=key;
    if (Q.equals(A)){
      randomQ();
      A="";
    }
  }
}

期末專題: 西瓜遊戲/自己一組