Merge pull request #8 from HeesuKim0203/dev/shotImageUpdate

Dev/shot image update
HeesuKim0203 · Nov 16, 2023 · 46fac97 · 46fac97
2 parents 947d2c7 + 201db30
commit 46fac97
Show file tree

Hide file tree

Showing 15 changed files with 220 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "shooting_game",
   "version": "0.1.0",
+  "homepage": "https://planeshooinggame.com",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Plane Shooting Game"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Plane Shooting Game</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/information.png b/public/information.png
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.css b/src/App.css
@@ -5,3 +5,19 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@600&display=swap');
 
+* {
+    box-sizing: border-box;
+}
+
+img {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+    -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+    user-drag: none;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -8,9 +8,9 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
-  <React.StrictMode>
+  // <React.StrictMode>
     <App />
-  </React.StrictMode>
+  // </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/src/page/home/Canvas.tsx b/src/page/home/Canvas.tsx
@@ -4,7 +4,7 @@ import backgroundSrc from './img/background/background.png'
 import useCanvas from './useCanvas'
 import Painter from './class/Painter'
 import Wall from './class/Wall'
-import { PlaneKind, PlaneList, UserPlane } from './class/Plane'
+import { PlaneList, UserPlane } from './class/Plane'
 
 import userPlaneData from './data/userPlane'
 
@@ -25,26 +25,35 @@ const Canvas = ( props : CanvasProps ) => {
     const userPlane = new UserPlane(0, wall, 40, (height / 2) - (userPlaneData.size.height / 2), userPlaneData) ;
 
     const planeList = new PlaneList() ;
-    planeList.registerPlane(userPlane, PlaneKind.USERPLANE) ;
+    planeList.registerUserPlane(userPlane) ;
 
-    const paint = new Painter(canvas, backgroundSrc, planeList) ;
+    const userLife = document.getElementsByClassName('userLife')[0] as HTMLParagraphElement ;
+    userLife.innerText = `Life : ${userPlane.getLife()}` ;
+
+    const paint = new Painter(canvas, backgroundSrc, wall) ;
 
     document.addEventListener('keydown', (event) => userPlane.keyDownToMoveMapping(event));
     document.addEventListener('keyup', (event) => userPlane.keyUpToMoveMapping(event));
 
     paint.initBackground() ;
     paint.runAnimationFrame() ;
 
-    const game = new Game({ title : gameData.title, enemyPlaneImformationList : gameData.enemyPlaneList, wall : wall, painter : paint, enemyPlaneDataList : enemyPlaneList }, planeList) ;
+    window.addEventListener('focus', (event) => {
+      window.location.reload() ;
+    }, false);
+
+    const game = new Game({ title : gameData.title, enemyPlaneImformationList : gameData.enemyPlaneList, wall : wall, painter : paint, enemyPlaneDataList : enemyPlaneList }) ;
 
     game.start() ;
   }) ; 
 
   return (
-    <canvas 
-      ref = { canvasRef }
-      {...props}
-    />
+    <>
+      <canvas 
+        ref = { canvasRef }
+        {...props}
+      />
+    </>
   )
 }
 

diff --git a/src/page/home/class/Game.ts b/src/page/home/class/Game.ts
@@ -8,7 +8,7 @@ const ENEMPLANE_START_POSITION_Y_MIN = 0 ;
 const ENEMPLANE_START_POSITION_Y_MAX = 600 ;
 
 const ENEMPLANE_MIN_TIME = 500 ;
-const ENEMPLANE_MAX_TIME = 4000 ;
+const ENEMPLANE_MAX_TIME = 3000 ;
 
 type EnemyPlaneImformation = {
     level : number
@@ -34,24 +34,18 @@ export default class Game {
     private wall : Wall | null = null ;
     private enemyPlaneDataList : EnemyPlanLevelData[] = [] ;
     private gameStatus : GameStatus = GameStatus.START ;
-
-    private planeList : PlaneList | null = null ;
-    private userLife : HTMLParagraphElement = document.createElement('p') ;
+    private planeList : PlaneList = new PlaneList() ;
 
     constructor({
         title,
         enemyPlaneImformationList,
         wall,
         enemyPlaneDataList
-    } : GameData, planeList : PlaneList ) {
+    } : GameData ) {
         this.title = title ;
         this.enemyPlaneImformationList = enemyPlaneImformationList ;
         this.wall = wall ;
         this.enemyPlaneDataList = enemyPlaneDataList ;
-
-        this.planeList = planeList ;
-
-        this.userLife.className = 'absoulte' ;
     }
 
     public getTitle()           { return this.title ; }
@@ -77,17 +71,6 @@ export default class Game {
                 id ++;
             }
         }) ;
-
-        // Todo : Game End fg setting
-        const gameEndPid = setInterval(() => {
-            if( this.planeList?.getEnemyPlanes().length === 0 ) { 
-                clearInterval(gameEndPid)
-                this.end() ;
-            }
-
-            this.userLife.innerText = `${this.planeList?.getUserPlanes()[0].getLife()}` ;
-
-        }, 1000) ;
     }
 
     // Game Clear

diff --git a/src/page/home/class/Painter.ts b/src/page/home/class/Painter.ts
@@ -1,20 +1,23 @@
-import { Plane, PlaneList } from './Plane'
+import { EnemyPlane, Plane, PlaneList, UserPlane } from './Plane'
 import { Shot, ShotList } from './Shot' ;
+import Wall from './Wall';
 
 class Painter {
     private canvas : HTMLCanvasElement ;
     private ctx : CanvasRenderingContext2D | null = null ;
 
     private backgroundSrc : string = "" ;
-    private planeList : PlaneList | null = null ;
+    private planeList : PlaneList = new PlaneList() ;
+    private wall : Wall | null = null ;
 
     private shotList : ShotList = new ShotList() ;
+    public static requestAnimationFramePid : any = null ;
 
-    constructor( canvas : HTMLCanvasElement, backgroundSrc : string, planeList : PlaneList ) {
+    constructor( canvas : HTMLCanvasElement, backgroundSrc : string, wall : Wall ) {
         this.canvas = canvas ; 
         this.ctx = this.canvas.getContext('2d') ;
         this.backgroundSrc = backgroundSrc ;
-        this.planeList = planeList ;
+        this.wall = wall ;
     }
 
     public initBackground() : void {
@@ -32,11 +35,11 @@ class Painter {
         if( this.planeList ) {
             // Draw User Plane
             const userPlaneList = this.planeList.getUserPlanes() ;
-            userPlaneList.forEach((plane : Plane) => this.drawPlane(plane, true)) ;
+            userPlaneList.forEach((plane : UserPlane) => this.drawPlane(plane)) ;
 
             // Draw Planes
             const enemyPlaneList = this.planeList.getEnemyPlanes() ;
-            enemyPlaneList.forEach((plane : Plane) => this.drawPlane(plane, false)) ;
+            enemyPlaneList.forEach((plane : EnemyPlane) => this.drawPlane(plane)) ;
 
             this.shotList.shotToDamagePlane(userPlaneList, enemyPlaneList) ;
         }
@@ -53,38 +56,36 @@ class Painter {
             }
         }) ;
         this.shotList.shotMove() ;
-        this.shotList.deleteShot() ;
-
         this.planeList?.unregisterPlane() ;
     }
 
-    private drawPlane( plane : Plane, userPlane : boolean ) {
+    private drawPlane( plane : Plane ) {
         const image = plane.getImg() ; 
         if( !image ) return ;
 
-        this.drawShotAndLogic(plane, userPlane) ;
+        this.drawShotAndLogic(plane) ;
         plane.move() ;
         const { x, y } = plane.position ;
         this.ctx?.drawImage(image, x, y, image.width, image.height) ;
     }
 
-    public drawShotAndLogic( plane : Plane, userPlane : boolean ) {
-        if( plane.checkShotStatusAction() && plane.wall ) {
+    public drawShotAndLogic( plane : Plane ) {
+        if( plane.checkShotStatusAction() && this.wall ) {
 
             const shotImgList = plane.getImgList() ;
 
-            const { shotPositionX, shotPositionY } = plane.getShotPosition(userPlane) ;
+            const { shotPositionX, shotPositionY } = plane.getShotPosition(plane instanceof UserPlane) ;
 
             if( shotImgList ) {
                 this.shotList.createShot(
                     shotPositionX,
                     shotPositionY,
-                    plane.wall,
+                    this.wall,
                     plane.getShotSize(),
                     plane.getShotSpeed(),
                     plane.getShotListNormalImageIndex(),
                     plane.getShotCollisionImageIndex(),
-                    userPlane,
+                    plane instanceof UserPlane,
                     shotImgList,
                     plane.getShotDamage()
                 ) ;