Difference between revisions of "Team:KU Leuven/Secret"

Line 22: Line 22:
 
<link rel="shortcut icon" href="https://static.igem.org/mediawiki/2015/9/9c/Ku_Leuven_Favicon.gif" /
 
<link rel="shortcut icon" href="https://static.igem.org/mediawiki/2015/9/9c/Ku_Leuven_Favicon.gif" /
 
</head>
 
</head>
 +
 +
<body onload="myFunction()">
 +
  <div class="summaryheader">
 +
  <div class="summaryimg">
 +
  <img src="https://static.igem.org/mediawiki/2015/a/a6/KU_Leuven_Treetrunk.PNG" width="100%">
 +
  <div class="head">
 +
      <h2>Secret Garden</h2>
 +
    </div>
 +
  </div>
 +
  </div>
 +
<div class="summarytext1">
 +
<div class="part">
 +
<p font-style="italic"> Welcome to our Secret Garden</p>
 +
<div class="center">
 +
<canvas id="canvas"></canvas>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="subsections">
 +
<a href="https://2015.igem.org/Team:KU_Leuven">
 +
<div class="subsectionwrapper">
 +
<div class="subimgrow">
 +
<div class="subimg">
 +
<img src="https://static.igem.org/mediawiki/2015/2/2b/KU_Leuven_Monocotyl.jpg" width="100%" height="100%" >
 +
</div>
 +
<div class="subtext">
 +
<h2>Back</h2>
 +
</div>
 +
</div>
 +
</div>
 +
</a>
 +
</div>
 +
 +
<div class="center" id="footer">
 +
<div class="sponsorsleft">
 +
  <div id="kuleuven">
 +
  <a href="http://www.kuleuven.be/">
 +
  <img src="https://static.igem.org/mediawiki/2015/0/08/KULEUVEN_groot.png" alt="KU Leuven" width="100%">
 +
  </a>
 +
  </div>
 +
  <div id="krd">
 +
  <a href="http://lrd.kuleuven.be/">
 +
  <img src="https://static.igem.org/mediawiki/2015/b/b4/KU_Leuven_HR_LRD_CMYK_LOGO.jpg" alt="KU Leuven Research and Development" width="100%">
 +
  </a>
 +
  </div>
 +
  <div id="youreca">
 +
  <a href="http://www.kuleuven.be/onderzoek/youreca/">
 +
  <img src="https://static.igem.org/mediawiki/2015/4/4f/KU_Leuven_YOURECA.png" alt="YOURECA" width="100%">
 +
  </a>
 +
  </div>
 +
</div>
 +
<div id="footercenter" >
 +
  <div id="bioscenter">
 +
  <a href="http://www.kuleuven.be/bioscenter/">
 +
    <img src="https://static.igem.org/mediawiki/2015/3/3c/KU_Leuven_Logo_BioSCENTer.png" alt="bioSCENTer" width="100%">
 +
  </a> 
 +
  </div>
 +
  <div id="footerimg">
 +
  <img src="https://static.igem.org/mediawiki/2015/b/b9/KU_Leuven_Zebra_spots_wiki_footer_main.png" width="100%">
 +
  </div>
 +
</div>
 +
<div class="sponsorsright">
 +
  <div id="medicine">
 +
  <a href="http://gbiomed.kuleuven.be/english">
 +
  <img src="https://static.igem.org/mediawiki/2015/2/22/KU_Leuven_Medicine.png" alt="Faculty of Medicine" width="100%">
 +
  </a>
 +
  </div>
 +
  <div id="solvay">
 +
  <a href="http://www.solvay.com/">
 +
  <img src="https://static.igem.org/mediawiki/2015/8/89/KU_Leuven_Solvay_Transparant.png" alt="SOLVAY" width="100%">
 +
  </a>
 +
  </div>
 +
</div>
 +
</div>
 +
 +
</body>
  
 
<script>
 
<script>
−
// Create the canvas
+
function myFunction() {
−
var canvas = document.createElement("canvas");
+
 
 
var ctx = canvas.getContext("2d");
 
var ctx = canvas.getContext("2d");
−
canvas.width = 512;
+
canvas.width = 728;
−
canvas.height = 480;
+
canvas.height = 485;
 
document.body.appendChild(canvas);
 
document.body.appendChild(canvas);
 
var start=0;
 
var start=0;
  
−
// Background image
 
 
var bgReady = false;
 
var bgReady = false;
 
var bgImage = new Image();
 
var bgImage = new Image();
 
bgImage.onload = function () {
 
bgImage.onload = function () {
−
bgReady = true;
+
bgReady = true;  
 
};
 
};
 
bgImage.src = "http://nl.wallpapersma.com/wallpapers/2013/06/Gazon-Gras-485x728.jpg";
 
bgImage.src = "http://nl.wallpapersma.com/wallpapers/2013/06/Gazon-Gras-485x728.jpg";
  
−
 
−
// Hero image
 
 
var heroReady = false;
 
var heroReady = false;
 
var heroImage = new Image();
 
var heroImage = new Image();
Line 49: Line 123:
 
heroImage.src = "http://a.deviantart.net/avatars/m/i/miyeong.gif?13";
 
heroImage.src = "http://a.deviantart.net/avatars/m/i/miyeong.gif?13";
  
−
// Monster image
 
 
var monsterReady = false;
 
var monsterReady = false;
 
var monsterImage = new Image();
 
var monsterImage = new Image();
Line 57: Line 130:
 
monsterImage.src = "http://home.scarlet.be/%7Egs178596/bloemen/Bloemen35.gif";
 
monsterImage.src = "http://home.scarlet.be/%7Egs178596/bloemen/Bloemen35.gif";
  
−
// Game objects
 
 
var hero = {
 
var hero = {
 
speed: 256 // movement in pixels per second
 
speed: 256 // movement in pixels per second
Line 64: Line 136:
 
var monstersCaught = 0;
 
var monstersCaught = 0;
  
−
// Handle keyboard controls
 
 
var keysDown = {};
 
var keysDown = {};
  
Line 75: Line 146:
 
}, false);
 
}, false);
  
−
// Reset the game when the player catches a monster
 
 
var reset = function () {
 
var reset = function () {
 
   if (start<1) {
 
   if (start<1) {
Line 81: Line 151:
 
hero.y=canvas.height/2;
 
hero.y=canvas.height/2;
 
}
 
}
−
// Throw the monster somewhere on the screen randomly
+
monster.x = 32 + (Math.random() * (canvas.width - 64));
−
monster.x = 32 + (Math.random() * (canvas.width - 64));
+
 
monster.y = 32 + (Math.random() * (canvas.height - 64));
 
monster.y = 32 + (Math.random() * (canvas.height - 64));
 
};
 
};
  
−
// Update game objects
 
 
var update = function (modifier) {
 
var update = function (modifier) {
−
if (38 in keysDown) { // Player holding up
+
 +
if (38 in keysDown) {
 
hero.y -= hero.speed * modifier;
 
hero.y -= hero.speed * modifier;
 
}
 
}
−
if (40 in keysDown) { // Player holding down
+
if (40 in keysDown) {  
 
hero.y += hero.speed * modifier;
 
hero.y += hero.speed * modifier;
 
}
 
}
−
if (37 in keysDown) { // Player holding left
+
if (37 in keysDown) {
 
hero.x -= hero.speed * modifier;
 
hero.x -= hero.speed * modifier;
 
}
 
}
−
if (39 in keysDown) { // Player holding right
+
if (39 in keysDown) {  
 
hero.x += hero.speed * modifier;
 
hero.x += hero.speed * modifier;
 
}
 
}
−
 
+
if (hero.x <= (monster.x + 32)){
−
// Are they touching?
+
  if(monster.x <= (hero.x + 32)){
−
if (
+
    if(hero.y <= (monster.y + 32)){
−
hero.x <= (monster.x + 32)
+
      if(monster.y <= (hero.y + 32)){
−
&& monster.x <= (hero.x + 32)
+
−
&& hero.y <= (monster.y + 32)
+
−
&& monster.y <= (hero.y + 32)
+
−
) {
+
 
++monstersCaught;
 
++monstersCaught;
−
start=start+1;
+
        start=start+1;
 
reset();
 
reset();
−
 
 
}
 
}
 +
    }
 +
  }
 +
}
 
};
 
};
  
−
// Draw everything
 
 
var render = function () {
 
var render = function () {
 
if (bgReady) {
 
if (bgReady) {
Line 130: Line 196:
 
}
 
}
  
−
// Score
 
 
ctx.fillStyle = "rgb(250, 250, 250)";
 
ctx.fillStyle = "rgb(250, 250, 250)";
 
ctx.font = "24px Helvetica";
 
ctx.font = "24px Helvetica";
Line 138: Line 203:
 
};
 
};
  
−
// The main game loop
 
 
var main = function () {
 
var main = function () {
 
var now = Date.now();
 
var now = Date.now();
Line 152: Line 216:
 
};
 
};
  
−
// 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>
 
  
−
  <div class="summaryheader">
+
}
−
  <div class="summaryimg">
+
</script>
−
  <img src="https://static.igem.org/mediawiki/2015/a/a6/KU_Leuven_Treetrunk.PNG" width="100%">
+
−
  <div class="head">
+
−
      <h2>Secret Garden</h2>
+
−
    </div>
+
−
  </div>
+
−
  </div>
+
−
<div class="summarytext1">
+
−
<div class="part">
+
−
<p font-style="italic"> Welcome to our Secret Garden</p>
+
−
 
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="subsections">
+
−
<a href="https://2015.igem.org/Team:KU_Leuven">
+
−
<div class="subsectionwrapper">
+
−
<div class="subimgrow">
+
−
<div class="subimg">
+
−
<img src="https://static.igem.org/mediawiki/2015/2/2b/KU_Leuven_Monocotyl.jpg" width="100%" height="100%" >
+
−
</div>
+
−
<div class="subtext">
+
−
<h2>Back</h2>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</a>
+
−
</div>
+
−
 
+
−
<div class="center" id="footer">
+
−
<div class="sponsorsleft">
+
−
  <div id="kuleuven">
+
−
  <a href="http://www.kuleuven.be/">
+
−
  <img src="https://static.igem.org/mediawiki/2015/0/08/KULEUVEN_groot.png" alt="KU Leuven" width="100%">
+
−
  </a>
+
−
  </div>
+
−
  <div id="krd">
+
−
  <a href="http://lrd.kuleuven.be/">
+
−
  <img src="https://static.igem.org/mediawiki/2015/b/b4/KU_Leuven_HR_LRD_CMYK_LOGO.jpg" alt="KU Leuven Research and Development" width="100%">
+
−
  </a>
+
−
  </div>
+
−
  <div id="youreca">
+
−
  <a href="http://www.kuleuven.be/onderzoek/youreca/">
+
−
  <img src="https://static.igem.org/mediawiki/2015/4/4f/KU_Leuven_YOURECA.png" alt="YOURECA" width="100%">
+
−
  </a>
+
−
  </div>
+
−
</div>
+
−
<div id="footercenter" >
+
−
  <div id="bioscenter">
+
−
  <a href="http://www.kuleuven.be/bioscenter/">
+
−
    <img src="https://static.igem.org/mediawiki/2015/3/3c/KU_Leuven_Logo_BioSCENTer.png" alt="bioSCENTer" width="100%">
+
−
  </a> 
+
−
  </div>
+
−
  <div id="footerimg">
+
−
  <img src="https://static.igem.org/mediawiki/2015/b/b9/KU_Leuven_Zebra_spots_wiki_footer_main.png" width="100%">
+
−
  </div>
+
−
</div>
+
−
<div class="sponsorsright">
+
−
  <div id="medicine">
+
−
  <a href="http://gbiomed.kuleuven.be/english">
+
−
  <img src="https://static.igem.org/mediawiki/2015/2/22/KU_Leuven_Medicine.png" alt="Faculty of Medicine" width="100%">
+
−
  </a>
+
−
  </div>
+
−
  <div id="solvay">
+
−
  <a href="http://www.solvay.com/">
+
−
  <img src="https://static.igem.org/mediawiki/2015/8/89/KU_Leuven_Solvay_Transparant.png" alt="SOLVAY" width="100%">
+
−
  </a>
+
−
  </div>
+
−
</div>
+
−
</div>
+
  
 
</html>
 
</html>

Revision as of 20:55, 15 August 2015

Logo

Secret Garden

Welcome to our Secret Garden

Back