Initial commit

yeakatie · Jun 10, 2022 · 35d9c26 · 35d9c26
commit 35d9c26
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 0 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# pictionary game
+ pictionary game
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Pictionary Game</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<button id="erase">Erase</button>
+<button id="coral">Coral</button>
+<button id="download">Download Drawing</button>
+
+<!-- <canvas width=600 height=300></canvas> -->
+<canvas></canvas>
+<!-- partial -->
+  <script src='https://cdn.jsdelivr.net/npm/apexcharts'></script><script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,87 @@
+// Setup Canvas
+const canvas =document.querySelector("canvas")
+const ctx = canvas.getContext("2d");
+// dimensions
+canvas.width = document.body.offsetWidth
+canvas.height = document.body.offsetHeight;
+
+console.log(canvas);
+
+// Event Listener Refresh
+// click, mousedown, mouseup, mousemove
+canvas.addEventListener('click', ( e ) => {
+     console.log(e);   
+});
+
+// Points
+let mousedown = false;
+let lastX = 0;
+let lastY = 0;
+
+// Set defaults
+ctx.strokeStyle = 'black';
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+ctx.lineWidth = 10;
+
+// Draw function
+function draw(e){
+
+  if(mousedown === false) return;
+
+  ctx.strokeStyle;
+  ctx.beginPath();
+  ctx.moveTo(lastX, lastY)
+  ctx.lineTo(e.offsetX, e.offsetY)
+  ctx.stroke()
+  lastX = e.offsetX
+  lastY = e.offsetY
+
+}
+
+// Canvas Event: Watch mouse MOVE, then draw
+// line from last point (lastX, lastY) to next point(offsetX, offsetY)
+canvas.addEventListener("mousemove", draw );
+
+// Canvas Event: Mouse DOWN, get points
+canvas.addEventListener("mousedown", function(e) {
+  // check-check
+  console.log(e);
+
+  // mousedown, start drawing
+  lastX = e.offsetX;
+  lastY = e.offsetY;
+  mousedown = true
+})
+
+// Canvas Event: Mouse UP stop drawing and tracking
+canvas.addEventListener("mouseup", function(e) {
+  // check-check
+  console.log(e);   
+  // comment on/off. What happens?
+  mousedown = false
+});
+
+// Get buttons
+const clearButton = document.querySelector('#erase');
+const coralButton = document.querySelector('#coral');
+
+// Erase
+clearButton.addEventListener('click', () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);  
+});
+
+// Change color to Coral
+coralButton.addEventListener('click', () => {
+  ctx.strokeStyle = '#FF7F50';
+});
+
+// Download Button
+downloadButton.addEventListener('click', () => {
+
+console.log(canvas.toDataURL());
+
+});
+
+// .click()
+// bad to use because you can simulate a click and hack people
diff --git a/style.css b/style.css
@@ -0,0 +1,11 @@
+body {
+  height: 100vh;
+  background-color: wheat;
+}
+
+canvas {
+  background: white;
+  border: 10px solid black;
+}
+
+/* botton#download */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Auto detect text files and perform LF normalization
		* text=auto