---
# System prepended metadata

title: Jasper Note
tags: [student]

---

---
# Roblox Note
---

## 程式片段

### 開場UI


#### ✅ **Roblox Studio：開始畫面按鈕 + 關閉 ScreenGui 範例**

##### **1. 建立 UI**

1. 在 **StarterGui** 中新增一個 **ScreenGui**（命名：`StartScreen`）
2. 在 `StartScreen` 裡新增一個 **TextButton**（命名：`StartButton`）

按鈕文字改成「開始遊戲」即可。

---

##### ✅ **2. 在按鈕內加入 LocalScript**

在 `StartButton` 底下新增 **LocalScript**，內容如下：

```lua
local button = script.Parent
local startScreen = button.Parent   -- ScreenGui

button.MouseButton1Click:Connect(function()
    startScreen.Enabled = false   -- 關閉開始畫面
end)
```

---

# 📌 **運作原理**

* `MouseButton1Click`：偵測玩家按左鍵點擊按鈕
* `startScreen.Enabled = false`：把整個 Start Screen UI 關掉
  （玩家畫面就會消失）

---

##### ⭐ **可選：按下後淡出效果**

如果你希望畫面有淡出（更漂亮），把 LocalScript 改成：

```lua
local button = script.Parent
local startScreen = button.Parent

button.MouseButton1Click:Connect(function()
    for i = 1, 10 do
        startScreen.BackgroundTransparency = i/10
        task.wait(0.05)
    end
    startScreen.Enabled = false
end)
```

---

##### ⭐ **可選：按下後播放音效**

```lua
local sound = Instance.new("Sound")
sound.SoundId = "rbxassetid://你的音效ID"
sound.Parent = workspace
sound:Play()
```

加在按鈕事件裡即可。

---


### 使用 Roblox 記分板
- https://create.roblox.com/docs/tutorials/use-case-tutorials/scripting/basic-scripting/score-points

---

#### **1. 建立 leaderstats（Server Script）**

放在 **ServerScriptService** 內：

```lua
game.Players.PlayerAdded:Connect(function(player)
    local leaderstats = Instance.new("Folder")
    leaderstats.Name = "leaderstats"
    leaderstats.Parent = player

    local Score = Instance.new("IntValue")
    Score.Name = "Score"
    Score.Value = 0
    Score.Parent = leaderstats
end)
```

---

#### **2. 設定可加分的 Part**

##### **方法 A（推薦）：在 Part 裡加一個 Script**

把 Script 放到你要偵測的 Part 裡：

```lua
local part = script.Parent

part.Touched:Connect(function(hit)
    local player = game.Players:GetPlayerFromCharacter(hit.Parent)
    if player then
        local stats = player:FindFirstChild("leaderstats")
        if stats then
            local score = stats:FindFirstChild("Score")
            if score then
                score.Value = score.Value + 1   -- 加 1 分
            end
        end
    end
end)
```

---

###### **避免連續碰撞狂加分？（選擇性）**

如果你不想一次碰到就連續加很多分，可以加入冷卻：

```lua
local part = script.Parent
local cooldown = {}  -- 記錄玩家冷卻狀態
local cdTime = 1     -- 1 秒冷卻

part.Touched:Connect(function(hit)
    local player = game.Players:GetPlayerFromCharacter(hit.Parent)
    if player and not cooldown[player] then
        
        cooldown[player] = true
        
        local stats = player:FindFirstChild("leaderstats")
        if stats then
            local score = stats:FindFirstChild("Score")
            if score then
                score.Value += 1
            end
        end

        task.wait(cdTime)
        cooldown[player] = nil
    end
end)
```

---

##### 📌 如要每個 Part 加不同分數

在 Part 設定一個 NumberValue：

1. 在 Part > Insert Object > **NumberValue**
2. 命名為 `AddScore`

Script：

```lua
local part = script.Parent
local addValue = part:FindFirstChild("AddScore")

part.Touched:Connect(function(hit)
    local player = game.Players:GetPlayerFromCharacter(hit.Parent)
    if player and addValue then
        player.leaderstats.Score.Value += addValue.Value
    end
end)
```

---



### 扣血
```lua=
local function killPlayer(otherPart)
    local partParent = otherPart.Parent
    local humanoid = partParent:FindFirstChild("Humanoid")
    if humanoid then
        humanoid.Health = 0
    end
end
 
lava.Touched:Connect(killPlayer)
```

### 位置移動
```lua=
local myBlock = game.Workspace.MyBlock
local other   = game.Workspace.OtherCube
 
--- 在我的位置，向 y 走 2
myBlock.CFrame = CFrame.new(myBlock.Position) + Vector3.new(0, 2, 0)
--- 走到 other 的 y + 2 位置
myBlock.CFrame = CFrame.new(other.Position) + Vector3.new(0, 2, 0)
```

- 使用平移控制元件：https://create.roblox.com/docs/physics/constraints/prismatic
- 

---
# Javascript Note
---
## 參考資料

 - 遊戲引擎 https://p5play.org/    - 
    - p5play 樣板程式：https://editor.p5js.org/chuan.me@gmail.com/sketches/TUWOBtDx1

## 講義
 - 變數 https://code-seed.click/lecture/js/lecture/js_variable.html
 - 判斷式 https://code-seed.click/lecture/js/lecture/js_ifelse.html
 - 迴圈（for/while）https://code-seed.click/lecture/js/lecture/js_for.html 
 - 陣列（超級倉庫）https://code-seed.click/lecture/js/lecture/js_array.html
 - 函式（工廠/function） https://code-seed.click/lecture/js/lecture/js_func.html
 - 測驗 https://code-seed.click/lecture/js/lecture/js_test.html
 - Codingame 題庫:https://www.codingame.com/home

## 紀錄
### 0926
- 陣列運算練習：https://editor.p5js.org/chuan.me@gmail.com/full/rfDMi18LC
- roblox modeling


### 0905

- Classic Puzzle - Medium
    - https://www.codingame.com/training/medium/there-is-no-spoon-episode-1
- Clash of Code
```javascript=
a='abcdefghijklmnopqrstuvwxyz'
b=[]
s=readline();
for( let t of s ){
    let p = a.indexOf(t) ;
    b[p]=1
}
for(let i=0;i<26;i++){
    if(b[i]!=1){
        console.log(a[i]);
        break;
    }
}

```
### 0829
- 練習投彈2
    - https://editor.p5js.org/chuan.me@gmail.com/sketches/m8n2UlZSh

### 0822
- 練習投彈2
    - https://editor.p5js.org/chuan.me@gmail.com/sketches/V5OIw-qZK

### 0815
- 練習：投彈
    - https://editor.p5js.org/chuan.me@gmail.com/sketches/-HKuv_vj5

### 0808
- 語法練習（條件式）
    - https://editor.p5js.org/chuan.me@gmail.com/full/NIaJFrbWz

### 0704
- 語法練習
```javascript=
var inputs = readline().split(' ');
const tx = parseInt(inputs[0]);
const ty = parseInt(inputs[1]);
var inputs = readline().split(' ');
const g1x = parseInt(inputs[0]);
const g1y = parseInt(inputs[1]);
var inputs = readline().split(' ');
const g2x = parseInt(inputs[0]);
const g2y = parseInt(inputs[1]);
if( tx<0 || ty<0 || tx>6 ||ty>2){
    console.log("OFF TARGET");
}else{
    if( tx==g1x && ty==g1y){
        console.log("INTERCEPTION") ;
    }else if( tx==g2x && ty==g2y ){
        console.log("INTERCEPTION") ;
    }else{
        console.log('GOAL');
    }

}
```
- 網站設計
### 0627
- 網站設計
    - 選單與主版面
### 0620
- 網站設計
-- 模板:https://html5up.net/editorial
    - 介紹團體：
    - 大綱
        - 成員介紹(取樣維基百科)
        - 經歷(取樣維基百科)
        - 歌曲(取樣維基百科)
        - 獲獎(取樣維基百科)
        - 社群媒體(instagram)(youtube)
- codingame:mad-pod-racing
   - https://www.codingame.com/ide/puzzle/mad-pod-racing

- clash of code
```css
// 輸入範例
3
1 2 3
4 5
7 3 5 1
// 輸出範例
1 2 3
7 3 5 1
```
```javascript!
//讀取 readline()
//轉數字 parseInt( )
//重複 for()
//用空白切字 input.split(' ')
//  "1 2 3" ==> ts:["1","2","3"]
//倉庫 sum =0
//
var N = parseInt(readline());
for (let i = 0; i < N; i++) {
    var input = readline(); // 1 2 3 第一次 4 5 第二次 7 3 5 1 第三次
    var ts = input.split(' ');
    var sum = 0;
    

    // for(  ? of [...] )
    //    把 [...] 的每一個放在 ?
    for( let x of ts ){
        sum += parseInt( x ) ;//sum=sum+parseInt(x)
    }
    if( sum%2 == 0){//判斷偶數 sum除2的餘數
        console.log( input ) ;
    }
}

```

### 0613
- codingame : Game of Drones 調整
- 練習
    - 陣列存取3：https://editor.p5js.org/chuan.me@gmail.com/full/v8FLlbWT1
    - 陣列存取4：https://editor.p5js.org/chuan.me@gmail.com/full/a_jTEl2OF


### 0606

- 練習
    - 迴圈2 https://editor.p5js.org/chuan.me@gmail.com/full/MHEALLkgV
    - 迴圈3 https://editor.p5js.org/chuan.me@gmail.com/full/C69BBGU94W
    - 迴圈4 https://editor.p5js.org/chuan.me@gmail.com/full/dNOrm7-EB
    - 陣列存取 https://editor.p5js.org/chuan.me@gmail.com/full/v8FLlbWT1
    - 陣列存取2 https://editor.p5js.org/chuan.me@gmail.com/full/a_jTEl2OF

- Game of Drones
    - https://www.codingame.com/multiplayer/bot-programming/game-of-drones
    ```javascript=
    /**
     * 以下是自動產生的程式碼，用來幫助你根據問題說明解析標準輸入。
     **/

    var inputs = readline().split(' ');
    const P = parseInt(inputs[0]); // 遊戲中的玩家人數（2 到 4 位玩家）
    const ID = parseInt(inputs[1]); // 你的玩家 ID（0、1、2 或 3）
    const D = parseInt(inputs[2]); // 每隊的無人機數量（3 到 11 架）
    const Z = parseInt(inputs[3]); // 地圖上的區域數量（4 到 8 個）

    //                                       zx[0] [1]  [2]
    var zx = [] ; // 超級倉庫記住基地的 x .  | 34| 25 | 38
    var zy = [] ; // 超級倉庫記住基地的 y .  | 34| 25 | 38
    for (let i = 0; i < Z; i++) {
        var inputs = readline().split(' ');
        zx[i] = parseInt(inputs[0]); // 區域中心的 X 座標。一個區域是半徑為 100 單位的圓形。
        zy[i] = parseInt(inputs[1]); // 區域中心的 Y 座標
    }

    // 遊戲主迴圈 ==> while ( true ) ==> 重複無限次
    while (true) {
        // 每一輪
        for (let i = 0; i < Z; i++) {
            const TID = parseInt(readline()); // 控制該區域的隊伍 ID（0、1、2 或 3），若無隊伍控制則為 -1。區域的順序與初始化時相同。
        }
        for (let i = 0; i < P; i++) {
            for (let j = 0; j < D; j++) {
                var inputs = readline().split(' ');
                const DX = parseInt(inputs[0]); // 無人機的 X 座標。前 D 行是玩家 0 的無人機座標，接下來 D 行是玩家 1 的，以此類推。
                const DY = parseInt(inputs[1]); // 無人機的 Y 座標
            }
        }
        let base = 0;
        for (let i = 0; i < D; i++) {

            // 使用 console.log() 來輸出行動
            // 除錯用訊息請使用：console.error('除錯訊息...');

            // 輸出一個目標座標點，你的無人機將前往該處。第一行對應的是你提供的第一架無人機，接著是第二架，依此類推。
            console.log(zx[base]+' '+zy[base]);
            base=base+1 ;
            if(base>=Z){
                base=0;
            }
        }
    }
    
    ```

### 0509 

- 練習：https://onlinegdb.com/QoulqKpki
```javascript=
// 飛鏢比賽，玩家A,B 
// 每人射 3 把，最高 10 分 
function s() {
    return Math.floor(Math.random() * 11);
}
var total = 0
var a_score = [];
var b_score = [];
for (let i = 0; i < 10; i++) {
    a_score.push(s());
    b_score.push(s());
}
var a = 0;
for( var i=0;i<a_score.length ; i++){
    a = a + a_score[i]
}
var b = 0;
for( var i=0;i<b_score.length ; i++){
    b = b + b_score[i]
}
console.log('A==>');
console.log(a_score);
console.log('B==>');
console.log(b_score); // 計算 A,B 總分與比賽結果
if(a>b){
    console.log('a win')
}else{
    if(b>a){
        console.log('b win')
    }else{
        console.log('draw')
    }

}
```

- 函式練習：https://editor.p5js.org/chuan.me@gmail.com/full/lfI5PJJkg
- 函式2 https://editor.p5js.org/chuan.me@gmail.com/full/Ux0MvzJ56
- 迴圈 https://editor.p5js.org/chuan.me@gmail.com/full/rHwH1OJpO

```javascript
const N = parseInt(readline());
var a=0;
var b=0;
for (let i = 0; i < N; i++) {
    var inputs = readline().split(' ');
    const p = inputs[0];
    const X = parseFloat(inputs[1]);
    const Y = parseFloat(inputs[2]);

    if( Math.sqrt(X*X+Y*Y)>6.75){
        if(p=='A'){
            a+=3
        }else{
            b+=3
        }
    }else{
        if(p=='A'){
            a+=2
        }else{
            b+=2
        }   
    }
}
if(a>b){
    console.log("ALICE")
}else if(b>a){
    console.log("BOB")
}else{
    console.log("DRAW")
}
```

### 0502 物件設計

- 函式練習：https://editor.p5js.org/chuan.me@gmail.com/full/lfI5PJJkg
- clash of code
```javascript=
t = readline().split(' ')
k = ''
for (let a of t) {
    if (a == '0' || a == 'false' || a == 'zero' || a == 'no') {
        k = k + '0'
    } else {
        k = k + '1'
    }
}
console.log(parseInt(k, 2));
```

- 物件設計
```javascript=
class Car{
    
    // 一開始產生一定要做的
    constructor(){
        // 產生的資料
        this.location = 0 ;
        this.speed = 5 ;
    }
    
    move(){
        this.location = this.location + this.speed ;
    }
    
    show(){
        console.log( "loc:"+this.location) ;
    }
}

var v1 =new Car();
var v2 =new Car();
v1.move()
v2.move()
v2.move()
v1.show()
v2.show()

```

### 0425 
- 流程練習：https://editor.p5js.org/chuan.me@gmail.com/full/xXfnP3SMK
- 完成進位法問題 https://www.codingame.com/ide/puzzle/bijective-numeration

### 0418 進位法
- 進位法
- 問題練習：https://www.codingame.com/ide/puzzle/bijective-numeration
- 說明
```javascript=
var x = '1A23A4' ;
// x[0]:'1'
// x[1]:'A'
// x[2]:'2'
// x[3]:'3'
// x[4]:'A'
// x[5]:'4'

// 按照順序取出來:左~右
var u=1;
console.log( "left ---> right ") ;
for( let i=0;i<x.length;i=i+1  ){
    console.log( x[i] + " x "+u ) ;
    u = u * 10;
}


// 按照順序取出來:右~左
console.log( "right ---> left ") ;
var u=1;
for( let i=x.length-1; i>=0 ; i=i-1 ){
    console.log( x[i] + " x "+u ) ;
    u = u * 10;
}
```
![image](https://hackmd.io/_uploads/BkJIaaJygl.png)

### 0411
- puzzle 題組：1D Brush fire
    - https://www.codingame.com/training/easy/1d-bush-fire
- 找數列中，隔壁兩兩相乘，最大的乘積
```javascript=
var d = []
const N = parseInt(readline());
var inputs = readline().split(' ');
for (let i = 0; i < N; i++) {
    d[i] = parseInt(inputs[i]);
}
var max = d[0]*d[1]; // 放第一組的可能
for (let i = 0; i < N-1; i++) {
    var x = d[i]*d[i+1];
    if(x>max){
        max=x;
    }
}
console.log(max);
```
- 練習：條件式
    - https://editor.p5js.org/chuan.me@gmail.com/full/nLKl3YwXh


### 0321
- 練習: https://editor.p5js.org/chuan.me@gmail.com/full/rfDMi18LC 
- 完成應用問題：https://www.codingame.com/ide/puzzle/may-the-triforce-be-with-you


### 0314
- 練習: https://editor.p5js.org/chuan.me@gmail.com/full/rfDMi18LC 
- 練習:物件記錄對應表
```javascript
const msg = readline();
const n = parseInt(readline());
// 使用 {} 物件，來記錄對應的資訊
// d['..o'] = 'A'    
// d['.o.'] = 'B' 
// console.log(  d['.o.'] ) ;  --> B
var d = {} ; 
for (let i = 0; i < n; i++) {
    var inputs = readline().split(' ');
    const ch = inputs[0];
    const morse = inputs[1];
    d[morse]=ch ; // 紀錄對應的資訊
}
d['/']=' ';

var ts = msg.split(" ") ;
var r = ''
for( var w of ts){
    if( d[w]==null){ // 找不到對應的資訊
        r = r + '[]';
    }else{
        r = r + d[w];
    }
}
console.log(r);
```
- 應用問題：https://www.codingame.com/ide/puzzle/may-the-triforce-be-with-you
- 
    - 

### 0307
- 練習:因式分解
```javascript!
// 因式分解 100 ==> 5*5*2*2
d=120
k=d 
f = []
for( var i=2 ; i<=k/2 ; i=i+1){
    // i:拿每個數來試 2,3,4,5,....
    
    while( d % i == 0){ // 重複試，直到不能整除
      f.push(i) ;
      d = d/i ;
    }
}
console.log(f) ;
```
- 練習：陣列與迴圈 https://editor.p5js.org/chuan.me@gmail.com/full/ywnxKaqpO
- 練習加總：https://editor.p5js.org/chuan.me@gmail.com/full/rfDMi18LC

### 0221
- 練習(clash of code)
```javascript!
let d=[]
const N = parseInt(readline());
for (let i = 0; i < N; i++) {
    const M = readline();
    d.push(M) ;
}
//       i=5-1          i>=0       i--
for( let i=d.length-1 ; i>=0 ; i--){
    let s = d[i] ;
    let ans = '' ;
    for( let j=s.length-1 ;j>=0; j--){
        ans = ans +s.charCodeAt(j) ;
    }
    console.log(ans) ;
}
```
題目重點：將超級倉庫（陣列）的內容反序取出
- 起點：i=xx.length-1
- 終點條件：i>=0
- 每一步變化：i-- / i=i-1

### 0214

#### 練習(算成績)
- https://onlinegdb.com/7_y0nyc-7
#### 射擊遊戲
- 建立武器圖片
- 設定打擊範圍（進行中）

### 0207
- 射擊小遊戲
    - https://editor.p5js.org/chuan.me@gmail.com/sketches/JoBLG3CMO
    - 
### 0124
```javascript=
/**
 * Auto-generated code below aims at helping you parse
 * the standard input according to the problem statement.
 **/

var s = 'good morning'
s = s.toLowerCase();

var lc = "abcdefghijklmnopqrstuvwxyz" ;
var uc = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" ;
var r = "" ;
var a = 0 ;
for( var i=0;i<s.length ; i++){
    if( s[i]==' '){
        a=-1;
    }
    var p = lc.indexOf(s[i]);
    if( p!=-1 && a%2==0 ){
        r = r + uc[p];
    }else{
        r = r + s[i] ;
    }
    a++ ;
}

console.log(r);

```
```javascript=
var s = 0
var t = 0
var player;
var allballs=[]

function balls(){
  for (var i = 0; i < 11; i++) {
    if (Math.random() > 0.3) {
     var b = new Sprite(20 + i * 35, 10, 30);
      allballs.push(b)
    }
  }
}

function setup() {
  createCanvas(400, 400);
  // 地心引力
  world.gravity.y = 9;

  // 建立方塊  x    y     寬    高    固定不動
  player = new Sprite(200, 350, 10, 10, "k"); 
   balls()
}

function draw() {
  if(frameCount%60==0){
    balls()
    s = s + 10
  }
 for(let b of allballs){
   if (b.collided(player)==true){
     s=0
   }
 }   
  background(220);
  player.x = mouseX;
  // 印出字
  textSize(50);
  text(s, 300, 100);
  text(t, 100, 100);
  if (s>t){
    t=s
  }
  


}


```
### 0117
#### 檢視變數工具
- https://pythontutor.com/
- 迴圈應用小遊戲:閃避落石
    ```javascript=
    var s = 0;
    var player;

    function balls() {
      for (var i = 0; i < 11; i++) {
        if (Math.random() > 0.3) {
          new Sprite(20 + i * 35, 10, 30);
        }
      }
    }
    function setup() {
      createCanvas(400, 400);
      // 地心引力
      world.gravity.y = 9;
      player = new Sprite(200, 350, 10, 10, "k");
      balls();
    }

    function draw() {
      background(220);

      // 印出字
      textSize(50);
      text(s, 300, 100);

      player.x = mouseX;
    }

    ```
### 0103 
```javascript=

function get_time( s ){
    
    var t1 = s.split(":");
    t1[0] = parseInt(t1[0])
    t1[1] = parseInt(t1[1])
    
    var a1 = t1[0]*60+t1[1]
    console.log(a1);
    
    return a1 ;
}


const depart = "2:15";
const arrive = "10:3";

var a1 = get_time(depart)
var a2 = get_time(arrive)

console.log(a2-a1)
//==============================
const M = 210;
var a1 = M/60
console.log(a1);
var b = Math.floor(a1)
console.log(b+'h'+(M-b*60)+'m')
// 3h 30m


function abc( M ){
  
    var a1 = M/60
    console.log(a1);
    var b = Math.floor(a1)
    return b+'h'+(M-b*60)+'m'
}
var ans = abc(1440) ;
console.log(ans )

//==============================
function oiiaoiiuiai (day){

var week = Math.floor( day/7 ) ;
var edays= day-week*7;
return ( week+"w "+edays+" days")
}

 var a = oiiaoiiuiai(150)
 console.log(a)
```
### 1213 應用工具包：數字工具包
#### Codingame Practice: 
- https://www.codingame.com/ide/puzzle/folding-paper

#### Math 工具包
- https://www.w3schools.com/js/js_math.asp
- [x]     - 無條件捨去 / 進位 
- [x]     - 四捨五入
- [x]     - PI
- [x]     - 找最大、找最小
- [x]     - 絕對值
```javascript=
var n = Math.PI
console.log(n)
var r = Math.round(8.7)
console.log(r)
var c = Math.ceil(1.1)
console.log(c)
var f = Math.floor(1.9)
console.log(f)
var min = Math.min(0,99,-90,50,300)
console.log(min)
var max = Math.max(0,89,777,8,12,9090)
console.log(max)
var a = Math.abs(50-100)
console.log(a)
```

### 1206
- string practice : https://onlinegdb.com/SjXd2kza8
- String puzzle:
    - https://www.codingame.com/training/easy/retro-typewriter-art
    ```javascript=

    var ts = readline().split(' '); // 用空格分開
    var ans='';
    for(var i=0 ; i<ts.length ; i++ ){
        // 12sp
        var cmd = ts[i] ;

        // 找數字的部分。把每個字拿出來看
        // 12sp
        //   ^----j:2
        var j=0 ;
        for(  ; j<cmd.length ; j++){
            if( "0123456789".indexOf( cmd[j]) !=-1 ){
                // 數字
            }else{
                // 不是數字
                break;
            }
        }
        // 取出數字的部分
        // "12sp".substring(0,2) ==> 12
        // num:12
        var num = cmd.substring(0,j) ;
        var sym = cmd.substring(j) ;
        if(sym==''){
            sym = num.substring( num.length-1)
            num = num.substring( 0,num.length-1)
        }
        num = parseInt(num); // 文字轉數字
        if(sym=='nl'){
            num=1;
        }
        console.log(num+" : "+sym) ;
        for( var k=0 ; k<num ;k++){
            if(sym=='sp'){
                sym=' ' ;
            }else if(sym=='bS'){
                sym='\\';
            }else if(sym=='sQ'){
                sym="'"
            }else if('nl'){
                sym="\n"
            }
            ans=ans+sym;
            console.log('ans:'+ans) ;
        }

    }

    console.log(ans);

    ```


### 1129 應用工具包：文字工具包
- https://www.w3schools.com/js/js_string_methods.asp
```javascript=
var s = "hello" ;

// 字數
s.length // 5

// 第幾個字母
s[2] // 第3個字母
s[0] // 第1個字母

// 轉大小寫（不會改自己）
s.toUpperCase()
s.toLowerCase()

// 切字 substring ?~?以前
//       012345678901234567    
var t = "The target is Leo.";
var a = t.substring(14,16)


// 找段落在什麼位置
var k = '1947年，由於[陳儀]政府治台失政累積龐大民怨，二二八事件爆發';
var i1 = k.indexOf('[');
var i2 = k.indexOf(']');
var t = k.substring(0,i1+1) + "..." + k.substring(i2, k.length) ;


```

https://www.w3schools.com/js/js_string_search.asp#mark_indexof

codingame 練習
```javascript=

var test= 'aeiouAEIOU' ;
for (let i = 0; i < 3; i++) {
    //Awoke in an autumn's glow,
    const s = readline();  // s : "Awoke in an autumn's glow,"
    var arr= s.split(' '); // arr : Awoke | in  | an | autumn's | glow,
    for( var a=0 ; a<arr.length ; a++){
        var w = arr[a] ;
        if(test.indexOf(w[0])!=-1){ // 第一個字

            if( w[ w.length-1 ]==','){
                w = w.substring(0,w.length-1) ; // 去掉最後一個逗點
            }
            console.log( w ) ;
        }
    }
}


```



### 1122

```javascript=
var d =[5,7,3,12,9,5,4]
var t = 0

for (var i = 0 ; i<d.length ; i=i+1){
  t = t + d[i]
}
console.log('total: '+t)

var max = 0 
for (var i = 0 ; i<d.length ; i++){
  if (d[i]>max){
    max = d[i]
  }
}
console.log('max: '+max)

var min = 99999999999
for (var i = 0; i<d.length ; i++){
  if(d[i]<min){
    min = d[i]
  }
}
console.log('min: '+ min)
```

### 1115

```javascript=
var s = [100,80,25,44,74,63,52,11] ;

// 印出不及格的分數
for(   ){
    if(  ){
        
    }
}
```

```javascript=
var s = [100, 80, 25, 44, 74, 63, 52, 11];
var c = 0;
var n = 0;
// 印出不及格的分數
for (var i = 0; i < s.length; i = i + 1) {
  if (s[i] < 60) {
    c = c + 1;

    console.log("fail : " + s[i]);
  }
}
console.log(c);
for (var i = 0; i < s.length; i = i + 1) {
  if (s[i] >= 60) {
    n = n + 1;

    console.log("pass : " + s[i]);
  }
}
console.log(n);

```

```javascript=

/*
漢堡 35元，用變數 b 記住 35
tb 是總共買了 5 個漢堡的錢

飲料 12元，用變數 d 記住 12
td 是總共買了 7 杯飲料的錢

建立一個陣列(超級倉庫)，叫做 m
把 tb,td 的數值放進去
================================
加買塑膠袋 5 元加入 m

水果一份 42 元，用變數 f 記住
tf 總共買 5 份水果
把 tf 放進 m

使用變數 total 把 m 中的價錢全部加起來

準備變數 max 設 0
走過 m 的每一個數字
 */
var b = 35;
var tb = 0;
for (var i = 0; i < 5; i++) {
  tb = tb + b;
}
console.log("tb : " + tb);

var td = 0;
var d = 12;
td = d * 7;
console.log("td : " + td);

var m = [];
m.push(td);
m.push(tb);
console.log("money : " + m);

m.push(5);
var f = 42;
var tf = f * 5;
m.push(tf);
console.log("tf : " + tf);

var total = 0;
for (i = 0; i < m.length; i++) {
  total = total + m[i];
}
console.log("money :" + total);

var max = 0;
for (var i = 0; i < m.length; i = i + 1) {
  if (m[i] > max) {
    max = m[i];
  }
}
console.log("max :" + max);

```
### 1108

```javascript=
var s = [100,80,25,44,74,63,52,11] ;

// >=60 及格找最低
// <60 不及格找最高
            
var min = 999 ; 
for(var   i=0  ;  i<s.length    ;    i=i+1  ){
   if(  s[i]>=60  ){  // 及格
       if(  s[i]<min  ){ // 我比衛冕者低分
              min=s[i]    // 我去當衛冕者
       }
    }     
}


var max = 0 ; 
for(   i=0  ;   i<s.length   ;   i=i+1  ){
   if(  s[i]<60   ){  // 不及格
       if( s[i]>max   ){ // 我比衛冕者高分
          max=s[i]        // 我去當衛冕者
       }
    }     
}

console.log( max ) ;
console.log( min ) ;
```

### 1101
https://www.codingame.com/ide/puzzle/temperatures
```javascript
var alphabet = [];

alphabet[0] = "a";
alphabet[1] = "b";
alphabet[2] = "c";
alphabet[3] = "d";
alphabet[4] = "e";
// for (var i = 0;i<=4;i = i + 1){
//   console.log ("alphabet:" + alphabet[i])
// }


// for (var i = 4; i>=0; i=i-1){
//   console.log ("alphabet : " + alphabet[i])
// }


for (var m  of alphabet){
  console.log("alphabet : " + m)
}

min
for(var m  of alphabet){
        if( m < min ){
            min = m ;
        }
    }
    console.log('min ->'+min) ;




```

### 1025
- 判斷式練習
```javascript=
//     根據月份來判斷季節，假設月份範圍為 1 到 12：

//     12、1、2 月是冬季
//     3、4、5 月是春季
//     6、7、8 月是夏季
//     9、10、11 月是秋季


for (var i = 1; i <= 5; i = i + 1) {
  console.log(i);
}
for (var i=5;i>=1;i=i-1){
  console.log(i)
}
var money = 700
if (money<100){
      console.log('not enough')
}else if (money>=1000){
  console.log("big house")
}else{
  console.log("enough")
}
if(money>=1000){
      console.log("big house")
    }else {
      console.log("enough")
    }
var month = 10
if (month<1){
  console.log('error')
}else if (month==12){
  console.log("winter")
}else if (month<=2){
  console.log("winter")
}else if (month<=5){
  console.log("spring")
}else if (month<=8){
  console.log("summer")
}else if (month<=11){
  console.log("fall")
}


```

### 1018

```javascript=
var a = 40;
var b = 90;

if (a < b) {
  console.log("b大");
} else {
  if (a == b) {
    console.log("攏港款");
  } else {
    console.log("a大");
  }
}

if (a < b) {
  console.log("b大");
} else if (a == b) {
    console.log("攏港款");
} else {
    console.log("a大");
}

var food = "b";
if (food == "a") {
    console.log(150);
} else if (food == "b") {
    console.log(200);
} else {
    console.log("no");
}

// A==>$150
// B==>$200
// others==> no
var a = -2;
if (a >= 90) {
  console.log("a");
} else if (a >= 80) {
  console.log("b");
} else if (a >= 70) {
  console.log("c");
} else if (a <= 69) {
  console.log("d");
}
for (var i = 1; i <= 5; i = i + 1) {
  console.log(i);
}
for (var i = 5; i >= 1; i = i - 1) {
  console.log(i);
}
for (var i = 10; i <= 100; i = i + 10) {
  console.log(i);
}

for (var i = 0; i < 5; i = i + 1) {
  console.log("hi");
}


```

### 1011
- JS 複習

### 0705
- ifelse 練習 https://scratch.mit.edu/projects/1044689364/
- 應用練習
    - 索爾 https://www.codingame.com/training/easy/power-of-thor-episode-1
    - The descent : 找最高山

### 0628
- ifelse 練習:https://scratch.mit.edu/projects/1041542861/
- https://www.codingame.com/home
    - https://www.codingame.com/training/easy/mars-lander-episode-1

### 0621
- while 補充
    - 練習:
    - https://scratch.mit.edu/projects/1040335483/
```javascript=
var s = 0;
var a;
var bs = []; // 記下所有的磚

function setup() {
  createCanvas(400, 400);
  // 地心引力
  world.gravity.y = 9;

  // 建立方塊  x    y     寬    高    固定不動

  var y = 100;
  while (y < 350) {
    var x = 20;
    while (x < 400) {
      var b = new Sprite(x, y, 40, 15, "s");
      b.color = "grey";
      b.note = "G";
      b.count = random(50, 200);
      b.friction=0;
      bs.push(b);
      x = x + 42;
    }

    y = y + 40;
  }
}

function check(b) { // 針對一個磚做事
  b.count = b.count - 1; // <--其中一個磚
  if (b.count < 0) {
    // 時間到
    if (b.note == "G") {
      // 灰改黃
      b.color = "yellow";
      b.note = "Y";
    } else {
      // 黃改灰
      b.color = "grey";
      b.note = "G";
    }
    // 計時器歸零
    b.count = random(50, 100);
  }
  
  // 被點下
  if( b.mouse.pressing() ){
    b.collider = "d" ;
  }
}

function draw() {
  background(220);

  // 拿出所有的磚，做些事
  var i = 0; // 倉庫號碼
  while (i < bs.length) {
    check( bs[i] ) ;
    i = i + 1;
  }

  // 印出字
  textSize(50);
  text(s, 300, 70);

  if (a != null) {
    if (a.y > 400) {
      s = s - 5;
      a = null;
    }
  }
}

```

### 0614
- https://scratch.mit.edu/projects/1032324082
- https://scratch.mit.edu/projects/1025997556
#### 函式練習
- 試著撰寫一個函式，可以計算三角形面積
    - 輸入：底、高
    - 輸出：面積
```javascript=
function 三角面積 (底,高) {
  var 面積 = 0;
  面積 = (底*高)*0.5
  return 面積 ;  
}
```

- 試著撰寫一個函式，可以計算 n 個相同三角形的總面積
    - 輸入：底、高、數量
    - 輸出：總面積
```javascript=
function 三角總面積 (底,高,數量) {
  var 面積 = 0;
  面積 = ((底*高)*0.5)*數量
  return 面積 ;  
}

function 三角總面積 (底,高,數量) {
  var 總面積  = 三角面積(底,高)*數量
  return 總面積 ;  
}

```

- 試著撰寫一個函式，可以印出 x 的乘法表
    - 輸入：x (ex. x:3)
    - 輸出： 
        - 3x1=3
        - 3x2=6
        - 3x3=9
        - 3x4=12
        - ...
        - 3x9=27


### 0607
 - 2D 超級倉庫 ==> 巢狀迴圈 
 - https://scratch.mit.edu/projects/1020589976
 - https://scratch.mit.edu/projects/1027635384


### 0531
 - 2D 超級倉庫 ==> 巢狀迴圈 
 - https://scratch.mit.edu/projects/1020589976
 - https://scratch.mit.edu/projects/1027635384
 - https://code-seed.click/lecture/js/lecture/js_test.html
 - 巢狀迴圈應用（格子倉庫）
```javascript=


function setup() {
  createCanvas(400, 400);
  // 地心引力
  world.gravity.y = 9;

  var x = 50;
  for (var ii = 0; ii < 3; ii = ii + 1) {
    // 建立方塊  x    y     寬    高    固定不動
    for (i = 0; i < 4; i = i + 1) {
      new Sprite(x, 50 - i * 60, 50, 50);
    }

    x = x + 80;
  }

  new Sprite(200, 380, 400, 20, "s");
}
function draw() {
  background(220);
}

```


### 0524
 - Array 走訪說明
 - 應用：掉落的地板
    - https://editor.p5js.org/chuan.me@gmail.com/sketches/4XWah76zmC


### 0510
 - for 基礎練習：https://scratch.mit.edu/projects/1014302710/
 - 練習 https://silentteacher.toxicode.fr/
 - 課程
     - 陣列（超級倉庫）https://code-seed.click/lecture/js/lecture/js_array.html
     - 函式（工廠/function） https://code-seed.click/lecture/js/lecture/js_func.html

### 0426- for 巢狀迴圈
- 西洋棋盤
```javascript=
function setup() {
  createCanvas(400, 400);
  // 地心引力
  world.gravity.y = 9;

  // 建立方塊         x    y   寬   高 固定不動

  //30+30*k  k:1~8
  for (let k = 1; k <= 8; k = k + 1) {
    for (let i = 1; i <= 8; i = i + 1) {
      var r = new Sprite(i * 30, 30 + 30 * k, 30, 30, "s");
      if ((i + k) % 2 == 0) {
        r.color = "white";
      } else {
        r.color = "black";
      }
    }
  }
}
function draw() {
  background(220);
}

```
### 0419- for 應用練習
- 基礎語法練習 https://compute-it.toxicode.fr/ 
    - ~25(if else if else)
- for 應用
```javascript=
  // 建立球   x     y    半徑
  // new Sprite( 100 , 50 , 20,"s"  )  ;
  // new Sprite( 150 , 50 , 20,"s"  ) ;
  // new Sprite( 200 , 50 , 20,"s"  ) ;
  // new Sprite( 250 , 50 , 20,"s"  ) ;
  // new Sprite( 300 , 50 , 20,"s"  ) ;
  for( let i=82  ; i<350 ; i=i+50){
    new Sprite( i , 50 , 20,"s"  )
  }
  for (let i=100; i<350; i=i+50){
    new Sprite( 80 , i , 20,"s"  )
  }
  for(let i=80;i<350; i=i+50){
    new Sprite (i,300 ,20,"s")
  }
  for(let i=100 ; i<350 ; i=i+50){
    new Sprite (330,i,20,"s")
  }
  
  
  // 畫一整片
  //y ：100
  // for( let i=150  ; i<300 ; i=i+20){
  //   new Sprite( i , 100 , 20,"s"  )
  // }  
  //y ：120
  // for( let i=150  ; i<300 ; i=i+20){
  //   new Sprite( i , 120 , 20,"s"  )
  // }  
  //y ：140
  // for( let i=150  ; i<300 ; i=i+20){
  //   new Sprite( i , 140 , 20,"s"  )
  // }
  for(let k=100  ; k<260 ; k=k+20){ //k:100,120,140,...,240
      for( let i=150  ; i<300 ; i=i+20){
        new Sprite( i , k , 20,"s"  )
      }  
  }
  ```
  


### 0412 巢狀條件改 if-else if
- 連續條件

```javascript=
// <30        ==> +10
// >=30 ~ <50 ==> +5
// >=50 ~ <100==> +1
// >= 100
if( x<30 ){
    
}else{
    
    if( x<50){
        // 30~50
    }else{
        if( x<100 ){
            //50~100
        }else{
            // >= 100
        }
    }    
}

// ============ 可以改寫 ===========

if( x<30 ){
    
}else if( x<50 ){
    // 30~50
}else if( x<100){
    // 50~100
}else{
    // x>=100
}

```
- 在專案顯示字的內容
    - 寫在 draw(){ ...    }
    - 參考：https://p5js.org/reference/#/p5/text
    - 
```javascript=
//.   內容。   座標 
text( score , 100 , 50 ) ;
```
- for 迴圈

### 0329 if-else 條件應用小遊戲
```javascript=
var n = 0;
var ball ;
var emojis = ["😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "🙃", "😉", "😊", "😇", "🥰", "😍", "🤩", "😘", "😗", "😚", "😙", "", "😋", "😛", "😜", "🤪", "😝", "🤑", "🤗", "🤭", "🤫", "🤔", "🤐", "🤨", "😐", "😑", "😶", "😏", "😒", "🙄", "😬", "🤥", "😌", "😔", "😪", "🤤", "😴", "😷", "🤒", "🤕", "🤢", "🤮", "🤧", "🥵", "🥶", "🥴", "😵", "🤯", "🤠", "🥳", "", "😎", "🤓", "🧐", "😕", "😟", "🙁", "😮", "😯", "😲", "😳", "🥺", "😦", "😧", "😨", "😰", "😥", "😢", "😭", "😱", "😖", "😣", "😞", "😓", "😩", "😫", "🥱", "😤", "😡", "😠", "🤬", "😈", "👿", "💀"];
function setup() {
  createCanvas(400, 400);
  // 地心引力
  world.gravity.y = 10;
}

function draw() {
  background(220);  
  n = n+1 ;
  if( n==70){
    var a = random(100,300) ;
    var b = random(0,150) ;
    ball=new Sprite( a , b , 30 ) ; 
    n=0;
  }
 
  if(mouse.pressing() && n>0){
    // 算距離
    var d = dist( ball.x , ball.y , mouse.x , mouse.y ) ;
    print("距離："+d);
    n=-50;
  }
  
}

```
### 0216 判斷式:基礎結構、巢狀
- 判斷式:改程式。左側(紅球) 右側(籃球)
```javascript=
var count = 0;

function setup() {
  createCanvas(400, 400);
  // 地心引力
  world.gravity.y = 10;
}

function draw() {
  background(220);  
  
  if( mouse.pressing() && count >30){
    
      var b = new Sprite( mouse.x , mouse.y ,30 ) ;
      if( mouse.x > 200 ){
          b.color = "red" ;    
      }else{
          b.color = "blue" ;      
      }      
    count = 0 ;       
  }
  
  count = count +1 ;
  //print( "c:"+count) ;
}
```
- 巢狀判斷

```javascript=
var count = 0;

function setup() {
  createCanvas(400, 400);
  // 地心引力
  world.gravity.y = 10;
}

function draw() {
  background(1);

  if (mouse.pressing() && count > 1) {
    var b = new Sprite(mouse.x, mouse.y, 30);
    if (mouse.x < 150) {
      b.color = "red";
    } else {
      if (mouse.x < 300) {
        b.color = "blue";
      } else {
        b.color = "brown";
      }
    }

    count = 0;
  }

  count = count + 1;
  //print( "c:"+count) ;
}

```

### 0202 變數
- p5play 範本：https://editor.p5js.org/chuan.me@gmail.com/sketches/Kie9d_iOg
 ```javascript
function setup() {
  createCanvas(400, 400);
  // 地心引力
  world.gravity.y = 10;  
  
  
  // 做一個球：座標、直徑
  var x = 300 ;
  var y = 80 ;
  new Sprite(x,y,50,'s') ;
  y=y+50;
  new Sprite(x,y,50,'s') ;
  y=y+50;
  new Sprite(x,y,50,'s') ;
  y=y+50;
  new Sprite(x,y,50,'s') ;
  y=y+50;
  new Sprite(x,y,50,'s') ;
  x=x-50;
  new Sprite(x,y,50,'s') ;
    x=x-50;
  new Sprite(x,y,50,'s') ;
    x=x-50;
  new Sprite(x,y,50,'s') ;
    x=x-50;
  new Sprite(x,y,50,'s') ;
//   new Sprite(300,280,50,'s') ;
//   new Sprite(300,230,50,'s') ;
//   new Sprite(300,180,50,'s') ;
//   new Sprite(300,130,50,'s') ;
//   new Sprite(300,80,50,'s') ;
//   new Sprite(280,100,50,'s') ;
//   new Sprite(230,100,50,'s') ;
//   new Sprite(180,100,50,'s') ;
//   new Sprite(130,100,50,'s') ;
//   new Sprite(80,100,50,'s') ;
   
  
  
  
}

function draw() {
  background(220);  
}
 ```
 