385 lines
9.5 KiB
HTML
385 lines
9.5 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
|
||
|
|
<!--html encoding-->
|
||
|
|
<HTML>
|
||
|
|
<canvas id="gameCanvas" width="570" height = "170"></canvas>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
//Canvas Variables
|
||
|
|
var canvas = document.getElementById('gameCanvas');
|
||
|
|
var canvasContext = canvas.getBoundingClientRect();
|
||
|
|
var diamondImage = new Image();
|
||
|
|
diamondImage.src = "diamond.png";
|
||
|
|
var grayDiamondImage = new Image();
|
||
|
|
grayDiamondImage.src = "grayDiamond.png";
|
||
|
|
|
||
|
|
//From Server Variables
|
||
|
|
var minimumTime = 55;
|
||
|
|
var diamondIsAvailable = true;
|
||
|
|
var participants = 0;
|
||
|
|
var fullPresserProbabilities;
|
||
|
|
var todaysAggregatePresserProbabilities = [];
|
||
|
|
var preseserProbabilitiesAdjusted
|
||
|
|
|
||
|
|
//Time Control Variables
|
||
|
|
var fps = 30;
|
||
|
|
var dateObject = new Date();
|
||
|
|
var defaultTime = dateObject.getTime();
|
||
|
|
var buttonAdjustment = 0;
|
||
|
|
var buttonTime = 0;
|
||
|
|
var buttonTimeCountingDown = 60000 - buttonTime;
|
||
|
|
var buttonHasBeenReset = false;
|
||
|
|
|
||
|
|
//Button Press Variables
|
||
|
|
var buttonPress = false;
|
||
|
|
var mouseIsHeld = false;
|
||
|
|
var outerRingRedEffect = 234;
|
||
|
|
var outerRingGeneralEffect = 234;
|
||
|
|
var currentSecond = 60;
|
||
|
|
var presserMillisecondRandomness = 0;
|
||
|
|
|
||
|
|
//Mouse Position Calculator
|
||
|
|
function calculateMousePos(evt){
|
||
|
|
var rect = canvas.getBoundingClientRect();
|
||
|
|
var root = document.documentElement;
|
||
|
|
var mouseX = evt.clientX - rect.left - root.scrollLeft;
|
||
|
|
var mouseY = evt.clientY - rect.top - root.scrollTop;
|
||
|
|
return {
|
||
|
|
x:mouseX,
|
||
|
|
y:mouseY
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//Main Loop
|
||
|
|
window.onload = function(){
|
||
|
|
|
||
|
|
|
||
|
|
//Canvas Initialization
|
||
|
|
canvas = document.getElementById('gameCanvas');
|
||
|
|
canvasContext = canvas.getContext('2d');
|
||
|
|
canvasContext.fillStyle = "black";
|
||
|
|
|
||
|
|
//Inner Main Loop
|
||
|
|
setInterval(function() {
|
||
|
|
main();
|
||
|
|
},1000/fps);
|
||
|
|
|
||
|
|
//Button Event Listener - MouseDown
|
||
|
|
canvas.addEventListener("mousedown",function(evt){
|
||
|
|
var mousePos = calculateMousePos(evt);
|
||
|
|
mouseIsHeld = true;
|
||
|
|
if (mousePos.x > 45 && mousePos.y > 75 && mousePos.x < 170+45 && mousePos.y < 40+75) {
|
||
|
|
buttonPress = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
//Button Event Listener - MouseUp
|
||
|
|
canvas.addEventListener("mouseup", function(evt){
|
||
|
|
|
||
|
|
//Mouse Position On Button?
|
||
|
|
var mousePos = calculateMousePos(evt);
|
||
|
|
if (mousePos.x > 45 && mousePos.y > 75 && mousePos.x < 170+45 && mousePos.y < 40+75 && buttonPress == true) {
|
||
|
|
//Button Is Pressed
|
||
|
|
pressNumber = buttonTimeCountingDown
|
||
|
|
resetButton();
|
||
|
|
|
||
|
|
}
|
||
|
|
//Reset Button Reaction
|
||
|
|
mouseIsHeld = false;
|
||
|
|
buttonPress = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
//Button Event Listener - Mouse Off Screen
|
||
|
|
canvas.addEventListener("mouseleave",function(evt){
|
||
|
|
|
||
|
|
//Handles bug where button remains pressed
|
||
|
|
//if mouse holds button and leaves element
|
||
|
|
buttonPress = false;
|
||
|
|
buttonHold = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//Does Everything
|
||
|
|
function main(){
|
||
|
|
|
||
|
|
//Draws Non-timed Elements
|
||
|
|
drawBackground();
|
||
|
|
drawTitle();
|
||
|
|
drawParticipants();
|
||
|
|
|
||
|
|
//Time Control Methods
|
||
|
|
setButtonTimes();
|
||
|
|
presserSimulator();
|
||
|
|
minimumTimeHandler();
|
||
|
|
|
||
|
|
|
||
|
|
//Draws Timed Elements
|
||
|
|
drawCounter(); //Counter is seen
|
||
|
|
drawButton(); //Button is pressed
|
||
|
|
drawPieChart(); //Pie chart is updated
|
||
|
|
|
||
|
|
|
||
|
|
//Draws Remaining Non-timed Elements
|
||
|
|
drawDiamond();
|
||
|
|
|
||
|
|
}
|
||
|
|
function presserSimulator(args) {
|
||
|
|
|
||
|
|
if (buttonTimeCountingDown <= (currentSecond+presserMillisecondRandomness)*1000) {
|
||
|
|
currentSecond--;
|
||
|
|
console.log("PING", currentSecond);
|
||
|
|
if(Math.random() <= 20.0/100.0) {
|
||
|
|
console.log("PRESS!");
|
||
|
|
resetButton();
|
||
|
|
}
|
||
|
|
presserMillisecondRandomness = Math.random()*.9;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//Sets Button Times
|
||
|
|
function setButtonTimes() {
|
||
|
|
var nowTimeObject = new Date;
|
||
|
|
buttonTime = nowTimeObject.getTime() - defaultTime - buttonAdjustment;
|
||
|
|
buttonTimeCountingDown = 60000 - buttonTime;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//Resets Button if it reaches the Minimum Time Value
|
||
|
|
function minimumTimeHandler(a) {
|
||
|
|
if(buttonTimeCountingDown < (minimumTime*1000)){
|
||
|
|
resetButton();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//Draws Background
|
||
|
|
function drawBackground(){
|
||
|
|
canvasContext.fillStyle = "#FAFAFA";
|
||
|
|
canvasContext.fillRect(0,0,canvas.width, canvas.height);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//Draws "the button" to the left
|
||
|
|
function drawTitle(){
|
||
|
|
|
||
|
|
//Adjustment for text
|
||
|
|
var Xadj = -1;
|
||
|
|
var Yadj = 20;
|
||
|
|
|
||
|
|
//Draws Text
|
||
|
|
canvasContext.fillStyle = "black";
|
||
|
|
canvasContext.font = "25px georgia";
|
||
|
|
canvasContext.fillText("the button",25+Xadj,25+Yadj);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//Draws the Pressable Button
|
||
|
|
function drawButton(){
|
||
|
|
|
||
|
|
//Outer Button
|
||
|
|
|
||
|
|
canvasContext.fillStyle = "rgb(234,234,234)";
|
||
|
|
fillRoundRect(canvasContext,35,65,190,60,3);
|
||
|
|
|
||
|
|
//Press Detector
|
||
|
|
var buttonDepth = 2;
|
||
|
|
if (buttonPress == true) {
|
||
|
|
buttonDepth = 0;
|
||
|
|
}else if(buttonPress == false){
|
||
|
|
buttonDepth = 2;
|
||
|
|
}else{
|
||
|
|
console.log("DRAWBUTTON ERROR: buttonPress is not True or False");
|
||
|
|
}
|
||
|
|
|
||
|
|
//Inner Button
|
||
|
|
canvasContext.fillStyle = "#1A7FB5";
|
||
|
|
fillRoundRect(canvasContext,35+10,65+10,190-20,60-20,3);
|
||
|
|
canvasContext.fillStyle = "#2DAAEB";
|
||
|
|
fillRoundRect(canvasContext,35+10,65+10-buttonDepth,190-20,60-20-buttonDepth,3);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//Draws the Pie Chart Timer that ticks down
|
||
|
|
function drawPieChart(){
|
||
|
|
|
||
|
|
//Center coordinate = 295,100
|
||
|
|
//Outer Circle Radius = 50
|
||
|
|
|
||
|
|
if (diamondIsAvailable) {
|
||
|
|
|
||
|
|
//Creates Cyan Flash Effect
|
||
|
|
if (outerRingRedEffect > 234) {
|
||
|
|
outerRingRedEffect = 234;
|
||
|
|
}else if (outerRingRedEffect < 234) {
|
||
|
|
outerRingRedEffect += 10;
|
||
|
|
}
|
||
|
|
canvasContext.fillStyle = "rgb("+outerRingRedEffect+",234,234)";
|
||
|
|
|
||
|
|
}else{
|
||
|
|
if (outerRingGeneralEffect > 234) {
|
||
|
|
outerRingGeneralEffect = 234
|
||
|
|
}else if (outerRingGeneralEffect < 234) {
|
||
|
|
outerRingGeneralEffect += 5;
|
||
|
|
}
|
||
|
|
canvasContext.fillStyle = "rgb("+outerRingGeneralEffect+","+outerRingGeneralEffect+","+outerRingGeneralEffect+")";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
canvasContext.beginPath();
|
||
|
|
canvasContext.arc(292.5,100-2,50,0,Math.PI*2,true);
|
||
|
|
canvasContext.fill();
|
||
|
|
|
||
|
|
//Inner Circle Colouring
|
||
|
|
if (diamondIsAvailable) {
|
||
|
|
canvasContext.fillStyle = "#FFFFFF";
|
||
|
|
}else if (diamondIsAvailable == false) {
|
||
|
|
canvasContext.fillStyle = "#C8C8C8";
|
||
|
|
}
|
||
|
|
|
||
|
|
//Inner Circle Radius = 35
|
||
|
|
canvasContext.beginPath();
|
||
|
|
canvasContext.arc(292.5,100-2,35,0,Math.PI*2,true);
|
||
|
|
canvasContext.fill();
|
||
|
|
|
||
|
|
//Pie Countdown Colouring
|
||
|
|
if (diamondIsAvailable) {
|
||
|
|
canvasContext.fillStyle = "#00EEEE";
|
||
|
|
}else if (diamondIsAvailable == false) {
|
||
|
|
canvasContext.fillStyle = "#6A6A6A";
|
||
|
|
}
|
||
|
|
|
||
|
|
//Pie Drawing
|
||
|
|
canvasContext.beginPath();
|
||
|
|
canvasContext.moveTo(292.5,100-2);
|
||
|
|
canvasContext.lineTo(292.5,65-2);
|
||
|
|
canvasContext.arc(292.5,100-2,35, 3*Math.PI/2, 3/2*Math.PI + 2*Math.PI*((buttonTime)/60000),true);
|
||
|
|
canvasContext.lineTo(292.5,100-2);
|
||
|
|
canvasContext.fill();
|
||
|
|
}
|
||
|
|
|
||
|
|
//Draws the text based counter to the right of the circle
|
||
|
|
function drawCounter(){
|
||
|
|
|
||
|
|
//Outer Box
|
||
|
|
canvasContext.fillStyle = "#EAEAEA";
|
||
|
|
fillRoundRect(canvasContext,360,65,190,60,3);
|
||
|
|
|
||
|
|
//Inner Boxes with numbers
|
||
|
|
canvasContext.font = ("bold 24px Verdana");
|
||
|
|
canvasContext.fillStyle = "black";
|
||
|
|
|
||
|
|
//X and Y adjustment for text
|
||
|
|
var Xadj = 1.5;
|
||
|
|
var Yadj = 29.5;
|
||
|
|
|
||
|
|
//Time Setting
|
||
|
|
var tenSecondDigit = Math.floor(buttonTimeCountingDown/10000);
|
||
|
|
var oneSecondDigit = Math.floor((buttonTimeCountingDown%10000)/1000);
|
||
|
|
var tenthSecondDigit = Math.floor((buttonTimeCountingDown%1000)/100);
|
||
|
|
var hundrethSecondDigit = Math.floor((buttonTimeCountingDown%100)/10);
|
||
|
|
|
||
|
|
//10 second display
|
||
|
|
canvasContext.fillStyle = "white";
|
||
|
|
fillRoundRect(canvasContext,410,75,20,40,3);
|
||
|
|
canvasContext.fillStyle = "black";
|
||
|
|
canvasContext.fillText(tenSecondDigit.toString(),410+Xadj,75+Yadj);
|
||
|
|
|
||
|
|
//1 second display
|
||
|
|
canvasContext.fillStyle = "white";
|
||
|
|
fillRoundRect(canvasContext,435,75,20,40,3);
|
||
|
|
canvasContext.fillStyle = "black";
|
||
|
|
canvasContext.fillText(oneSecondDigit.toString(),435+Xadj,75+Yadj);
|
||
|
|
|
||
|
|
//0.1 second display
|
||
|
|
canvasContext.fillStyle = "white";
|
||
|
|
fillRoundRect(canvasContext,460,75,20,40,3);
|
||
|
|
canvasContext.fillStyle = "grey";
|
||
|
|
canvasContext.fillText(tenthSecondDigit.toString(),460+Xadj,75+Yadj);
|
||
|
|
|
||
|
|
//0.01 second display
|
||
|
|
canvasContext.fillStyle = "white";
|
||
|
|
fillRoundRect(canvasContext,485,75,20,40,3);
|
||
|
|
canvasContext.fillStyle = "grey";
|
||
|
|
canvasContext.fillText(hundrethSecondDigit.toString(),485+Xadj,75+Yadj);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//Draws the Participants count to the right
|
||
|
|
function drawParticipants(){
|
||
|
|
|
||
|
|
//Participants
|
||
|
|
canvasContext.fillStyle = "black"
|
||
|
|
canvasContext.font = "13px Georgia";
|
||
|
|
canvasContext.textAlign = "right";
|
||
|
|
canvasContext.fillText(buttonTime + " participants", 435+110,35+15);
|
||
|
|
canvasContext.textAlign = "left";
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//Draws the diamond in the center of the screen
|
||
|
|
function drawDiamond() {
|
||
|
|
|
||
|
|
//Gray diamond slot, or diamond itself?
|
||
|
|
if (diamondIsAvailable) {
|
||
|
|
canvasContext.drawImage(diamondImage, 292.5-17.5,100-21);
|
||
|
|
}else if (diamondIsAvailable == false) {
|
||
|
|
canvasContext.drawImage(grayDiamondImage, 292.5-17.5,100-21);
|
||
|
|
}else{
|
||
|
|
console.log("DRAW DIAMOND ERROR: Impossible");
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//Function made to round corners of rectangles
|
||
|
|
function fillRoundRect(ctx, x, y, width, height, radius) {
|
||
|
|
if (typeof radius === 'undefined') {
|
||
|
|
radius = 5;
|
||
|
|
}
|
||
|
|
if (typeof radius === 'number') {
|
||
|
|
radius = {tl: radius, tr: radius, br: radius, bl: radius};
|
||
|
|
} else {
|
||
|
|
var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
|
||
|
|
for (var side in defaultRadius) {
|
||
|
|
radius[side] = radius[side] || defaultRadius[side];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(x + radius.tl, y);
|
||
|
|
ctx.lineTo(x + width - radius.tr, y);
|
||
|
|
ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
|
||
|
|
ctx.lineTo(x + width, y + height - radius.br);
|
||
|
|
ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
|
||
|
|
ctx.lineTo(x + radius.bl, y + height);9
|
||
|
|
ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
|
||
|
|
ctx.lineTo(x, y + radius.tl);
|
||
|
|
ctx.quadraticCurveTo(x, y, x + radius.tl, y);
|
||
|
|
ctx.closePath();
|
||
|
|
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//Resets the Button
|
||
|
|
function resetButton() {
|
||
|
|
buttonAdjustment += buttonTime;
|
||
|
|
currentSecond = 60;
|
||
|
|
buttonHasBeenReset = true;
|
||
|
|
if (diamondIsAvailable) {
|
||
|
|
outerRingRedEffect = 0;
|
||
|
|
}else{
|
||
|
|
outerRingGeneralEffect = 150;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</HTML>
|