Skip to content

practical-works/game-logic

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

40 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŽฎ Game Logic

Web HTML5 JavaScript

This is a set of examples implementing some useful simple common game development related logic.
It features some techniques for game core logic structuring, layout manipulation, control handling, collision detection, and data calculation.

๐ŸŒ View Live

Screenshot1 Screenshot2

๐ŸŽฏ Objectives

  • โฌ› Base:
    • Define and render game screen.
    • Create and run game loop.
    • Define game object.
    • Render ractangle game object.
    • Render text game object.
    • Render image (sprite) game object.
    • Render animation from multiple images.
    • Render animation from single image (spritesheet).
  • ๐Ÿ“ Layout:
    • Define size (width and height) of game object.
    • Define position (x and y) of game object.
    • Define hotspot (x and y) of game object.
    • Handle hotspot-based positioning of game object.
    • Define and handle parent-child hierarchy between game objects.
    • Perform relative hierarchical positioning of game objects.
    • Center position and hotspot of game object.
    • Align game objects in horizontal and vertical line.
    • Align game objects in grid.
  • โŒจ๏ธ Control:
    • Handle keyboard input.
    • Read keyboard input always.
    • Read keyboard input on first key press only.
    • Handle mouse input.
    • Move game object based on input (keyboard and mouse).
  • ๐Ÿ’ฅ Collision:
    • Detect point collision between game objects.
    • Detect rectangle collision between game objects.
    • Stop moving game object based on collision.
    • Detect distance between game objects.
  • ๐Ÿ’ฝ Data:
    • Define game player data.
    • Calculate health percentage of player.
    • Calculate experience of player based on level.
    • Move game object with tween animation effect.
  • ๐Ÿƒ Movement:
    • Implement basic top-down movement (eight directions movement).
    • Add speed feature to top-down movement.
    • Add acceleration and deceleration features to top-down movement.
    • Implement platformer movement (side-scroller movement).
    • Add speed, acceleration, and deceleration to platformer movement.
    • Add basic fixed-height jump feature to platformer movement.
    • Add variable-height jump feature.
    • Add multiple jump (double jump or more) feature.
  • ๐ŸŽฆ Viewport:
    • Define layer and z-index for game objects.
    • Render multiple layers (background and foreground) of game objects.
    • Define scene game object with virtual size (width and height).
    • Define camera (viewport) game object.
    • Move camera and scroll across scene.
    • Attain parallax effect between layers.

๐ŸŽ‡ Examples

Example 0

โ–ถ๏ธ Run Game 0

This is the main example that showcases all of the base, layout, control, collision, data, and movement/top-down objectives described above.

To fully check out this example:

  • Drag any object with ๐Ÿ–ฑ๏ธ left mouse button.
  • Move ๐Ÿ˜บ actor object in eight directions with โŒจ๏ธ arrow keys.
  • Move โ–  map object in eight directions with โŒจ๏ธ wasd keys.
  • Move ๐Ÿ’€ enemy object to cursor's location with โŒจ๏ธ space key.
  • Collide ๐Ÿ˜บ actor and ๐Ÿ’€ enemy objects to decrease โค๏ธ health bar.
  • Collide ๐Ÿ˜บ actor and ๐ŸŒพ bottom-field to increase โค๏ธ health bar.
  • Collide ๐Ÿ˜บ actor and ๐ŸŒพ top-field to increase ๐Ÿ experience bar.
  • See ๐Ÿญ mouse cursor coordinates in bottom-right of game screen.
  • See โœˆ velocity and โœœ direction of movement (on x and y axis) in top-left of game screen.

Example 1

โ–ถ๏ธ Run Game 1

This example showcases the movement/platformer objectives described above.

To fully check out this example:

  • Move ๐Ÿ˜บ actor object right or left with โŒจ๏ธ arrow keys.
  • Make Jump ๐Ÿ˜บ actor object with โŒจ๏ธ space key.
  • Try multiple jumps in air.
  • See โœˆ velocity and โœœ direction of movement (on x and y axis), and โ†‘ jumps count (per maximum jumps) in top-left of game screen.

๐Ÿš€ Development

๐Ÿ Setup

  1. Clone the repository:

    cd somewhere
    git clone https://github.com/practical-works/game-logic.git
    cd game-logic
  2. Run an HTTP server (using any tool of your choice) in the root folder:

    For example, using HTTP-Server, in the root folder, you can run:

    http-server -c-1

    ๐Ÿ’ก This will by default run a local server on http://localhost:8080.
    ๐Ÿ’ก The -c-1 flag will prevent caching.

๐Ÿญ Environment

๐Ÿ“š Learning Resources

๐Ÿ“„ License

MIT ยฉ Ambratolm