Followed a tutorial, with the intent of simulating /r/place

2017-06-08 23:25:25 -07:00 · 2017-06-08 23:25:25 -07:00 · b9f1ffa185
commit b9f1ffa185
parent 7e4741c607
8 changed files with 97 additions and 0 deletions
--- a/game.html
+++ b/game.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Javascript game</title>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
+    <script src="./game/tutorial.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <canvas id="myCanvas" width="640" height="480"
+      style="border: 1px solid gray; width: 640px; height: 480px"></canvas>
+  </body>
+</html>
--- a/game/blue_tile.png
+++ b/game/blue_tile.png
--- a/game/green_tile.png
+++ b/game/green_tile.png
--- a/game/purple_tile.png
+++ b/game/purple_tile.png
--- a/game/red_tile.png
+++ b/game/red_tile.png
--- a/game/tutorial.js
+++ 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
+    };
+}
--- a/game/white_tile.png
+++ b/game/white_tile.png
--- a/game/yellow_tile.png
+++ b/game/yellow_tile.png