In this chapter, we will focus on practicing the decomposition skill. Decomposition is the process of breaking down a complex problem into smaller, more manageable parts. This practice will help you to think critically and solve problems efficiently.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
         pointer-events: none;
      }
      canvas {
        border: 1px solid black;
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        max-width: 500px;
        max-height: 500px;
      }
    </style>

    
    <script>
      window.addEventListener("error", (e) => {
        console.error("Catched ninja error: ", e);
        window.parent.document.dispatchEvent(new CustomEvent("error", { detail: e.error }));
      });
    </script>
    <script>
  const gameMap = [[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,3,0,0,3,0],[2,3,0,0,3,0],[0,0,0,0,0,0]];
</script>

    
    
    <script src="ninja.js"></script>
    

    <script type="module" crossorigin src="https://content-media-cdn.codefinity.com/courses/c55d26b5-f8e6-4c85-abd5-24fc0170a4ce/game/assets/index-CAGcPTns.js"></script>
    <link rel="stylesheet" crossorigin href="https://content-media-cdn.codefinity.com/courses/c55d26b5-f8e6-4c85-abd5-24fc0170a4ce/game/assets/index-TZrNw7dA.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
         pointer-events: none;
      }
      canvas {
        border: 1px solid black;
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        max-width: 500px;
        max-height: 500px;
      }
    </style>

    
    <script>
      window.addEventListener("error", (e) => {
        console.error("Catched ninja error: ", e);
        window.parent.document.dispatchEvent(new CustomEvent("error", { detail: e.error }));
      });
    </script>
    <script>
  const gameMap = [[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,3,0,0,3],[0,0,3,0,0,3],[0,0,0,0,0,0]];
</script>

    
    
    <script src="ninja.js"></script>
    

    <script type="module" crossorigin src="https://content-media-cdn.codefinity.com/courses/c55d26b5-f8e6-4c85-abd5-24fc0170a4ce/game/assets/index-CAGcPTns.js"></script>
    <link rel="stylesheet" crossorigin href="https://content-media-cdn.codefinity.com/courses/c55d26b5-f8e6-4c85-abd5-24fc0170a4ce/game/assets/index-TZrNw7dA.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Welcome to the Ninja Game Coding Course! This engaging and interactive course is designed to introduce you to the fundamentals of JavaScript programming through a fun and educational game. You'll guide a ninja through various challenges, using JavaScript to control movements and interact with objects like sushi. Starting with the basics, you'll learn how to navigate the map, pick up and place sushi, and gradually progress to more complex programming concepts such as functions, loops, and conditional statements. Each chapter offers hands-on practice to reinforce your learning, culminating in exciting challenges that test your skills. Whether you're a complete beginner or looking to sharpen your coding abilities, this course provides a comprehensive and enjoyable learning experience. Join us and become a coding ninja!

In the "Basic Controls" section, you'll be introduced to the foundational features of JavaScript through the engaging Ninja Game. You'll learn how to use JavaScript commands to control your ninja's movements and interactions on the grid, mastering essential functions like moving, picking up, and placing sushi. Through hands-on practice, you'll apply these skills to solve fun challenges, reinforcing your understanding of JavaScript's basic capabilities.

In the "Functions" section, you'll delve into the powerful JavaScript feature of creating and utilizing functions to streamline your code. You'll learn how to write functions to perform specific tasks, enhancing code reusability and clarity. By practicing decomposition, you'll break down complex problems into simpler functions, mastering the art of organized and efficient coding.

In the "Loops" section, you'll explore the essential JavaScript feature of loops, which allows you to execute repetitive tasks efficiently. You'll learn to implement both for loops and while loops, gaining the ability to automate actions and iterate over sequences. By mastering nested loops, you'll tackle more complex scenarios, enhancing your ability to write concise and powerful code.

In the "If-Else Statements" section, you'll learn how to use JavaScript's conditional logic to make decisions within your code. You'll explore how if-else statements allow your ninja to respond dynamically to different scenarios, enabling more intelligent and adaptable behavior. Through practical exercises, you'll apply these concepts to solve challenges, enhancing your ability to write responsive and decision-driven code.

In the "Challenges" section, you'll apply your JavaScript skills to tackle a series of engaging and complex problems. These challenges will test your understanding of loops, functions, and conditional logic as you guide your ninja to align columns, build letters, and traverse intricate patterns. By solving these puzzles, you'll refine your coding abilities and gain confidence in applying JavaScript to creative and real-world scenarios.

Ninja Game

Decomposition practice. Move column

Solution

Starter Map

Goal Map

Decomposition practice. Move column

Solution

Starter Map

Goal Map