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

Line 33: Line 33:
 
<div class="part">
 
<div class="part">
 
<p font-style="italic"> Welcome to our Secret Garden</p>
 
<p font-style="italic"> Welcome to our Secret Garden</p>
−
</div>
+
<script>
−
</div>
+
// Create the canvas
 +
var canvas = document.createElement("canvas");
 +
var ctx = canvas.getContext("2d");
 +
canvas.width = 512;
 +
canvas.height = 480;
 +
document.body.appendChild(canvas);
 +
var start=0;
  
−
  <div class="summaryheader">
+
// Background image
−
  <div class="summaryimg">
+
var bgReady = false;
−
  <img src="https://static.igem.org/mediawiki/2015/a/a6/KU_Leuven_Treetrunk.PNG" width="100%">
+
var bgImage = new Image();
−
  <div class="head">
+
bgImage.onload = function () {
−
      <h2> Approach </h2>
+
bgReady = true;
−
    </div>
+
};
−
  </div>
+
bgImage.src = "http://nl.wallpapersma.com/wallpapers/2013/06/Gazon-Gras-485x728.jpg";
−
  </div>
+
−
<div class="summarytext1">
+
−
<div class="part">
+
−
<p></p>
+
−
</div>
+
−
</div>
+
  
−
<div class="summaryheader">
 
−
<div class="summaryimg">
 
−
  <img src="https://static.igem.org/mediawiki/2015/a/a6/KU_Leuven_Treetrunk.PNG" width="130%">
 
−
  <div class="head">
 
−
  <h2> Applications </h2>
 
−
  </div>
 
−
  </div>
 
−
</div>
 
−
<div class="summarytext2">
 
−
<div class="part">
 
  
−
<p>
+
// Hero image
−
</p>
+
var heroReady = false;
 +
var heroImage = new Image();
 +
heroImage.onload = function () {
 +
heroReady = true;
 +
};
 +
heroImage.src = "http://a.deviantart.net/avatars/m/i/miyeong.gif?13";
  
 +
// Monster image
 +
var monsterReady = false;
 +
var monsterImage = new Image();
 +
monsterImage.onload = function () {
 +
monsterReady = true;
 +
};
 +
monsterImage.src = "http://home.scarlet.be/%7Egs178596/bloemen/Bloemen35.gif";
 +
 +
// Game objects
 +
var hero = {
 +
speed: 256 // movement in pixels per second
 +
};
 +
var monster = {};
 +
var monstersCaught = 0;
 +
 +
// Handle keyboard controls
 +
var keysDown = {};
 +
 +
addEventListener("keydown", function (e) {
 +
keysDown[e.keyCode] = true;
 +
}, false);
 +
 +
addEventListener("keyup", function (e) {
 +
delete keysDown[e.keyCode];
 +
}, false);
 +
 +
// Reset the game when the player catches a monster
 +
var reset = function () {
 +
  if (start<1) {
 +
hero.x=canvas.width/2;
 +
hero.y=canvas.height/2;
 +
}
 +
// Throw the monster somewhere on the screen randomly
 +
monster.x = 32 + (Math.random() * (canvas.width - 64));
 +
monster.y = 32 + (Math.random() * (canvas.height - 64));
 +
};
 +
 +
// Update game objects
 +
var update = function (modifier) {
 +
if (38 in keysDown) { // Player holding up
 +
hero.y -= hero.speed * modifier;
 +
}
 +
if (40 in keysDown) { // Player holding down
 +
hero.y += hero.speed * modifier;
 +
}
 +
if (37 in keysDown) { // Player holding left
 +
hero.x -= hero.speed * modifier;
 +
}
 +
if (39 in keysDown) { // Player holding right
 +
hero.x += hero.speed * modifier;
 +
}
 +
 +
// Are they touching?
 +
if (
 +
hero.x <= (monster.x + 32)
 +
&& monster.x <= (hero.x + 32)
 +
&& hero.y <= (monster.y + 32)
 +
&& monster.y <= (hero.y + 32)
 +
) {
 +
++monstersCaught;
 +
start=start+1;
 +
reset();
 +
 +
}
 +
};
 +
 +
// Draw everything
 +
var render = function () {
 +
if (bgReady) {
 +
ctx.drawImage(bgImage, 0, 0);
 +
}
 +
 +
if (heroReady) {
 +
 +
ctx.drawImage(heroImage, hero.x, hero.y);
 +
}
 +
 +
if (monsterReady) {
 +
ctx.drawImage(monsterImage, monster.x, monster.y);
 +
}
 +
 +
// Score
 +
ctx.fillStyle = "rgb(250, 250, 250)";
 +
ctx.font = "24px Helvetica";
 +
ctx.textAlign = "left";
 +
ctx.textBaseline = "top";
 +
ctx.fillText("Flowers collected: " + monstersCaught, 32, 32);
 +
};
 +
 +
// The main game loop
 +
var main = function () {
 +
var now = Date.now();
 +
var delta = now - then;
 +
 +
update(delta / 1000);
 +
render();
 +
 +
then = now;
 +
 +
// Request to do this again ASAP
 +
requestAnimationFrame(main);
 +
};
 +
 +
// Cross-browser support for requestAnimationFrame
 +
var w = window;
 +
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
 +
 +
// Let's play this game!
 +
var then = Date.now();
 +
reset();
 +
main();
 +
</script>
 
</div>
 
</div>
 
</div>
 
</div>

Revision as of 19:52, 15 August 2015

Logo

Secret Garden

Welcome to our Secret Garden

Back