---
# 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;
}
```
### 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);
}
```
Sign in with Wallet
Connect another wallet