You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
623 lines
15 KiB
JavaScript
623 lines
15 KiB
JavaScript
function fontRead(){
|
|
fontReady = true;
|
|
}
|
|
|
|
function randomNumber(min,max) {
|
|
return Math.floor(Math.random() * (max - min) + min);
|
|
};
|
|
|
|
function openWindow(c) {
|
|
window.open(`https://www.openstreetmap.org/#map=19/${c}&layers=N`,'_self');
|
|
|
|
}
|
|
|
|
var x = randomNumber(null,5);
|
|
var y = randomNumber(0,2);
|
|
|
|
console.log(x)
|
|
|
|
|
|
|
|
|
|
function preload() {
|
|
|
|
footsteps = document.getElementById("footsteps");//walking
|
|
PNF1 = document.getElementById("PNF1");
|
|
PNF2 = document.getElementById("PNF2");
|
|
LOBS1 = document.getElementById("LOBS1");
|
|
LOBS2 = document.getElementById("LOBS2");
|
|
GARDE = document.getElementById("GARDE1");
|
|
GARDE = document.getElementById("GARDE2");
|
|
SONIC1 = document.getElementById("SONIC1 ");
|
|
SONIC2 = document.getElementById("SONIC2");
|
|
PIGEON1 = document.getElementById("PIGEON1 ");
|
|
PIGEON2 = document.getElementById("PIGEON2");
|
|
|
|
myFont = loadFont("ApfelGrotezk-Regular.ttf", fontRead);
|
|
myFont2 = loadFont("typefaces/TINY5x3-40.ttf", fontRead);
|
|
myFont3 = loadFont("typefaces/TINY5x3-60.ttf", fontRead);
|
|
myFont4 = loadFont("typefaces/TINY5x3-80.ttf", fontRead);
|
|
myFont5 = loadFont("typefaces/TINY5x3-100.ttf", fontRead);
|
|
myFont6 = loadFont("typefaces/TINY5x3-120.ttf", fontRead);
|
|
myFont7 = loadFont("typefaces/TINY5x3-140.ttf", fontRead);
|
|
myFont8 = loadFont("typefaces/TINY5x3-160.ttf", fontRead);
|
|
myFont9 = loadFont("typefaces/TINY5x3-180.ttf", fontRead);
|
|
myFont10 = loadFont("typefaces/TINY5x3-200.ttf", fontRead);
|
|
myFont11 = loadFont("typefaces/TINY5x3-220.ttf", fontRead);
|
|
myFont12 = loadFont("typefaces/TINY5x3-240.ttf", fontRead);
|
|
myFont13 = loadFont("typefaces/TINY5x3-260.ttf", fontRead);
|
|
myFont14 = loadFont("typefaces/TINY5x3-280.ttf", fontRead);
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
var SOU =[[PNF1, PNF2],[LOBS1, LOBS2],[GARDE1, GARDE2], [SONIC1, SONIC2], [PIGEON1, PIGEON2]]
|
|
|
|
let sou = SOU[x][y];
|
|
|
|
var HOTSPOT = {
|
|
names: ["Hotspot name:\nPLACE NOT FOUND", "Hotspot name:\nLOBSTER LOUNGE", "Hotspot name:\nTHE SECRET GARDEN", "Hotspot name:\nSONIC THE SELLOUT", "Hotspot name:\nPIGEON PLAZA"],
|
|
coord: ["52.07242636201861/4.311324269227487","52.07494151159389/4.311367399049404","52.073236822099176/4.314598358985356","52.07642086169303/4.3083705464802105","52.07863969677628/4.304184010905719"],
|
|
url: ["coordinates/pnf.html",'cooordinates/lobster.html','coordinates/garden.html','coordinates/sonic.html','coordinates/pigeon.html']
|
|
};
|
|
|
|
|
|
// Place not found 1
|
|
// Place not found 2
|
|
// Lobster Lounge 1
|
|
// Lobster Lounge 1
|
|
// The Secret Garden
|
|
// Sonic the Sellout1
|
|
// Sonic the Sellout 2
|
|
// Pigeon Plaza 1
|
|
// Pigeon Plaza 2
|
|
|
|
console.log(x)
|
|
|
|
p5.disableFriendlyErrors = true;
|
|
|
|
var canvas;
|
|
|
|
var hit = false;
|
|
|
|
//little ball
|
|
var ballX = Math.random() * window.innerWidth; //set starting point of ball
|
|
var ballY = Math.random() * window.innerHeight;
|
|
var ballwidth = 35;//set size of ball
|
|
var ballheight = 35;
|
|
|
|
var ballDirectionX = -1;
|
|
var ballDirectionY = -1;
|
|
var ballSpeed = 5;
|
|
|
|
//player1 is CPU
|
|
var p1X = 5;//set a distance from left border***
|
|
var p1Y = 250;
|
|
var cpuSpeed = 40;
|
|
|
|
//player 2
|
|
var p2X = -5;//set a distance from right border***
|
|
var p2Y = -5;
|
|
|
|
//player 2
|
|
var p3X = -20;//set a distance from right border***
|
|
var p3Y = -20;
|
|
|
|
|
|
//playersize
|
|
var playerWidth = 10;
|
|
var playerHeight = 200;
|
|
var pSpeed = 15;
|
|
|
|
//scoreboard
|
|
var p1Score = 0;
|
|
var p2Score = 0;
|
|
|
|
//FUNCTIONS
|
|
var stage = 0;
|
|
//0 =splash
|
|
//1 =pong
|
|
|
|
var coordinateX = Math.random() * window.innerWidth-100;
|
|
var coordinateY = Math.random() * window.innerHeight-100;
|
|
|
|
var letterSize = 50;
|
|
|
|
|
|
var myFont, fontReady = false;
|
|
var clicks = 0;
|
|
var song;
|
|
|
|
var hit = false;
|
|
|
|
var inside = false;
|
|
|
|
var capture = true;
|
|
|
|
|
|
var r = 0;
|
|
var g = 0;
|
|
var b = 0;
|
|
|
|
var col = 0;
|
|
|
|
var img;
|
|
|
|
|
|
//var _createImg2;
|
|
//let cheatcode = '';
|
|
|
|
//var sliderRate,
|
|
//var sliderPan;
|
|
|
|
function setup() {
|
|
|
|
|
|
// // console.log(coordinateX);
|
|
createCanvas(windowWidth, windowHeight).position(0,0).style('z-index','-10').style('display','fixed');
|
|
width = windowWidth;
|
|
height = windowHeight;
|
|
rectMode(CENTER);
|
|
textSize(30);
|
|
//textalignment
|
|
textAlign(CENTER);
|
|
//img = loadImage =('INTRO.gif');
|
|
}
|
|
|
|
// function loaded(){
|
|
// song.play();
|
|
// }
|
|
|
|
function draw(){
|
|
|
|
footsteps.play();
|
|
|
|
//pong(); //run pong function
|
|
if (stage == 0){
|
|
splash1();//run splash1
|
|
}
|
|
if(stage == 0 && clicks== 2){
|
|
stage = 1;//startslide1
|
|
document.getElementById("GIF").style.visibility = "hidden";
|
|
}//close 0
|
|
if (stage == 1){
|
|
splash2();//run splash2
|
|
}
|
|
if(stage == 1 && clicks == 4){
|
|
stage = 2;//run splash2
|
|
}//close 1
|
|
|
|
if (stage == 2){
|
|
splash3();//run splash3
|
|
}
|
|
if(stage == 2 && clicks == 6){
|
|
stage = 3;//run splash3
|
|
}//close 2
|
|
|
|
if (stage == 3){
|
|
splash4();//run splash4
|
|
}
|
|
if(stage == 3 && clicks == 8){
|
|
stage = 4;//run splash4
|
|
}//close 3
|
|
if (stage == 4){
|
|
hideSplash(); // added by mb
|
|
pong();//run pong
|
|
noStroke();
|
|
fill(255);
|
|
textSize(80);
|
|
textAlign(CENTER, CENTER);
|
|
//displaying number of clicks
|
|
//text(clicks, width/2, height/2);
|
|
}//close 2
|
|
|
|
// if(stage == 6){ //player 1 wins
|
|
// p1Wins();
|
|
// }//close 3
|
|
//
|
|
// if(stage == 7){ //player 2 wins
|
|
// p2Wins();
|
|
// }//close 4
|
|
|
|
|
|
|
|
}//close draw
|
|
|
|
function keyPressed() {
|
|
// console.log('keyPressed: ' + key);
|
|
}
|
|
|
|
function keyPressed() {
|
|
// console.log('keyPressed: ' + key);
|
|
}
|
|
|
|
function keyReleased() {
|
|
// console.log('keyReleased: ' + key);
|
|
}
|
|
|
|
function keyTyped(){
|
|
// cheatcode += key;
|
|
// console.log('keyTyped: ' + key);
|
|
}
|
|
|
|
function mousePressed(){
|
|
// console.log('mousePressed');
|
|
clicks ++;
|
|
capture = true;
|
|
}
|
|
|
|
function mouseReleased(){
|
|
console.log('mouseReleased');
|
|
capture = false;
|
|
}
|
|
|
|
|
|
|
|
function mouseClicked(){
|
|
// console.log('mouseClicked');
|
|
}
|
|
|
|
function mouseMoved(){
|
|
// console.log('mouseMoved');
|
|
}
|
|
|
|
function mouseDragged(){
|
|
// console.log('mouseDragged');
|
|
}
|
|
|
|
function mouseWheel(){
|
|
// console.log('mouseWheel');
|
|
}
|
|
|
|
function displayInSplash(html){
|
|
var textcontainer = document.getElementById("textcontainer");
|
|
textcontainer.innerHTML = html;
|
|
textcontainer.style.display = "block"; // show the textcontainer
|
|
}
|
|
function hideSplash(){
|
|
var textcontainer = document.getElementById("textcontainer");
|
|
textcontainer.style.display = "none"; // hide the textcontainer
|
|
}
|
|
|
|
function splash1(){
|
|
var html = "Tap or Click <em>anywhere</em> to start";
|
|
displayInSplash(html);
|
|
fill(255);
|
|
}
|
|
function splash2(){
|
|
var html = 'You are the ball in a city-based pinball game. <br><br> Bounce from bumper to bumper.<br><br>Unlock secrets and surprises.<br><br>Drift through our urban playfield.';
|
|
displayInSplash(html);
|
|
background(255);
|
|
}
|
|
|
|
function splash3(){
|
|
//welcome screen
|
|
var html = " 1. Walk through the city using the <strong>coordinates</strong> (hints) given in this website.<br><br>2. Once you arrive, open your Wi-Fi settings and connect to the <strong>hotspot</strong> whose name you'll also find here.<br><br>3. Go to your <strong>web browser</strong> and type the name of the hotspot as a url: <strong>name.wlan/</strong>.<br><br>A hotspot is a local wireless access point. Within the context of this issue, however, a hotspot is not a regular Wi-Fi connection: it doesn't connect you to the Internet, but, instead, to our pinball game.";
|
|
displayInSplash(html);
|
|
background(255);
|
|
}
|
|
|
|
function splash4(){
|
|
//welcome screen
|
|
var html = 'Tap anywhere to launch a ball!';
|
|
displayInSplash(html);
|
|
background(255);
|
|
}
|
|
|
|
|
|
//function p1Wins(){
|
|
//P1 Win screen
|
|
// r = map(mouseX, 0, windowHeight, 0, 255);
|
|
// g = map(mouseY, 0, windowHeight, 255, 0);
|
|
// b = map(mouseX, 0, windowWidth, 0, 255);
|
|
// col = mouseX/2;
|
|
// background(r, g, b);
|
|
// fill(255);
|
|
// textSize(25);
|
|
// textFont(myFont);
|
|
// text('Refresh to launch a new ball', width/2, height/2);
|
|
|
|
|
|
//}//close P1
|
|
|
|
|
|
//function p2Wins(){
|
|
//P2 Win screen
|
|
// background(163);
|
|
// fill(255);
|
|
|
|
// textSize(20);
|
|
// textFont(myFont);
|
|
// text('Refresh to launch a new ball', width/2, height/2);
|
|
//}//close P2
|
|
|
|
|
|
function windowResized() {
|
|
resizeCanvas(windowWidth, windowHeight);
|
|
}
|
|
|
|
function ball(){
|
|
ballX = ballX + (ballDirectionX*ballSpeed);//move horizontally
|
|
ballY = ballY + (ballDirectionY*ballSpeed);//move vertically
|
|
|
|
noStroke();//turn off outline border
|
|
fill(255); //fill set to white
|
|
ellipse(ballX, ballY, ballwidth, ballheight);
|
|
|
|
if(ballX < 0){//ball off the left of the screen
|
|
ballDirectionX = ballDirectionX*-1;
|
|
}
|
|
if(ballX > width){//ball off the right of the screen
|
|
ballDirectionX = ballDirectionX*-1;
|
|
//insert a sound here
|
|
}
|
|
if(ballY < 0){//ball off the left of the screen
|
|
ballDirectionY = ballDirectionY*-1;
|
|
}
|
|
if(ballY > height){//ball off the top of the screen
|
|
ballDirectionY = ballDirectionY*-1;
|
|
}
|
|
}
|
|
|
|
function coordinateBall(){
|
|
noStroke();//turn off outline border
|
|
fill(0,0,0); //fill set to white
|
|
let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
|
|
ellipse(coordinateX,coordinateY, d, d);
|
|
}
|
|
|
|
function coordinateBallColored(){
|
|
noStroke();
|
|
r = map(ballX, 0, windowWidth, 0, 255);
|
|
g = map(ballY, 0, windowHeight, 255, 0);
|
|
c = map(mouseX, -99 , windowHeight, 255, 0)
|
|
let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
|
|
fill(r,g,c);
|
|
ellipse(coordinateX,coordinateY, d, d);
|
|
|
|
}
|
|
function pong() {
|
|
|
|
let name = HOTSPOT.names[x];
|
|
let coord = HOTSPOT.coord[x];
|
|
|
|
cpu(); //loop cpu function
|
|
|
|
//if (PNF1.paused) {
|
|
// PNF1.play();
|
|
//}
|
|
|
|
|
|
//IN BETWEEN VARIABLES SHOWCASE
|
|
|
|
r = map(ballX, 0, windowWidth, 0, 255);
|
|
g = map(ballY, 0, windowHeight, 255, 0);
|
|
b = map(mouseX, 0, windowWidth, 0, 255);
|
|
|
|
let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
|
|
let e = int(dist(width/2, height/2, ballX, ballY));
|
|
|
|
if (inside){
|
|
|
|
hit = collideCircleCircle(coordinateX,coordinateY,d-ballwidth,ballX, ballY,ballwidth)
|
|
console.log(hit)
|
|
} else {
|
|
hit = collideCircleCircle(coordinateX,coordinateY,d,ballX, ballY,ballwidth)
|
|
console.log(hit)
|
|
}
|
|
if (hit == true){
|
|
sou.play();
|
|
inside = true;
|
|
|
|
} else {
|
|
if (inside){
|
|
|
|
if (capture){
|
|
//inside bounce
|
|
|
|
ballDirectionX = ballDirectionX*-1;
|
|
ballDirectionY = ballDirectionY*-1;
|
|
} else {
|
|
inside = false;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
fill(255);
|
|
// text(cheatcode, 100, 100);
|
|
|
|
|
|
if (hit == false){
|
|
background(r,g,b);
|
|
coordinateBall();
|
|
textSize(width/20);
|
|
fill(255);
|
|
textFont(myFont);
|
|
textAlign(TOP);
|
|
textLeading(width/20);
|
|
text("I Don't Know Where We're Going, But\nyou are "+e+"px away from finding a hotspot ", width/2, 70);
|
|
textSize(width/35);
|
|
textFont(myFont);
|
|
textAlign(CENTER);
|
|
textLeading(width/35);
|
|
text('Click/Press while the ball is inside the circle\n to get your coordinates', width/2, height-120);
|
|
fill(0);
|
|
ball();
|
|
//background(r, g, b);
|
|
} else if (hit == true) {
|
|
background(0,0,0);
|
|
|
|
if(mouseIsPressed == true) {
|
|
// if the mouse is pressed, while the ball is in the circle
|
|
// big text at the top
|
|
coordinateBallColored();
|
|
ball();
|
|
textSize(width/20);
|
|
fill(255);
|
|
textFont(myFont);
|
|
textAlign(TOP);
|
|
textLeading(width/20);
|
|
text('I Don\'t Know Where We\'re Going, But\ngo and find a hotspot at:', width/2, 70);
|
|
|
|
// text at the bottom
|
|
textFont(myFont);
|
|
textAlign(CENTER);
|
|
textSize(width/20);
|
|
textLeading(width/20);
|
|
text(name, width/2, height-100);
|
|
textSize(width/17);
|
|
text(coord , width/2, height/2);
|
|
fill(0);
|
|
|
|
|
|
|
|
if(mouseReleased){
|
|
console.log('cane')
|
|
setTimeout(function() {
|
|
|
|
openWindow(coord);
|
|
|
|
}, 3000 );
|
|
|
|
}
|
|
}
|
|
else {
|
|
// if the mouse is not pressed, while the ball is in the circle
|
|
// big text at the top
|
|
coordinateBallColored();
|
|
ball();
|
|
textSize(width/20);
|
|
fill(255);
|
|
textFont(myFont);
|
|
textAlign(TOP);
|
|
textLeading(width/20);
|
|
text('I Don\'t Know Where We\'re Going, But\ntouch or click find a hotspot!', width/2, 70);
|
|
}
|
|
}
|
|
|
|
if(mouseIsPressed == true) {
|
|
textFont(myFont);
|
|
textAlign(CENTER);
|
|
textSize(20);
|
|
fill(0);
|
|
//text('Sound Unlocked! (your mouse is currently pressed) ', width/2, height-90);
|
|
//layer1.play();//sirens
|
|
}
|
|
|
|
if(mouseIsPressed){
|
|
if(mouseButton === RIGHT) {
|
|
textFont(myFont);
|
|
textAlign(CENTER);
|
|
textSize(20);
|
|
fill(255);
|
|
//text('Sound Unlocked! (your mouse is right clicked) ', width/2, height/2-160)
|
|
//layer5.play();
|
|
}
|
|
}
|
|
|
|
if(keyIsPressed == true) {
|
|
textAlign(CENTER);
|
|
textFont(myFont);
|
|
fill(0);
|
|
textSize(50);
|
|
// // console.log("playlayer4");
|
|
}
|
|
|
|
if(ballX >= 900 && ballX <= 1100) {
|
|
textAlign(CENTER);
|
|
textFont(myFont);
|
|
textSize(20);
|
|
fill(0);
|
|
// // console.log("playlayer6");
|
|
}
|
|
|
|
if(ballY >= 50 && ballY <= 200) {
|
|
textAlign(CENTER);
|
|
textSize(20);
|
|
// // console.log("playlayer2");
|
|
}
|
|
|
|
if(windowWidth < 800) {
|
|
textAlign(BOTTOM);
|
|
textFont(myFont);
|
|
textSize(20);
|
|
fill(0);
|
|
// // console.log("playlayer8");
|
|
|
|
}
|
|
|
|
if(windowHeight < 400) {
|
|
textAlign(CENTER);
|
|
fill(0);
|
|
textSize(20);
|
|
// // console.log("playlayer8");
|
|
}
|
|
|
|
|
|
if(ballX <= 0){
|
|
//off left wall - p1 missed
|
|
p2Score = p2Score+1;//add point
|
|
//recenterball
|
|
ball1X = width/2;
|
|
ballY = height/2;
|
|
}//close p2 scores
|
|
|
|
if(ballX >= width){
|
|
//off right wall - p2 missed
|
|
p1Score = p1Score+1;//add point
|
|
//recenterball
|
|
// ball1X = width/2;
|
|
// ballY = height/2;
|
|
}//close p1 scores
|
|
|
|
if(p1Score >= 10000){
|
|
stage = 6; //run p1wins
|
|
}//close p1wins
|
|
|
|
if(p2Score >= 10000){
|
|
stage = 6; //run p2wins
|
|
|
|
}//close p2wins
|
|
|
|
}//close pong
|
|
|
|
|
|
//UP
|
|
function keyTyped(){
|
|
if(key == 'z' && keyIsPressed){
|
|
p1Y = p1Y-pSpeed;
|
|
}//close w
|
|
//DOWN
|
|
if(key == 's' && keyIsPressed){
|
|
p1Y = p1Y+pSpeed;
|
|
}//close s
|
|
|
|
}//close keytyped
|
|
|
|
function cpu(){
|
|
//controls cpu player
|
|
if(ballX < width/2){//has the ball crossed the court?
|
|
if(p1Y <= ballY){
|
|
p1Y = p1Y+cpuSpeed;
|
|
//move down
|
|
}//close above cel
|
|
|
|
|
|
if(p1Y >= ballY){
|
|
p1Y = p1Y-cpuSpeed;
|
|
//move up
|
|
}//close bellow ball
|
|
}//close move cpu
|
|
else{
|
|
p1Y = p1Y; //only move when ball is on cpu side
|
|
}//close else
|
|
|
|
|
|
}//close cpu
|
|
hit |