---
# System prepended metadata

title: IEH Workshop008：進階程式設計四

---

# IEH Workshop008：進階程式設計四

* https://hackmd.io/@MattChang
* https://editor.p5js.org

# EVENT 事件
## 事件種類
Acceleration (For手持裝置)
Keyboard
Mouse
Touch (For手持裝置)

## 開發文件
https://p5js.org/reference/#Events
https://p5js.org/reference/p5/mousePressed/


## 課堂作業
下方範例程式，請完成需求

1. 點擊鍵盤上下左右時，讓方塊能朝指定方向移動
2. 點擊'z'時讓顏色變為黃色，點擊'x'時讓顏色變為藍色

```javascript
let value = 0;
var squareX = 125;
var squareY = 125;
function setup() {
  createCanvas(300, 300);
}
function draw() {
  background(200);
  fill(value);
  square(squareX, squareY, 50);
}
function keyPressed() {
  if (key === 'c') {
    if (value === 0) {
      value = 255;
    } else {
      value = 0;
    }
  }
  if (key === 'z') {
    value = color(255, 187, 0);
  }
  
  if (keyIsPressed === true) {
    if (keyCode === UP_ARROW) {
      squareY-=20;
    } else if (keyCode === DOWN_ARROW) {
     
    } else if (keyCode === LEFT_ARROW) {
     
    } else if (keyCode === RIGHT_ARROW) {
      
    }
  }
  
}
```

請各組別確保連結都能開啟
https://docs.google.com/spreadsheets/d/10j6PWivijgIH-0jbTb3e6vVHy8hoja5oujozwjPRAPs/edit?usp=sharing

