Welcome to our simple 2D game project! This project demonstrates a basic implementation of a game using HTML for markup, CSS for styling, and JavaScript for interactivity. It's a fun and educational project suitable for beginners and enthusiasts alike.

• Introduction
• Features
• Demo
• How to Play
• Installation
• Code Explanation
• Contributing
• License
• GitHub Repository

This project is a simple 2D game built using HTML for markup, CSS for styling, and JavaScript for interactivity. The game aims to provide a fun experience while also serving as a learning tool for those interested in web development.

• Simple and intuitive gameplay
• Responsive design for various screen sizes
• Easy to understand codebase, suitable for beginners

You can find a live demo of the game here (replace with link to your live demo).

(replace with a screenshot or GIF of your game)

Playing the game is straightforward:

1. Use the arrow keys or WASD keys to control the player character.
2. Avoid obstacles and enemies.
3. Collect coins or power-ups to increase your score or abilities.
4. Reach the goal to win the game!

To run the game locally, follow these steps:

1. Clone this repository to your local machine.

   git clone https://github.com/CaseyOchieng/Toucan-Ninja.git
   

2. Navigate to the project directory.

   cd Toucan-Ninja
   

3. Open the index.html file in your web browser.

That's it! You should now be able to play the game locally on your machine.

<style>
  body {
    background: black;
  }
</style>
<canvas></canvas>

This code sets up the canvas element in the HTML file and defines a black background in the CSS.

<script src="./js/utils.js"></script>
<script src="./js/classes/CollisionBlock.js"></script>
<script src="./js/classes/Sprite.js"></script>
<script src="./js/classes/Player.js"></script>
<script src="./js/data/collisions.js"></script>
<script src="index.js"></script>

These script tags import necessary JavaScript files for the game, including utility functions, classes for game entities, and collision data.

const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')

canvas.width = 1024
canvas.height = 576

This section initializes the canvas and its context, setting its width and height.

const floorCollisions2D = []
for (let i = 0; i < floorCollisions.length; i  = 36) {
  floorCollisions2D.push(floorCollisions.slice(i, i   36))
}

const collisionBlocks = []
floorCollisions2D.forEach((row, y) => {
  row.forEach((symbol, x) => {
    if (symbol === 202) {
      collisionBlocks.push(
        new CollisionBlock({
          position: {
            x: x * 16,
            y: y * 16,
          },
        })
      )
    }
  })
})

This code segment processes collision data to create blocks for collision detection within the game environment.

const player = new Player({
  position: {
    x: 100,
    y: 300,
  },
  collisionBlocks,
  platformCollisionBlocks,
  imageSrc: './img/warrior/Idle.png',
  frameRate: 8,
  animations: {
    // Animation configurations
  },
})

This initializes the player character with starting position, collision data, sprite images, and animation configurations.

function animate() {
  window.requestAnimationFrame(animate)
  c.fillStyle = 'white'
  c.fillRect(0, 0, canvas.width, canvas.height)

  // Game rendering logic
}

animate()

This function sets up the animation loop for the game, updating and rendering game elements on each frame.

window.addEventListener('keydown', (event) => {
  // Keydown event handling for player controls
})

window.addEventListener('keyup', (event) => {
  // Keyup event handling for player controls
})

These event listeners handle keyboard input for controlling the player character.

Contributions are welcome! If you'd like to contribute to the project, feel free to open an issue or submit a pull request. For major changes, please open an issue first to discuss what you would like to change.

This project is licensed under the MIT License.

You can find the source code for this project on GitHub: Toucan Ninja Repository and feel free to play around with the code.