From fa8c104951ab32c44ce3bbbfc2716d2d29a2d238 Mon Sep 17 00:00:00 2001 From: Siina Mashek Date: Wed, 15 Feb 2023 18:20:36 +0200 Subject: [PATCH] First commit of this dumb thing lmao --- eightball.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 13 +++++++++++ style.css | 36 ++++++++++++++++++++++++++++ 3 files changed, 115 insertions(+) create mode 100644 eightball.js create mode 100644 index.html create mode 100644 style.css diff --git a/eightball.js b/eightball.js new file mode 100644 index 0000000..a2ae88b --- /dev/null +++ b/eightball.js @@ -0,0 +1,66 @@ +const canvas = document.getElementById('canvas'); +const context = canvas.getContext('2d'); +const choices = [ + "It is certain", "It is decidedly so", "Without a doubt", "Yes definitely", + "You may rely on it", "As I see it, yes", "Most likely", "Outlook good", "Yes", + "Signs point to yes", "Better not tell you now", "Cannot predict now", + "Concentrate and ask again", "My sources say no", "Outlook not so good", "Very doubtful" +]; + +function start(choice = '') { + drawBall(); + drawText('shake me uwu', colour='grey'); + canvas.addEventListener('click', (event) => { + console.log('click'); + canvas.onmousedown = function() { + drawBall(); + } + eightball(getRandomAnswer()); + }); +} + +function eightball(choice = '') { + drawBall(); + if(choice !== '') { + drawText(choice) + } +} + +function drawBall() { + console.log('Drawing ball'); + drawCircle(); + drawTriangle(); +} + +function drawText(choice, colour = 'white') { + console.log('Answer is: ' + choice); + context.fillStyle = colour; + context.font = '20px sans-serif'; + context.textAlign = 'center'; + context.fillText(choice, 150, 150); +} + +function drawCircle() { + context.fillStyle = 'black'; + context.beginPath(); + context.arc(150, 150, 150, 0, 2 * Math.PI); + context.fill(); + context.closePath(); +} + +function drawTriangle() { + context.fillStyle = 'blue'; + context.beginPath(); + context.moveTo(150, 50); + context.lineTo(250, 200); + context.lineTo(150, 50); + context.fill(); + context.closePath(); +} + +function getRandomAnswer() { + let randomIndex = Math.floor(Math.random() * choices.length); + return choices[randomIndex]; +} + +start(); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..69592fd --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + Criminally Cute Eight Ball + + +

Ask your question and then press and hold to shake.

+ + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..913cbfe --- /dev/null +++ b/style.css @@ -0,0 +1,36 @@ +body { + text-align: center; +} + +footer { + position: fixed; + width: 100%; + bottom: 0; + text-align: center; + padding-bottom: 2em; +} + +#canvas { + padding-top: 10%; + display: block; + margin: auto; +} + +#canvas:active { + animation: shake 0.5s; + animation-iteration-count: infinite; +} + +@keyframes shake { + 0% { transform: translate(1px, 1px) rotate(0deg); } + 10% { transform: translate(-1px, -2px) rotate(-1deg); } + 20% { transform: translate(-3px, 0px) rotate(1deg); } + 30% { transform: translate(3px, 2px) rotate(0deg); } + 40% { transform: translate(1px, -1px) rotate(1deg); } + 50% { transform: translate(-1px, 2px) rotate(-1deg); } + 60% { transform: translate(-3px, 1px) rotate(0deg); } + 70% { transform: translate(3px, 1px) rotate(-1deg); } + 80% { transform: translate(-1px, -1px) rotate(1deg); } + 90% { transform: translate(1px, 2px) rotate(0deg); } + 100% { transform: translate(1px, -2px) rotate(-1deg); } +} \ No newline at end of file