From 35d9c261e5b114ea8c04c586a19ee558d80b2611 Mon Sep 17 00:00:00 2001 From: kyeager Date: Fri, 10 Jun 2022 16:38:10 -0700 Subject: [PATCH] Initial commit --- .gitattributes | 2 ++ README.md | 2 ++ index.html | 21 ++++++++++++ script.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 11 +++++++ 5 files changed, 123 insertions(+) create mode 100644 .gitattributes create mode 100644 README.md create mode 100755 index.html create mode 100755 script.js create mode 100755 style.css diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/README.md b/README.md new file mode 100644 index 0000000..480fc9c --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# pictionary game + pictionary game diff --git a/index.html b/index.html new file mode 100755 index 0000000..9c5c263 --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + CodePen - Pictionary Game + + + + + + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100755 index 0000000..f8e9840 --- /dev/null +++ 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 \ No newline at end of file diff --git a/style.css b/style.css new file mode 100755 index 0000000..ddbc208 --- /dev/null +++ b/style.css @@ -0,0 +1,11 @@ +body { + height: 100vh; + background-color: wheat; +} + +canvas { + background: white; + border: 10px solid black; +} + +/* botton#download */ \ No newline at end of file