想要自我介紹與衆不同？遊戲版“時間線”Canvas模塊給你信心！

時間軸遊戲模塊

小新快跑介紹

本項目爲蘇一恆個人網站的（預備）組件之一，以遊戲的形式展示自己的比較重要的人生歷程（時間軸）。

創造不易，感謝手動star🌟

遊戲說明

鍵盤左右鍵控制人物，按壓即可移動，鬆開即可暫停。當經過不同建築時會有不同的說明，所有的歷程按照時間順序一字排開。

安裝/啓動說明

將項目下載到本地並執行命令

npm install 
npm run start

遷移說明

可以將整個GamePine文件夾遷移到你的項目中，然後引入組件

width：設置模塊在瀏覽器中的寬度

import GamePine from './GamePine'

...

<GamePine width={1000}/>

如果需要將本模塊改成自己的時間線，僅需修改state.buildsJson配置：

修改state.bulidsJson:

[
    {
      id: 1, //序號
      date: 1998, //年份
      title: '萬聖節凌晨！小鬼降世！', //標題
      detail: '告別牛頭馬面...', // 內容
      img_url: 'images/hospital.png', // 背景建築的圖片url
      scale: 0.7, // 背景圖片縮放比例
      x: 200, // 背景圖片的x軸位置
      y: 284 // 背景圖片的y軸位置
    },
   {}...
]

當然你可以有更多的DIY方案，修改這些state的配置：

• initSetting // 修改初始化的Pixi的設置，可參照PixiJS文檔
• backgroundsJson // 修改背景和底板
• xiaoxin // 修改人物的走動動畫

技術概要

由react-create-app搭建的本演示Demo

核心依賴：

• React
• PIXIJS

性能優化方案：

• 碰撞檢測：未使用PIXI文檔推薦的實時檢測，而是隻在小新移動時檢測，並觸發事件。當人物不移動時，遊戲模塊相當於是一張靜態
  canvas。
• 靜態資源：圖片紋理靜態資源已經過ps處理壓縮/

層級結構

圖片集保存在public/images下

.
├── README.md
├── package-lock.json
├── package.json
├── public
└── src
    ├── App.css
    ├── App.js
    ├── GamePine
    │   ├── bump.js
    │   ├── index.js
    │   └── utils.js
    ├── index.css
    └── index.js

LICENSE

MIT