De light switch game, een lastig project maar uiteindelijk toch gelukt en vroeg af. Wij hebben heel veel verschillende groepjes geholpen met dit project omdat wij best snel klaar waren en het ook goed snapte. Het was in het begin even puzzelen met hoe krijg ik die lampen nou aan en uit met de klik van een knop? Na er een tijdje onze nek over gebroken te hebben zijn we erachter gekomen en konden we beginnen aan het design, eerst hadden we alleen standaard lampen, maar dit is erg saai. Daarom hebben wij gekozen voor huizen op een sneeuwige berg, een gezellige sfeer met details erin. Door op de sterren te klikken gaan de lichten aan, met het geluid van een lichtknop die wordt aangeklikt. Uitvinden hoe het werkt met geluid was in het begin even lastig maar na een tijdje op internet zoeken hoe dit moest is dit uiteindelijk ook gelukt. Natuurlijk hebben we ook een hulp knop gemaakt voor als het niet lukt om onze best eenvoudige puzzel op te lossen.
De problemen die wij tegen gekomen zijn een hele hoop onze “eerste” design had lampen die aan konden, alleen daarna niet uit konden. Helaas hebben wij geen screenshots van de code om dit te laten zien, de oplossing die we hiervoor hebben bedacht is een variabele die we van true naar false en weer terug laten switchen om de lampen ook weer uit te kunnen laten gaan. De sterren waren even in het geheugen graven hoe je ook alweer een custom vorm deed, maar dit is uiteindelijk gelukt. Verder deed het winscreen het niet door de lagen die onstaan door de code boven of onder elkaar. Wij hebben toen bedacht om van het volledige project een if-else statement te maken, als alle lampen aanstaan dan wordt het winscreen uitgevoerd, anders is de standaard sketch met de bergen in beeld. Het lose screen was dan weer wel vrij eenvoudig door een variabele clicks te maken, elke keer als er op het scherm wordt geklikt gaat er 1 vanaf en dit wordt gedisplayed op het scherm bij de 0 is het game over. Verder is alles wel oke gegaan zonder al te veel problemen.
Hieronder ons eindresultaat waar we erg trots op zijn:
Voor als de p5js plugin niet werkt: Fullscreen en met code
var clicks = 10
var winIMG
var winSound
var song
let light1 = false
let light2 = false
let light3 = false
let light4 = false
let light5 = false
let light6 = false
let lamp1 = 'black'
let lamp2 = 'black'
let lamp3 = 'black'
let lamp4 = 'black'
let lamp5 = 'black'
let lamp6 = 'black'
function setup() {
createCanvas(500, 500);
song = loadSound("lichtschakelaar.mp3")
winSound = loadSound("You Win Voice Sound Effect.mp3")
winIMG = loadImage("Schermafbeelding 2022-01-07 132217.png")
loseSound = loadSound("You Lose Sound Effect.mp3")
}
function draw() {
background(57, 32, 51);
//als je wint
if (lamp1 == 'orange' && lamp2 == 'orange' && lamp3 == 'orange' && lamp4 == 'orange' && lamp5 == 'orange' && lamp6 == 'orange') {
winScreen();
}
else {
//ster1
fill('#fff4f3')
beginShape();
vertex(66,36)
vertex(50,36)
vertex(44,19)
vertex(36,36)
vertex(20,36)
vertex(33,47)
vertex(28,61)
vertex(43,53)
vertex(58,61)
vertex(53,47)
endShape(CLOSE);
//ster2
fill('#fff4f3')
beginShape();
vertex(266,116)
vertex(250,116)
vertex(244,99)
vertex(236,116)
vertex(220,116)
vertex(233,127)
vertex(228,141)
vertex(243,133)
vertex(258,141)
vertex(253,127)
endShape(CLOSE);
//ster3
fill('#fff4f3')
beginShape();
vertex(366,66)
vertex(350,66)
vertex(344,49)
vertex(336,66)
vertex(320,66)
vertex(333,77)
vertex(328,91)
vertex(343,83)
vertex(358,91)
vertex(353,77)
endShape(CLOSE);
//ster4
fill('#fff4f3')
beginShape();
vertex(466,46)
vertex(450,46)
vertex(444,29)
vertex(436,46)
vertex(420,46)
vertex(433,57)
vertex(428,71)
vertex(443,63)
vertex(458,71)
vertex(453,57)
endShape(CLOSE);
//ster5
fill('#fff4f3')
beginShape();
vertex(446,136)
vertex(430,136)
vertex(424,119)
vertex(416,136)
vertex(400,136)
vertex(413,147)
vertex(408,161)
vertex(423,153)
vertex(438,161)
vertex(433,147)
endShape(CLOSE);
//ster6
fill('#fff4f3')
beginShape();
vertex(96,136)
vertex(80,136)
vertex(74,119)
vertex(66,136)
vertex(50,136)
vertex(63,147)
vertex(58,161)
vertex(73,153)
vertex(88,161)
vertex(83,147)
endShape(CLOSE);
//help knop
if(mouseX >=10 && mouseX<=80 && mouseY>=470 && mouseY<=490) {
help()
}
//verste berg
fill(91, 71, 110);
strokeWeight(0);
triangle(360, 130, 760, 500, -40, 500);
fill(213, 212, 255);
strokeWeight(0);
beginShape();
vertex(360, 130);
vertex(485, 246);
vertex(390, 200);
vertex(360, 250);
vertex(320, 217);
vertex(225, 255);
endShape(CLOSE);
//dichtbijzijnste berg
fill(174, 139, 222);
strokeWeight(0);
triangle(100, 180, 500, 500, -260, 500);
fill(231, 241, 255);
strokeWeight(0);
beginShape();
vertex(100, 180);
vertex(225, 280);
vertex(145, 250);
vertex(120, 290);
vertex(70, 260);
vertex(-20, 286);
endShape(CLOSE);
//gras
fill(60, 145, 57);
ellipse(50, 580, 1000, 400);
fill(69, 168, 66);
ellipse(440, 600, 1000, 400);
//maan
fill(244, 246, 240)
ellipse(width/3.5,height/6,80,80)
//hulp knop
strokeWeight(3)
stroke(0)
fill(255,0,0)
rect(10,470,70,20)
fill(0,0,255)
text('HELP!',18,488)
//house1
//muren
stroke(0)
strokeWeight(0.5)
fill(224, 88, 98)
rect(width/4*3,380,80,80)
//dak
fill("brown")
triangle(width/4*3,380,width/4*3+80,380,width/4*3+40,330)
//deur
fill(100,100,0)
rect(width/4*3+40,420,20,40)
fill(255,200,0)
ellipse(width/4*3+55,440,5,5)
//raam
strokeWeight(2)
fill(lamp1)
rect(width/4*3+10,410,20,20)
//3d-muur
strokeWeight(0.5)
fill(224, 88, 98)
beginShape();
vertex(width/4*3,460)
vertex(width/4*3-40,440)
vertex(width/4*3-40,360)
vertex(width/4*3,380)
endShape(CLOSE);
//3d-dak
strokeWeight(0.5)
fill("brown")
beginShape();
vertex(width/4*3-40,360)
vertex(width/4*3,310)
vertex(width/4*3+40,330)
vertex(width/4*3,380)
endShape(CLOSE);
//raam2
strokeWeight(2)
fill(lamp4)
beginShape();
vertex(width/4*3-30,415)
vertex(width/4*3-30,395)
vertex(width/4*3-10,405)
vertex(width/4*3-10,425)
endShape(CLOSE);
//house2
scale(0.7)
//muren
stroke(0)
strokeWeight(0.5)
fill(191, 171, 80)
rect(width/4,500,80,80)
//dak
fill(99, 88, 36)
triangle(width/4,500,width/4+80,500,width/4+40,450)
//deur
fill(100,100,0)
rect(width/4+20,540,20,40)
fill(255,200,0)
ellipse(width/4+25,560,5,5)
//raam
strokeWeight(2)
fill(lamp2)
rect(width/4+50,530,20,20)
//3d-muur
strokeWeight(0.5)
fill(191, 171, 80)
beginShape();
vertex(width/4+80,580)
vertex(width/4+100,560)
vertex(width/4+100,480)
vertex(width/4+80,500)
endShape(CLOSE);
//3d-dak
strokeWeight(0.5)
fill(99, 88, 36)
beginShape();
vertex(width/4+80,500)
vertex(width/4+100,480)
vertex(width/4+60,440)
vertex(width/4+40,450)
endShape(CLOSE);
//raam2
strokeWeight(2)
fill(lamp5)
beginShape();
vertex(width/4+85,520)
vertex(width/4+85,540)
vertex(width/4+95,530)
vertex(width/4+95,510)
endShape(CLOSE);
//house3
//muren
scale(1.43)
stroke(0)
strokeWeight(0.5)
fill(91, 174, 189)
rect(width/2-40,415,80,80)
//dak
fill(46, 72, 77)
triangle(width/2-40,415,width/2+40,415,width/2,365)
//deur
fill(100,100,0)
rect(width/2-10,455,20,40)
fill(255,200,0)
ellipse(width/2-5,475,5,5)
//raam
strokeWeight(2)
fill(lamp3)
rect(width/2+15,450,20,20)
fill(lamp6)
rect(width/2-30,430,20,20)
noStroke();
fill(255);
textSize(20);
text('amount of clicks left: ', width/2-185, 20);
text(clicks,width/2,20)
}
if (clicks <= 0) {
loseScreen();
}
}
function mousePressed() {
clicks --;
//button1
if (mouseX >= 420 && mouseX <= 466 && mouseY >= 29 && mouseY <= 71) {
light1= !light1
light3= !light3
song.play();
}
if (light1 ) {
lamp1 = 'orange'
lamp3 = 'orange'
}
else {
lamp1 = 'black'
lamp3 = 'black'
}
//button2
if (mouseX >= 400 && mouseX <= 446 && mouseY >= 119 && mouseY <= 161) {
light2 = !light2;
light6 = !light6;
song.play();
}
if (light2 ) {
lamp2 = 'orange'
lamp6 = 'orange'
}
else {
lamp2 = 'black'
lamp6 = 'black'
}
//button3
if (mouseX >= 20 && mouseX <= 66 && mouseY >= 19 && mouseY <= 61) {
light3 = !light3;
light1 = !light1;
song.play();
}
if (light1) {
lamp3 = 'orange'
lamp1 = 'orange'
}
else {
lamp3 = 'black'
lamp1 = 'black'
}
//button4
if (mouseX >= 320 && mouseX <= 366 && mouseY >= 49 && mouseY <= 91) {
light4 = !light4;
light3 = !light3;
song.play();
}
if (light4) {
lamp4 = 'orange'
lamp3 = 'orange'
}
else {
lamp4 = 'black'
lamp3 = 'black'
}
//button5
if (mouseX >= 50 && mouseX <= 96 && mouseY >= 119 && mouseY <= 161) {
light5 = !light5;
light6 = !light6;
song.play();
}
if (light5 ) {
lamp5 = 'orange'
lamp6 = 'orange'
}
else {
lamp5 = 'black'
lamp6 = 'black'
}
//button6
if (mouseX >= 220 && mouseX <= 266 && mouseY >= 99 && mouseY <= 141) {
light6 = !light6;
song.play();
}
if (light6) {
lamp6 = 'orange'
}
else {
lamp6 = 'black'
}
if (lamp1 == 'orange' && lamp2 == 'orange' && lamp3 == 'orange' && lamp4 == 'orange' && lamp5 == 'orange' && lamp6 == 'orange') {
winSound.play()
}
if (clicks == 0) {
loseSound.play()
}
}
function winScreen() {
scale(0.85)
image(winIMG, 0,0);
fill(255,0,0)
stroke(0)
strokeWeight(10)
textSize(100)
textAlign(CENTER);
text('YOU WIN', width/2+50, height/2+100)
}
function loseScreen() {
scale(0.85)
image(winIMG, 0,0);
fill(255,0,0)
stroke(0)
strokeWeight(10)
textSize(100)
textAlign(CENTER);
text('YOU LOSE', width/2+30, height/2+100)
}
function help() {
strokeWeight(2)
textSize(20)
fill(255,0,0)
text('1',37,50)
text('2',67,150)
text('3',237,130)
text('4',337,80)
text('5',417,150)
}