Porter un vieux jeu shoot'em up sur JavaScript à genoux

Il existe un ancien jouet LaserAge qui est écrit en Flash (sur le très ancien Macromedia Flash 4) et ne fonctionne que sous Windows. Dans mon enfance, je l'ai vraiment aimé, alors j'ai décidé de le porter pour l'âme, afin que vous puissiez jouer à partir du navigateur depuis tous les appareils.

Le but du jeu est de détruire les adversaires avec votre vaisseau spatial à différents niveaux et d'obtenir des bonus, si vous attrapez un bonus, l'arme s'améliore. Si une torpille ennemie frappe, l’arme du joueur est dégradée.

Lorsque tous les adversaires sont détruits à un niveau, vous passez au niveau suivant. Il y a 100 niveaux au total.

En termes de jeu, le niveau est une vague, et plusieurs vagues sont combinées en un grand niveau, qui est simplement un changement de fond, c.-à-d. seulement 4 grands niveaux dans chacun dont 25 vagues. Dans la dernière vague d'un niveau élevé, il y a généralement un boss - un adversaire avec une énorme importance de la vie et des armes puissantes.

Jeu de logique métier

Espace de jeu

C'est une zone rectangulaire ordinaire, dans la partie supérieure il y a des navires ennemis et en dessous du joueur.

, , .

.

( ) ( ).

, : ( ), .

1 (), 0 .

• —
  
  
  • — 1
  • — 2
  • — 3
• 
  
  
  • — 4
  • — 5
• — 6 7 ( )
• — 8 ( )
• — 9 ( , , )

:

• — 15-19 ( , , )
• — 20-24
• — 25-29
• — 30-34
• — 30-34
• — 35 — 39
• — 40+

, .

, . ().

:

"torpedo": {
    "sprite": "Bullet1_1.png", // 
    "isRandomIntensity": false, //     - true    - false
    "intensity": [
        // 0
        {
            "min": 50, //  
            "max": 200, //  
            "type": "pause" //pause -  , shoot -  ()
        },
        // 1
        {
            "min": 100,
            "max": 200,
            "type": "shoot"
        },
        {
            "min": 50,
            "max": 80,
            "type": "pause"
        },
        {
            "min": 30,
            "max": 100,
            "repeat": 2
        }
    ],
    "speed": 2.5, //
    "type": "bullet", // 
    "sound": "alienTorpedo"
}

, .

← →. .

( ).

, , , . .

JSON- :

"alien10": {
    "life": 35,
    "weapons": [
        {
            "weapon": "blueTorpedo",
            "position": {
                "x": -6,
                "y": 0
            }
        },
        {
            "weapon": "blueTorpedo",
            "position": {
                "x": 6,
                "y": 0
            }
        }
    ],
    "sprite": "AlienShip10_1.png",
    "movement": "horizontalFast",
    "killPoints": 2100
}

JSON- :

"horizontalFast": {
    "movements": [
        {
            "type": "freeMovement", //freeMovement - , followPlayer -    (  )
            "speedDelta": {
                "vx": -6,
                "vy": 0
            },
            "intensity": [ //    
                {
                    "min": 20,
                    "max": 150
                },
                {
                    "min": 150,
                    "max": 350
                }
            ]
        }
    ]
}

,

, . , ().

, . .

JSON- :

        "2": {
            "level": 1, 
            "enemies": [ //  
                {
                    "id": "alien1",
                    "position": {
                        "x": 200,
                        "y": 35
                    }
                },
                //...
                {
                    "id": "alien1",
                    "position": {
                        "x": 525,
                        "y": 40
                    }
                }
            ],
            "bonuses": [ //  
                {
                    "id": "bonus1",
                    "position": {
                        "x": 350,
                        "y": 10
                    }
                }
            ]
        },

JavaScript

JavaScript, Hexi JS: https://github.com/kittykatattack/hexi .

:

• (, )
• , ,
• 
  
  
  • -. JSON (, )
• (), -.

- TexturePacker

: https://github.com/kittykatattack/sound.js

:

:

Main

.

:

• resources — (, , json)
• sounds — : — , —
• gameScene — HexiJS
• game — Game
• hexi — HexiJS
• gameStorage — localStorage

:

• init() — HexiJS
• load() — (, , json)
• setup() — , ,
• playLoop() — ( , , , ).
• saveGame() —
• loadGame() —

:

Main.resources = [
        "images/environment1.png",
        "images/environment2.png",
        "images/environment3.png",
        "images/environment4.png",
        "images/interface.png",
        "images/life-icon.png",

        "images/ships-texture.json",
        "images/bullet-texture.json",

        "sounds/alien-torpedo-shoot.wav",
        "sounds/alien-red-plasma-shoot.wav",
        "sounds/hero-torpedo-shoot.wav",
        "sounds/explode.wav",
        "sounds/hero-green-plasma-shoot.wav",
        "sounds/alien-green-plasma-shoot.wav",
        "sounds/alien-blue-torpedo-shoot.wav",
        "sounds/alien-yellow-laser.wav",
        "sounds/pulse-plasma.wav",
        "sounds/laser.wav",

        "sounds/track0.ogg",
        "sounds/track1.ogg",
        "sounds/track2.ogg",
        "sounds/track3.ogg",
        "sounds/track4.ogg",

        "data/hero-configuration.json",
        "data/levels-configuration.json",
        "data/enemy-configuration.json",
        "data/ui-configuration.json",
    ];

Game

.

:

• level — . : { "wave": 1 // , "type": 1 }
• score — . : {"points": 0 }
• bulletsController — BulletsController.
• enemyController — EnemyController. ( .. )
• player — Player
• hexi — Hexi ()
• game — Game
• gameStorage — GameStorage

:

• clearShips() — ,
• setupLevel() — ( , , )
• nextLevel() —
• previousLevel() —
• forwardLevel() — ( 5)
• rewindLevel() — ( 5)
• restoreState(gameState: JSON) — gameState
• resetGame() — ( )
• update() —
• enemyDestroyed() —

GameStorage

.

:

• game — Game

:

• save() —
• load() —

InputDevice

: click touch , .

:

• game — Game

:

• init() — callback'
• loadTapped() — "Load"
• storeTapped() — "Store"
• resetTapped() — "Reset"
• pauseTapped() — "Pause"

Actor

.

:

• hexi — Hexi ()
• game — Game
• life —
• initialLife —
• sprite — Hexi.Sprite
• shipConfiguration —

:

• move() —
• update() —
• setPosition(position: {x, y}) —

WeaponedActor

( ) .

:

• automatedWeapons —
• canShoot —
• isWeaponShooting —

:

• startShoot() —
• stopShoot() —
• onShootStarted() — ,
• onShootStopped() — ,
• updateShooting() —

Enemy

.

:

• type —
• syncWeapons —
• movementEngine — MovementEngine

:

• setWeapon() —
• shootWithWeapon() —
• setLifeLine() —
• hit() — ()

MovementEngine

.

, . vx, vy . ( ).

:

• movementsConfiguration —
• firstMovementConfiguration —
• movementItensity —
• movementItensityCounter —
• movementItensitySlot —
• isBounceBottom — . false,

:

• setMovement() —
• updateMovement() —

Player

.

:

• weapons —
• collisionSprite — ( , )
• weaponLifeLevels —
• invisibilityCounter — ( , )

:

• upgrade() — (+1 )
• downgrade() — (+1 )
• shootWithLaser(currentWeapon, weapon) —
• shootWithBullets(currentWeapon, weapon) —
• setWeapon() —
• setLife(life: number) — ( )
• hitUpgrade(upgradeItem) —

Bonus

. .

:

• type —
• movementEngine — MovementEngine
• upgradeBonus —

:

• shootWithUpgrade(upgradeBonus: JSON) —

EnemyController

, , .

:

• enemies —
• bonuses —
• player —
• upgrades —

:

• isLevelCompleted() — ( , )
• update() —
• clear() — ,

BulletsController

(), .

:

• playerBullets —
• enemyBullets —
• explosionSplashes —
• playerLaser — ( ).

:

• update() — ,
• clear() — ,
• updatePlayerBullets() —
• updatePlayerLaser() —
• updateEnemyBullets() —
• updateExplosions() —

JavaScript.

, , .

, , ..

, !

!

http://laseroid.azurewebsites.net/ —

https://github.com/EntityFX/laseroid —