From b9f1ffa1851f868108dd207ab6dbf2a86d69e965 Mon Sep 17 00:00:00 2001
From: alisolarflare <alisunderstorm@gmail.com>
Date: Thu, 8 Jun 2017 23:25:25 -0700
Subject: [PATCH] Followed a tutorial, with the intent of simulating /r/place

---
 game.html            |  15 ++++++++
 game/blue_tile.png   | Bin 0 -> 139 bytes
 game/green_tile.png  | Bin 0 -> 139 bytes
 game/purple_tile.png | Bin 0 -> 139 bytes
 game/red_tile.png    | Bin 0 -> 139 bytes
 game/tutorial.js     |  82 +++++++++++++++++++++++++++++++++++++++++++
 game/white_tile.png  | Bin 0 -> 132 bytes
 game/yellow_tile.png | Bin 0 -> 138 bytes
 8 files changed, 97 insertions(+)
 create mode 100644 game.html
 create mode 100644 game/blue_tile.png
 create mode 100644 game/green_tile.png
 create mode 100644 game/purple_tile.png
 create mode 100644 game/red_tile.png
 create mode 100644 game/tutorial.js
 create mode 100644 game/white_tile.png
 create mode 100644 game/yellow_tile.png
diff --git a/game.html b/game.html
new file mode 100644
index 0000000..2b9ab58
--- /dev/null
+++ 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>
diff --git a/game/blue_tile.png b/game/blue_tile.png
new file mode 100644
index 0000000000000000000000000000000000000000..21cae0a7453a5a9868b8b118c08f6deb229ced2a
GIT binary patch
literal 139
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|jKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1qucK?P42#}Etu<dldnO^qT4SeACOEtcwF1mP{$
c4jf=$c=myD6~{FBjX<>wp00i_>zopr0Cc-0QUCw|

literal 0
HcmV?d00001

diff --git a/game/green_tile.png b/game/green_tile.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c6b41ff150c1eda8ae2db3138e73f751763d1e8
GIT binary patch
literal 139
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|jKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1qucK?P42#}Etu<d9o04m)rqG+lCO4&*)30K^PY
d*$D{@3=57j+M74NG6AY(@O1TaS?83{1ORRmBya!#

literal 0
HcmV?d00001

diff --git a/game/purple_tile.png b/game/purple_tile.png
new file mode 100644
index 0000000000000000000000000000000000000000..03885e3b145179bde0022eea3aabdffaf16885eb
GIT binary patch
literal 139
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|jKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1qucK?P42#}Etu<d`=*TN*_Uuq^FlTP)SV2*O*g
c9XP<i@JpL<gW-#adZ1bcPgg&ebxsLQ0DgBRd;kCd

literal 0
HcmV?d00001

diff --git a/game/red_tile.png b/game/red_tile.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b29b4597734f74867031a00da50e5d9d3a496f8
GIT binary patch
literal 139
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|jKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1qucK?P42#}Etu<Qnb8ha9*Pnl8CC2l5_i0Ahxy
d?1TgchBGyczE8Kx^#j#1c)I$ztaD0e0sv8*Bn1Ef

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..ab1704518067cb6af535d19ac61f20a2f8b67a5c
GIT binary patch
literal 132
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|jKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1qucK}k;+#}Etu<RAV@5?38~z_>)}-+y+7^=tpi
UtN8Fe2P$IlboFyt=akR{08QW_X#fBK

literal 0
HcmV?d00001

diff --git a/game/yellow_tile.png b/game/yellow_tile.png
new file mode 100644
index 0000000000000000000000000000000000000000..74868cfb14d8bb018554c06c09bc27dd140f1446
GIT binary patch
literal 138
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|jKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1qucL3vLX#}Etu<UjvA8&wXlEbU}lEY-mX!dtE#
bIKaT5Je^5!Z@je^P$`3_tDnm{r-UW|RQx0|

literal 0
HcmV?d00001

