|
|
Line 113: |
Line 113: |
| <script> | | <script> |
| function wikimap() { | | function wikimap() { |
| + | // Create the canvas |
| var ctx = canvas.getContext("2d"); | | var ctx = canvas.getContext("2d"); |
| canvas.width = 595; | | canvas.width = 595; |
| canvas.height = 427; | | canvas.height = 427; |
− | canvas.y=screen.height/4;
| + | document.body.appendChild(canvas); |
| var start=0; | | var start=0; |
− | frame = 0;
| + | var level=0; |
| + | var leveldiscovered=1; |
| | | |
| + | // Background image |
| var bgReady = false; | | var bgReady = false; |
| var bgImage = new Image(); | | var bgImage = new Image(); |
Line 125: |
Line 128: |
| bgReady = true; | | bgReady = true; |
| }; | | }; |
− | bgImage.src = "https://static.igem.org/mediawiki/2015/7/7b/KU_Leuven_PlattegrondGelijksvloer.png"; | + | bgImage.src = "plattegrondGelijksvloer.PNG"; |
− | var start=0;
| + | |
− | var level=0;
| + | |
− | var leveldiscovered=1;
| + | |
| | | |
| + | // avatar image |
| var avatarReady = false; | | var avatarReady = false; |
| var avatarImage = new Image(); | | var avatarImage = new Image(); |
Line 135: |
Line 137: |
| avatarReady = true; | | avatarReady = true; |
| }; | | }; |
− | avatarImage.src = "http://a.deviantart.net/avatars/m/i/miyeong.gif?13"; | + | avatarImage.src = "miyeong.gif"; |
− | | + | |
| | | |
| // flower image | | // flower image |
Line 152: |
Line 153: |
| doorReady = true; | | doorReady = true; |
| }; | | }; |
− | doorImage.src = "https://static.igem.org/mediawiki/2015/2/25/KU_Leuven_Magicdoor.png"; | + | doorImage.src = "magicdoor.png"; |
| var windowfound = 0; | | var windowfound = 0; |
| | | |
| + | // Game objects |
| var avatar = { | | var avatar = { |
| speed: 256 // movement in pixels per second | | speed: 256 // movement in pixels per second |
| }; | | }; |
| + | |
| var flower = {}; | | var flower = {}; |
| + | var door = {}; |
| var flowersCaught = 0; | | var flowersCaught = 0; |
| | | |
| + | // Handle keyboard controls |
| var keysDown = {}; | | var keysDown = {}; |
| | | |
Line 171: |
Line 176: |
| }, false); | | }, false); |
| | | |
− | | + | // Reset the game when the player catches a flower |
| var reset = function () { | | var reset = function () { |
| if (start<1) { | | if (start<1) { |
− | avatar.x=canvas.width/2; | + | avatar.x=305; |
− | avatar.y=canvas.height/2; | + | avatar.y=355; |
| } | | } |
| flower.x = 32 + (Math.random() * (canvas.width - 64)); | | flower.x = 32 + (Math.random() * (canvas.width - 64)); |
Line 181: |
Line 186: |
| }; | | }; |
| | | |
| + | |
| + | // Update game objects |
| var update = function (modifier) { | | var update = function (modifier) { |
− |
| + | |
− | if (38 in keysDown) { | + | //gelijkvloers |
− | if (avatar.y < 72){
| + | if (level < 1) { |
− | avatar.y -= avatar.speed * modifier; | + | if (38 in keysDown) { // Player holding up |
− | }
| + | if (avatar.y < 72){ |
− | else if (avatar.y < 141){
| + | avatar.y -= avatar.speed * modifier; |
− | if (avatar.x > 365){
| + | |
− | avatar.y -= avatar.speed * modifier;
| + | |
| } | | } |
− | else if (avatar.x < 320){
| + | else if (avatar.y < 141){ |
− | avatar.y -= avatar.speed * modifier;
| + | if (avatar.x > 365){ |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x < 320){ |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| } | | } |
− | }
| + | else if (avatar.y < 160) { |
− | else if (avatar.y < 160) {
| + | avatar.y -= avatar.speed * modifier; |
− | avatar.y -= avatar.speed * modifier;
| + | } |
| + | else if (avatar.y < 210){ |
| + | if (avatar.x > 370){ |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x > 260){ |
| + | if (avatar.x < 270){ |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.x > 130){ |
| + | if (avatar.x < 150){ |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| } | | } |
− | else if (avatar.y < 210){
| |
− | if (avatar.x > 370){
| |
− | avatar.y -= avatar.speed * modifier;
| |
| } | | } |
− | else if (avatar.x > 260){
| + | else if (avatar.y < 260){ |
− | if (avatar.x < 270){
| + | avatar.y -= avatar.speed * modifier; |
− | avatar.y -= avatar.speed * modifier;
| + | } |
− | }
| + | else if (avatar.y < 280){ |
− | }
| + | if (avatar.x > 370){ |
− | else if (avatar.x > 130){ | + | avatar.y -= avatar.speed * modifier; |
− | if (avatar.x < 150){
| + | } |
− | avatar.y -= avatar.speed * modifier;
| + | else if (avatar.x > 280){ |
− | }
| + | if (avatar.x < 360){ |
− | }
| + | avatar.y -= avatar.speed * modifier; |
− | }
| + | } |
− | else if (avatar.y < 260){
| + | |
− | avatar.y -= avatar.speed * modifier;
| + | |
| } | | } |
− | else if (avatar.y < 280){
| + | else if (avatar.x < 160){ |
− | if (avatar.x > 370){
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| + | } |
| + | else { |
| avatar.y -= avatar.speed * modifier; | | avatar.y -= avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x > 280){
| + | } |
− | if (avatar.x < 360){
| + | if (40 in keysDown) { // Player holding down |
− | avatar.y -= avatar.speed * modifier;
| + | if (avatar.y < 95){ |
− | }
| + | |
− | }
| + | |
− | else if (avatar.x < 160){
| + | |
− | avatar.y -= avatar.speed * modifier;
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | else{
| + | |
− | avatar.y -= avatar.speed * modifier;
| + | |
− | }
| + | |
− | }
| + | |
− | if (40 in keysDown) { | + | |
− | if (avatar.y < 95){
| + | |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
Line 242: |
Line 250: |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x < 320){
| + | else if (avatar.x < 320){ |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
| } | | } |
− | else if (avatar.y < 150){
| + | else if (avatar.y < 150){ |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
− | else if (avatar.y < 160) { | + | if (avatar.y < 160) { |
| if (avatar.x > 370){ | | if (avatar.x > 370){ |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
| + | else if (avatar.x > 280){} |
| else if (avatar.x > 260){ | | else if (avatar.x > 260){ |
− | if (avatar.x < 280){
| |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
− | }
| + | else if (avatar.x > 150){} |
| else if (avatar.x > 130){ | | else if (avatar.x > 130){ |
− | if (avatar.x < 150){
| |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
− | }
| |
| } | | } |
− | else if (avatar.y < 210){
| + | else if (avatar.y < 210){ |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
Line 271: |
Line 277: |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
| + | else if (avatar.x > 315){} |
| else if (avatar.x > 280){ | | else if (avatar.x > 280){ |
− | if (avatar.x < 315){
| |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
− | }
| + | else if (avatar.x > 160){} |
− | else if (avatar.x < 160){
| + | else if (avatar.x > 125){ |
− | if (avatar.x > 125){
| + | |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
− | }
| |
| else if (avatar.x < 75){ | | else if (avatar.x < 75){ |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
Line 288: |
Line 292: |
| avatar.y += avatar.speed * modifier; | | avatar.y += avatar.speed * modifier; |
| } | | } |
− | } | + | } |
− | if (37 in keysDown) { | + | if (37 in keysDown) { // Player holding left |
| if (avatar.y < 60) { | | if (avatar.y < 60) { |
| if (avatar.x > 375){ | | if (avatar.x > 375){ |
| avatar.x -= avatar.speed * modifier; | | avatar.x -= avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x < 350){ | + | else if (avatar.x > 350){} |
| + | else if (avatar.x > 210){ |
| avatar.x -= avatar.speed * modifier; | | avatar.x -= avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x < 210){}
| |
| else if (avatar.x < 200){ | | else if (avatar.x < 200){ |
| avatar.x -= avatar.speed * modifier; | | avatar.x -= avatar.speed * modifier; |
| } | | } |
− |
| |
| } | | } |
| else if (avatar.y < 108) { | | else if (avatar.y < 108) { |
Line 315: |
Line 318: |
| avatar.x -= avatar.speed * modifier; | | avatar.x -= avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x < 350){ | + | else if (avatar.x > 350){} |
| + | else if (avatar.x > 210){ |
| avatar.x -= avatar.speed * modifier; | | avatar.x -= avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x < 210){}
| |
| else if (avatar.x < 200){ | | else if (avatar.x < 200){ |
| avatar.x -= avatar.speed * modifier; | | avatar.x -= avatar.speed * modifier; |
Line 345: |
Line 348: |
| avatar.x -= avatar.speed * modifier; | | avatar.x -= avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x < 350){ | + | else if (avatar.x > 350){} |
| + | else if (avatar.x > 210){ |
| avatar.x -= avatar.speed * modifier; | | avatar.x -= avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x < 210){}
| + | else if (avatar.x > 190){} |
− | else if (avatar.x < 190){ | + | else if (avatar.x > 130){ |
| avatar.x -= avatar.speed * modifier; | | avatar.x -= avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x < 130){}
| |
| else if (avatar.x < 120){ | | else if (avatar.x < 120){ |
| avatar.x -= avatar.speed * modifier; | | avatar.x -= avatar.speed * modifier; |
| } | | } |
− | } | + | } |
− | if (39 in keysDown) { | + | if (39 in keysDown) { // Player holding right |
− | if (avatar.y < 160) {
| + | if (avatar.y < 60) { |
| + | if (avatar.x > 320){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x > 312){} |
| + | else if (avatar.x > 160){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x < 150){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 108) { |
| + | if (avatar.x > 160){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x < 150){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 160) { |
| if (avatar.x > 320){ | | if (avatar.x > 320){ |
| avatar.x += avatar.speed * modifier; | | avatar.x += avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x < 312){ | + | else if (avatar.x > 312){} |
| + | else if (avatar.x > 200){ |
| avatar.x += avatar.speed * modifier; | | avatar.x += avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x < 200){}
| + | else if (avatar.x > 190){} |
− | else if (avatar.x < 190){ | + | else if (avatar.x > 150){ |
| avatar.x += avatar.speed * modifier; | | avatar.x += avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x < 150){}
| |
| else if (avatar.x < 145){ | | else if (avatar.x < 145){ |
| avatar.x += avatar.speed * modifier; | | avatar.x += avatar.speed * modifier; |
Line 396: |
Line 419: |
| avatar.x += avatar.speed * modifier; | | avatar.x += avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x > 312){}
| + | else if (avatar.x > 312){} |
| else if (avatar.x > 160){ | | else if (avatar.x > 160){ |
| avatar.x += avatar.speed * modifier; | | avatar.x += avatar.speed * modifier; |
| } | | } |
− | else if (avatar.x > 150){}
| + | else if (avatar.x > 150){} |
| else if (avatar.x > 110){ | | else if (avatar.x > 110){ |
| avatar.x += avatar.speed * modifier; | | avatar.x += avatar.speed * modifier; |
Line 407: |
Line 430: |
| avatar.x += avatar.speed * modifier; | | avatar.x += avatar.speed * modifier; |
| } | | } |
| + | } |
| + | |
| + | // walls |
| | | |
| + | if (avatar.x < 14){ |
| + | avatar.x=14; |
| + | if (avatar.y < 14){ |
| + | avatar.y=14; |
| + | } |
| + | if (avatar.y > canvas.height-65){ |
| + | avatar.y=canvas.height-65; |
| + | } |
| + | } |
| + | |
| + | else if (avatar.y < 14){ |
| + | avatar.y=14; |
| + | if (avatar.x > canvas.width-65){ |
| + | avatar.x=canvas.width-65; |
| + | } |
| + | } |
| + | |
| + | else if (avatar.x > canvas.width-65){ |
| + | avatar.x=canvas.width-65; |
| + | if (avatar.y > canvas.height-65){ |
| + | avatar.y=canvas.height-65; |
| + | } |
| + | } |
| + | |
| + | |
| + | else if (avatar.y > canvas.height-65){ |
| + | if (avatar.x > 320){ |
| + | avatar.y=canvas.height-65; |
| + | } |
| + | else if (avatar.x > 290){ |
| + | avatar.y=0; |
| + | level = 3; |
| + | } |
| + | else { |
| + | avatar.y=canvas.height-65; |
| + | } |
| + | } |
| + | |
| + | |
| + | //checken in welke kamer je bent en de correcte tekst vertonen |
| + | if (avatar.x > 320) { |
| + | //living |
| + | if (avatar.y > 200){ |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "block"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | //eettafel |
| + | else { |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "block"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | } |
| + | |
| + | else if (avatar.x > 160) { |
| + | //keuken |
| + | if (avatar.y < 205){ |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "block"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | else if (avatar.y >270) { |
| + | //inkom |
| + | if (avatar.x > 240){ |
| + | document.getElementById("general").style.display = "block"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | leveldiscovered=1; |
| + | } |
| + | //trap |
| + | else { |
| + | if (leveldiscovered < 1) { |
| + | document.getElementById("general").style.display = "block"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | else { |
| + | bgImage.src = "Firstfloor.png"; |
| + | level=1; |
| + | leveldiscovered=0; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | else if (avatar.x < 150) { |
| + | //bureau |
| + | if (avatar.y < 205){ |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "block"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | //badkamer |
| + | else if (avatar.x < 80) { |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "block"; |
| + | } |
| + | //toilet |
| + | else if (avatar.x > 80){ |
| + | if (avatar.y > 270) { |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "block"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | } |
| + | |
| + | |
| + | |
| + | |
| + | // walls |
| + | |
| + | if (avatar.x < 14){ |
| + | avatar.x=14; |
| + | if (avatar.y < 14){ |
| + | avatar.y=14; |
| + | } |
| + | if (avatar.y > canvas.height-65){ |
| + | avatar.y=canvas.height-65; |
| + | } |
| + | } |
| + | |
| + | else if (avatar.y < 14){ |
| + | avatar.y=14; |
| + | if (avatar.x > canvas.width-65){ |
| + | avatar.x=canvas.width-65; |
| + | } |
| + | } |
| + | |
| + | else if (avatar.x > canvas.width-65){ |
| + | avatar.x=canvas.width-65; |
| + | if (avatar.y > canvas.height-65){ |
| + | avatar.y=canvas.height-65; |
| + | } |
| + | } |
| + | |
| + | |
| + | else if (avatar.y > canvas.height-65){ |
| + | if (avatar.x < 320){ |
| + | avatar.y=canvas.height-65; |
| + | } |
| + | else if (avatar.x > 290){ |
| + | avatar.y=0; |
| + | level = 3; |
| + | } |
| + | else { |
| + | avatar.y=canvas.height-65; |
| + | } |
| + | } |
| + | |
| + | } |
| + | } |
| + | |
| + | //eerste verdieping |
| + | else if (level < 2) { |
| + | if (38 in keysDown) { // Player holding up |
| + | if (avatar.y < 120) { |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.y < 150) { |
| + | if (avatar.x < 160) { |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x > 370) { |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 160) { |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.y < 210) { |
| + | if (avatar.x > 310){} |
| + | else if (avatar.x > 210){ |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| + | } |
| + | else { |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| + | } |
| + | if (40 in keysDown) { // Player holding down |
| + | if (avatar.y < 90){ |
| + | avatar.y += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.y < 120) { |
| + | if (avatar.x < 160) { |
| + | avatar.y += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x > 370) { |
| + | avatar.y += avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 150){ |
| + | avatar.y += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.y < 180){ |
| + | if (avatar.x > 310){} |
| + | else if (avatar.x > 210){ |
| + | avatar.y += avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y > canvas.height-110) { |
| + | if (avatar.x > 210){ |
| + | avatar.y += avatar.speed * modifier; |
| + | } |
| + | } |
| + | else { |
| + | avatar.y += avatar.speed * modifier; |
| + | } |
| + | } |
| + | if (37 in keysDown) { // Player holding left |
| + | if (avatar.y < 70) { |
| + | if (avatar.x > 375){ |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x > 350){} |
| + | else if (avatar.x > 215){ |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x < 200){ |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 95) { |
| + | if (avatar.x > 215){ |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x < 200){ |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 145) { |
| + | if (avatar.x < 215 ) { |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x > 375) { |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 155) { |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.y <205) { |
| + | if (avatar.x < 375){} |
| + | else if (avatar.x > 215){ |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 210) { |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.y > 215) { |
| + | if (avatar.x > 375){ |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x > 350){} |
| + | else if (avatar.x > 215){ |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x < 200){ |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | } |
| + | } |
| + | if (39 in keysDown) { // Player holding right |
| + | if (avatar.y < 70) { |
| + | if (avatar.x > 350){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x > 310){} |
| + | else if (avatar.x > 180){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x < 155){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 95) { |
| + | if (avatar.x > 210){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x < 155){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 145) { |
| + | if (avatar.x < 155 ) { |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x > 350) { |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 155) { |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.y <205) { |
| + | if (avatar.x > 310){} |
| + | else if (avatar.x > 155){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | } |
| + | else if (avatar.y < 210) { |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.y >215) { |
| + | if (avatar.x > 350){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x > 310){} |
| + | else if (avatar.x > 180){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | else if (avatar.x < 150){ |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | } |
| + | } |
| + | |
| + | // walls |
| + | if (avatar.x < 30){ |
| + | avatar.x=30; |
| + | if (avatar.y < 20){ |
| + | avatar.y=20; |
| + | } |
| + | if (avatar.y > canvas.height-72){ |
| + | avatar.y=canvas.height-72; |
| + | } |
| + | } |
| + | |
| + | else if (avatar.y < 20){ |
| + | avatar.y=20; |
| + | if (avatar.x > canvas.width-70){ |
| + | avatar.x=canvas.width-70; |
| + | } |
| + | } |
| + | |
| + | else if (avatar.x > canvas.width-70){ |
| + | avatar.x=canvas.width-70; |
| + | if (avatar.y > canvas.height-70){ |
| + | avatar.y=canvas.height-70; |
| + | } |
| + | } |
| + | |
| + | |
| + | else if (avatar.y > canvas.height-70){ |
| + | avatar.y=canvas.height-70; |
| + | } |
| + | |
| + | //checken in welke kamer je bent en de correcte tekst vertonen |
| + | if (avatar.x > 320) { |
| + | //living |
| + | if (avatar.y > 200){ |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "block"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | //eettafel |
| + | else { |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "block"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | } |
| + | |
| + | else if (avatar.x > 160) { |
| + | //keuken |
| + | if (avatar.y < 205){ |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "block"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | else if (avatar.y >270) { |
| + | //inkom |
| + | if (avatar.x > 240){ |
| + | document.getElementById("general").style.display = "block"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | leveldiscovered=1; |
| + | } |
| + | //trap |
| + | else { |
| + | if (leveldiscovered < 1) { |
| + | document.getElementById("general").style.display = "block"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | else { |
| + | bgImage.src = "plattegrondGelijksvloer.PNG"; |
| + | level=0; |
| + | leveldiscovered=0; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | else if (avatar.x < 150) { |
| + | //bureau |
| + | if (avatar.y < 205){ |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "block"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | //badkamer |
| + | else if (avatar.x < 80) { |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "none"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "block"; |
| + | } |
| + | //toilet |
| + | else if (avatar.x > 80 && avatar.y > 270) { |
| + | document.getElementById("general").style.display = "none"; |
| + | document.getElementById("outreach").style.display = "none"; |
| + | document.getElementById("team").style.display = "none"; |
| + | document.getElementById("project").style.display = "none"; |
| + | document.getElementById("notebook").style.display = "block"; |
| + | document.getElementById("modeling").style.display = "none"; |
| + | document.getElementById("research").style.display = "none"; |
| + | } |
| + | } |
| + | } |
| + | |
| + | //tuin |
| + | else { |
| + | flowerImage.src = "Bloemen35.gif"; |
| + | bgImage.src = "gras.jpg"; |
| + | |
| + | if (38 in keysDown) { |
| + | avatar.y -= avatar.speed * modifier; |
| + | } |
| + | if (40 in keysDown) { |
| + | avatar.y += avatar.speed * modifier; |
| + | } |
| + | if (37 in keysDown) { |
| + | avatar.x -= avatar.speed * modifier; |
| + | } |
| + | if (39 in keysDown) { |
| + | avatar.x += avatar.speed * modifier; |
| + | } |
| + | if (avatar.x <= (flower.x + 32)){ |
| + | if(flower.x <= (avatar.x + 32)){ |
| + | if(avatar.y <= (flower.y + 32)){ |
| + | if(flower.y <= (avatar.y + 32)){ |
| + | ++flowersCaught; |
| + | avatar.speed=avatar.speed+2; |
| + | start=start+1; |
| + | reset(); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | |
| + | if (avatar.x < 0){ |
| + | avatar.x=canvas.width; |
| + | if (avatar.y < 0){ |
| + | avatar.y=canvas.height; |
| + | } |
| + | if (avatar.y > canvas.height){ |
| + | avatar.y=0; |
| + | } |
| + | } |
| + | |
| + | else if (avatar.y > canvas.height){ |
| + | avatar.y=0; |
| + | if (avatar.x > canvas.width){ |
| + | avatar.x=0; |
| + | } |
| + | } |
| + | |
| + | else if (avatar.x > canvas.width){ |
| + | avatar.x=0; |
| + | if (avatar.y > canvas.height){ |
| + | avatar.y=0; |
| + | } |
| + | } |
| + | |
| + | else if (avatar.y < 0){ |
| + | if (avatar.x > 320){ |
| + | avatar.y=canvas.height |
| + | } |
| + | if (avatar.x > 290){ |
| + | avatar.y = canvas.height-65; |
| + | level = 0; |
| + | bgImage.src = "plattegrondGelijksvloer.PNG"; |
| + | } |
| + | else { |
| + | avatar.y=canvas.height; |
| + | } |
| + | } |
| + | |
| + | if (flowersCaught > 0) { |
| + | if (avatar.x < 380){ |
| + | if( avatar.x > 300){ |
| + | if(avatar.y > 300){ |
| + | if( avatar.y < 370){ |
| + | if (windowfound < 1) { |
| + | window.alert("you can visit our secret page") |
| + | windowfound = 1; |
| + | reset(); |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| | | |
| } | | } |
Line 413: |
Line 1,005: |
| }; | | }; |
| | | |
| + | // Draw everything |
| var render = function () { | | var render = function () { |
| if (bgReady) { | | if (bgReady) { |
Line 422: |
Line 1,015: |
| ctx.drawImage(avatarImage, avatar.x, avatar.y); | | ctx.drawImage(avatarImage, avatar.x, avatar.y); |
| } | | } |
| + | |
| | | |
− | if (flowerReady) {
| |
− | ctx.drawImage(flowerImage, flower.x, flower.y);
| |
− | }
| |
| | | |
| + | // Score |
| ctx.fillStyle = "rgb(250, 250, 250)"; | | ctx.fillStyle = "rgb(250, 250, 250)"; |
| ctx.font = "24px Helvetica"; | | ctx.font = "24px Helvetica"; |
| ctx.textAlign = "left"; | | ctx.textAlign = "left"; |
| ctx.textBaseline = "top"; | | ctx.textBaseline = "top"; |
− | ctx.fillText("Groundfloor", 32, 32);
| + | if (level < 1) { |
| + | ctx.fillText("Groundfloor", 32, 32); |
| + | } |
| + | else if (level < 2) { |
| + | ctx.fillText("Firstfloor", 32, 32); |
| + | } |
| + | else { |
| + | if (flowerReady) { |
| + | ctx.drawImage(flowerImage, flower.x, flower.y); |
| + | } |
| + | if (flowersCaught > 0) { |
| + | if (flowersCaught < 5){ |
| + | if (doorReady) { |
| + | ctx.drawImage(doorImage, 300, 300); |
| + | } |
| + | } |
| + | } |
| + | ctx.fillText("Flowers collected: " + flowersCaught, 32, 32); |
| + | } |
| }; | | }; |
| | | |
| + | //checkroom |
| + | |
| + | |
| + | // The main game loop |
| var main = function () { | | var main = function () { |
| var now = Date.now(); | | var now = Date.now(); |
Line 440: |
Line 1,054: |
| update(delta / 1000); | | update(delta / 1000); |
| render(); | | render(); |
− |
| |
| then = now; | | then = now; |
| | | |
Line 447: |
Line 1,060: |
| }; | | }; |
| | | |
| + | // Cross-browser support for requestAnimationFrame |
| var w = window; | | var w = window; |
| requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame; | | requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame; |
| | | |
− | | + | // Let's play this game! |
| var then = Date.now(); | | var then = Date.now(); |
− | reset(); | + | reset() |
− | main(); | + | main(); |
− | | + | }; |
− | } | + | |
| </script> | | </script> |
| | | |
| </html> | | </html> |