Difference between revisions of "Team:Tsinghua-A/fluid game"

(Created page with "{{Tsinghua-A}} <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Discription</title> <meta name="viewport" content="w...")
 
Line 39: Line 39:
  
 
     <style type="text/css">
 
     <style type="text/css">
     #apDiv_background {
+
     .myTitle1 {
position:absolute;
+
width:100%;
+
height:5000px;
+
z-index:10000;
+
top: 293px;
+
left: 0px;
+
}
+
    #apDiv_title1 {
+
position:absolute;
+
width:90%;
+
height:0px;
+
z-index:1;
+
left: 5%;
+
top: -70px;
+
font-size: 36px;
+
}
+
    #apDiv_h2_1 {
+
position:absolute;
+
width:90%;
+
height:30px;
+
z-index:2;
+
left: 5%;
+
top: 804px;
+
font-size: 36px;
+
text-align: left;
+
}
+
    #apDiv_figure1 {
+
position:absolute;
+
width:200px;
+
height:50px;
+
z-index:3;
+
left: 5%;
+
top: 984px;
+
font-size: 100px;
+
text-align: center;
+
}
+
    #apDiv_title2 {
+
position:absolute;
+
 
width:90%;
 
width:90%;
 
height:84px;
 
height:84px;
z-index:1;
+
margin-left: 5%;
left: 5%;
+
margin-bottom: 10px;
top: 1075px;
+
 
font-size: 40px;
 
font-size: 40px;
 
}
 
}
    #apDiv_description1 {
+
.myTitle2 {
position:absolute;
+
width:20%;
+
height:25px;
+
z-index:4;
+
left: 5%;
+
top: 1154px;
+
font-size: 14px;
+
}
+
    #apDiv_test2 {
+
position:absolute;
+
width:90%;
+
height:50px;
+
z-index:2;
+
left: 5%;
+
top: 3370px;
+
font-size: 20px;
+
text-align: left;
+
}
+
    #apDiv_figure2 {
+
position:absolute;
+
width:200px;
+
height:50px;
+
z-index:3;
+
left: 25%;
+
top: 984px;
+
font-size: 100px;
+
text-align: center;
+
}
+
    #apDiv_description2 {
+
position:absolute;
+
width:20%;
+
height:25px;
+
z-index:4;
+
left: 25%;
+
top: 1154px;
+
font-size: 14px;
+
}
+
    #apDiv_test3 {
+
position:absolute;
+
width:90%;
+
height:50px;
+
z-index:2;
+
left: 5%;
+
top: 1000px;
+
font-size: 20px;
+
text-align: left;
+
}
+
    #apDiv_figure3 {
+
position:absolute;
+
width:200px;
+
height:50px;
+
z-index:3;
+
left: 45%;
+
top: 984px;
+
font-size: 100px;
+
text-align: center;
+
}
+
    #apDiv_description3 {
+
position:absolute;
+
width:20%;
+
height:25px;
+
z-index:4;
+
left: 45%;
+
top: 1154px;
+
font-size: 14px;
+
}
+
    #apDiv_test4 {
+
position:absolute;
+
width:90%;
+
height:50px;
+
z-index:2;
+
left: 5%;
+
top: 3780px;
+
font-size: 20px;
+
text-align: left;
+
}
+
    #apDiv_title3 {
+
position:absolute;
+
 
width:90%;
 
width:90%;
 
height:84px;
 
height:84px;
z-index:1;
+
margin-left: 5%;
left: 5%;
+
margin-bottom: 10px;
top: 1860px;
+
font-size: 40px;
+
}
+
    #apDiv_test5 {
+
position:absolute;
+
width:90%;
+
height:101px;
+
z-index:2;
+
left: 5%;
+
top: 1910px;
+
font-size: 20px;
+
text-align: left;
+
}
+
    #apDiv_title4 {
+
position:absolute;
+
width:90%;
+
height:84px;
+
z-index:1;
+
left: 5%;
+
top: 2155px;
+
font-size: 40px;
+
}
+
    #apDiv_ps_1 {
+
position:absolute;
+
width:90%;
+
height:51px;
+
z-index:2;
+
left: 5%;
+
top: 1184px;
+
font-size: 18px;
+
text-align: left;
+
}
+
    #apDiv_title5 {
+
position:absolute;
+
width:90%;
+
height:84px;
+
z-index:1;
+
left: 5%;
+
top: 2206px;
+
font-size: 40px;
+
}
+
    #apDiv_title6 {
+
position:absolute;
+
width:90%;
+
height:84px;
+
z-index:1;
+
left: 5%;
+
top: 2336px;
+
font-size: 40px;
+
}
+
    #apDiv_title7 {
+
position:absolute;
+
width:90%;
+
height:84px;
+
z-index:1;
+
left: 5%;
+
top: 2101px;
+
font-size: 40px;
+
}
+
    #apDiv_title8 {
+
position:absolute;
+
width:90%;
+
height:84px;
+
z-index:1;
+
left: 5%;
+
top: 4125px;
+
font-size: 40px;
+
}
+
    #apDiv_test7 {
+
position:absolute;
+
width:90%;
+
height:46px;
+
z-index:2;
+
left: 141px;
+
top: 2420px;
+
font-size: 20px;
+
text-align: left;
+
}
+
    #apDiv_h2_2 {
+
position:absolute;
+
width:90%;
+
height:50px;
+
z-index:2;
+
left: 5%;
+
top: 3300px;
+
 
font-size: 36px;
 
font-size: 36px;
text-align: left;
 
 
}
 
}
     #apDiv_description4 {
+
     .myPara {
position:absolute;
+
width:35%;
+
height:43px;
+
z-index:4;
+
left: 45%;
+
top: 2487px;
+
font-size: 18px;
+
}
+
    #apDiv_figure4 {
+
position:absolute;
+
width:348px;
+
height:260px;
+
z-index:3;
+
left: 32%;
+
top: 1550px;
+
font-size: 100px;
+
text-align: center;
+
}
+
    #apDiv_test9 {
+
position:absolute;
+
 
width:90%;
 
width:90%;
height:46px;
+
margin-left: 5%;
z-index:2;
+
margin-bottom: 20px;
left: 5%;
+
top: 874px;
+
 
font-size: 20px;
 
font-size: 20px;
 
text-align: left;
 
text-align: left;
 
}
 
}
    #apDiv_test10 {
+
.myPS {
position:absolute;
+
 
width:90%;
 
width:90%;
height:46px;
+
margin-left: 5%;
z-index:2;
+
margin-bottom: 8px;
left: 5%;
+
font-size: 16px;
top: 1234px;
+
font-size: 20px;
+
 
text-align: left;
 
text-align: left;
 
}
 
}
     #apDiv_figure5 {
+
     .myPic1 {
position:absolute;
+
width:690px;
+
height:500px;
+
z-index:3;
+
left: 20%;
+
top: 1890px;
+
 
font-size: 100px;
 
font-size: 100px;
 
text-align: center;
 
text-align: center;
 +
margin-bottom: 15px;
 
}
 
}
     #apDiv_description5 {
+
     .myPicDis {
position:absolute;
+
margin-left: 5%;
width:35%;
+
left: 45%;
height:43px;
+
top: 370px;
z-index:4;
+
left: 1208px;
+
top: 3105px;
+
 
font-size: 18px;
 
font-size: 18px;
}
 
    #apDiv_test11 {
 
position:absolute;
 
width:90%;
 
height:87px;
 
z-index:2;
 
left: 5%;
 
top: 1470px;
 
font-size: 20px;
 
text-align: left;
 
}
 
    #apDiv_figure6 {
 
position:absolute;
 
width:400px;
 
height:300px;
 
z-index:3;
 
left: 20%;
 
top: 2750px;
 
font-size: 100px;
 
text-align: center;
 
}
 
    #apDiv_test12 {
 
position:absolute;
 
width:90%;
 
height:45px;
 
z-index:2;
 
left: 5%;
 
top: 1830px;
 
font-size: 20px;
 
text-align: left;
 
}
 
    #apDiv_title9 { position:absolute;
 
width:90%;
 
height:84px;
 
z-index:1;
 
left: 5%;
 
top: 2336px;
 
font-size: 40px;
 
}
 
    #apDiv_title10 { position:absolute;
 
width:90%;
 
height:84px;
 
z-index:1;
 
left: 5%;
 
top: 2336px;
 
font-size: 40px;
 
}
 
    #apDiv_test13 {
 
position:absolute;
 
width:90%;
 
height:45px;
 
z-index:2;
 
left: 5%;
 
top: 2500px;
 
font-size: 20px;
 
text-align: left;
 
}
 
    #apDiv_backg {
 
position:absolute;
 
width:100%;
 
height:4500px;
 
z-index:1;
 
left: 0px;
 
top: 200px;
 
}
 
    #apDiv1 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:1;
 
}
 
    #apDiv2 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:10000;
 
}
 
    #apDiv3 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:2;
 
}
 
    #apDiv4 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:3;
 
}
 
    #apDiv5 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:3;
 
}
 
    #apDiv6 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:3;
 
}
 
    #apDiv7 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:4;
 
}
 
    #apDiv8 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:4;
 
}
 
    #apDiv9 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:4;
 
}
 
    #apDiv10 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:5;
 
}
 
    #apDiv11 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:5;
 
}
 
    #apDiv12 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:5;
 
}
 
    #apDiv13 {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:5;
 
}
 
    #apDiv_game {
 
position:absolute;
 
width:200px;
 
height:115px;
 
z-index:1;
 
left: 5%;
 
top: -60;
 
 
}
 
}
 
     </style>
 
     </style>
Line 470: Line 84:
 
width:650px;
 
width:650px;
 
height:500px;
 
height:500px;
left: 50%;
+
margin-left: 5%;
}
+
    #apDiv14 {
+
position:absolute;
+
width:200px;
+
height:115px;
+
z-index:5;
+
}
+
    #apDiv15 {
+
position:absolute;
+
width:200px;
+
height:115px;
+
z-index:5;
+
}
+
    #apDiv16 {
+
position:absolute;
+
width:200px;
+
height:115px;
+
z-index:5;
+
}
+
    #apDiv17 {
+
position:absolute;
+
width:200px;
+
height:115px;
+
z-index:5;
+
}
+
    #apDiv18 {
+
position:absolute;
+
width:200px;
+
height:115px;
+
z-index:5;
+
}
+
    #apDiv19 {
+
position:absolute;
+
width:200px;
+
height:115px;
+
z-index:5;
+
}
+
    #apDiv20 {
+
position:absolute;
+
width:200px;
+
height:115px;
+
z-index:5;
+
}
+
    #apDiv21 {
+
position:absolute;
+
width:200px;
+
height:115px;
+
z-index:5;
+
}
+
    #apDiv22 {
+
position:absolute;
+
width:200px;
+
height:77px;
+
z-index:1;
+
top: 3670px;
+
left: 20%;
+
}
+
    #apDiv23 {
+
position:absolute;
+
width:200px;
+
height:115px;
+
z-index:5;
+
}
+
    #apDiv24 {
+
position:absolute;
+
width:200px;
+
height:80px;
+
z-index:5;
+
top: 3900px;
+
left: 20%;
+
 
}
 
}
 
     </style>
 
     </style>
Line 592: Line 136:
 
<!-- end:fh5co-header -->
 
<!-- end:fh5co-header -->
 
<aside id="fh5co-hero" class="js-fullheight">
 
<aside id="fh5co-hero" class="js-fullheight">
  <div id="apDiv_backg">
+
               <div id="mylegend" class="divcss">"Lufylegend loading... If not begin, please use Chrome for browsing!"</div>
               <div id="mylegend" class="divcss" margin-left="5%">"Lufylegend loading..."</div>
+
 
  <div>
 
  <div>
 
  <script type="text/javascript" src="https://2017.igem.org/Template:Tsinghua-A/JS/Game_lufylegend?action=raw&ctype=text/javascript"></script>
 
  <script type="text/javascript" src="https://2017.igem.org/Template:Tsinghua-A/JS/Game_lufylegend?action=raw&ctype=text/javascript"></script>
Line 605: Line 148:
 
<script type="text/javascript" src="https://2017.igem.org/Template:Tsinghua-A/JS/Game_layers?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2017.igem.org/Template:Tsinghua-A/JS/Game_layers?action=raw&ctype=text/javascript"></script>
 
</div>
 
</div>
             <div id="re_table" margin-left="5%">
+
             <div id="re_table" style="margin-left: 5%">
 
                 <table width="650" border="1">
 
                 <table width="650" border="1">
 
                     <tr>
 
                     <tr>
Line 702: Line 245:
 
                
 
                
 
    <div id="apDiv_title1">Game</div>             
 
    <div id="apDiv_title1">Game</div>             
    <div id="apDiv_h2_1">Introduction</div>
+
    <div class="myTitle1">Introdution</div>
<div id="apDiv_test9">The game &quot;E.coli War&quot; is designed based on our liquid model. In the game, E.coli are divided into two groups, with each group having three kinds of E.coli: warriors, farmers and beggars.</div>
+
<div class="myPara">The game “E.coli War” is designed based on our liquid model. In the game, E.coli are divided into two groups, with each group having three kinds of E.coli: warriors, farmers and beggars.</div>
<div id="apDiv_figure1"><img src="https://static.igem.org/mediawiki/2017/d/d8/TsinghuaA-warrior.png" width="177" height="158"></div>
+
<div class="myPic1"><img src="https://static.igem.org/mediawiki/2017/d/d8/TsinghuaA-warrior.png" width="100px">
<div id="apDiv_figure2"><img src="https://static.igem.org/mediawiki/2017/1/1f/TsinghuaA-farmer.png" width="140" height="158"></div>
+
<img src="https://static.igem.org/mediawiki/2017/1/1f/TsinghuaA-farmer.png" width="100px">
<div id="apDiv_figure3"><img src="https://static.igem.org/mediawiki/2017/b/b0/TsinghuaA-beggar.png" width="148" height="158"></div>
+
<img src="https://static.igem.org/mediawiki/2017/b/b0/TsinghuaA-beggar.png" width="100px"></div>
<div id="apDiv_description1">Warriors can attack the enemy</div>
+
<div>Warriors can attack the enemy</div>
<div id="apDiv_description2">Farmers can provide food for others</div>
+
<div>Farmers can provide food for others</div>
<div id="apDiv_description3">Beggars just consume resources</div>
+
<div>Beggars just consume resources</div>
<div id="apDiv_ps_1">PS:The nutrients produced by farmers can be utilized by all E.colis. It can simulate grabbing of the enemy's grain during a war.</div>
+
<div class="myPS">PS:The nutrients produced by farmers can be utilized by all E.colis. It can simulate grabbing of the enemy's grain during a war.</div>
<div id="apDiv_test10">Rule: There are 60,000 E.colis at the beginning of a game. They are divided equally into farmers,warriors and beggars. You and AI will get a total of 30,000 E.coli, but the distribution of each kind of E.coli is random. The game is composed of five rounds. In each round, you can allocate 6,000 E.coli .The maximal number of E.coli that your group eventually reach will be your grade. If your grade is greater than that of AI, then you win this round. If you win three rounds, then congratulations, you win the game!<br>
+
<div class="myPara">Rule:<br>There are 60,000 E.colis at the beginning of a game. They are divided equally into farmers,warriors and beggars. You and AI will get a total of 30,000 E.coli, but the distribution of each kind of E.coli is random. The game is composed of five rounds. In each round, you can allocate 6,000 E.coli .The maximal number of E.coli that your group eventually reach will be your grade. If your grade is greater than that of AI, then you win this round. If you win three rounds, then congratulations, you win the game! <br>We believe you are smart enough to allocate your E.coli reasonably and win the game!</div>
We believe you are smart enough to allocate your E.coli reasonably and win the game!</div>
+
 
<div id="apDiv_test11">OK, Let's Begin to learn how to play it!<br>
+
<div class="myPara">OK, Let’s Begin to learn how to play it!<br>Before each game begins, You can input the number of each bacteria.</div>
  Before each game begins, You can input the number of each bacteria. </div>
+
<div class="myPic1"><img src="https://static.igem.org/mediawiki/2017/5/5c/TsinghuaA-input_layer.png" width="400px"></div>
<div id="apDiv_figure4"><img src="https://static.igem.org/mediawiki/2017/5/5c/TsinghuaA-input_layer.png" width="334" height="263"></div>
+
<div class="myPara">Then you can press “Start” to begin this game.</div>
<div id="apDiv_test12">Then you can press &quot;Start&quot; to begin this game.</div>
+
<div class="myPic1"><img src="https://static.igem.org/mediawiki/2017/3/30/TsinghuaA-fluid_game.png" width="600px"></div>
<div id="apDiv_figure5"><img src="https://static.igem.org/mediawiki/2017/3/30/TsinghuaA-fluid_game.png" width="694" height="520"></div>
+
<div class="myPara">Now, they begin to kill each other, and the number of them is displayed at top.<br>(The numbers are showed logarithmically. For example, when the length is 10, the number of bacteria is 10^10. If you do not want to wait for too long, you can press "Fast" to accelerate the process)<br><br>After each round, you can click the button "OK" to play the next round.<br>Or you can click the button "Quit" to exit the game.</div>
<div id="apDiv_test13">Now, they begin to kill each other, and the number of them is displayed at top.<br>
+
<div class="myPic1"><img src="https://static.igem.org/mediawiki/2017/7/7e/TsinghuaA-fluid_game_result.png" width="600px"></div>
  (The numbers are showed logarithmically. For example, when the length is 10, the number of bacteria is 10^10. If you do not want to wait for too long, you can press &quot;Fast&quot; to accelerate the process)<br>
+
<div class="myTitle1">Game Strategy</div>
  <br>
+
<div class="myPara">Although we cannot figure out exactly how initialized numbers determine the result, we do find out some rules. Here are some of them and hope that they can help you to win. <br><br>Because farmers provide nutrients for both sides, they have no effect in each side in terms of nutrients. Farmers only play a role in counting the total number of bacteria. Take this into consideration when you are placing farmers. <br>Warriors can attack enemy, which is beneficial for their own side. Beggars consume their own resources, so they are harmful to their own side. When the number of our warriors is bigger than AI's, and the number of our beggars is less than AI's, we will be more likely to win. The mechanism of winning is that our bacteria will keep growing faster.</div>
  After each round, you can click the button &quot;OK&quot; to play the next round. <br>
+
<div class="myPic1"><img src="https://static.igem.org/mediawiki/2017/1/14/TsinghuaA-fluid_game_win1.png" width="600px"></div>
  Or you can click the button ? to exit the game.
+
<div class="myPara">Because beggars do not have any production, they grow the fastest. When the number of warriors of both sides is closer and the number of our beggars is bigger than AI's, we will be more likely to win. The mechanism of winning is that the number of our beggars can be far greater than AI's.</div>
</div>
+
<div class="myPic1"><img src="https://static.igem.org/mediawiki/2017/9/92/TsinghuaA-fluid_game_win2.png" width="600px"></div>
<div id="apDiv_figure6"><img src="https://static.igem.org/mediawiki/2017/7/7e/TsinghuaA-fluid_game_result.png" width="682" height="511"></div>
+
 
<div id="apDiv_h2_2">Game Strategy</div>
+
<div id="apDiv_test2">Although we cannot figure out exactly how initialized numbers determine the result, we do find out some rules. Here are some of them and hope that they can help you to win. <br>
+
  <br>
+
  Because farmers provide nutrients for both sides, they have no effect in each side in terms of nutrients. Farmers only play a role in counting the total number of bacteria. Take this into consideration when you are placing farmers. <br>
+
  Warriors can attack enemy, which is beneficial for their own side. Beggars consume their own resources, so they are harmful to their own side. When the number of our warriors is bigger than AI's, and the number of our beggars is less than AI's, we will be more likely to win. The mechanism of winning is that our bacteria will keep growing faster. </div>
+
<div id="apDiv22"><img src="https://static.igem.org/mediawiki/2017/1/14/TsinghuaA-fluid_game_win1.png" width="660" height="93"></div>
+
<div id="apDiv_test4">Because beggars do not have any production, they grow the fastest. When the number of warriors of both sides is closer and the number of our beggars is bigger than AI's, we will be more likely to win. The mechanism of winning is that the number of our beggars can be far greater than AI's.</div>
+
<div id="apDiv24"><img src="https://static.igem.org/mediawiki/2017/9/92/TsinghuaA-fluid_game_win2.png" width="660" height="93"></div>
+
          </div>
+
 
<div class="flexslider js-fullheight"></div>
 
<div class="flexslider js-fullheight"></div>
 
</aside>
 
</aside>

Revision as of 15:07, 24 October 2017

Discription