Ant Bully

Project Title: “The Ant Whisperer: Command the Colony with Web Speech API”

Description:

In this project, we combine the adventurous and imaginative world of The Ant Bully with the capabilities of the Web Speech API. The Ant Bully tells the story of a young boy named Lucas who is shrunk down to ant size and learns to navigate and communicate within an ant colony. Similarly, this project will allow users to interact with a virtual ant colony through voice commands, leveraging the Web Speech API to recognize and respond to user inputs.

Features:

1. Voice Commands: Use the Web Speech API to enable voice commands that can direct the actions of a virtual ant colony.
2. Interactive Ant Simulation: Create a visual representation of an ant colony that responds to user commands such as “gather food,” “build tunnels,” or “defend the colony.”
3. Educational Insights: Provide educational information about ants and their behavior in response to specific voice commands.

Starting Code:

Beginner Hints:

• Create a single index.html file.
• Copy the full HTML code block into that file.
• Open index.html in your browser. If something doesn’t work, try a local server like python -m http.server.
• Open DevTools Console to spot errors and typos quickly.

Here’s a basic setup to get you started. This includes the initial HTML, CSS, and JavaScript to integrate the Web Speech API and create a simple ant colony simulation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Ant Whisperer</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        color: #333;
        text-align: center;
        padding: 20px;
    }

    h1 {
        color: #d9534f;
    }

    button {
        background-color: #d9534f;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }

    #colony {
        margin-top: 20px;
        border: 1px solid #ccc;
        height: 400px;
        width: 600px;
        background-color: #fff;
        position: relative;
    }
</style>
</head>
<body>
    <h1>The Ant Whisperer</h1>
    <p>Command your ant colony with your voice!</p>
    <button id="startBtn">Start Listening</button>
    <div id="status"></div>
    <div id="colony">
        <!-- Ant simulation will be displayed here -->
    </div>
<script>
    document.getElementById('startBtn').addEventListener('click', () => {
        if ('webkitSpeechRecognition' in window) {
            const recognition = new webkitSpeechRecognition();
            recognition.continuous = true;
            recognition.interimResults = false;
            recognition.lang = 'en-US';

            recognition.onstart = () => {
                document.getElementById('status').innerText = 'Listening...';
            };

            recognition.onresult = (event) => {
                const transcript = event.results[event.results.length - 1][0].transcript.trim();
                handleCommand(transcript);
            };

            recognition.onerror = (event) => {
                console.error('Speech recognition error', event.error);
            };

            recognition.onend = () => {
                document.getElementById('status').innerText = 'Not listening. Click "Start Listening" to try again.';
            };

            recognition.start();
        } else {
            alert('Web Speech API is not supported in this browser.');
        }
    });

    function handleCommand(command) {
        const colony = document.getElementById('colony');
        switch(command.toLowerCase()) {
            case 'gather food':
                colony.innerHTML = '<p>Ants are gathering food!</p>';
                break;
            case 'build tunnels':
                colony.innerHTML = '<p>Ants are building tunnels!</p>';
                break;
            case 'defend the colony':
                colony.innerHTML = '<p>Ants are defending the colony!</p>';
                break;
            default:
                colony.innerHTML = `<p>Command not recognized: ${command}</p>`;
                break;
        }
    }
</script>
</body>
</html>

References:

• The Ant Bully (2006):
  • Wikipedia
• Web Speech API:
  • MDN Web Docs

Praise Cage! Dive into this coding adventure and create an interactive experience that allows users to command their own ant colony using the power of their voice.