手把手教你用 PixiJS 做一個平台遊戲 #1 基本配置

<html>
  <head>
    <title>Pixi Platformer Game</title>
    <meta charset="UTF-8" />
    <style>
      .h1 {
        color: #fff;
        font-size: 24px;
        letter-spacing: 0.25ch;
      }
 
      body {
        margin: 0;
        display: flex;
        height: 100vh;
        background-color: rgba(26, 26, 43, 1);
      }
 
      #app {
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
 
      #screen {
        width: 608px;
        height: 368px;
        background-color: #fff;
      }
    </style>
  </head>
 
  <body>
    <div id="app">
      <h1 class="h1">Pixel Adventure</h1>
      <div id="screen"></div>
    </div>
 
    <script src="src/index.ts"></script>
  </body>
</html>

import { Application } from 'pixi.js';
 
// 創建 pixi app
const app = new Application();
 
(async () => {
  await app.init({
    background: '#1099bb',
    width: 608,
    height: 368,
  });
 
  // 放到 DOM 裡面
  document.querySelector('#screen')?.appendChild(app.canvas);
})();
 
export { app };

import './app';