Keyboard for the most part, and mouse for interaction of the buttons.
xxxxxxxxxx
var letX = 200;
var letY = 200;
var rotX, rotY;
var pmX, pmY;
var boxH = 50;
var boxW = 200;
origX = 200;
origY = 200;
var shakeIntensity = 0;
var alphabet = 'ABCDEFGHiJKLMNOPQRSTUVWXYZ1234567890'.split('');
var curLet = "A";
var changeCol;
var letterColor;
var fadeSpeed = 1;
var letterColor;
var mmX, mmY;
var easing = 0.07;
var start;
var totalMillis;
var accum = 0;
var targetY = 0;
var timerOn = false;
var s, ms;
var temp = 0;
var mmW = 300;
var mmH = 275;
var cyl;
var s1;
var times = [];
var avg = 0;
var switches = [];
var cylX1, cylY1, cylX2, cylY2;
var totalMillis;
var plusCount = 1;
var pX = 200;
var pY = 200;
var tpX = pX;
var tpY = pY;
var score = 0;
var themeCol = [255, 255, 255];
var backCol = [0, 0, 0];
var error, correct;
var tS = 70;
var colB;
var colI;
var img;
var amt = 0;
var mmV;
var dvds = [];
var menuOpen = true;
var pmA = 255;
var titleA = 0;
var font;
var ctxt = false;
var div;
var modesMenu = false;
//var points = [];p
function preload() {
font = loadFont("fredoka.ttf");
}
function setup() {
var cnv = createCanvas(windowWidth, windowHeight);
img = loadImage('grad.png');
cnv.style('display', 'block');
textAlign(LEFT, TOP);
error = loadSound('error.wav');
correct = loadSound('correct.wav');
//fullscreen(true);
div = createElement('div', 'Main Developer:<br>ItsKazzle (Check out my YT!: <a href="https://youtube.com/@itskazzle">here</a>)<br><br>Ideas/Creative Helpers:<br>Casacosm<br>SlayAllDay<br>Sam Handwich<br>ATrain-Sean');
div.style("color", "#ffffff");
div.style("display", "none");
rectMode(CENTER);
textFont(font);
letterColor = color(0, 0, 0);
//describing the game
describe("A letter reflex game! in the top-middle area, there is a play button, which allows you to play the game. you have to type the letter as fast as you can, which is displayed in the center of the screen. You gain points the better you play.");
mmX = 200;
mmY = 0 - mmH / 2;
start = null;
cylX1 = -70;
cylY1 = -30;
cylX2 = -60;
cylY2 = -30;
origX = width / 2;
origY = height / 2;
mmX = width / 2;
mmY = 0 - mmH / 2;
pX = width / 2;
tpY = 0;
pY = 0;
colI = createInput();
colI.position(mmX, mmY);
colB = createButton("Not Finished");
colB.size(90);
colB.position(mmX, mmY);
var sw = {
x: cylX2,
y: cylY2,
state: true,
col: color(0, 255, 0)
}
switches.push(sw);
GenNewLetter();
fill(255);
var t1 = {
txt: "Reflex!",
tx: 700,
ty: 30,
xs: 1.5,
ys: -1.5,
}
var t2 = {
txt: "Letters!",
tx: width - 200,
ty: height - 300,
xs: 3,
ys: 3,
}
var t3 = {
txt: "Types!",
tx: width - 600,
ty: height - 200,
xs: 0.7,
ys: 0.7,
}
var t4 = {
txt: "Baller!",
tx: width - 800,
ty: height - 600,
xs: -1.7,
ys: -1.2,
}
var t5 = {
txt: "Menu!",
tx: width / 2,
ty: height / 2,
xs: 3,
ys: -4,
}
var t6 = {
txt: "Baller!",
tx: width / 2,
ty: height / 2,
xs: -0.4,
ys: -0.4,
}
var t7 = {
txt: "Who even reads these?",
tx: width / 2,
ty: height - 50,
xs: -0.7,
ys: -0.4,
}
var t8 = {
txt: "Reflexes!",
tx: width / 2,
ty: height - 50,
xs: 3,
ys: -3
}
dvds.push(t1);
dvds.push(t2);
dvds.push(t3);
dvds.push(t4);
dvds.push(t5);
dvds.push(t6);
dvds.push(t7);
dvds.push(t8);
textAlign(CENTER, CENTER);
}
function draw() {
//let dx = targetX - x; x += dx * easing; x += (targetX - x) * easing;
// if (themeCol == color(0, 0, 0)) {
//redraw();
// }
background(backCol);
//Calculate the randomness when the answer is wrong
letX = origX + random(-shakeIntensity, shakeIntensity);
letY = origY + random(-shakeIntensity, shakeIntensity);
imageMode(CENTER);
if (backCol[0] < 100 && backCol[1] < 100 && backCol[2] < 100) {
tint(lerpColor(letterColor, color(backCol), fadeSpeed));
image(img, origX, origY + 10, 200, 200);
}
textSize(tS);
fill(letterColor);
push();
translate(letX, letY);
rotate(random(-shakeIntensity / 20, shakeIntensity / 20));
text(curLet, 0, 0);
pop();
//Cap the shakeIntensity so that the letter doesn't keep shaking
if (shakeIntensity > 0) {
shakeIntensity -= 1;
} else {
shakeIntensity = 0;
}
textAlign(CENTER, CENTER);
textSize(tS - 40);
text("Types: " + score, width / 2, origY + 120);
textAlign(CENTER, CENTER);
letterColor = lerpColor(letterColor, color(themeCol), fadeSpeed);
fadeSpeed += 0.03;
//Timer Math
totalMillis = accum + (start != null ? Date.now() - start : 0);
s = Math.floor(totalMillis / 1000) % 60;
ms = Math.floor(totalMillis % 1000 / 10);
if (timerOn) {
targetY = height / 2;
} else {
targetY = -5 - mmH / 2;
}
//textSize(20);
fill(themeCol);
text(`${nf(s, 2)}.${nf(ms, 2)}`, origX, origY + 70);
fill(0);
if (pY != width / 2) {
fill(lerpColor(color(themeCol[0], themeCol[1], themeCol[2], 0), color(themeCol[0], themeCol[1], themeCol[2], 255), map(pY, 30, 200, 0, 1)));
} else {
fill(color(0, 0, 0, 0));
}
if (Math.sign(plusCount) == -1) {
text(plusCount, pX, pY);
} else {
text("+" + plusCount, pX, pY);
}
pY += (tpY - pY) * easing;
//console.log(map(pY, 0, 200, 0, 1));
fill(themeCol);
var total = 0;
for (var i = 0; i < times.length; i++) {
total += times[i];
}
avg = round(total / times.length, 2);
if (times.length != 0) {
text(avg, origX, origY - 70);
} else {
text("0", origX, origY - 70);
}
strokeWeight(1);
stroke(themeCol);
//stroke(255);
fill(backCol);
mmY += (targetY - mmY) * easing;
rect(mmX, mmY, mmW, mmH);
colI.position(mmX, mmY);
colI.size(80);
colB.position(mmX - 90, mmY);
fill(themeCol);
strokeWeight(0);
//text(switches[0].state, 70, 20);
text("Paused", mmX, mmY - mmH / 2.5);
reset();
//switches stuff
cyl = new Cylinder(cylX1 + mmX, cylY1 + mmY, cylX2 + mmX, cylY2 + mmY, 20, switches[0].col, false);
cyl.DrawCyl();
fill(themeCol);
circle(switches[0].x + mmX, switches[0].y + mmY, 20);
textSize(15);
text("Dark Mode", cylX1 + mmX + 110, cylY1 + mmY - 1);
if (menuOpen) {
startMenu();
} else {
if (pmA > 0) {
startMenu();
pmA -= 20;
timerOn = false;
}
}
if (modesMenu) {
window.alert("ERR : [REDACTED] PLEASE REOPEN PAGE");
window.close();
modesMenu = false;
}
}
function keyTyped(event) {
//handle whether or not the letter typed was the letter onscreen
if (key == curLet.toLowerCase()) {
if (!timerOn) {
accum = 0;
times.push(parseFloat(Math.floor(totalMillis / 1000) % 60 + "." + Math.floor(totalMillis % 1000 / 10)));
if (times.length > 3) {
times.shift();
}
start = Date.now();
letterColor = color(0, 255, 0);
fadeSpeed = 0;
GenNewLetter();
plusCount = 1;
pY = height / 2;
tpY = 30;
if (correct.isPlaying()) {
correct.stop();
correct.load();
}
correct.play();
score++;
amt += 1;
}
//console.log("BALLER");
} else if (key == "p") {
//fullscreen(true);
if (start == null) {
start = Date.now();
//start = null;
timerOn = false;
//start = null;
} else {
accum += Date.now() - start;
timerOn = true;
start = null;
//start = Date.now();
}
} else {
if (!timerOn) {
start -= 1000;
shakeIntensity = 15;
letterColor = color(255, 0, 0);
fadeSpeed = 0;
plusCount = -1;
pY = height / 2;
tpY = 30;
if (error.isPlaying()) {
error.stop();
error.load();
}
error.play();
score--;
amt += 1;
}
}
}
function GenNewLetter() {
curLet = random(alphabet);
}
var GCol = 255;
function Fade() {
GCol = 255;
for (var i = 0; i <= 255; i++) {
fill(0, GCol, 0);
GCol -= 1;
}
}
function reset() {
strokeWeight(1);
fill(255);
}
var state = false;
class Cylinder {
constructor(x1, y1, x2, y2, h, col) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.h = h;
this.col = col;
//this.def = false;
//state = true;
this.sX = this.x1;
this.sY = this.y1;
// if (!this.def) {
// this.sX = this.x1;
// this.sY = this.y1;
// } else if (this.def) {
// this.sX = this.x2;
// this.sY = this.y2;
// }
}
DrawOff() {
this.sX = this.x1;
this.sY = this.y1;
}
DrawOn() {
this.sX = this.x2;
this.sY = this.y2;
}
DrawCyl() {
noStroke();
fill(this.col);
rect((this.x1 + this.x2) / 2, (this.y1 + this.y2) / 2, this.x1 - this.x2, this.h);
circle(this.x1, this.y1, this.h);
circle(this.x2, this.y2, this.h);
strokeWeight(1);
fill(0);
//circle(this.sX, this.sY, this.h);
//console.log(this.sX + ", " + this.sY);
}
GetPointOne() {
return [this.x1, this.y1];
}
GetPointTwo() {
return [this.x2, this.y2]
}
GetState() {
return state;
}
FlipSwitch() {
if (dist(mouseX, mouseY, this.sX, this.sY) < this.h) {
//console.log(state);
//state = !state;
}
}
UpdateLocation() {
this.sX += 2;
}
}
function mouseClicked() {
//loop();
if (dist(mouseX, mouseY, switches[0].x + mmX, switches[0].y + mmY) < 10) {
switches[0].state = !switches[0].state;
if (switches[0].state) {
switches[0].x = cylX2;
switches[0].y = cylY2;
switches[0].col = color(0, 255, 0);
} else {
switches[0].x = cylX1;
switches[0].y = cylY1;
switches[0].col = color(255, 0, 0);
}
if (switches[0].state) {
themeCol = [255, 255, 255];
backCol = [0, 0, 0];
} else {
themeCol = [0, 0, 0];
backCol = [255, 255, 255];
}
}
//console.log(mouseX < pX + boxW / 2);
if (mouseX < pmX + boxW / 2 && mouseX > pmX - boxW / 2 && mouseY < pmY + boxH / 2 && mouseY > pmY - boxH / 2) {
menuOpen = false;
timerOn = false;
pY = 0;
ctxt = false;
}
if (mouseX < pmX + boxW / 2 && mouseX > pmX - boxW / 2 && mouseY < (height / 2) + 70 + boxH / 2 && mouseY > (height / 2) + 70 - boxH / 2) {
//console.log('WORKING');
ctxt = true;
}
//rect(width / 2, height / 2 + pmA - 255, boxW, boxH);
if (menuOpen && mouseX < (width / 2) + boxW / 2 && mouseX > (width / 2) - boxW / 2 && mouseY < (height / 2) + boxH / 2 && mouseY > (height / 2) - boxH / 2) {
modesMenu = true;
//console.log(modesMenu);
}
}
function keyPressed() {
if (keyCode == SHIFT) {
//console.log("BALLER");
if (themeCol == [0, 0, 0]) {
themeCol = [255, 0, 0];
} else {
themeCol = [0, 0, 0];
}
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
origX = width / 2;
origY = height / 2;
}
function startMenu() {
boxH = 50;
boxW = 200;
pmX = width / 2;
pmY = height / 2 - 70;
//accum += Date.now() - start;
timerOn = true;
targetY = 0 - mmH;
mmY = 0 - mmH;
fill(50, 50, 50, pmA);
noStroke();
textSize(20);
textAlign(LEFT, TOP);
rect(width / 2, height / 2 + pmA - 255, windowWidth, windowHeight);
fill(100, 100, 100, pmA);
for (var i = 0; i < dvds.length; i++) {
//console.log(i);
text(dvds[i].txt, dvds[i].tx, dvds[i].ty);
dvds[i].tx += dvds[i].xs;
dvds[i].ty += dvds[i].ys + pmA - 255;
if (dvds[i].tx + textWidth(dvds[i].txt) > width || dvds[i].tx < 0) {
dvds[i].xs *= -1;
}
if (dvds[i].ty + textAscent() > height || dvds[i].ty < -5) {
dvds[i].ys *= -1;
}
}
stroke(0);
strokeWeight(1);
fill(255, 255, 255, pmA);
rect(pmX, pmY + pmA - 255, boxW, boxH);
rect(width / 2, height / 2 + pmA - 255, boxW, boxH);
rect(width / 2, height / 2 + 70 + pmA - 255, boxW, boxH);
fill(0);
textAlign(CENTER, CENTER);
noStroke();
text("Play", pmX, pmY + pmA - 255);
text("Modes \n(In Development)", width / 2, height / 2 + pmA - 260);
text("Credits", width / 2, height / 2 + 70 + pmA - 255);
if (ctxt) {
fill(255);
div.show();
div.style('height: 100px; width: 250px; overflow: auto; font-family: \'Fredoka\'');
div.style('text-align', 'center');
div.position(width / 2 - (div.style('width') / 2), height / 2 + 125 + pmA - 255);
//text("Main Developer: ItsKazzle<br>Ideas/Creative Helpers:<br>Casacosm<br>SlayAllDay<br>Sam Handwich<br>ATrain-Sean", width / 2, height / 2 + 200 + pmA - 255);
} else {
div.hide();
}
fill(255, 255, 255, pmA);
textSize(90);
if (titleA < 255) {
titleA += 5;
//console.log(titleA);
}
fill(255, 255, 255, titleA);
text("LetteReflex", width / 2, height / 2 - 200 + pmA - 255);
}