siina/ eightball
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First commit of this dumb thing lmao

This commit is contained in:
Siina Mashek 2023-02-15 18:20:36 +02:00
commit fa8c104951
3 changed files with 115 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
eightball.js Normal file
View File

@ -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();

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Criminally Cute Eight Ball</title>
<link rel="stylesheet" href="./style.css">
</head>
<p>Ask your question and then press and hold to shake.</p>
<body>
<canvas id="canvas" height="300" width="300"></canvas>
<script type="text/javascript" src="./eightball.js"></script>
<footer>This is a dumb work-in-progress project by Siina.</footer>
</body>
</html>

36
style.css Normal file
View File

@ -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); }
}