diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..24a8e87
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text
diff --git a/.lfsconfig b/.lfsconfig
new file mode 100644
index 0000000..21c63f4
--- /dev/null
+++ b/.lfsconfig
@@ -0,0 +1,2 @@
+[lfs]
+ url = https://d3dc1b99-2478-48f4-bc05-0b2db1d2bde1.netlify.com/.netlify/large-media
diff --git a/build/canvas.html b/build/canvas.html
index e65bc69..d304725 100644
--- a/build/canvas.html
+++ b/build/canvas.html
@@ -8,9 +8,8 @@
JavaScript Canvas
- JavaScript Canvas
-
+
diff --git a/build/canvas.js b/build/canvas.js
index cb6efb4..d1260e1 100644
--- a/build/canvas.js
+++ b/build/canvas.js
@@ -2,43 +2,106 @@ console.log(`JavaScript Canvas`);
const TO_RADIANS = Math.PI/180;
const canvas = document.getElementById('mycanvas');
-const img = new Image();
+const ctx = canvas.getContext('2d');
+const mario = new Image();
+const background = new Image();
-const url = "https://js.scottmooresoftware.com/.netlify/functions/test"
+var mouseX = 0;
+var mouseY = 0;
-fetch(url)
- .then(data => { return data.json()})
- .then(res => { console.log(res)});
+var drawMarios = (rotation) => {
+ if (ctx) {
+ ctx.fillStyle = '#ccc';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
-if (canvas.getContext) {
- const ctx = canvas.getContext('2d');
+ ctx.drawImage(background, -rotation, -rotation, background.width * 4, background.height * 4);
- ctx.fillStyle = '#ccc';
- ctx.fillRect(0, 0, 512, 512);
+ ctx.save();
+ ctx.translate(mouseX, mouseY);
+ ctx.translate(0, 0);
+ ctx.rotate((45 + rotation) * TO_RADIANS);
+ ctx.drawImage(mario, -64, -64, 128, 128);
+ ctx.restore();
- img.onload = function () {
ctx.save();
ctx.translate(64, 64);
- ctx.rotate(45 * TO_RADIANS);
- ctx.drawImage(img, -64, -64, 128, 128);
+ ctx.rotate((45 + rotation) * TO_RADIANS);
+ ctx.drawImage(mario, -64, -64, 128, 128);
ctx.restore();
+
ctx.save();
ctx.translate(256, 256);
- ctx.rotate(135 * TO_RADIANS);
- ctx.drawImage(img, -64, -64, 128, 128);
+ ctx.rotate((135 + (rotation * 0.5)) * TO_RADIANS);
+ ctx.drawImage(mario, -64, -64, 128, 128);
ctx.restore();
+
ctx.save();
ctx.translate(64, 256);
- ctx.rotate(225 * TO_RADIANS);
- ctx.drawImage(img, -64, -64, 128, 128);
+ ctx.rotate((225 + rotation) * TO_RADIANS);
+ ctx.drawImage(mario, -64, -64, 128, 128);
+ ctx.restore();
+
+ ctx.save();
+ ctx.translate(256, 64);
+ ctx.rotate((315 + rotation) * TO_RADIANS);
+ ctx.drawImage(mario, -64, -64, 128, 128);
+ ctx.restore();
+
+ ctx.save();
+ ctx.translate(448, 64);
+ ctx.rotate((45 + rotation) * TO_RADIANS);
+ ctx.drawImage(mario, -64, -64, 128, 128);
+ ctx.restore();
+
+ ctx.save();
+ ctx.translate(64, 448);
+ ctx.rotate((45 + rotation) * TO_RADIANS);
+ ctx.drawImage(mario, -64, -64, 128, 128);
+ ctx.restore();
+
+ ctx.save();
+ ctx.translate(448, 256);
+ ctx.rotate((225 + rotation) * TO_RADIANS);
+ ctx.drawImage(mario, -64, -64, 128, 128);
ctx.restore();
+
ctx.save();
- ctx.translate(256,64);
- ctx.rotate(315 * TO_RADIANS);
- ctx.drawImage(img, -64, -64, 128, 128);
+ ctx.translate(448, 448);
+ ctx.rotate((45 + rotation) * TO_RADIANS);
+ ctx.drawImage(mario, -64, -64, 128, 128);
+ ctx.restore();
+
+ ctx.save();
+ ctx.translate(256, 448);
+ ctx.rotate((315 + rotation) * TO_RADIANS);
+ ctx.drawImage(mario, -64, -64, 128, 128);
ctx.restore();
}
+}
- img.src = "img/mario.png";
+var rotation = 0;
+
+var gameLoop = () => {
+ window.requestAnimationFrame(gameLoop);
+ drawMarios(rotation += 2);
}
+
+mario.src = "img/mario.png";
+background.src = "img/background2.png"
+
+window.addEventListener("resize", (e) => {
+ canvas.width = window.innerWidth - 16;
+ canvas.height = window.innerHeight - 96;
+});
+
+canvas.width = window.innerWidth - 16;
+canvas.height = window.innerHeight - 96;
+
+canvas.onmousemove = (e) => {
+ mouseX = e.pageX - 16;
+ mouseY = e.pageY - 64;
+};
+
+gameLoop();
+
\ No newline at end of file
diff --git a/build/img/background.png b/build/img/background.png
new file mode 100644
index 0000000..6871f24
--- /dev/null
+++ b/build/img/background.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:59322518ae7b1aaa2c59ef3868afdc15da9dd85325cff98220f530382916f915
+size 86621
diff --git a/build/img/background2.png b/build/img/background2.png
new file mode 100644
index 0000000..c60ad49
--- /dev/null
+++ b/build/img/background2.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2c776cce6c78435100f68878c0e55cc9d73776978964d9f980ada9b3e4e50498
+size 95985
diff --git a/build/img/mario.png b/build/img/mario.png
index 049d9b1..6c895ac 100644
Binary files a/build/img/mario.png and b/build/img/mario.png differ
diff --git a/netlify.toml b/netlify.toml
index 2230949..b88f3aa 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,2 +1,7 @@
[build]
- publish = "build"
\ No newline at end of file
+ publish = "build"
+
+[[redirects]]
+ from = "/redirect"
+ to = "/canvas.html"
+ status = 200
\ No newline at end of file