← Back to Phase 2 Phase 3: JavaScript Programming Project Ideas →

⚡ Phase 3: JavaScript Programming

Real Code - Professional Programming!

Enderman with JavaScript Code

🎓 Welcome to Professional Development!

Congratulations on making it to Phase 3! You've mastered the basics with Command Blocks and learned visual programming with MakeCode. Now it's time to code like a professional developer!

🚀 You're Ready to Graduate!

In this phase, you'll:

  • ✅ Use Visual Studio Code - the same tool millions of professional developers use
  • ✅ Write JavaScript code from scratch
  • ✅ Create behavior packs that run on your family's Minecraft server
  • ✅ Learn skills that work for websites, apps, games, and more
  • ✅ Build a foundation for a future career in programming
💡 Good News: You already know JavaScript! Everything you did in MakeCode was JavaScript. You saw it when you clicked the "JavaScript" toggle. Now you'll write it directly in a professional code editor!

Why Visual Studio Code?

Setting Up Visual Studio Code

🎯 What We're Building: A complete professional development environment where you can write JavaScript, create Minecraft behavior packs, and deploy them to your server!

Step 1: Install Visual Studio Code

  1. Go to code.visualstudio.com
  2. Click "Download for Windows" (or your operating system)
  3. Run the installer (VSCodeUserSetup-x64-*.exe)
  4. Follow the installation wizard:
    • Accept the license agreement
    • Choose installation location (default is fine)
    • ✅ Check: "Add to PATH" (important!)
    • ✅ Check: "Create a desktop icon" (convenient)
    • ✅ Check: "Register Code as an editor for supported file types"
  5. Click "Install" and wait for it to complete
  6. Click "Finish" and launch VS Code!
✅ VS Code Installed! You now have the same tool professional developers use!

Step 2: Install Essential Extensions

Extensions add special features to VS Code. Let's install the ones for Minecraft development:

  1. Open VS Code
  2. Click the Extensions icon in the left sidebar (or press Ctrl+Shift+X)
  3. Search for and install these extensions:

Required Extensions:

  1. "Blockception's Minecraft Bedrock Development"
    • Search: "Blockception Minecraft"
    • Publisher: Blockception
    • Click "Install"
    • What it does: Autocomplete, syntax highlighting, validation for Minecraft code
  2. "JavaScript (ES6) code snippets"
    • Search: "JavaScript ES6 snippets"
    • Publisher: charalampos karypidis
    • Click "Install"
    • What it does: Quick shortcuts for common JavaScript code

Recommended Extensions (Optional but Helpful):

  1. "Prettier - Code formatter" - Makes your code look professional
  2. "Error Lens" - Shows errors inline as you type
  3. "Material Icon Theme" - Pretty file icons

Step 3: Create Your First Behavior Pack

Behavior packs are how we add custom JavaScript to Minecraft. Let's create one!

3.1: Find Your Minecraft Folder

First, we need to know where Minecraft stores behavior packs:

%localappdata%\Packages\Microsoft.MinecraftUWP_8wekyb3d8bbwe\LocalState\games\com.mojang\development_behavior_packs

How to get there:

  1. Press Windows Key + R to open Run dialog
  2. Paste the path above
  3. Press Enter
  4. You're in the behavior packs folder!
💡 Pro Tip: Bookmark this folder! You'll use it a lot. Right-click the folder → "Pin to Quick access"

3.2: Create Your Pack Folder

  1. In the development_behavior_packs folder, create a new folder
  2. Name it: MyFirstPack (no spaces!)
  3. Open VS Code
  4. Click "File → Open Folder"
  5. Navigate to and open your MyFirstPack folder

3.3: Create the Pack Structure

In VS Code, create these files and folders:

📁 Your folder structure should look like this: 
MyFirstPack/
├── manifest.json
├── pack_icon.png
└── scripts/
    └── main.js

To create files in VS Code:

  1. Right-click in the Explorer panel (left side)
  2. Choose "New File" or "New Folder"
  3. Type the name and press Enter

3.4: Create manifest.json

This file tells Minecraft about your pack. Copy this code into manifest.json:

{ "format_version": 2, "header": { "name": "My First Behavior Pack", "description": "Learning JavaScript with VS Code!", "uuid": "PUT-YOUR-UUID-HERE-1234", "version": [1, 0, 0], "min_engine_version": [1, 20, 0] }, "modules": [ { "type": "data", "uuid": "PUT-DIFFERENT-UUID-HERE-5678", "version": [1, 0, 0] }, { "type": "script", "language": "javascript", "uuid": "PUT-THIRD-UUID-HERE-9012", "entry": "scripts/main.js", "version": [1, 0, 0] } ], "dependencies": [ { "module_name": "@minecraft/server", "version": "1.8.0" } ] }
⚠️ Important: Replace the three "PUT-YOUR-UUID-HERE" placeholders with actual UUIDs!

How to generate UUIDs:
  • Go to uuidgenerator.net
  • Click "Generate UUID"
  • Copy and paste into manifest.json
  • Generate 3 different UUIDs (one for each placeholder)

3.5: Create main.js

This is where your JavaScript code goes! Create scripts/main.js with this starter code:

import { world } from "@minecraft/server"; // This runs when the world starts world.afterEvents.worldInitialize.subscribe(() => { console.log("My behavior pack loaded successfully!"); }); // Example: Say hello when player joins world.afterEvents.playerSpawn.subscribe((event) => { const player = event.player; player.sendMessage("§aWelcome! This pack was coded in VS Code!"); }); // Example: Chat command world.beforeEvents.chatSend.subscribe((event) => { const player = event.sender; const message = event.message; if (message === "!hello") { event.cancel = true; // Don't show the command in chat player.sendMessage("§bHello from JavaScript!"); } });
🎉 You just wrote professional JavaScript! Notice how VS Code gives you colored syntax highlighting and autocomplete suggestions!

Step 4: Test Your Pack in Minecraft

  1. Open Minecraft Bedrock Edition
  2. Create a new world (or open existing)
  3. Before creating, click "Behavior Packs"
  4. You should see "My First Behavior Pack" in "Available" packs
  5. Click it and then click "Activate"
  6. Make sure "Experiments → Beta APIs" is turned ON
  7. Make sure "Cheats" are enabled
  8. Create/open the world
  9. Type !hello in chat - you should see your message!
✅ IT WORKS! You're now coding Minecraft with a professional IDE!

JavaScript Basics

Comparing Blocks to JavaScript

Let's see how MakeCode blocks translate to JavaScript code:

Example 1: Placing a Block

In Blocks: You drag a "place stone at position" block

In JavaScript:

blocks.place(STONE, pos(0, 0, 0))

Example 2: On Player Walk Event

In Blocks: You use the "on player walk" event block

In JavaScript:

player.onTravelled(TravelMethod.Walk, function() { // Your code here })
🤔 Understanding the Code:
  • player.onTravelled - The event (like the event block)
  • TravelMethod.Walk - What kind of travel (walking)
  • function() { } - The code to run (what goes inside the block)
  • // - Comments (notes to yourself, ignored by computer)

Your First JavaScript Program

Project: Rainbow Trail (JavaScript Version)

Remember the rainbow trail from Phase 2? Let's write it in JavaScript!

// When the player walks, place a colored block player.onTravelled(TravelMethod.Walk, function() { blocks.place(DIAMOND_BLOCK, pos(0, -1, 0)) })

Make It Better: Random Colors!

// Variable to store our color let colorChoice = 0 // When player walks player.onTravelled(TravelMethod.Walk, function() { // Pick a random number between 0 and 5 colorChoice = randint(0, 5) // Choose block based on the number if (colorChoice == 0) { blocks.place(RED_WOOL, pos(0, -1, 0)) } else if (colorChoice == 1) { blocks.place(BLUE_WOOL, pos(0, -1, 0)) } else if (colorChoice == 2) { blocks.place(GREEN_WOOL, pos(0, -1, 0)) } else if (colorChoice == 3) { blocks.place(YELLOW_WOOL, pos(0, -1, 0)) } else if (colorChoice == 4) { blocks.place(PURPLE_WOOL, pos(0, -1, 0)) } else { blocks.place(ORANGE_WOOL, pos(0, -1, 0)) } })
🎓 New Concepts Here:
  • let - Creates a variable (like making a variable in MakeCode)
  • = - Assigns a value to a variable
  • randint(0, 5) - Random number between 0 and 5
  • if/else if/else - Making decisions (conditionals)
  • == - Checks if two things are equal

JavaScript Fundamentals

1. Variables

Variables store information. Think of them as labeled boxes:

// Creating variables let playerScore = 0 let playerName = "Steve" let isGameActive = true let playerHealth = 20.5 // Changing variables playerScore = playerScore + 10 // Add 10 to score playerScore += 10 // Shorthand way to add playerScore++ // Add 1 (increment)
Variable Types:
  • Numbers: 0, 42, -5, 3.14
  • Strings: "Hello", 'world' (text in quotes)
  • Booleans: true or false
  • Arrays: [1, 2, 3, 4] (lists of things)

2. Functions

Functions are reusable blocks of code:

// Define a function function buildTower(height) { for (let i = 0; i < height; i++) { blocks.place(STONE, pos(0, i, 0)) } } // Use the function buildTower(10) // Builds 10 blocks tall buildTower(5) // Builds 5 blocks tall

3. Loops

Loops repeat code multiple times:

// For loop - repeat a specific number of times for (let i = 0; i < 10; i++) { blocks.place(STONE, pos(i, 0, 0)) } // While loop - repeat while condition is true let count = 0 while (count < 5) { player.say("Count: " + count) count++ }
🤔 Understanding For Loops:
  • let i = 0 - Start at 0
  • i < 10 - Keep going while i is less than 10
  • i++ - Add 1 to i each time
So this loop runs 10 times: i = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

4. Conditionals (If/Else)

Make decisions in your code:

let score = 75 if (score >= 90) { player.say("Amazing!") } else if (score >= 70) { player.say("Good job!") } else if (score >= 50) { player.say("Not bad!") } else { player.say("Keep trying!") }

5. Arrays (Lists)

Store multiple values in one variable:

// Create an array let colors = [RED_WOOL, BLUE_WOOL, GREEN_WOOL, YELLOW_WOOL] // Access items by index (starts at 0) blocks.place(colors[0], pos(0, 0, 0)) // Places red wool // Loop through an array for (let i = 0; i < colors.length; i++) { blocks.place(colors[i], pos(i, 0, 0)) } // Add to array colors.push(PURPLE_WOOL)

Minecraft-Specific JavaScript

Events

React to things happening in the game:

// When player walks player.onTravelled(TravelMethod.Walk, function() { // Your code }) // When player breaks a block player.onItemInteracted(ItemType.DiamondPickaxe, function() { // Your code }) // Chat commands player.onChat("heal", function() { player.execute("effect @s instant_health 1 255") }) // When a block is broken blocks.onBlockBroken(STONE, function() { // Your code })

Placing & Breaking Blocks

// Place a single block blocks.place(DIAMOND_BLOCK, pos(10, 64, 10)) // Fill an area blocks.fill( STONE, pos(0, 0, 0), pos(10, 10, 10), FillOperation.Replace ) // Clone an area blocks.clone( pos(0, 0, 0), pos(10, 10, 10), pos(20, 0, 0), CloneMask.Replace, CloneMode.Normal )

Positions

// Absolute position let position1 = world(100, 64, 200) // Relative position let position2 = pos(0, -1, 0) // Below player // Get player position let playerPos = player.position() // Calculate new position let newPos = positions.add(playerPos, pos(5, 0, 0))

Spawning Mobs

// Spawn a single mob mobs.spawn(PIG, pos(0, 0, 0)) // Spawn multiple mobs in a circle for (let i = 0; i < 8; i++) { let angle = (i * 45) * Math.PI / 180 // Convert degrees to radians let x = Math.cos(angle) * 5 let z = Math.sin(angle) * 5 mobs.spawn(CHICKEN, pos(x, 0, z)) }

Practical Projects

Project 1: Building Assistant

// Build a house with one command! player.onChat("house", function() { // Floor blocks.fill(STONE, pos(-5, -1, -5), pos(5, -1, 5), FillOperation.Replace) // Walls blocks.fill(PLANKS_OAK, pos(-5, 0, -5), pos(5, 4, 5), FillOperation.Outline) // Clear inside (air) blocks.fill(AIR, pos(-4, 0, -4), pos(4, 3, 4), FillOperation.Replace) // Roof blocks.fill(PLANKS_SPRUCE, pos(-5, 5, -5), pos(5, 5, 5), FillOperation.Replace) // Door blocks.fill(AIR, pos(0, 0, -5), pos(0, 1, -5), FillOperation.Replace) // Windows blocks.place(GLASS, pos(-5, 2, 0)) blocks.place(GLASS, pos(5, 2, 0)) player.say("House built!") })

Project 2: Treasure Hunt Game

let treasureLocation = null let gameActive = false // Start game player.onChat("start", function() { // Random location let x = randint(-50, 50) let z = randint(-50, 50) treasureLocation = world(x, 64, z) // Place treasure (invisible to player) blocks.place(DIAMOND_BLOCK, treasureLocation) gameActive = true player.say("Treasure hidden! Find it!") }) // Give hints while walking player.onTravelled(TravelMethod.Walk, function() { if (gameActive) { let currentPos = player.position() let distance = positions.distance(currentPos, treasureLocation) if (distance < 5) { player.say("VERY HOT!") } else if (distance < 15) { player.say("Hot!") } else if (distance < 30) { player.say("Warm") } else { player.say("Cold") } } }) // Win condition blocks.onBlockBroken(DIAMOND_BLOCK, function() { if (gameActive) { player.say("YOU FOUND IT! You win!") gameActive = false } })

Project 3: Super Powers

// Jump boost when holding an item player.onChat("superjump", function() { player.execute("effect @s jump_boost 60 5") player.say("Super jump activated for 60 seconds!") }) // Speed boost player.onChat("speed", function() { player.execute("effect @s speed 60 3") player.say("Super speed activated!") }) // Night vision player.onChat("nightvision", function() { player.execute("effect @s night_vision 300 1") player.say("Night vision activated!") }) // Combo power player.onChat("superhero", function() { player.execute("effect @s jump_boost 120 5") player.execute("effect @s speed 120 3") player.execute("effect @s resistance 120 2") player.say("SUPERHERO MODE ACTIVATED!") })

Advanced Concepts

Object-Oriented Programming

Create reusable "templates" for things:

// Define a class for buildings class Building { constructor(width, height, depth, material) { this.width = width this.height = height this.depth = depth this.material = material } build(location) { blocks.fill( this.material, location, positions.add(location, pos(this.width, this.height, this.depth)), FillOperation.Replace ) } } // Use the class let smallHouse = new Building(5, 3, 5, PLANKS_OAK) smallHouse.build(pos(0, 0, 0)) let tower = new Building(3, 20, 3, STONE) tower.build(pos(10, 0, 0))

Error Handling

Handle errors gracefully:

player.onChat("safeteleport", function(x, y, z) { try { // Try to teleport player.teleport(world(x, y, z)) player.say("Teleported successfully!") } catch (error) { player.say("Oops! Couldn't teleport there.") } })

Timers and Delays

// Run code after a delay player.onChat("countdown", function() { player.say("3...") setTimeout(function() { player.say("2...") }, 1000) // 1 second setTimeout(function() { player.say("1...") }, 2000) // 2 seconds setTimeout(function() { player.say("GO!") }, 3000) // 3 seconds }) // Repeat code periodically let timer = setInterval(function() { player.say("10 seconds passed!") }, 10000) // Every 10 seconds // Stop the timer player.onChat("stop", function() { clearInterval(timer) })

Best Practices

1. Use Meaningful Names

// Bad let x = 10 let y = true // Good let playerScore = 10 let isGameActive = true

2. Add Comments

// Calculate the distance between two points function calculateDistance(pos1, pos2) { let dx = pos2.x - pos1.x // Difference in X let dy = pos2.y - pos1.y // Difference in Y let dz = pos2.z - pos1.z // Difference in Z // Use Pythagorean theorem in 3D return Math.sqrt(dx*dx + dy*dy + dz*dz) }

3. Break Large Functions into Smaller Ones

// Instead of one huge function function buildHouse() { buildFoundation() buildWalls() buildRoof() addDoors() addWindows() } function buildFoundation() { // Foundation code here } function buildWalls() { // Wall code here } // etc...

4. Test Small Pieces

Don't write 100 lines and then test. Test after every 5-10 lines!

5. Keep It Simple

Start simple, then add complexity. A working simple version is better than a broken complex one!

Mastering VS Code

Now that you're coding in VS Code, let's learn the professional shortcuts and features!

Essential Keyboard Shortcuts

⌨️ Must-Know Shortcuts:

Action Shortcut What it does
Quick Open Ctrl+P Quickly open any file by name
Command Palette Ctrl+Shift+P Access ALL VS Code commands
Save File Ctrl+S Save your work (DO THIS OFTEN!)
Find Ctrl+F Search in current file
Find & Replace Ctrl+H Find and replace text
Comment Line Ctrl+/ Turn line into comment (or back)
Duplicate Line Shift+Alt+Down Copy current line below
Move Line Alt+Up/Down Move line up or down
Multi-Cursor Alt+Click Edit multiple places at once!
Format Document Shift+Alt+F Auto-format your code (make it pretty!)
Terminal Ctrl+` Open integrated terminal
Undo Ctrl+Z Undo last change (lifesaver!)
Redo Ctrl+Y Redo undone change

Pro Features to Explore

1. IntelliSense (Autocomplete)

As you type, VS Code suggests what you might want to write. Press Tab or Enter to accept suggestions!

💡 Try it: Type "player." and wait - VS Code shows all available methods!

2. Error Highlighting

Red squiggly lines? That's VS Code telling you there's a problem. Hover over them to see what's wrong!

3. Integrated Terminal

Press Ctrl+` to open a terminal right inside VS Code. You can run commands without leaving the editor!

4. Git Integration

The source control icon (left sidebar) lets you track your code changes. Ask your uncle to help you set up Git!

5. Extensions

We installed Minecraft extensions, but there are thousands more! Browse them in the Extensions panel.

VS Code Tips for Success

💾 Save Often: Press Ctrl+S frequently! Auto-save is nice but manual saves ensure you don't lose work.
🎨 Use Format Document: Press Shift+Alt+F to make your code beautiful and properly indented.
🔍 Use Find: Press Ctrl+F to search for text. Way faster than scrolling!
💬 Comment Your Code: Select lines and press Ctrl+/ to add comments. Future you will thank present you!
🎯 Command Palette is Your Friend: Press Ctrl+Shift+P and type what you want to do. VS Code will find it!

Deploying to Your Family Server

Once you've created an awesome behavior pack, you can deploy it to your uncle's Minecraft Bedrock server!

📋 Steps to deploy:
  1. Find your behavior pack folder (the one with manifest.json)
  2. Zip the entire folder
  3. Give the .zip file to your uncle
  4. He'll place it on the server in the behavior_packs folder
  5. Everyone on the server can use your code!
🎉 Imagine this: Your family logs into the Minecraft server, and YOUR custom commands, features, and minigames are running! You coded something everyone can enjoy!

Debugging JavaScript

Common Errors:

Syntax Error: Missing closing bracket
// Wrong if (x > 5) { player.say("Big number") // Missing closing } // Right if (x > 5) { player.say("Big number") }
Reference Error: Undefined variable
// Wrong player.say(playerName) // playerName was never defined! // Right let playerName = "Steve" player.say(playerName)

Debugging Tips:

Going Further

Learning Resources:

Next Steps:

  1. Master JavaScript in MakeCode
  2. Learn about Behavior Packs and Add-ons
  3. Explore the full Bedrock Scripting API
  4. Build something awesome and share it!

Other Programming Languages:

Once you're comfortable with JavaScript, you can easily learn:

The concepts you learned here apply to ALL programming languages!

🎓 Congratulations - You're a Professional Developer!

🎉 You Did It!

You've completed an incredible journey:

  • ✅ Phase 1: Learned programming basics with Command Blocks
  • ✅ Phase 2: Mastered visual programming with MakeCode
  • ✅ Phase 3: Graduated to professional development with VS Code

You're using the same tools and languages that professional developers at Google, Microsoft, and Meta use every single day!

What You've Accomplished

Professional Skills You Now Have:

  • ✅ JavaScript Programming: One of the world's most popular languages
  • ✅ VS Code Proficiency: The #1 code editor used by professionals
  • ✅ Problem Solving: Breaking big problems into small steps
  • ✅ Debugging: Finding and fixing errors systematically
  • ✅ File Management: Organizing projects professionally
  • ✅ API Usage: Working with the Minecraft Bedrock API
  • ✅ Version Control Readiness: Ready to learn Git
  • ✅ Server Deployment: Publishing code for others to use

Your Next Adventure

The programming world is now open to you! Here's what you can explore next:

🎮 More Game Development:

🌐 Web Development:

🤖 AI & Data Science:

📱 Mobile Apps:

💡 Pro Tip: Everything you learned here transfers! Variables, loops, functions, and conditionals work the same in ALL programming languages. You're not starting from zero - you already understand programming!

Share Your Success!

🎯 Challenge: Build something amazing and deploy it to your family's Minecraft server! Show everyone what you can do!

Ideas:
  • A custom minigame everyone can play
  • Helpful commands for the server
  • Your own creative world mechanics
  • Something NO ONE has thought of before!

A Message from Your Uncle

Hey! If you've made it this far, I'm incredibly proud of you! 🎉

You're not just playing Minecraft anymore - you're creating it. You're thinking like a developer. You're solving problems. You're building things.

This is exactly how I started my career as a professional developer. And now you have these same skills!

Keep building, keep learning, and never be afraid to try new things. I'm always here to help!

- Uncle Stephen 💻

🌟 Remember: Every professional programmer started exactly where you are now. The difference between them and everyone else? They kept learning and building. You can do this too!
Browse More Project Ideas → ← Back to Phase 2 Home