The Robot Fish

Building an Expert System in JavaScript – Part 2

In the previous part of this series, we built a DynamicForm class to generate dialogue boxes for user input. Now, we’re taking it a step further, implementing the knowledge base and designing a way for an expert to store the queries for the user to answer.

For the following code, we will be building upon the ExpertSystemPart1.html file that we’ve created previously. Click here to see the previous post. To preview the finished demo, click here.

Getting Started

What we want to achieve in this part is to have an expert begin creating a knowledge base using queries and prompts from the user. To do that we will be building three classes, Query, KnowledgeBase, and Expert. We start by defining the role and responsibilities of each.

What is a Query?

A Query is simply an object that stores a question to be asked and a way to store the answer in sets of yeses and noes. We will do that by using the JavaScript Set object which allows us to store unique values of strings.

Copy the code below and paste it under the DynamicForm class that we’ve created.

//##############################################################################
// Query.js
//##############################################################################
(function() {
    "use strict";
    function Query(question, context, yeses, nos) {
        this.question = question;
        this.context = context;
        this.yeses = yeses || new Set();
        this.nos = nos || new Set();
        return this;
    };
    var p = Query.prototype;
    p.export = function() {
        return {
            question: this.question,
            context: this.context,
            yeses: Array.from(this.yeses),
            nos: Array.from(this.nos)
        };
    };
    p.import = function(obj) {
        this.question = obj.question;
        this.context = obj.context;
        this.yeses = new Set(obj.yeses);
        this.nos = new Set(obj.nos);
        return this;
    };
    trf.Query = Query;
}());

To understand this better, we will use our animal expert as an example. If our list of possible answers for the animal expert is horse, duck, and chicken. A simple question could be “Does the animal have hooves?”. In which case the horse would go to the yeses set, and the duck and chicken would go to the noes set. This will be important later when the list becomes bigger and we use the queries to deduce the next best question to ask.

Along with the question, we also store the optional context for the question. This is just something optional that can help the user figure out how to answer our questions.

Lastly. we also want to be able to import and export a query from and to a JSON file so we can access the Query later. For the export we simply turn our sets into arrays, and for the import we assign the values of our query based on the parsed JSON object that’s passed in.

			
p.export = function() {
    return {
        question: this.question,
        context: this.context,
        yeses: Array.from(this.yeses),
        nos: Array.from(this.nos)
    };
};
p.import = function(obj) {
    this.question = obj.question;
    this.context = obj.context;
    this.yeses = new Set(obj.yeses);
    this.nos = new Set(obj.nos);
    return this;
};

		

What is a Knowledge Base?

A Knowledge Base is an object that stores all the Queries and all the possible answers for a particular subject. It needs to also store useful information like the key for accessing the information from localStorage, and the initial instruction for the user to begin.

Copy the Knowledge Base code and paste below the Query class.

//##############################################################################
// KnowledgeBase.js
//##############################################################################
(function() {
    "use strict";
    function KnowledgeBase() {
        this.key = null;
    };
    var p = KnowledgeBase.prototype;
    p.create = function(subject, instruction){
        this.answers = new Set();
        this.answerContexts = new Map();
        this.queries = new Set();
        this.subject = subject;
        this.instruction = instruction;
        this.key = 'trf-' + subject;
    }
    p._toJSONString = function(space) {
        let queries = [];
        for (const query of this.queries) {
            queries.push(query.export());
        }
        
        const obj = {
            subject: this.subject,
            instruction: this.instruction,
            answers: [...this.answerContexts],
            queries: queries
        };
        return JSON.stringify(obj, null, space);
    };
    p._loadFromJSONString = function(JSONString) {
        if (!JSONString) { return false; };
        const obj = JSON.parse(JSONString);
        this._loadFromJSONObject(obj);
    };
    p._loadFromJSONObject = function(JSONObject) {
        const obj = JSONObject;
        this.answers = new Set(obj.answers.map(row => row[0]));
        this.queries = new Set();
        for (const query of obj.queries) {
            this.queries.add(new trf.Query().import(query));
        };
        this.answerContexts = new Map(obj.answers);
        this.subject = obj.subject;
        this.instruction = obj.instruction;
        this.key = 'trf-' + obj.subject;
    };
    p.saveToLocalStorage = function() {
        localStorage.setItem(this.key, this._toJSONString());
    };
    p.loadFromLocalStorage = function(key) {
        this._loadFromJSONString(localStorage.getItem(key));
    };
    p.deleteAnswer = function(answer){
        this.answers.delete(answer);
        this.answerContexts.delete(answer);
        for (const query of this.queries) {
            query.yeses.delete(answer);
            query.nos.delete(answer);    
        }
    };
    trf.KnowledgeBase = KnowledgeBase;
}());

Let’s break the knowledge base down to get a better understanding of how this class works. First, in the constructor we set the key to null, indicating that the knowledge base is empty. The knowledge base has to either be newly created or loaded from a saved source. In this case, we will be using localStorage in the browser to save our data.

			
function KnowledgeBase() {
    this.key = null;
};

The create function is used when no existing knowledge base exists. You simply pass in the subject and instruction strings, and it will create a new knowledge base for you. For better searching and indexing, we add trf- as a prefix to the key.

The answerContexts is an optional parameter that helps explain the answer. In the animal expert example, this would be a fun fact about the animal. We use the JavaScript Map object to make it easier to index.

			
p.create = function(subject, instruction){
        this.answers = new Set();
        this.answerContexts = new Map();
        this.queries = new Set();
        this.subject = subject;
        this.instruction = instruction;
        this.key = 'trf-' + subject;
    }

		

The function _toJSONString deconstructs the knowledge base into a readable JSON string by turning everything into arrays. We used the underscore to indicate this is a private function, and it will return a JSON string.

			
p._toJSONString = function(space) {
    let queries = [];
    for (const query of this.queries) {
        queries.push(query.export());
    }
    
    const obj = {
        subject: this.subject,
        instruction: this.instruction,
        answers: [...this.answerContexts],
        queries: queries
    };
    return JSON.stringify(obj, null, space);
};

		

In the reverse, we have the function _loadFromJSONString, which takes the JSON string parse it as an object which the knowledge base will use to construct itself.

			
p._loadFromJSONString = function(JSONString) {
    if (!JSONString) { return false; };
    const obj = JSON.parse(JSONString);
    this._loadFromJSONObject(obj);
};
p._loadFromJSONObject = function(JSONObject) {
    const obj = JSONObject;
    this.answers = new Set(obj.answers.map(row => row[0]));
    this.queries = new Set();
    for (const query of obj.queries) {
        this.queries.add(new trf.Query().import(query));
    };
    this.answerContexts = new Map(obj.answers);
    this.subject = obj.subject;
    this.instruction = obj.instruction;
    this.key = 'trf-' + obj.subject;
};

		

Finaly, we have public functions to save and load the database, as well as a helper function to delete an answer entry from the knowledge base if that becomes necessary.

			
p.saveToLocalStorage = function() {
    localStorage.setItem(this.key, this._toJSONString());
};
p.loadFromLocalStorage = function(key) {
    this._loadFromJSONString(localStorage.getItem(key));
};
p.deleteAnswer = function(answer){
    this.answers.delete(answer);
    this.answerContexts.delete(answer);
    for (const query of this.queries) {
        query.yeses.delete(answer);
        query.nos.delete(answer);    
    }
};

		

What is an Expert?

An expert puts everything we’ve built together. It uses DynamicForm to ask the user questions and builds the KnowledgeBase using Query. The idea here is for the expert to impart enough knowledge into the program so that users can use the program even after the expert is gone.

We’ll start with a basic template for the Expert Class. Copy and paste the code below the KnowledgeBase Class.

//##############################################################################
// Expert.js
//##############################################################################
(function() {
    "use strict";
    function Expert(elementId) {
        this.dynamicForm = new trf.DynamicForm(elementId);
        this.knowledgeBase = new trf.KnowledgeBase();
    };
    var p = Expert.prototype;
    // Add functions here
    
    trf.Expert = Expert;
}());

First, we need to ask if the user wants to load the existing knowledge base or create a new one. After that we will greet the user with the subject matter and the instructions.

To get a taste of how this all works, copy and paste the functions below and add it to the Expert Class.

p.askForKnowledgeBase = function() {
    this.dynamicForm.create({
        title: 'Which knowledge base should I use?',
        fields: [
            { type: 'label', text:'Select where to obtain the knowledge base'},
            { type: 'buttons', options: [
                {type: 'yes', text: 'New', callback: this.createNewKnowledgeBase.bind(this)},
                {type: 'yes', text: 'Browser', callback: this.selectBrowserKnowledgeBase.bind(this)},
                    ] }
        ]
    });
};
p.createNewKnowledgeBase = function() {
    this.dynamicForm.create({
        title: 'Create a new Knowledgebase',
        fields: [
            { type: 'label', text:'Subject:'},
            { type: 'textbox', placeholder: 'Example: Animal' , name: 'subject'},
            { type: 'label', text:'Instruction:'},
            { type: 'textarea', placeholder: 'Example: Please think of an animal' , name: 'instruction'},
            { type: 'buttons', options: [
                {type: 'yes', text: 'Ok', callback: this._createNewKnowledgeBase.bind(this)},
                {type: 'no', text: 'Cancel', callback: this.askForKnowledgeBase.bind(this)}]}
        ]
    });
};
p._createNewKnowledgeBase = function() {
    const subject = this.dynamicForm.textboxes.get('subject').value;
    const instruction = this.dynamicForm.textboxes.get('instruction').value;
    if (!subject) {
        alert("Need to name a subject");
        return;
    }
    this.knowledgeBase.create(subject, instruction);
    this.greet();
};
p.selectBrowserKnowledgeBase = function(){
    const keys = [];
    for (const key of Object.keys(localStorage)){
        if (key.slice(0, 4) === 'trf-') {
            keys.push(key);
        };
    };
    if (keys.length === 0) {
        alert("No knowledge bases found in browser storage");
        this.createNewKnowledgeBase();
        return;
    }
    this.dynamicForm.create({
        title: 'Select a Knowledgebase',
        fields: [
            { type: 'select', options: keys },
            { type: 'buttons', options: [
                {type: 'yes', text: 'Ok', callback: this._selectBrowserKnowledgeBase.bind(this)},
                {type: 'no', text: 'Cancel', callback: this.askForKnowledgeBase.bind(this)}
            ]}
        ]
    });
};
p._selectBrowserKnowledgeBase = function(){
    const key = this.dynamicForm.selects.get('select').value
    this.knowledgeBase.loadFromLocalStorage(key);
    this.greet();
};
p.greet = function() {
    this.possibleAnswers = new Set(this.knowledgeBase.answers);
    this.notAskedQueries = new Set(this.knowledgeBase.queries);
    this.deferQueries = new Set();
    this.askedQueries = new Map();
    this.dynamicForm.create({
        title: 'Hello, I am your ' + this.knowledgeBase.subject + ' expert',
        fields: [
            { type: 'label', text:this.knowledgeBase.instruction },
            { type: 'buttons', options: [
                {type: 'yes', text: 'Ok', callback: this._guess.bind(this)},
                {type: 'no', text: 'Quit', callback: this.quit.bind(this)}] }
        ]
    });
};
p._guess = function() {
    // insert code here
};
p.quit = function() {
    this.dynamicForm.create({
        title: 'Save knowledge base?',
        fields: [
            { type: 'buttons', options: [
                {type: 'yes', text: 'Yes', callback: this._quit.bind(this)},
                {type: 'no', text: 'Cancel', callback: this.greet.bind(this)},
                {type: 'no', text: 'Quit', callback: this.askForKnowledgeBase.bind(this)} 
            ] }
        ]
    });
};
p._quit = function() {
    this.knowledgeBase.saveToLocalStorage();
    alert('Knowledge base saved to browser');
    this.askForKnowledgeBase();
};

A couple of things to note for the code above. First, whenever we used a callback for the buttons, the bind function is used to maintain the correct scope for this.

this.createNewKnowledgeBase.bind(this)

When selecting the knowledge base for the expert, we used trf- prefix to find the appropriate keys. If none are found, then the revert to creating a new knowledge base.

			
p.selectBrowserKnowledgeBase = function(){
    const keys = [];
    for (const key of Object.keys(localStorage)){
        if (key.slice(0, 4) === 'trf-') {
            keys.push(key);
        };
    };
    if (keys.length === 0) {
        alert("No knowledge bases found in browser storage");
        this.createNewKnowledgeBase();
        return;
    };
    this.dynamicForm.create({
        title: 'Select a Knowledgebase',
        fields: [
            { type: 'select', options: keys },
            { type: 'buttons', options: [
                {type: 'yes', text: 'Ok', callback: this._selectBrowserKnowledgeBase.bind(this)},
                {type: 'no', text: 'Cancel', callback: this.askForKnowledgeBase.bind(this)}
            ]}
        ]
    });
};

		

When we get to the greet function, we created new sets and maps for answers and queries. These will be used later to keep track of which animals were guessed, and which questions were asked.

			
p.greet = function() {
    this.possibleAnswers = new Set(this.knowledgeBase.answers);
    this.notAskedQueries = new Set(this.knowledgeBase.queries);
    this.deferQueries = new Set();
    this.askedQueries = new Map();
    this.dynamicForm.create({
        title: 'Hello, I am your ' + this.knowledgeBase.subject + ' expert',
        fields: [
            { type: 'label', text:this.knowledgeBase.instruction },
            { type: 'buttons', options: [
                {type: 'yes', text: 'Ok', callback: this._guess.bind(this)},
                {type: 'no', text: 'Quit', callback: this.quit.bind(this)}] }
        ]
    });
};

		

Finally, to test everything out, remove the code in the main program and replace it with this.

//##############################################################################
// Main Program
//##############################################################################
var expert = new trf.Expert("formContainer");
expert.askForKnowledgeBase();

Now you can run the html file in your browser and see the dialogue boxes.

If you ever want to edit or delete the knowledge base created, simply right click on the browser and click Inspect. Then in the panel action bar, click on Application and the keys are stored in file:// under local storage.

Next Steps

Another part done. We now have all the pieces to put together the AI. All we need now is to guess function to complete the inference engine. Click here to see the file for this part of the project. See you in part 3!

February 23, 2026

Building an Expert System in JavaScript – Part 1

An expert system emulates the knowledge and expertise of a human being by breaking it up to two parts: A knowledge base, and an inference engine. First developed in the 1960’s and later became widely used in the 1980’s, it is one of the first successful application of AI.

In this series, we will create a program in JavaScript that will put you into the seat of an animal expert: allowing us to build a knowledge base of animal traits. Once that is built, the program will use the knowledge base to guess which animal most likely fits with those traits. If you want to skip ahead to what we will be making, check out the demo below.

Getting Started

The goal of this part is to create a way for users to interact with the expert system. This will be accomplished through a series of dynamically generated dialog boxes containing form elements such as textboxes, checkboxes, and buttons, created using JavaScript.

To get started let’s create a template for getting a user to interact with the Expert System. Create a new HTML file, using the code below as a template. You can run the html file in your favorite browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expert System Part 1</title>
    <style>
        /* Insert CSS Style here*/
    </style>
</head>
<body>
    <script>
        // Inset JavaScript Here
    </script>
</body>
</html>

CSS

First thing we’ll do is use some CSS to create a style for our dialogue boxes. What we have below is something we generated with AI using prompts like blue buttons with rounded corners, grey backgrounds, scalable, and centered on the screen. Put the code below in between the <style> tags.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #424242;
    font-family: Arial, sans-serif;
}
.form-container {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    caret-color: transparent;
}
.form-container h2 {
    margin-bottom: 20px;
    color: #333;
}
.form-group {
    margin-bottom: 20px;
}
label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
    white-space: pre-line;
}
input[type="text"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: Arial, sans-serif;
}
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    resize: vertical;
}
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    background-color: white;
}
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
}
.checkbox-item {
    display: flex;
    align-items: center;
}
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}
.checkbox-item label {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}
button {
    padding: 12px 24px;
    margin-right: 10px;
    margin-top: 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;;
    transition: background-color 0.3s;
    user-select: none;
}
.btn-yes {
    background-color: #007bff;
    color: white;
}
.btn-yes:hover {
    background-color: #0056b3;
}
.btn-no {
    background-color: #6c757d;
    color: white;
}
.btn-no:hover {
    background-color: #545b62;
}

We wrap all of it in a form container using some HTML which we will later manipulate using JavaScript. Put the following HTML tags just above the <script> tags.

<div class="form-container" id="formContainer"></div>

Dynamic Forms using JS

To Dynamically create the dialogue boxes in the form container, we’ll use some JavaScript. We’ll call this class DynamicForm and it will be an object under the trf namespace. The template for what we’re doing is as follows:

/* Initialize TRF (The Robot Fish) namespace */
this.trf = this.trf||{};
//##############################################################################
// DynamicForm.js
//##############################################################################
(function() {
    "use strict";
    function DynamicForm(elementId) {
        this.container = document.getElementById(elementId);
    };
    var p = DynamicForm.prototype;
    p.init = function() {
        //Initialize and clear the form
    };
    p.create = function(config) {
        // Dynamically create the form using the config 
    };
    trf.DynamicForm = DynamicForm;
}());

For the constructor we simply pass in the elementId so we can reference it as the container later. We start with implementing the init function below.

p.init = function() {
    this.textboxes = new Map();
    this.checkboxes = new Map();
    this.selects = new Map();
    while (this.container.firstChild) {
        this.container.removeChild(this.container.firstChild);
    }
};

The purpose of the init function is to clear the form and get it ready to be populated. New Map objects are created to keep track of the form items for later referencing. To clear any items that might remain in the container, we loop through all the children and remove them. Copy the code below for the create function.

p.create = function(config) {
    this.init();
    // Dynamically create the form using the config
    const form = document.createElement('form');
    
    const title = document.createElement('h2');
    title.textContent = config.title;
    form.appendChild(title);
    // Create form fields
    for (const field of config.fields) {
        const group = document.createElement('div');
        group.className = 'form-group';
        if (field.type === 'label') {
            const label = document.createElement('label');
            label.textContent = field.text;
            group.appendChild(label);
        };
        if (field.type === 'textbox') {
            const input = document.createElement('input');
            input.type = 'text';
            input.placeholder = field.placeholder || '';
            input.name = field.name || 'input'
            input.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') { event.preventDefault();}});
            group.appendChild(input);
            this.textboxes.set(input.name, input);
        };
        if (field.type === 'textarea') {
            const input = document.createElement('textarea');
            input.placeholder = field.placeholder || '';
            input.name = field.name || 'input'
            input.rows = 5;
            group.appendChild(input);
            this.textboxes.set(input.name, input);
        };
        if (field.type === 'checkboxList') {
            const checkboxContainer = document.createElement('div');
            checkboxContainer.className = 'checkbox-list';
            
            for (const option of field.options) {
                const checkboxItem = document.createElement('div');
                checkboxItem.className = 'checkbox-item';
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.value = option;
                const optionLabel = document.createElement('label');
                optionLabel.textContent = option;
                checkboxItem.appendChild(checkbox);
                checkboxItem.appendChild(optionLabel);
                checkboxContainer.appendChild(checkboxItem);
                this.checkboxes.set(checkbox.value,checkbox);
            };  
            
            group.appendChild(checkboxContainer);
        };
        if (field.type === 'select') {
            const select = document.createElement('select');
            select.name = field.name || 'select';
            
            for (const option of field.options) {
                const opt = document.createElement('option');
                opt.value = option;
                opt.textContent = option.slice(4);
                select.appendChild(opt);
            };
            
            group.appendChild(select);
            this.selects.set(select.name, select);
        };
        if (field.type === 'buttons') {
            for (const option of field.options) {
                const button = document.createElement('button');
                button.type = 'button';
                button.className = 'btn-' + option.type;
                button.textContent = option.text;
                if (option.callback) {
                    button.addEventListener('click', option.callback);
                }
                group.appendChild(button);
            };
        };
        form.appendChild(group);
    };
    this.container.appendChild(form);
};

A couple of things to note for the code above. First, is the use of the init function we created to clear the form. This clears the form at the beginning of each create call.

this.init();

After that, we create the form element and the first item we add to it is always a tittle.

			
const form = document.createElement('form');
    
const title = document.createElement('h2');
title.textContent = config.title;
form.appendChild(title);

Then we loop through all the fields in the config to create the form items like checkboxes, buttons, and labels. We append them to a group, which then gets appended to the form, which then get appended to the container. The example below is what it looks like if we only do this for labels.

			
for (const field of config.fields) {
        const group = document.createElement('div');
        group.className = 'form-group';
        if (field.type === 'label') {
            const label = document.createElement('label');
            label.textContent = field.text;
            group.appendChild(label);
        };
        form.appendChild(group);
};
this.container.appendChild(form);

		

For field types like textbox, checkboxList, and select, we have to set it to the map objects that we created in the init function so that their values and settings can be accessed later. The example below sets the textbox to the textboxes map object using the field name as the key.

			
if (field.type === 'textbox') {
    const input = document.createElement('input');
    input.type = 'text';
    input.placeholder = field.placeholder || '';
    input.name = field.name || 'input'
    input.addEventListener('keydown', function(event) {
        if (event.key === 'Enter') { event.preventDefault();}});
    group.appendChild(input);
    this.textboxes.set(input.name, input);
};

		

Lastly, we want buttons to do a callback when clicked. This is included in the options of each field because we would like to have multiple buttons in a group.

			
if (field.type === 'buttons') {
    for (const option of field.options) {
        const button = document.createElement('button');
        button.type = 'button';
        button.className = 'btn-' + option.type;
        button.textContent = option.text;
        if (option.callback) {
            button.addEventListener('click', option.callback);
        }
        group.appendChild(button);
    };
};

		

To get a better understanding of how it all works, below is an example of a dialogue box with all of the different kinds of elements in the DynamicForm. Copy and paste it below the DynamicForm class that we just created.

//##############################################################################
// Main Program
//##############################################################################
var dynamicForm = new trf.DynamicForm("formContainer");
dynamicForm.create({
                title: 'Generic Title',
                fields: [
                    { type: 'label', text:'This is a new label'},
                    { type: 'textbox', placeholder: 'Placeholder Text' , name: 'textbox'},
                    { type: 'textarea', placeholder: 'Placeholder Text Area' , name: 'textarea'},
                    { type: 'checkboxList', options: ['Item1', 'Item2', 'Item3', 'Item4', 'Item5'] },
                    { type: 'buttons', options: [
                        {type: 'yes', text: 'Yes', callback: handleYes},
                        {type: 'no', text: 'No', callback: function(){alert('No')}},
                        {type: 'no', text: 'Cancel', callback: function(){alert('Cancel')}}
                    ]}]
            });
            
function handleYes(){
    alert(
        "This is what's in the textbox: " + dynamicForm.textboxes.get('textbox').value + "\n" +
        "This is what's in the textarea: " + dynamicForm.textboxes.get('textarea').value + "\n" +
        "This is the state of checkbox Item1: " + dynamicForm.checkboxes.get('Item1').checked
        );
};

This is what you get when you get when you run the code above.

That’s it for all the GUI that we need to make for this project. You can download the complete project file for this part here. In the next parts, we will dive into programming the inference engine and the knowledge base. For now, have fun creating your new dialogue boxes using DynamicForm!

February 5, 2026

HTML5 Game Development Part 2 – Buttons

In the previous part, we’ve set up a responsive game canvas that fits most screen configurations, now we are going to build on that and add a button that the user can interact with. The goal here is to make the button accessible to all sorts of inputs, mouse, touch, and keyboard.

To begin, copy the helloWorld.html document we’ve made in the previous part and paste it into a new folder called buttons. Rename the helloWorld.html to buttons.html and change its <title> tag accordingly.

Adding CSS

Let’s start by defining the containers that house the buttons. We want the buttons to be an overlay over everything and appear on the corners of the screen. For that we will use fixed positioning with a high z-index and space between content. Copy the styles below and paste it into your CSS code.

.trf_BottomControl {
    position: fixed;
    bottom: 30px;
    left: 30px;   
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000; 
}

Now we will add the style for the button itself. It is important to have user-select so that default mouse and touch actions do not interfere with the actual pressing of the button. We also created a ButtonActive class to change the button color when the button is pressed.

.trf_Button {
    width: 80px;
    height: 80px;
    background: rgba(100, 200, 255, 0.2);
    border: 2px solid rgba(100, 200, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    -webkit-user-select: none; /* Safari */
    user-select: none;
    transform: scale(1);
}
.trf_ButtonActive {
    background: rgba(100, 150, 255, 0.9);
    transform: scale(0.95);
}

Finally, we will add the elements to the html body. Copy the code below to the section reserved for the bottom overlay. We will give it an id="trf-buttonBR" which will be used later.

<div class="trf_BottomControl">
    <div></div>
    <div class="trf_Button" id="trf-buttonBR">A</div>
</div>

Here’s the result:

Creating the Button Object

Now that we’ve created our button, we have to write some JavaScript code to interact with it. The best way to do that is to create an object for it so it can be reused in other places. Below is a basic template for a button object that we will be using. Copy this and paste it under our <script> tag before anything else.

/* Initialize TRF (The Robot Fish) namespace */
this.trf = this.trf||{};
(function() {
    "use strict";
    function Button() {
        // insert constructor here
    }
    var p = Button.prototype;
    createjs.EventDispatcher.initialize(p);
    // insert functions in here
    trf.Button = Button;
}());

In this template, we use the function wrapper to keep variables enclosed and to have the anonymous function run right away. "use strict"; is implemented to catch errors.

			
(function() {
    "use strict";
}());

The trf is used as the identifier to prevent the namespace from getting too polluted.

this.trf = this.trf||{};

We also use the CreateJS EventDispatcher class to inject listener functionality so we can dispatch our own custom events.

createjs.EventDispatcher.initialize(p);

The var p is there to store the Button prototype so we can use it to add our functions later.

var p = Button.prototype;

Finally, we add the button object to the trf using this:

trf.Button = Button;

Building the Constructor and Functions

The constructor of an object runs once when the object is instantiated. It is used to initialize and set object variables.

When we create the new object, we pass in the Id for the button element, the button active style class, and the keyboard keys that will be tied to the button.

Replace the constructor with the new one below.


function Button(elementId, activeStyle, keys) {
    this.elementId = elementId;
    this.activeStyle = activeStyle;
    this.keys = keys;

    this.element = null;
    this.isPressed = false;
    this.activeControl = "";

    this.activate();
};

Now we add the functions that will make the Button work. Insert these function templates into the Button object.

p._onPressAction = function(){
    //private action on press
};
p._onReleaseAction = function(){
    //private action on release
};
p.activate = function(){
    //attach element, set visible, and add listeners
};
p.handleOnPressPointer = function(event){
    //handle pointer down event
};
p.handleOnReleasePointer = function(event){
    //handle pointer release event
};
p.handleOnPressKeyboard = function(event){
    //handle keyboard press event
};
p.handleOnReleaseKeyboard = function(event){
    //handle keyboard release event
};
p.destroy = function(){
    //remove element, set not visible, and remove listeners
};

Activate and Destroy Function

We start by defining the activate() function. The purpose of this function is to set the html element the button is attached to, set the element to visible, and add the event listeners.

The activate function is first called in the constructor but may be called later after the Button has been disabled by the destroy() function. Replace the activate function with the code below:

p.activate = function(){
    if (this.element === null) {
        this.element = document.getElementById(this.elementId);
        this.element.style.visibility = "visible";
        this.handleOnPressPointerBind = this.handleOnPressPointer.bind(this);
        this.handleOnReleasePointerBind = this.handleOnReleasePointer.bind(this);
        this.handleOnPressKeyboardBind = this.handleOnPressKeyboard.bind(this);
        this.handleOnReleaseKeyboardBind = this.handleOnReleaseKeyboard.bind(this);
        
        this.element.addEventListener("pointerdown", this.handleOnPressPointerBind);
        this.element.addEventListener("pointerleave", this.handleOnReleasePointerBind); 
        this.element.addEventListener("pointerup", this.handleOnReleasePointerBind); 
        document.addEventListener("keydown", this.handleOnPressKeyboardBind);
        document.addEventListener("keyup", this.handleOnReleaseKeyboardBind);
    };
};

In the code above, we first check for the this.element being null to prevent duplication. We then set the this.element using the this.elementId that was passed into the constructor. We also set the style visibility of the element to "visible" in the case it was destroyed earlier and was "hidden".

			
if (this.element === null) {
    this.element = document.getElementById(this.elementId);
    this.element.style.visibility = "visible";

Next, we use the bind() function to bind the this keyword to the handle functions. The handle functions get passed into the listener callback, so without this binding, it will not understand where this needs to be pointed at. We save the anonymous functions created by the bind() so we can safely remove it later in the destroy() function.

			
this.handleOnPressPointerBind = this.handleOnPressPointer.bind(this);
this.handleOnReleasePointerBind = this.handleOnReleasePointer.bind(this);
this.handleOnPressKeyboardBind = this.handleOnPressKeyboard.bind(this);
this.handleOnReleaseKeyboardBind = this.handleOnReleaseKeyboard.bind(this);

Finaly, we add the event listeners. We used the pointer events because they encapsulate both mouse and touch interactions. For simplicity we used the release handle for the pointer on both the "pointerleave" and "pointerup" events.

For the keyboard control we have to add the listener to the document so that it can be captured all the time. We will have to be careful in handling the event, so it doesn’t fire on non-related key presses.

			
this.element.addEventListener("pointerdown", this.handleOnPressPointerBind);
this.element.addEventListener("pointerleave", this.handleOnReleasePointerBind); 
this.element.addEventListener("pointerup", this.handleOnReleasePointerBind); 
document.addEventListener("keydown", this.handleOnPressKeyboardBind);
document.addEventListener("keyup", this.handleOnReleaseKeyboardBind);

		

Finaly, we implement the destroy() function accordingly. Replace the destroy() function with the code below.

p.destroy = function(){
    this.element.removeEventListener("pointerdown", this.handleOnPressPointerBind);
    this.element.removeEventListener("pointerleave", this.handleOnPressPointerBind);
    this.element.removeEventListener("pointerup", this.handleOnReleasePointerBind);
    document.removeEventListener("keydown", this.handleOnPressKeyboardBind);
    document.removeEventListener("keyup", this.handleOnReleaseKeyboardBind);
    this.element.style.visibility = "hidden";
    this.isPressed = false;
    this.element = null;
};

Handle Functions

Now that we added the listeners, it is time to define the handle functions. We start with the pointer handlers. Replace the functions in the template with the following code.

p.handleOnPressPointer = function(event){
    if (this.isPressed === false){
        this.activeControl = "pointer";
        this._onPressAction();
    };
};
p.handleOnReleasePointer = function(event){
    if (this.isPressed === true){
        if (this.activeControl === "pointer"){
            this._onReleaseAction();
        };
    };
};

The first thing to do in the handlers is to check the this.isPressed state of the button. This is important to prevent interference with the keyboard actions. Only on the press events do we set the this.activeControl, which will lock in the control type until release.

If all the checks pass, we then execute the private action functions. The underscore _ is just for notation and readability only. We will use these functions to add or remove the active style and also dispatch out own custom onPress and onRelease events which we will listen for later.

Let’s define these private functions by replacing them in our template with this below:

p._onPressAction = function(){
    this.element.classList.add(this.activeStyle);
    this.isPressed = true;
    this.dispatchEvent("onPress");
};
p._onReleaseAction = function(){
    this.element.classList.remove(this.activeStyle);
    this.isPressed = false;
    this.dispatchEvent("onRelease");
};

Finaly, we finish this off by adding the keyboard listeners.

p.handleOnPressKeyboard = function(event){
    if (this.isPressed === false){
        if (this.keys.includes(event.key)) {
            this.activeControl = "keyboard";
            this._onPressAction();
        };
    };
};
p.handleOnReleaseKeyboard = function(event){
    if (this.isPressed === true){
        if (this.activeControl === "keyboard"){
            if (this.keys.includes(event.key)){
                this._onReleaseAction();
            };
        };
    };
};

It is very similar to the pointer handlers except; we also have the added check of the key press by looking for the event.key in the array this.keys that was passed in.

if (this.keys.includes(event.key)){

Finishing Up

Now that our Button Class is ready, all we have to do is use it. Replace the entire main program with the following code:

var button, vel = 0;
var stage,circle;
function init() {
    stage = new createjs.Stage("trf-gameCanvas");
    circle = new createjs.Shape();
    button = new trf.Button("trf-buttonBR",
                            "trf_ButtonActive",
                            ["a", "A", " "]);
    circle.graphics
        .beginFill("DeepSkyBlue")
        .drawCircle(0, 0, 50);
    circle.x = 400;
    circle.y = 300;
    button.addEventListener("onPress", function(event){
        vel = -2;
    });
    button.addEventListener("onRelease", function(event){
        vel = 1;
    });
    createjs.Ticker.framerate = 60;
    createjs.Ticker.on("tick", tick);
    stage.addChild(circle);
    window.removeEventListener("load", init);
}
function tick(event) {
    circle.y += vel;
    stage.update(event);
}
window.addEventListener("load", init);

A couple of things to note for the code above; first, we add a new button and velocity variable:

var button, vel = 0;

Next, we create a new button object with the element id, the active button CSS class and a list of buttons to bind to. We’ve chosen the a, A, and space keys.

			
button = new trf.Button("trf-buttonBR",
                        "trf_ButtonActive",
                        ["a", "A", " "]);

Then we add the listeners for our custom button events. Here we are setting the velocities.

			
button.addEventListener("onPress", function(event){
    vel = -2;
});
button.addEventListener("onRelease", function(event){
    vel = 1;
});

		

After that, we add a ticker event that fires 60 frames per second.

			
createjs.Ticker.framerate = 60;
createjs.Ticker.on("tick", tick);

Finaly, we add the tick event handler itself to update the circle position and draw the objects.

			
function tick(event) {
    circle.y += vel;
    stage.update(event);
}

And we are done! We now have a button object that is responsive to mouse, touch and keyboard, and we can add as many of them as we want. In the next part, we will take what we have here and build a simple game.

You can try the button demo here.

You can download the project files here.

December 4, 2025

HTML5 Game Development Part 1 – helloWorld
Click on image for the Demo.

A long time ago, back in the early 2000s, the internet looked a lot different than it is today. Youtube and social media was only getting started, and the popular way to share and interactive content online was through this player you would download on the browser called Adobe Flash.

Back then, I worked several co-ops developing games on the Adobe Flash platform and also making games of my own which I would upload to my Yahoo geocities webpage. Now that Adobe Flash has been fully replaced by HTML5, I want start developing games again, but on the HTML5 platform.

One of the games I worked on as a Flash developer co-op.

In this series, I will document how to develop a game from start to finish using HTML5, JavaScript, and some CSS. The intention is to only use the basics, so all you need is a code editor and an internet browser to start coding. Buckle up!

Getting Started

There are many ways to develop games on the HTML5 platform. You can use a game engine like Godot or Phaser, but I don’t like this approach because it adds extra complexity and overhead, and I want to just keep things simple. After doing some research, I decided the best thing to do is to write the entire game on a single html file. This way it can be loaded directly to the WordPress media library and makes it easy for anyone wants to host the game online.

This is where the CreateJS libraries come in. Built by the people who previously worked with Adobe Flash, CreateJS is a set of modular libraries that make working with the HTML5 canvas a lot easier.

To begin, all we need is a code editor and an internet browser. You can use whatever you’re familiar with; I am using Visual Studio Code as my code editor and Microsoft Edge as my internet browser. Let’s start by creating a folder called helloWorld and create a file inside it called helloWorld.html.

Simple HTML page

Now that we’ve created a helloWorld.html file, it’s time to set up a basic template for our game. Copy the basic template below into your helloWorld.html file.
```
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>HelloWorld — HTML5 Game</title> 

    <style>
        /* Insert CSS Style here*/
    </style>

</head>
<body>
    <div>
       
    </div>

    <div>
       
    </div>

    <div>
       
    </div>

    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>

    <script>
        /* Insert JavaScript Code Here*/
    </script>

</body>
</html>
```
In this template, we made comments where you would put CSS and JavaScript code. You can test it by opening this html file on your browser, but when you do, all you get is a blank page.

Adding CSS

To spice it up, we need to add some CSS code to differentiate between the background and our canvas. Add the CSS code below to the <style> tags in our template:
```
html,body{
    height:100%;
    margin:0;
    touch-action: none !important;
}
body{
    display:flex;
    align-items:center;
    justify-content:center; 
    background:rgb(46, 46, 46)
}

#trf-gameCanvas{
    width:100%; 
    height:auto; 
    border-radius:8px;
    background:white
}
```
This snippet of code will center all the items, make the background grey, and make the game canvas white. We will call the game canvas id="trf-gameCanvas", and it will fill the space with width: 100%; while maintaining the aspect ratio using height: auto;. All we need to do now is add the game canvas itself. Insert this code in the <div> tag for the game canvas:
```
<canvas id="trf-gameCanvas" width="800" height="600" ></canvas>
```
Here is where we set the aspect ratio for the game. In this case, we have set the width="800" and the height="600" making the aspect ratio the classic 4:3. This ends up being a good compromise on PC and modern mobile screens because although 16:9 will fill up the screen more completely, it doesn’t work as well especially when the orientation of the screen is changed. The aim here is make the game canvas work on all devices, so this setting will do the trick.

Here’s what it looks like when you open the html file!

Vertical Scaling Problem

At its current state, the canvas is already responsive to changes in width of the screen, but you may have noticed it having problems scaling vertically. This is a problem on mobile devices where the user may try to do a landscape rotation, which will mess it all up.

We can solve this problem by creating a media rule in the CSS:
```
@media (max-height: 600px) and (aspect-ratio > 4/3) { 
    #trf-gameCanvas{
        height:75vh; 
        width:auto;
    }
}
```
Now when you open the html file, the canvas will scale both horizontally and vertically to the size of the window. The height:75vh; is important here because on mobile devices certain UI elements can cover up the canvas. Having the height only be 75% of the viewing height solves that problem.

Drawing a circle

Finaly, let’s finish off our Hello World program by drawing a blue circle with the CreateJS library. Using this library is quite simple, we begin by copying the code below and paste it under the JavaScript <script>.
```
var stage,circle;

function init() {

    stage = new createjs.Stage("trf-gameCanvas");
    circle = new createjs.Shape();

    circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
    circle.x = 400;
    circle.y = 300;

    stage.addChild(circle);
    stage.update();

    window.removeEventListener("load", init);
}

window.addEventListener("load", init);
```
What we’re doing here is we created a shape called circle, use the graphics inside it to draw the blue circle, and then positioned it at the center of the game canvas coordinates. We then added the circle to the stage, which is the game canvas that we created earlier, and we used the stage.update() function to draw all elements on that stage. The init() function is created to run after the page is loaded.

Hello World!

We’ve done it. In this part, we created a responsive game canvas that we can view on any device, and as the artists that we are, we drew a perfect blue circle. Where things go from here is up to you, the possibilities are literally endless. In the next part, we will add some controls to manipulate our blue circle.

To host this helloWorld.html file, all we have to do is upload it to the WordPress media library. We’ve done it, and you can see it in action here.

You can download all the files here.

Like this:
Like Loading…
November 25, 2025
Expert System Part 1
An expert system emulates the knowledge and expertise of a human being by breaking it up to two parts: A knowledge base, and an inference engine. First developed in the 1960’s and later became widely used in the 1980’s, it is one of the first successful application of AI.

In this series, we will create a program in python that will put you into the seat of an animal expert: allowing us to build a knowledge base of animal traits. Once that is built, the program will use the knowledge base to guess which animal most likely fits with those traits.

Getting Started

If you haven’t already, set up your environment and install python. You can follow the instructions from our previous post on the ELIZA Chatbot.

To begin, we will create a file called Dolittle.py after the famous animal whisperer doctor. Our first job is to define the knowledge base, and it must be persistent. We will use pickle to save and load the knowledge base to a Dolittle_data.dat file.
```
import tkinter
import pickle
import tkinter as tk
from tkinter import ttk, messagebox, simpledialog, IntVar

datafile = 'Dolittle_data.dat'

class KnowledgeBase:
    def __init__(self):
        self.animals = set()
        self.queries = []

# Load existing knowledge base if available
try:
    with open(datafile, 'rb') as f:
        unpickler = pickle.Unpickler(f)
        knowledgeBase = unpickler.load()
        print("Knowledge base loaded.")
except FileNotFoundError:
    knowledgeBase = KnowledgeBase()
    print("No existing knowledge base found. Starting fresh.")

# To Do: Add something here

# Save knowledge base on exit
with open(datafile, 'wb') as f:
    pickler = pickle.Pickler(f)
    pickler.dump(knowledgeBase)
    print("Knowledge base saved.")
```
When you first run this code, it would look for the data file and fail to find one. It will then create a new knowledge base object and save it to the datafile. This is output you would see:
```
No existing knowledge base found. Starting fresh.
Knowledge base saved.

Knowledge base loaded.
Knowledge base saved.
```
Adding Some GUI

In the place of the To Do comment up above, we will write some GUI code to get started. The placeholder guessAnimal() function will be used later.
```
def guessAnimal():
    pass

# Create main application window
root = tk.Tk()
frame = ttk.Frame(root, padding="10")
frame.grid()
tk.Label(frame, text="Think of an animal").grid(column=0, row=0)
goButton = tk.Button(frame, text="OK", command=guessAnimal)
goButton.grid(column=1, row=0)

#  Do the main loop
root.mainloop()
```
This will just create a prompt window to think of an animal until you close the window.

Asking Questions

In this program, we will simplify the query to a yes or no question. It’s up to the animal expert to determine what they are. Some examples could be: Does it fly? – yes or no, Does it eat meat? – yes or no, Does it have four limbs? – yes or no, etc.

To do this we will create a Query class under the KnowledgeBase class. It will store a question and a list of animals that fit in the yeses category and a set of animals that fit in the nos category. We will also give the Query an ask function that will take a set of possible animals and match it with the yeses and nos.
```
class Query:
    def __init__(self, question, yeses=set(), nos=set()):
        self.question = question
        self.yeses = yeses
        self.nos = nos
    
    def __str__(self):
        return'[Q: ' + self.question + ' Y:' + str(self.yeses) + ' N:' + str(self.nos) + ']'
    
    def ask(self, possible):
        answer = tk.messabox.askquestion(title = "Question", message = self.question)
        if answer == 'yes':
            return possible.intersection(self.yeses), 'yes'
        else:
            return possible.intersection(self.yeses), 'no'
```
After the Query class we will create a function that checks if the existing questions is sufficient to find the new animal. If it returns False, then we know we need to ask another question.
```
def canWeFind(newAnimal):
    possible = knowledgeBase.animals
    for query in knowledgeBase.queries:
        if newAnimal in query.yeses:
            possible = possible.intersection(query.yeses)
        if newAnimal in query.nos:
            possible = possible.intersection(query.nos)
    return len(possible) == 1
```
That’s it for now. In the upcoming parts, we will finish off the GUI stuff, and the very important guessAnimal() function.

Like this:
Like Loading…
November 17, 2025

Building an Expert System in JavaScript – Part 2

Getting Started

What is a Query?

What is a Knowledge Base?

What is an Expert?

Next Steps

Like this:

Building an Expert System in JavaScript – Part 1

Getting Started

CSS

Dynamic Forms using JS

Like this:

HTML5 Game Development Part 2 – Buttons

Adding CSS

Creating the Button Object

Building the Constructor and Functions

Activate and Destroy Function

Handle Functions

Finishing Up

Like this:

HTML5 Game Development Part 1 – helloWorld

Getting Started

Simple HTML page

Adding CSS

Vertical Scaling Problem

Drawing a circle

Hello World!

Like this:

Expert System Part 1

Getting Started

Adding Some GUI

Asking Questions

Like this: