How Lonely Elephant Was Made

This page documents the process, code, and creative ideas behind the Lonely Elephant games. Use it as a guide to make your own fun web games!

1. Planning & Design

• Start with a simple, fun idea (e.g., an elephant collecting trees and making friends with birds).
• Sketch out the main gameplay loop and objectives.
• Decide on the art style (cartoon, playful, simple shapes).
• Break the game into features: movement, collecting, growth, birds, attacks, etc.

2. Coding the Game

• Use HTML for structure, CSS for style, and JavaScript (with Three.js for 3D) for logic and graphics.
• Organize code into functions: init(), createAnimal(), createTree(), animate(), etc.
• Use event listeners for controls (keydown, click).
• Keep your code modular and readable. Comment your logic!

3. Art & Animation

• Use simple shapes (spheres, cylinders, cones) for animals and trees.
• SVG is great for web illustrations (see the home page hero graphic).
• Animate with requestAnimationFrame and update positions/rotations each frame.
• Use color and playful proportions for a friendly look.

4. Adding Features

• Start simple (move, collect, grow), then add birds, attacks, water, enemies, and new areas.
• Use arrays to track objects (trees, birds, enemies).
• Make attacks and abilities modular so you can add more easily.
• Use dialog popups for tutorials and story.

5. Tips for Your Own Game

• Test often! Play your game and tweak what feels fun.
• Keep code and art simple at first. You can always add polish later.
• Share your game and get feedback from friends!
• Have fun and don't be afraid to make it silly or unique.

6. Example: Adding a New Attack

// Add to your attacks array
attacks.push({
  name: 'Tornado Bird',
  description: 'Birds spin and create a whirlwind!',
  unlockLevel: 10,
  effect: function(enemy) {
    enemy.stunned = true;
  }
});

7. Resources

• Three.js Documentation
• MDN JavaScript Guide
• CSS Tricks

8. Saving and Loading Progress

• The game constantly generates a compact code representing your progress (level, trees, birds, attacks, etc.).
• Copy this code from the Save/Load section in the menu to save your game.
• To resume, paste the code and click Load Game. Your progress will be restored!
• The code is a base64-encoded JSON string for easy sharing and security.