Skip to content

Commit

Permalink
Merge pull request #9 from HeesuKim0203/dev/shotImageUpdate
Browse files Browse the repository at this point in the history 
Dev/shot image update
  • Loading branch information
@HeesuKim0203
HeesuKim0203 authored Nov 21, 2023
2 parents 46fac97 + a2527e3 commit 0a6eb47
Show file tree
Hide file tree
Showing 57 changed files with 237 additions and 65 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "shooting_game",
"version": "0.1.0",
"version": "1.0.0",
"homepage": "https://planeshooinggame.com",
"private": true,
"dependencies": {
Expand Down
4 changes: 1 addition & 3 deletions src/page/home/Canvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,7 @@ const Canvas = ( props : CanvasProps ) => {
paint.initBackground() ;
paint.runAnimationFrame() ;

window.addEventListener('focus', (event) => {
window.location.reload() ;
}, false);
window.addEventListener('focus', (event) => window.location.reload(), false);

const game = new Game({ title : gameData.title, enemyPlaneImformationList : gameData.enemyPlaneList, wall : wall, painter : paint, enemyPlaneDataList : enemyPlaneList }) ;

Expand Down
43 changes: 43 additions & 0 deletions src/page/home/class/Game.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import Painter from "./Painter";
import { PlaneList, PlaneKind } from "./Plane"
import Wall from "./Wall"


const SCORE = 100 ;
const ENEMPLANE_START_POSITION_X = 1200 ;
const ENEMPLANE_START_POSITION_Y_MIN = 0 ;
const ENEMPLANE_START_POSITION_Y_MAX = 600 ;
Expand Down Expand Up @@ -35,6 +37,8 @@ export default class Game {
private enemyPlaneDataList : EnemyPlanLevelData[] = [] ;
private gameStatus : GameStatus = GameStatus.START ;
private planeList : PlaneList = new PlaneList() ;
public static enemyPlaneNum : number = 0 ;
public static userScore : number = 0 ;

constructor({
title,
Expand All @@ -57,6 +61,9 @@ export default class Game {
let time = 0 ;

this.enemyPlaneImformationList.forEach((enemyPlaneImportmation : EnemyPlaneImformation, index : number) => {

Game.enemyPlaneNum += enemyPlaneImportmation.num ;

for(let i = 0 ; i < enemyPlaneImportmation.num ; i++) {
const findIndex = this.enemyPlaneDataList.findIndex((enemyPlanData : EnemyPlanLevelData) => enemyPlanData.level === enemyPlaneImportmation.level) ;
const planeData = this.enemyPlaneDataList[findIndex].planeDate ;
Expand All @@ -77,4 +84,40 @@ export default class Game {
public end() {

}
}

export function gameOver() {
const gameEnd = document.getElementsByClassName('gameEnd')[0] as HTMLParagraphElement ;
gameEnd.className = gameEnd.className.replace('hidden', 'flex') ;

const gameOver = document.getElementsByClassName('gameOver')[0] as HTMLParagraphElement ;
gameOver.className = gameOver.className.replace('hidden', 'block') ;
}

export function gameClear() {
const gameEnd = document.getElementsByClassName('gameEnd')[0] as HTMLParagraphElement ;
gameEnd.className = gameEnd.className.replace('hidden', 'flex') ;

const gameOver = document.getElementsByClassName('gameClear')[0] as HTMLParagraphElement ;
gameOver.className = gameOver.className.replace('hidden', 'block') ;
}

export function setUserLifeHTML( life : number ) {
const userLife = document.getElementsByClassName('userLife')[0] as HTMLParagraphElement ;
userLife.innerText = `Life : ${life <= 0 ? 0 : life}` ;

if( life === 0 ) {
gameOver() ;
}
}

export function setUserScoreHTML( score : number ) {
Game.userScore += SCORE * score ;

const userScore = document.getElementsByClassName('userScore')[0] as HTMLParagraphElement ;
userScore.innerText = `Score : ${Game.userScore}` ;

if( Game.enemyPlaneNum !== 0 && Game.userScore === Game.enemyPlaneNum * SCORE ) {
gameClear() ;
}
}
105 changes: 62 additions & 43 deletions src/page/home/class/Plane.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import Painter from './Painter';
import Wall from './Wall'
import { Obj, Direction, size } from './util'

const SCORE = 100 ;
import { gameOver, gameClear, setUserLifeHTML, setUserScoreHTML } from './Game'

export type PlaneData = {
planeImageSrc : string
planeImageRunSrc : string
planeExpImageSrcList : string[]
speed : number
life : number
size : size
Expand All @@ -23,6 +23,12 @@ export enum PlaneKind {
ENEMYPLANE = 1
}

enum PlaneStatus {
NORAML = 0,
COLLISION = 1,
END = 2
}

enum ShotStatus {
STOP = 0,
ACTION = 1,
Expand All @@ -31,12 +37,15 @@ enum ShotStatus {
class Plane extends Obj {
// Plane Data
private id : number = 0 ;
private img : HTMLImageElement | null = null ;
private planeExpImgList : HTMLImageElement[] = [] ;
protected planeExpImgIndex : number = 0 ;
private img : HTMLImageElement = new Image() ;
private shotAction : ShotStatus = ShotStatus.STOP ;
private shotDelay : number = 1000 ;
private shotMappingPid : number = 0 ;
private size : size = { width : 0, height : 0, expWidth : 0, expHeight : 0 } ;
protected life : number = 0 ;
protected planeStatus : PlaneStatus = PlaneStatus.NORAML ;

// Shot Data
private shotImgList : HTMLImageElement[] | null = null ;
Expand All @@ -53,6 +62,7 @@ class Plane extends Obj {
positionY : number,
{
planeImageSrc,
planeExpImageSrcList,
size,
shotSize,
speed,
Expand All @@ -72,11 +82,19 @@ class Plane extends Obj {
this.size = size ;
this.life = life ;

this.img = new Image() ;
this.img.src = planeImageSrc ;
this.img.width = size.width ;
this.img.height = size.height ;

this.planeExpImgList = planeExpImageSrcList.map(( src : string, index : number ) => {
const img = new Image() ;
img.src = src ;
img.width = size.expWidth ;
img.height = size.expHeight ;

return img ;
}) ;

this.shotDamage = shotDamage ;
this.shotDelay = shotDelay ;
this.shotSpeed = shotSpeed ;
Expand All @@ -97,9 +115,7 @@ class Plane extends Obj {
return img ;
}) ;
}

public getId() { return this.id ; }
public getImg() { return this.img ; }
public getImgList() { return this.shotImgList ; }
public getShotStatus() { return this.shotAction ; }
public getShotDelay() { return this.shotDelay ; }
Expand All @@ -111,20 +127,43 @@ class Plane extends Obj {
public getLife() { return this.life ; }
public getShotDamage() { return this.shotDamage ; }
public getShotSize() { return this.shotSize ; }
public getPlaneStatus() { return this.planeStatus ; }
public getShotPosition( direction : boolean ) {

let shotPositionX ;

const middle = this.size.width ;

if( direction ) shotPositionX = this.position.x + middle ;
else shotPositionX = this.position.x - middle ;

const shotPositionY = this.position.y + (this.size.height / 2) - (this.shotSize.height / 2) ;

return { shotPositionX, shotPositionY }
return { shotPositionX, shotPositionY } ;
}
public getImg() {
let img : HTMLImageElement ;
switch( this.planeStatus ) {
case PlaneStatus.COLLISION :
// x, y update
if( this.planeExpImgIndex === 0 ) {
this.position.x = this.position.x - (this.size.expWidth - this.size.width) / 2 ;
this.position.y = this.position.y - (this.size.expWidth - this.size.height) / 2 ;
}
img = this.planeExpImgList[this.planeExpImgIndex] ;
this.planeExpImgIndex++ ;
// PlaneStatus End
if( this.planeExpImgIndex === this.planeExpImgList.length ) this.planeStatus = PlaneStatus.END ;
break ;
case PlaneStatus.NORAML :
img = this.img ;
break ;
case PlaneStatus.END :
default :
img = new Image() ;
break ;
}
return img ;
}
public setLife( life : number ) {
if( life === 0 ) this.planeStatus = PlaneStatus.COLLISION ;
this.life = life ;
}
public checkShotStatusAction() {
Expand All @@ -149,31 +188,14 @@ class Plane extends Obj {
clearInterval(this.shotMappingPid) ;
this.shotMappingPid = 0 ;
}

public gameEnd() {
const gameEnd = document.getElementsByClassName('gameEnd')[0] as HTMLParagraphElement ;
gameEnd.className = gameEnd.className.replace('hidden', 'flex') ;

const gameOver = document.getElementsByClassName('gameOver')[0] as HTMLParagraphElement ;
gameOver.className = gameOver.className.replace('hidden', 'block') ;
}

}

class UserPlane extends Plane {

public userLifeToHTML() {
const userLife = document.getElementsByClassName('userLife')[0] as HTMLParagraphElement ;
userLife.innerText = `Life : ${this.getLife()}` ;
}

public setLife( life : number ) {
setUserLifeHTML( life ) ;
if( life === 0 ) this.planeStatus = PlaneStatus.COLLISION ;
this.life = life ;
this.userLifeToHTML() ;

if( this.life === 0 ) {
this.gameEnd() ;
}
}

public keyDownToMoveMapping( event : KeyboardEvent ) : void {
Expand Down Expand Up @@ -251,7 +273,7 @@ class EnemyPlane extends Plane {

public move() {
try {
if( this.wall ) {
if( this.wall && this.planeStatus === PlaneStatus.NORAML ) {
if( this.direction.up ) {
if ( this.wall?.getTop() < this.position.y - this.speed ) {
this.position.y -= this.speed ;
Expand All @@ -265,10 +287,11 @@ class EnemyPlane extends Plane {
}

if( this.direction.left ) {
if ( this.wall?.getLeft() < this.position.x - this.speed ) {
this.position.x -= this.speed ;
}else {
this.gameEnd() ;
this.position.x -= this.speed ;
if( this.wall?.getLeft() > this.position.x - this.speed ) {
gameOver() ;
}else if( this.wall?.getLeft() > this.position.x + this.getSize().width ) {
this.planeStatus = PlaneStatus.END ;
}
}

Expand Down Expand Up @@ -341,18 +364,14 @@ class PlaneList {

public unregisterPlane() : void {
// User Plane
const notLifeUserPlane = this.userPlaneList.filter((plane : UserPlane) => ( plane.getLife() === 0 )) ;
const notLifeUserPlane = this.userPlaneList.filter((plane : UserPlane) => ( plane.getPlaneStatus() === PlaneStatus.END )) ;
this.userPlaneList = this.userPlaneList.filter((plane : UserPlane) => !notLifeUserPlane.includes(plane)) ;

// Enemy Plane
const notLifeEnemyPlane = this.enemyPlaneList.filter((plane : EnemyPlane) => ( plane.getLife() === 0 )) ;

this.score += SCORE * notLifeEnemyPlane.length ;

const userScore = document.getElementsByClassName('userScore')[0] as HTMLParagraphElement ;
userScore.innerText = `Score : ${this.score}`

const notLifeEnemyPlane = this.enemyPlaneList.filter((plane : EnemyPlane) => ( plane.getPlaneStatus() === PlaneStatus.END )) ;
this.enemyPlaneList = this.enemyPlaneList.filter((plane : EnemyPlane) => !notLifeEnemyPlane.includes(plane)) ;

setUserScoreHTML( notLifeEnemyPlane.length ) ;
}
}

Expand Down
6 changes: 5 additions & 1 deletion src/page/home/class/Shot.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,11 @@ export class Shot extends Obj {
return this.currentIndex = currentIndex ;
}

public setStateToCollison() { this.state = ShotStatus.COLLISION ; }
public setStateToCollison() {
this.position.x = this.position.x - (this.size.expWidth - this.size.width) / 2 ;
this.position.y = this.position.y - (this.size.expWidth - this.size.height) / 2 ;
this.state = ShotStatus.COLLISION ;
}
public deleteDetermining() {
if( this.imgList ) {
return this.imgList?.length === this.currentIndex ;
Expand Down
Loading

0 comments on commit 0a6eb47

Please sign in to comment.