想要自我介绍与众不同?游戏版“时间线”Canvas模块给你信心!

时间轴游戏模块

小新快跑介绍

本项目为苏一恒个人网站的(预备)组件之一,以游戏的形式展示自己的比较重要的人生历程(时间轴)。

创造不易,感谢手动star

游戏说明

键盘左右键控制人物,按压即可移动,松开即可暂停。当经过不同建筑时会有不同的说明,所有的历程按照时间顺序一字排开。

安装/启动说明

将项目下载到本地并执行命令

npm install 
npm run start

游戏说明
游戏截图

迁移说明

可以将整个GamePine文件夹迁移到你的项目中,然后引入组件

width:设置模块在浏览器中的宽度

import GamePine from './GamePine'

...



如果需要将本模块改成自己的时间线,仅需修改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

你可能感兴趣的:(想要自我介绍与众不同?游戏版“时间线”Canvas模块给你信心!)