TyperPython

For a final project, students were asked to apply the client-side web programming skills they'd learned throughout the course of the semester to a new and creative problem of their choice. Jimmy Stauder and I decided to solve the problem of how to make learning to program in Python fun and exciting. Utilizing Skulpt, an entirely in-browser and open sourced implementation of Python, we set out to solve this problem.

In order to accomplish this task, we decided to make a browser game akin to TyperShark, a typing game from the early 2000's. While Jimmy worked on creating a resizing HTML canvas, I worked on the first iteration of TyperPython (shown below). The game was first implemented with a non-resizing HTML canvas, and was fixed in size. An interesting challenge we faced was getting the browser to respect tabs. In Python, indentation is important to the syntax and so it was crucial to figure this out. The solution to this problem is shown below.

// Override tab key function
var textarea = document.getElementById("consoleCanvas");
textarea.addEventListener('keydown', function(e){
if(e.keyCode == 9){

  const curText = textarea.value;
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const tab = "\t";

  // Insert the tab char into the code
  textarea.value = curText.slice(0,start) + tab + curText.slice(end);
  textarea.selectionStart = textarea.selectionEnd = start + tab.length;

  e.preventDefault();
  }
});

Iteration 1

After the first iteration, our goal was to implement the game with the resizing canvas that Jimmy had created. The second iteration of TyperPython with the resizing HTML canvas is shown below.

Iteration 2