# 學習樹
###### tags: `程式學習`

:::spoiler Discord bot

>[color=#6519ff]學習**javascript**的主因，主要使用**node.js**環境
之所以會接觸到這些是因為對聊天機器人的嚮往

**收穫**
- Javascript基本語法
- 動態檔案管理的方式
- 資料庫 MongoDB 的使用
- 物件導向的概念
- axios的使用
node.js的套件，主要和api的串接有關
後來比較熟悉後，前端就都用內建的fetch了

**作品**
這裡只列出較有代表性的作品，且不包括和其他領域結合後的專案
- 多功能bot [原始碼](https://replit.com/@yan930521/yans-bot)
中期的作品，雖然開始熟練了，但還是沒有完整的專案意識
原始碼他人不好閱讀，且沒有事先計畫架構，因此很雜亂
:::spoiler 指令列表
:::

- RPG 文字冒險遊戲 [原始碼](https://replit.com/@yan930521/yans-bot-Ce-Shi-Ban)
打怪、升級、解鎖新區域
講求自由度，玩家間有高度的互動性
這個是改進數次後的版本，但架構同樣不易閱讀
:::spoiler 指令列表
:::
- RPG 科幻冒險文字RPG(新版，持續更新中) [原始碼](https://github.com/core-tw/core)
這一個作品的期望目標是讓上千人同時遊玩，而為了增加可玩性，我也找了數名朋友一同幫忙，有些人負責設計遊戲、數據，有些人負責美術，還有世界觀的設定...等

**團隊的線上筆記：https://hackmd.io/@sakura-2**

**以上所有的指令並不包含被我隱藏起來的**
因功能太多，無法在此一一展示，若有興趣的話，歡迎大家來我的群組看看
[**Discord群組 連結**](https://discord.gg/KvmYAw7nYw)

>[color=#0080FF] 教學資源
>- [Javascript](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
>- [discord.js V12](https://v12.discordjs.guide/)
>- [discord.js V13](https://discordjs.guide/)

:::

:::spoiler website
>[color=#6519ff]學習**javascript**的同時，也對因此對網站的建構產生了興趣

**收穫**
- html/js/css 語法
- [boostrap](https://getbootstrap.com/)的使用
- canvas的使用
- 使用node.js的[express](https://github.com/expressjs/express)套件架設伺服器
- [socket.io](https://github.com/socketio/socket.io)的使用，建立網頁和伺服器的雙向通訊
- 對web資安產生興趣，並實際在外國的資安學習網站學習初級CTF的一些技巧
例如
- https://www.hacker101.com/
- https://ctf.hacker101.com/
- https://www.cybrary.it/

**作品**
這裡只列出較有代表性的作品，且不包括和其他領域結合後的專案
- 練習的試做網站 [目錄網站連結](https://website.sakuraeinfach.repl.co)

- 多人及時射擊遊戲 [連結](https://website.sakuraeinfach.repl.co/html/arena/)
在剛接觸socket和canvas時所做，畫面有點陽春
:::spoiler 介紹
有簡陋的登錄系統，但密碼沒有經過加密
就連資料庫也是直接存，因為做的時候還沒有相關的資安意識
進入遊戲後的畫面如下
紅色的是系統生成的"幽靈"
殺死幽靈或其他玩家才能獲取額外的子彈
( WASD 移動，左鍵發射子彈 )
可以自己選顏色(輸入英文或是色碼)
:::
- 視窗管理器 [連結](https://website.sakuraeinfach.repl.co/html/watch/watch.html)
:::spoiler 介紹
大致上的用法如圖所示
除了可以連結youtube的影片，也可以連接twitch的直播
另外，更可以透過網站內建的youtube api直接搜尋影片
:::
- feedback用戶回饋 [連結](https://website.sakuraeinfach.repl.co/html/comment/comment.html)
:::spoiler 介紹
可輸入用戶名也可選擇忽略(匿名模式)
下方的Comment則為必填選項

點下「發送建議」之後，他的建議就會被傳送到我的工作室：

而畫面會變成：
會隨機播放某五首歌（不會自動播放），類似把好聽的歌推薦給別人
:::
- 公告頁面 [連結](https://website.sakuraeinfach.repl.co/html/announce/announce.html)
串接了twitch的即時聊天室
:::spoiler 實際圖片
:::
- 線上鋼琴 [連結](https://website.sakuraeinfach.repl.co/html/piano/piano.html)
初期的作品，從中央C4前後延伸兩個八度，一共48個按鍵，畫面待美化
:::spoiler 實際圖片
:::

- 幫偶像製作的介紹網站(響應式) [連結](https://website.karirino3o.repl.co/)
- 主要是以templatemo的其中一個模板為基底，並加入一堆小巧思和額外功能，例如寫了一個伺服器去緩存20分鐘內的新YT影片、隱藏在圖片背後的圖片等

( 這個專案算是我比較熟練時的作品了，因此自己也還算滿意

>[color=#0080FF] 教學資源
>- [HTML](https://tw.alphacamp.co/blog/html-guide)
>- [CSS](https://tw.alphacamp.co/blog/css-guide-box-model)
>- [Javascript](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
:::

:::spoiler live2d 嵌入-chrome擴充功能
# live2d 嵌入-chrome擴充功能
將可動式的live2d模型嵌入至任何網站之中！

## 原始碼
github: https://github.com/yan-930521/--live2d-
## 使用畫面

不小心把update打成了updata XD<br>






---

## 如何使用

在任意位置點擊右鍵<br>
ps.有些網站的有些地方會失效哦<br>

---

## 設定

1. 點開 『選項』

2. 填入最新的金鑰來更新系統

3. 下方的是現在可選的角色，隨時都可以改，選定的話就代表網頁擴展出來的角色會是她
---

## 特別感謝

- 部分程式碼魔改魔改魔改魔改自：<br>
https://github.com/stevenjoezhang/live2d-widget<br>
沒有他就沒有這個擴充功能的存在<br>

- 本擴充功能之模型來自於：<br>
https://github.com/Eikanya/Live2d-model

---

## 免責聲明 disclaimer

1. License：　GNU General Public License v3.0<br>

2. 用作展示的所有 Live2D 模型、圖片、動作數據等版權均屬於其原作者。

3. 僅供研究學習，不得用於商業用途。<br>

4. 原作為：　https://github.com/stevenjoezhang/live2d-widget<br>

5. 善意提醒：　此文件的live2d的核心程式也有被我修改過<br>

---

## update

目前支援的模型如下 :

---

> 本文章同步法表於medium
> https://medium.com/@yan930521/chrome-extension-with-live2d-3e59b17ee44b

:::

:::spoiler 人工智慧
>[color=#6519ff]會研究人工智慧之基於對聊天機器人的嚮往，我想要做出能以文字流暢對答並且擁有記憶能力、解讀新事物能力的聊天機器人

**過程**
由於我最熟悉的語言便是javascript，因此我都是以node.js來實作
遇到過最嚴重的困境是js中的NaN問題，使得許多專案在最後關頭失敗，後來發現是INFINTY的計算問題導致的，修復此項問題後，專案也能正常的運作了

**收穫**
- ANN神經網路 (單層感知器、多層神經網路)
- CNN基本概念
- node-nlp的使用
- RL強化學習、深度強化學習
- 反向傳播法

**作品**
這裡只列出較有代表性的作品，且不包括和其他領域結合後的專案
- 井字遊戲AI [原始碼](https://github.com/yan-930521/Jiugongge-AI)
對於不同的棋步，每個位置有不同的固定權重，將每個位置的權重總和相比，以此決定下一步該下哪裡，權重為一開始就設定好的
- 單層感知器 [原始碼](https://github.com/yan-930521/perceptron)
能預測線性數據
- 多層感知器
- python版本 [原始碼](https://github.com/yan-930521/Neural-Network-By-Python)
- node.js版本 [原始碼](https://github.com/yan-930521/RL-in-web/tree/ver2/lib)

能預測非線性數據，非線性就像大多數的自然現象一樣，充滿不可預測性，因此我們只能去努力的讓輸出逼近結果。不同於上方的單層感知器作品，這一項作品可以說是一個library，能自行設定神經元的數量，可惜的是還不能設定層數
- 強化學習 [原始碼](https://github.com/yan-930521/RL-in-web/)
這個專案我分成了許多步驟
1. 先做出遊戲的框架
因為之前用socket和canvas做過及時射擊遊戲，所以這次就直接將架構拿過來使用了
2. 深度強化學習
原本想強化學習融合多層感知器來減少學習所需的時間，結果一查之下。發現已經有『深度強化學習』了

* 近期正在接觸NEAT( 變化結構神經進化 )
:::

## 更多專案
其他專案，例如nlp語意辨識bot、區塊鏈實作...等，請移步至github或replit

GitHub：
https://github.com/yan-930521
https://github.com/core-tw
（未來會陸續把以前寫的專案整理好傳上去）

Replit：
https://replit.com/@yan930521
https://replit.com/@sakuraEINFACH
https://replit.com/@CoreTW
https://replit.com/@KaririnO3O