🎮 Game Logic

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

🎯 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

• Runtime: Chrome
• Editor: Sublime Text

📚 Learning Resources

• 📕 Anatomy of a video game
• 📕 Implementing game control mechanisms
• 📕 2D breakout game using pure JavaScript
• 📕 JavaScript Canvas API
• 📕 Game development
• 📼 Game-Related Math

📄 License

MIT © Ambratolm