Difference between revisions of "Team:ETH Zurich/Team"

(Memory game - test run.)
Line 1: Line 1:
 
{{ETH_Zurich}}
 
{{ETH_Zurich}}
 +
  
 
<html>
 
<html>
 +
<head>
 +
<style>
 +
div#memory_board{
 +
background:#CCC;
 +
border:#999 1px solid;
 +
width:800px;
 +
height:540px;
 +
padding:24px;
 +
margin:0px auto;
 +
}
 +
div#memory_board > div{
 +
background: url(tile_bg.jpg) no-repeat;
 +
border:#000 1px solid;
 +
width:71px;
 +
height:71px;
 +
float:left;
 +
margin:10px;
 +
padding:20px;
 +
font-size:64px;
 +
cursor:pointer;
 +
text-align:center;
 +
}
 +
</style>
 +
<script>
  
−
   
+
var memory_array = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J','K','K','L','L'];
−
<div>
+
var memory_values = [];
−
<div class="sec page_title" >
+
var memory_tile_ids = [];
−
        <div>
+
var tiles_flipped = 0;
−
        <h1>Team</h1>
+
Array.prototype.memory_tile_shuffle = function(){
−
        </div>
+
    var i = this.length, j, temp;
−
        <p>
+
    while(--i > 0){
−
 
+
         j = Math.floor(Math.random() * (i+1));
−
<div class="image full_size" style="">
+
        temp = this[j];
−
         <img src="https://static.igem.org/mediawiki/2016/e/ef/T--ETH_Zurich--Team_Picture_Globe.jpg">
+
        this[j] = this[i];
−
</div>
+
        this[i] = temp;
−
+
    }
−
      </p>
+
}
−
</div>
+
function newBoard(){
−
      </div>
+
tiles_flipped = 0;
−
 
+
var output = '';
−
 
+
    memory_array.memory_tile_shuffle();
−
<div class="sec light_grey" >
+
for(var i = 0; i < memory_array.length; i++){
−
<div>
+
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
−
        <h2>STUDENTS</h2>
+
}
−
        <p>
+
document.getElementById('memory_board').innerHTML = output;
−
 
+
}
−
      <div>
+
function memoryFlipTile(tile,val){
−
                <ul id="paws">
+
if(tile.innerHTML == "" && memory_values.length < 2){
−
                    <li>
+
tile.style.background = '#FFF';
−
                    <img src="https://static.igem.org/mediawiki/2016/d/df/T--ETH_Zurich--Tina.png">
+
tile.innerHTML = val;
−
                    </li>
+
if(memory_values.length == 0){
−
                    <li>
+
memory_values.push(val);
−
                      <img src="https://static.igem.org/mediawiki/2016/b/bd/T--ETH_Zurich--Asli.png">
+
memory_tile_ids.push(tile.id);
−
                    </li>
+
} else if(memory_values.length == 1){
−
                    <li>
+
memory_values.push(val);
−
                        <img src="https://static.igem.org/mediawiki/2016/c/c5/T--ETH_Zurich--Sophie.png">
+
memory_tile_ids.push(tile.id);
−
                    </li>
+
if(memory_values[0] == memory_values[1]){
−
                    <li>
+
tiles_flipped += 2;
−
                      <img src="https://static.igem.org/mediawiki/2016/3/31/T--ETH_Zurich--Mattia.png">
+
// Clear both arrays
−
                    </li>
+
memory_values = [];
−
                    <li>
+
            memory_tile_ids = [];
−
                          <img src="https://static.igem.org/mediawiki/2016/1/1f/T--ETH_Zurich--Lukas.png">
+
// Check to see if the whole board is cleared
−
                    </li>
+
if(tiles_flipped == memory_array.length){
−
                    <li>
+
alert("Board cleared... generating new board");
−
                        <img src="https://static.igem.org/mediawiki/2016/6/61/T--ETH_Zurich--Andreas.png">
+
document.getElementById('memory_board').innerHTML = "";
−
                    </li>
+
newBoard();
−
                    <li>
+
}
−
                            <img src="https://static.igem.org/mediawiki/2016/e/ee/T--ETH_Zurich--Lucas.png">
+
} else {
−
                    </li>
+
function flip2Back(){
−
        </p>
+
    // Flip the 2 tiles back over
−
        </div>
+
    var tile_1 = document.getElementById(memory_tile_ids[0]);
−
</div>
+
    var tile_2 = document.getElementById(memory_tile_ids[1]);
−
</div>
+
    tile_1.style.background = 'url(tile_bg.jpg) no-repeat';
−
 
+
                tile_1.innerHTML = "";
−
 
+
    tile_2.style.background = 'url(tile_bg.jpg) no-repeat';
−
+
                tile_2.innerHTML = "";
−
 
+
    // Clear both arrays
−
 
+
    memory_values = [];
−
 
+
                memory_tile_ids = [];
−
<div class="sec white" >
+
}
−
<div>
+
setTimeout(flip2Back, 700);
−
        <h2>SUPERVISORS</h2>
+
}
−
        <p>
+
}
−
 
+
}
−
      <div>
+
}
−
                <ul id="paws">
+
</script>
−
                    <li>
+
</head>
−
                            <img src="https://static.igem.org/mediawiki/2016/3/3e/T--ETH_Zurich--Sven.jpg">
+
<body>
−
                    </li>
+
<div id="memory_board"></div>
−
                    <li>
+
<script>newBoard();</script>
−
                            <img src="https://static.igem.org/mediawiki/2016/1/17/T--ETH_Zurich--J%C3%B6rg.jpg">
+
</body>
−
                    </li>
+
−
                    <li>
+
−
                            <img src="https://static.igem.org/mediawiki/2016/5/52/T--ETH_Zurich--Kobi.jpg">
+
−
                    </li>
+
−
        </p>
+
−
        </div>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="sec light_grey">
+
−
<div>
+
−
        <h2>ADVISORS</h2>
+
−
        <p>
+
−
 
+
−
      <div>
+
−
                <ul id="paws">
+
−
                    <li>
+
−
                          <img src="https://static.igem.org/mediawiki/2016/6/66/T--ETH_Zurich--Daniel.png">
+
−
                    </li>
+
−
 
+
−
        </p>  
+
−
        </div>
+
−
 
+
−
 
+
−
</div>
+
−
      </div>
+
−
 
+
  
 
</html>
 
</html>
 
{{:Template:ETH_Zurich/footer}}
 
{{:Template:ETH_Zurich/footer}}

Revision as of 02:13, 17 October 2016

PAVLOV'S COLI


Thanks to the sponsors that supported our project: