Online Karel Simulator based on HTML5 & Javascript

Karel is an educational programming language for beginners, created by Richard E. Pattis in his book Karel The Robot: A Gentle Introduction to the Art of Programming @wiki

If you are not familiar with what is Karel in programming, please read this wiki page. As I mentioned in one of my previous blog post, I got to know about Karel, while preparing for a session of Programming for non programmers. It's such a simple language that, anybody can teach programming or use for self study. Universities such as stanford are using this simple language to teach programming methodology to it's students. If you studied / studying in new generation Indian engineering colleges, sorry you don't get this easy option of studying programming. I don't want to use the term 'self financing colleges' where your teachers will be your seniors who just passed in the previous year. I am sure on this, because I studied in this type of college, where I had seen people repeatedly saying 'public static void main...public static void main' during the lab exam days.

Whatever it is, this post is written to not to describe about the colleges, but to talk about Karel language, and a small HTML5 based Karel simulator, I wrote in the javascript language to execute Karel programs. The story which lead me to develop this simulator is as follows.

• I found the language very simple & interesting to teach programming.
• The main attraction is the way, we can teach programming to non programmers by simply saying we are controlling a Robot named Karel by some instructions.
• I could see some interesting simulators where an animated character Karel, is acting as per the program execution.
• None of those simulators are easy to set up in our environment.
• Either they are written in Java or other language which is not easy to set up in my environment.
• Got one .Net simulator using Visual J++, and that story I explained in previous post
• No HTML JS based simulators, which can be easily set up as browsing a web site.
• After more google, I decided to create the first one myself.

Karel the robot learns javascript

If you go to the Stanford page, you can see "Karel the robot learns Java". I just borrowed that and changed it to javascript, on a belief that, they will not file patent case on me. This means the simulator is not supposed to run the original Karel language. It can run the Javascript, which will take effect on the Karel standing at the right side simulation area.

What Karel language supports

There are fundamental 2 things which Karel can do.They are

• turnLeft
• move (move one cell in the direction which Karel facing at the moment)

This turns to 2 methods in the Javascript. These methods can be used to write the program in conjunction with the other javascript language features such as if, loops, methods etc...If you want to turn the Karel to right direction you need to issue 3 turnLeft instructions or write a turnRight method which contains these 3 instructions or a loop which does the same.

Javascript function to Turn Karel right

---

//Program to turn Karel right
turnRight();
function turnRight(){
    turnLeft();
    turnLeft();
    turnLeft();
}

---

How to work with Karel simulator

Write the javascript program at the right side text area and click on "Run program" button at the bottom of text area. You can see the Karel is obeying your instructions.

Want to try HTML 5 JS Karel simulator 

I have hosted it in my own website http://joymononline.in . URL link is 

http://joymononline.in/apps/karel/karel.htm

Source code of Karel simulator

If you have experience in Javascript you might have guessed the core technique behind the simulator. It's the same eval() function in Javascript. There are 2 global functions turnLeft() and move() written and those functions are being invoked from the user input program by using eval method.

I will upload the source later to one public repository.