diff --git a/game.html b/game.html
new file mode 100644
index 0000000..2b9ab58
--- /dev/null
+++ b/game.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ Javascript game
+
+
+
+
+
+
+
diff --git a/game/blue_tile.png b/game/blue_tile.png
new file mode 100644
index 0000000..21cae0a
Binary files /dev/null and b/game/blue_tile.png differ
diff --git a/game/green_tile.png b/game/green_tile.png
new file mode 100644
index 0000000..5c6b41f
Binary files /dev/null and b/game/green_tile.png differ
diff --git a/game/purple_tile.png b/game/purple_tile.png
new file mode 100644
index 0000000..03885e3
Binary files /dev/null and b/game/purple_tile.png differ
diff --git a/game/red_tile.png b/game/red_tile.png
new file mode 100644
index 0000000..8b29b45
Binary files /dev/null and b/game/red_tile.png differ
diff --git a/game/tutorial.js b/game/tutorial.js
new file mode 100644
index 0000000..7119cbf
--- /dev/null
+++ b/game/tutorial.js
@@ -0,0 +1,82 @@
+const World = function(canvas_id_tag){
+ this.canvas = document.getElementById(canvas_id_tag);
+ this.context = this.canvas.getContext("2d");
+
+ this.clear = function(background_color="white"){
+ this.context.beginPath();
+ this.context.rect(0,0,640,480);
+ this.context.fillStyle = background_color;
+ this.context.fill();
+ };
+
+ this.newSprite = function(filename, is_pattern=true){
+ var mySprite = new Sprite(filename, this, is_pattern=true);
+ return mySprite;
+ };
+};
+
+const Sprite = function(filename, world, is_pattern=true){
+ switch(filename){
+ case undefined: console.log("Unable to load Sprite: filename is undefined"); break;
+ case null: console.log("Unable to load Sprite: filename is null"); break;
+ case "": console.log("Unable to load sprite: filename is \"\""); break;
+ default:
+ break;
+ }//endswitch
+
+ this.image = new Image();
+ this.image.src = filename;
+ this.is_pattern = is_pattern;
+ const TO_RADIANS = Math.PI/180
+
+ if(is_pattern)
+ this.pattern = world.context.createPattern(this.image, "repeat")
+
+ this.draw = function(x, y, w=this.image.width, h=this.image.height){
+ world.context.drawImage(this.image, x, y, w, h);
+ }
+
+ this.rotate = function(x, y, degrees){
+ world.context.save();
+ world.context.translate(x,y);
+ world.context.rotate(degees * TO_RADIANS);
+ world.context.drawImage(
+ this.image,
+ -(this.image.width/2),
+ -(this.image.height/2)
+ );
+ world.context.restore();
+ }
+
+};
+
+var isReady = false;
+var world;
+var myCanvas;
+$(document).ready(function(){
+ //Initialize
+ world = new World("canvas");
+ myCanvas = world.canvas;
+ world.clear();
+
+ const reddie = world.newSprite("./game/red_tile.png");
+ reddie.image.onload = function(){
+ reddie.draw(100, 100, 16, 16);
+ };
+ isReady = true;
+});
+
+$('#canvas').on('mousedown', function(e){
+ const pos = getMousePos(canvas, e);
+ mx = pos.x;
+ my = pos.y
+ console.log(mx, my);
+ reddie.draw(mx % 16, my % 16, 16, 16);
+});
+function getMousePos(canvas, evt) {
+ var rect = canvas.getBoundingClientRect();
+ return {
+ x: evt.clientX - rect.left,
+ y: evt.clientY - rect.top
+ };
+}
diff --git a/game/white_tile.png b/game/white_tile.png
new file mode 100644
index 0000000..ab17045
Binary files /dev/null and b/game/white_tile.png differ
diff --git a/game/yellow_tile.png b/game/yellow_tile.png
new file mode 100644
index 0000000..74868cf
Binary files /dev/null and b/game/yellow_tile.png differ