diff --git a/app-webclient/arcade/RowingGames.js b/app-webclient/arcade/RowingGames.js index 557c7c7..4394208 100644 --- a/app-webclient/arcade/RowingGames.js +++ b/app-webclient/arcade/RowingGames.js @@ -30,12 +30,11 @@ export function createRowingGames (rootComponent, clientWidth, clientHeight) { // todo: once there are multiple games, asset loading should be moved to the individual games const assets = '/assets' - const sprites = ['enemyBlack1', 'enemyBlue2', 'enemyGreen3', 'enemyRed4', 'enemyRed5', 'playerShip2_orange', - 'playerLife2_orange', 'spaceShips_004', 'spaceShips_006', 'spaceShips_007', 'spaceShips_009', 'star1', 'star2', - 'laserRed01', 'laserRed09', 'shield1'] + const sprites = ['enemyLight1', 'enemyLight2', 'enemyLight3', 'enemyLight4', 'enemyLight5', 'enemyMiddle1', 'enemyMiddle2', + 'enemyHeavy1', 'enemyHeavy2', 'playerShip', 'playerLife', 'star1', 'star2', 'laser1', 'laser2', 'shield'] for (const sprite of sprites) { - k.loadSprite(sprite, `${assets}/sprites/${sprite}@2x.png`) + k.loadSprite(sprite, `${assets}/sprites/${sprite}.png`) } k.loadSound('hit', `${assets}/sounds/explosionCrunch_000.ogg`) k.loadSound('shoot', `${assets}/sounds/laserSmall_001.ogg`) diff --git a/app-webclient/arcade/StrokeFighterBattleScene.js b/app-webclient/arcade/StrokeFighterBattleScene.js index ea7e505..1ce91fa 100644 --- a/app-webclient/arcade/StrokeFighterBattleScene.js +++ b/app-webclient/arcade/StrokeFighterBattleScene.js @@ -22,19 +22,20 @@ export default function StrokeFighterBattleScene (k, args) { const SPM_END = 28 const BULLET_SPEED = 1200 const ENEMY_SPEED = 50 - const PLAYER_SPEED = 480 + const PLAYER_SPEED = 500 + const PLAYER_ACCELERATION = 500 const PLAYER_LIFES = 3 const SPRITE_WIDTH = 90 const ENEMIES = [ - { sprite: 'enemyBlack1', health: 1 }, - { sprite: 'enemyBlue2', health: 1 }, - { sprite: 'enemyGreen3', health: 1 }, - { sprite: 'enemyRed4', health: 1 }, - { sprite: 'enemyRed5', health: 1 }, - { sprite: 'spaceShips_004', health: 3 }, - { sprite: 'spaceShips_006', health: 2 }, - { sprite: 'spaceShips_007', health: 3 }, - { sprite: 'spaceShips_009', health: 2 } + { sprite: 'enemyLight1', health: 1 }, + { sprite: 'enemyLight2', health: 1 }, + { sprite: 'enemyLight3', health: 1 }, + { sprite: 'enemyLight4', health: 1 }, + { sprite: 'enemyLight5', health: 1 }, + { sprite: 'enemyMiddle1', health: 2 }, + { sprite: 'enemyMiddle2', health: 2 }, + { sprite: 'enemyHeavy1', health: 3 }, + { sprite: 'enemyHeavy2', health: 3 } ] let trainingTime = args?.trainingTime || 0 @@ -58,16 +59,17 @@ export default function StrokeFighterBattleScene (k, args) { } const player = k.add([ - k.sprite('playerShip2_orange'), + k.sprite('playerShip'), k.scale(0.5), k.area(), k.pos(k.width() / 2, k.height() - 64), - k.origin('center') + k.origin('center'), + acceleration() ]) if (args?.gameState === 'LOST') { const shield = k.add([ - k.sprite('shield1'), + k.sprite('shield'), k.scale(0.5), k.area(), k.opacity(0.4), @@ -87,17 +89,29 @@ export default function StrokeFighterBattleScene (k, args) { }) } - function moveLeft (speed) { - player.move(-speed, 0) - if (player.pos.x < 0) { - player.pos.x = 0 - } - } - - function moveRight (speed) { - player.move(speed, 0) - if (player.pos.x > k.width()) { - player.pos.x = k.width() + function acceleration () { + return { + add () { + this.acceleration = 0 + this.speed = 0 + }, + update () { + this.speed = this.speed + this.acceleration * k.dt() + // do not exceed max speed + this.speed = this.speed > 0 ? Math.min(this.speed, PLAYER_SPEED) : Math.max(this.speed, -PLAYER_SPEED) + this.move(this.speed, 0) + // do not move beyond the screen borders + if (this.pos.x < 0) { + this.pos.x = 0 + this.acceleration = 0 + this.speed = 0 + } + if (this.pos.x > k.width()) { + this.pos.x = k.width() + this.acceleration = 0 + this.speed = 0 + } + } } } @@ -132,17 +146,31 @@ export default function StrokeFighterBattleScene (k, args) { }) player.onUpdate(() => { - const tolerance = 5 + const tolerance = 0 const closestEnemy = k.get('enemy').reduce((prev, enemy) => { return enemy?.pos.y > prev?.pos.y ? enemy : prev }, { pos: { y: 0 } }) if (closestEnemy?.pos?.x) { - const distance = Math.abs(closestEnemy.pos.x - player.pos.x) - // slow down a bit if we are close to the enemy - const speed = distance < 100 ? distance / 100 * PLAYER_SPEED : PLAYER_SPEED + const distance = closestEnemy.pos.x - player.pos.x + // distance in pixel to stop the spaceship with full break throttle + const stopDistance = Math.pow(player.speed, 2) / (2 * PLAYER_ACCELERATION) * (player.speed < 0 ? -1.1 : 1.1) + // if we are on the left side of enemy if (closestEnemy.pos.x > player.pos.x + tolerance) { - moveRight(speed) + if (distance > stopDistance) { accelerateRight() } else { accelerateLeft() } + // if we are on the right side of enemy } else if (closestEnemy.pos.x < player.pos.x - tolerance) { - moveLeft(speed) - } + if (distance < stopDistance) { accelerateLeft() } else { accelerateRight() } + // otherwise we are directly aligned to enemy (with tolerance) + } else { stop() } + // if there is no enemy, make sure we don't move + } else { stop() } + function accelerateLeft () { + player.acceleration = -PLAYER_ACCELERATION + } + function accelerateRight () { + player.acceleration = PLAYER_ACCELERATION + } + function stop () { + player.acceleration = 0 + player.speed = 0 } }) @@ -151,7 +179,7 @@ export default function StrokeFighterBattleScene (k, args) { k.wait(k.rand(n * 0.1), () => { for (let i = 0; i < 2; i++) { k.add([ - k.sprite('laserRed09'), + k.sprite('laser2'), k.pos(pos.sub(0, 10)), k.scale(k.vec2(0.25)), k.lifespan(0.1), @@ -165,7 +193,7 @@ export default function StrokeFighterBattleScene (k, args) { function spawnBullet (pos) { k.add([ - k.sprite('laserRed01'), + k.sprite('laser1'), k.scale(0.5), k.area(), k.pos(pos), @@ -272,7 +300,7 @@ export default function StrokeFighterBattleScene (k, args) { // todo: would want to draw these on the "ui", but not sure on how to delete them then... for (let i = 1; i <= playerLifes; i++) { k.add([ - k.sprite('playerLife2_orange'), + k.sprite('playerLife'), k.scale(0.5), k.pos(k.width() - i * 40, 10), k.z(100), diff --git a/app-webclient/arcade/StrokeFighterEndScene.js b/app-webclient/arcade/StrokeFighterEndScene.js index 0330ec6..0253c81 100644 --- a/app-webclient/arcade/StrokeFighterEndScene.js +++ b/app-webclient/arcade/StrokeFighterEndScene.js @@ -34,7 +34,7 @@ export default function StrokeFighterEndScene (k, args) { ]) } k.add([ - k.sprite('playerShip2_orange'), + k.sprite('playerShip'), k.scale(0.5), k.pos(k.width() / 2, 320), k.origin('center') diff --git a/app-webclient/arcade/StrokeFighterStartScene.js b/app-webclient/arcade/StrokeFighterStartScene.js index 8a96d52..bc7eba8 100644 --- a/app-webclient/arcade/StrokeFighterStartScene.js +++ b/app-webclient/arcade/StrokeFighterStartScene.js @@ -22,7 +22,7 @@ export default function StrokeFighterStartScene (k, args) { const shipsPos = k.vec2(520, 240) const ship1 = k.add([ - k.sprite('playerShip2_orange'), + k.sprite('playerShip'), k.scale(0.5), k.pos(shipsPos), k.origin('center') @@ -30,7 +30,7 @@ export default function StrokeFighterStartScene (k, args) { addBullet(ship1.pos.sub(0, 65)) const ship2 = k.add([ - k.sprite('playerShip2_orange'), + k.sprite('playerShip'), k.scale(0.5), k.pos(shipsPos.add(0, 140)), k.origin('center') @@ -39,7 +39,7 @@ export default function StrokeFighterStartScene (k, args) { addBullet(ship2.pos.sub(-20, 40)) const ship3 = k.add([ - k.sprite('playerShip2_orange'), + k.sprite('playerShip'), k.scale(0.5), k.pos(shipsPos.add(0, 280)), k.origin('center') @@ -67,7 +67,7 @@ export default function StrokeFighterStartScene (k, args) { function addBullet (pos) { k.add([ - k.sprite('laserRed01'), + k.sprite('laser1'), k.scale(0.5), k.pos(pos), k.origin('center') diff --git a/app-webclient/assets/sprites/spaceShips_004@2x.png b/app-webclient/assets/sprites/enemyHeavy1.png similarity index 100% rename from app-webclient/assets/sprites/spaceShips_004@2x.png rename to app-webclient/assets/sprites/enemyHeavy1.png diff --git a/app-webclient/assets/sprites/spaceShips_007@2x.png b/app-webclient/assets/sprites/enemyHeavy2.png similarity index 100% rename from app-webclient/assets/sprites/spaceShips_007@2x.png rename to app-webclient/assets/sprites/enemyHeavy2.png diff --git a/app-webclient/assets/sprites/enemyBlack1@2x.png b/app-webclient/assets/sprites/enemyLight1.png similarity index 100% rename from app-webclient/assets/sprites/enemyBlack1@2x.png rename to app-webclient/assets/sprites/enemyLight1.png diff --git a/app-webclient/assets/sprites/enemyBlue2@2x.png b/app-webclient/assets/sprites/enemyLight2.png similarity index 100% rename from app-webclient/assets/sprites/enemyBlue2@2x.png rename to app-webclient/assets/sprites/enemyLight2.png diff --git a/app-webclient/assets/sprites/enemyGreen3@2x.png b/app-webclient/assets/sprites/enemyLight3.png similarity index 100% rename from app-webclient/assets/sprites/enemyGreen3@2x.png rename to app-webclient/assets/sprites/enemyLight3.png diff --git a/app-webclient/assets/sprites/enemyRed4@2x.png b/app-webclient/assets/sprites/enemyLight4.png similarity index 77% rename from app-webclient/assets/sprites/enemyRed4@2x.png rename to app-webclient/assets/sprites/enemyLight4.png index 1599254..e867769 100644 Binary files a/app-webclient/assets/sprites/enemyRed4@2x.png and b/app-webclient/assets/sprites/enemyLight4.png differ diff --git a/app-webclient/assets/sprites/enemyRed5@2x.png b/app-webclient/assets/sprites/enemyLight5.png similarity index 100% rename from app-webclient/assets/sprites/enemyRed5@2x.png rename to app-webclient/assets/sprites/enemyLight5.png diff --git a/app-webclient/assets/sprites/spaceShips_006@2x.png b/app-webclient/assets/sprites/enemyMiddle1.png similarity index 100% rename from app-webclient/assets/sprites/spaceShips_006@2x.png rename to app-webclient/assets/sprites/enemyMiddle1.png diff --git a/app-webclient/assets/sprites/spaceShips_009@2x.png b/app-webclient/assets/sprites/enemyMiddle2.png similarity index 100% rename from app-webclient/assets/sprites/spaceShips_009@2x.png rename to app-webclient/assets/sprites/enemyMiddle2.png diff --git a/app-webclient/assets/sprites/laserRed01@2x.png b/app-webclient/assets/sprites/laser1.png similarity index 100% rename from app-webclient/assets/sprites/laserRed01@2x.png rename to app-webclient/assets/sprites/laser1.png diff --git a/app-webclient/assets/sprites/laserRed09@2x.png b/app-webclient/assets/sprites/laser2.png similarity index 100% rename from app-webclient/assets/sprites/laserRed09@2x.png rename to app-webclient/assets/sprites/laser2.png diff --git a/app-webclient/assets/sprites/playerLife2_orange@2x.png b/app-webclient/assets/sprites/playerLife.png similarity index 100% rename from app-webclient/assets/sprites/playerLife2_orange@2x.png rename to app-webclient/assets/sprites/playerLife.png diff --git a/app-webclient/assets/sprites/playerShip2_orange@2x.png b/app-webclient/assets/sprites/playerShip.png similarity index 100% rename from app-webclient/assets/sprites/playerShip2_orange@2x.png rename to app-webclient/assets/sprites/playerShip.png diff --git a/app-webclient/assets/sprites/shield1@2x.png b/app-webclient/assets/sprites/shield.png similarity index 100% rename from app-webclient/assets/sprites/shield1@2x.png rename to app-webclient/assets/sprites/shield.png diff --git a/app-webclient/assets/sprites/star1@2x.png b/app-webclient/assets/sprites/star1.png similarity index 100% rename from app-webclient/assets/sprites/star1@2x.png rename to app-webclient/assets/sprites/star1.png diff --git a/app-webclient/assets/sprites/star2@2x.png b/app-webclient/assets/sprites/star2.png similarity index 100% rename from app-webclient/assets/sprites/star2@2x.png rename to app-webclient/assets/sprites/star2.png