Difference between revisions of "Team:Tsinghua-A/solid game"
Shuailin10 (Talk | contribs) |
|||
| (35 intermediate revisions by 6 users not shown) | |||
| Line 1: | Line 1: | ||
{{Tsinghua-A}} | {{Tsinghua-A}} | ||
<html> | <html> | ||
| − | <head | + | <head> |
| − | + | <meta charset="utf-8"> | |
| − | <meta charset="utf-8" | + | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| − | < | + | <title>Discription</title> |
| − | < | + | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| − | + | <meta name="description" content="Free HTML5 Template by FREEHTML5.CO" /> | |
| + | <meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" /> | ||
| + | <meta name="author" content="FREEHTML5.CO" /> | ||
| + | |||
| + | |||
<!-- Place favicon.ico and apple-touch-icon.png in the root directory --> | <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> | ||
<link rel="shortcut icon" href="favicon.ico"> | <link rel="shortcut icon" href="favicon.ico"> | ||
| Line 35: | Line 39: | ||
<style type="text/css"> | <style type="text/css"> | ||
| − | + | #fh5co-hero { | |
| − | min-height: | + | min-height: 5250px; |
| − | background: #fff url() repeat ; | + | style:"background: #fff url(https://static.igem.org/mediawiki/2017/thumb/8/87/TsinghuaA-backgroundpartten.jpeg/240px-TsinghuaA-backgroundpartten.jpeg) repeat;" |
| − | + | } | |
| − | + | ||
| − | } | + | |
.myTitle1 { | .myTitle1 { | ||
width:90%; | width:90%; | ||
| Line 47: | Line 49: | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
font-size: 40px; | font-size: 40px; | ||
| + | margin-top: 30px | ||
} | } | ||
.myTitle2 { | .myTitle2 { | ||
| Line 69: | Line 72: | ||
text-align: left; | text-align: left; | ||
} | } | ||
| − | + | .myPic1 { | |
font-size: 100px; | font-size: 100px; | ||
| − | + | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
| − | + | ||
text-align: center; | text-align: center; | ||
} | } | ||
.myPicDis { | .myPicDis { | ||
| − | + | width:90%; | |
| − | + | margin-left: 5%; | |
top: 370px; | top: 370px; | ||
| − | font-size: | + | font-size: 15px; |
| − | text-align: | + | text-align: left; |
} | } | ||
.myPicDis2 { | .myPicDis2 { | ||
| Line 93: | Line 96: | ||
position:absolute; | position:absolute; | ||
width:70%; | width:70%; | ||
| − | height: | + | height:5250px; |
z-index:10000; | z-index:10000; | ||
| − | top: | + | top: 100px; |
left: 15%; | left: 15%; | ||
| + | background-color:white; | ||
} | } | ||
.mytable { | .mytable { | ||
| Line 108: | Line 112: | ||
</head> | </head> | ||
<body> | <body> | ||
| − | <div id="fh5co-wrapper" > | + | <div id="fh5co-wrapper" > |
<div id="fh5co-page"> | <div id="fh5co-page"> | ||
<div id="fh5co-header"> | <div id="fh5co-header"> | ||
| Line 115: | Line 119: | ||
</div> | </div> | ||
<!-- end:fh5co-header --> | <!-- end:fh5co-header --> | ||
| − | <aside id="fh5co-hero" class="js-fullheight"> | + | <aside id="fh5co-hero" class="js-fullheight" style="background: #fff url(https://static.igem.org/mediawiki/2017/thumb/8/87/TsinghuaA-backgroundpartten.jpeg/240px-TsinghuaA-backgroundpartten.jpeg) repeat;"> |
<div class="flexslider js-fullheight"> | <div class="flexslider js-fullheight"> | ||
<ul class="slides"> | <ul class="slides"> | ||
| Line 122: | Line 126: | ||
<div class="container"> | <div class="container"> | ||
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text"> | <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text"> | ||
| − | <div class="slider-text-inner desc"> | + | <div class="slider-text-inner desc" style="background: #fff url(https://static.igem.org/mediawiki/2017/thumb/8/87/TsinghuaA-backgroundpartten.jpeg/240px-TsinghuaA-backgroundpartten.jpeg) repeat;"> |
<h2 class="heading-section">Discription here</h2> | <h2 class="heading-section">Discription here</h2> | ||
</div> | </div> | ||
| Line 131: | Line 135: | ||
</div> | </div> | ||
</aside> | </aside> | ||
| − | <div class="background" id="apDiv_background"> | + | <div id="fh5co-services-section" style="background: #fff url(https://static.igem.org/mediawiki/2017/thumb/8/87/TsinghuaA-backgroundpartten.jpeg/240px-TsinghuaA-backgroundpartten.jpeg) repeat;"></div> |
| − | + | <div style="position:fixed;top: 80%; left: 90%;"><a href="#top"><img src="https://static.igem.org/mediawiki/2017/3/31/TsinghuaA-backtotop.png" width="80" height="80"></a></div> | |
| − | + | <div class="background" id="apDiv_background"> | |
| − | + | <div class="myTitle1"id="top" >Solid game</div> | |
| − | + | <div class="myTitle2" >I Introduction</div> | |
| − | + | <div class="myPara" > In solid media,things are not so easy as it is in the fluid media. In this case, the bacteria are not mixed at once.Besides, we have to consider the influence of the initial position of each bacterium. Like the situation in fluid media, now for solid media, we still have three characters, the farmers, the warriors and the beggars. And the cute bacteria still face the severe war against another battalion. Now let us learn more about them.<br></div> | |
| − | + | <table class="mytable" > | |
| − | + | <tr> | |
| − | + | <td width="50%"><div class="myPic1"><img src="https://static.igem.org/mediawiki/2017/9/98/Tsinghua-a-sg-fa.png"width="200px"height="250px"></div></td> | |
| − | + | <td width="50%"><div class="myPic1"><img src="https://static.igem.org/mediawiki/2017/2/23/Tsinghua-a-sg-fb.png"width="200px"height="250px"></div></td> | |
| + | </tr> | ||
</table> | </table> | ||
| − | + | <div class="myPara" > Farmers are aimed to produce resources for all the bacteria. In our experiment, the ‘farmer’ bacteria can generate invertase to break down glucose; while in our online game, they can produce food for others to make their living. Be careful, your farmer’s food can also be eaten by the enemies so you need to take care of where to initialize them.<br></div> | |
| − | + | <table class="mytable" > | |
| − | + | <tr> | |
| − | + | <td width="50%"><div class="myPic1" ><img src="https://static.igem.org/mediawiki/2017/1/16/Tsinghua-a-sg-wa.png"width="250px"height="250px"></div></td> | |
| − | + | <td width="50%"><div class="myPic1"><img src="https://static.igem.org/mediawiki/2017/7/75/Tsinghua-a-sg-wb.png"width="250px"height="250px"></div></td> | |
| − | + | </tr> | |
</table> | </table> | ||
| − | + | <div class="myPara" > Warriors' skill is to kill enemies. No matter who the enemy is, your brave warriors can kill both farmers and beggars from the enemy troop and can fight against your enemy’s warriors as soon as they meet. But these little combatants can’t make a living without food from farmers so you have to initialize them within the nutrition range around farmers.<br></div> | |
| − | + | <table class="mytable" > | |
| − | + | <tr> | |
| − | + | <td width="50%"><div class="myPic1" ><img src="https://static.igem.org/mediawiki/2017/d/da/Tsinghua-a-sg-ba.png"width="200px"height="250px"></div></td> | |
| − | + | <td width="50%"><div class="myPic1"><img src="https://static.igem.org/mediawiki/2017/1/1e/Tsinghua-a-sg-bb.png"width="200px"height="250px"></div></td> | |
| − | + | </tr> | |
</table> | </table> | ||
| − | + | <div class="myPara" > Beggars are so lazy that they just sit there doing nothing. They don’t produce food so they have to rely on farmers. Also, they are not part of the military force so they kill ‘nobody’. <br><br></div> | |
| − | + | <div class="myTitle2" >II Rule</div> | |
| − | + | <div class="myPara" > The following is our main menu for game pattern. By choosing ‘One Player’ you can play with the virtual player AI (artificial intelligence). We have designed smart algorithm to help you computer think up game strategies like we human do and AI can initialize its bacteria after your action at once. If you choose ‘Two Players’, then you can play with your friends or initialize both sides yourself. <br></div> | |
| − | + | <div class="myPic1" ><img src="https://static.igem.org/mediawiki/2017/c/c5/Tsinghua-a-sg-mm.png"width="500px"height="300px"></div> | |
| − | + | <div class="myPara" > Each battalion has the same amount of bacteria.You can initialize your bacterial camp at the beginning of the game before you click the button ’start’.<br></div> | |
| − | + | <div class="myPic1" ><video src="https://static.igem.org/mediawiki/2017/1/1d/Tsinghua-a-sg-fz.mp4"width="500px"height="400px" controls="controls"></div> | |
| − | + | <div class="myPara" > By click on different bacteria characters you can initialize them on the round Petri dishes. Different colors represent different kind of bacteria and the green box around the farmers surround the area of nutrition they can support so don’t put your bacteria out of green boxes. <br></div> | |
| − | + | <div class="myPic1" ><img src="https://static.igem.org/mediawiki/2017/e/ea/Tsinghua-a-sg-sm.jpg"width="500px"height="300px"></div> | |
| − | + | <div class="myPara" > The number following ‘total’ tells us the amount of live bacteria in each bacteria troop. At the bottom of the picture we can see the ‘remaining chances’ we have to initialize bacteria. The days which bacteria have growing for and the coordinate point of where you mouse click are at the upper right corner.<br> | |
<br> | <br> | ||
<b>Now we can learn more about the toolbar.</b> | <b>Now we can learn more about the toolbar.</b> | ||
<br></div> | <br></div> | ||
| − | + | <div class="myPic1" ><img src="https://static.igem.org/mediawiki/2017/8/8c/Tsinghua-a-sg-to.jpg"width="500px"height="150px"></div> | |
| − | + | <div class="myPara" > After you finish initializing all the bacteria, clicking the ‘start’ button can run the game. If you click on the button ‘restart’, all the progress can be cleared. By clicking the button ‘model’, you can choose again whether you want to play with AI or not. Now let us click the button ‘setting’ and we can see the following pop-up:<br></div> | |
| − | + | <div class="myPic1" ><img src="https://static.igem.org/mediawiki/2017/7/78/Tsinghua-a-sg-set.jpg"width="500px"height="400px"></div> | |
| − | + | <div class="myPara" > The first option line is for setting background music volume. The middle line decides the volume of bacteria actor's lines and after you click on each character, you can hear them speaking. By dragging the last line’s option button you can change the amount of bacteria of each side.<br></div> | |
| − | + | <div id="mylegend">"Lufylegend loading..."</div> | |
| + | <script type="text/javascript" src="https://2017.igem.org/Template:Tsinghua-A/JS/solid_game/lufylegend?action=raw&ctype=text/javascript"></script> | ||
| − | + | <script type="text/javascript" src="https://2017.igem.org/Template:Tsinghua-A/JS/solid_game/lufylegend-1.5.1.min?action=raw&ctype=text/javascript"></script> | |
| − | + | <script type="text/javascript" src="https://2017.igem.org/Template:Tsinghua-A/JS/solid_game/pagemain?action=raw&ctype=text/javascript"></script> | |
| − | + | <script type="text/javascript" src="https://2017.igem.org/Template:Tsinghua-A/JS/solid_game/chushihua?action=raw&ctype=text/javascript"></script> | |
| − | + | <script type="text/javascript" src="https://2017.igem.org/Template:Tsinghua-A/JS/solid_game/hexin?action=raw&ctype=text/javascript"></script> | |
| + | <script type="text/javascript" src="https://2017.igem.org/Template:Tsinghua-A/JS/solid_game/AI?action=raw&ctype=text/javascript"></script> | ||
| + | |||
| + | <div class="myPara" ><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> | ||
| + | <div class="myPic1" > | ||
| + | <img src="https://static.igem.org/mediawiki/2017/7/74/Great-sponsors.png" width="840.5" height="150"></div> | ||
| + | <div class="myPicDis"><a href="https://2017.igem.org/Team:Tsinghua-A">Home</a> Copyright© iGEM 2017 Tsinghua-A. All rights reserved. | Follow us: igem2017THU_A@163.com</div> | ||
</div> | </div> | ||
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/jquery.min?action=raw&ctype=text/javascript"></script> | <script src="https://2017.igem.org/Template:Tsinghua-A/JS/jquery.min?action=raw&ctype=text/javascript"></script> | ||
| − | + | <!-- jQuery Easing --> | |
| − | + | <script src="https://2017.igem.org/Template:Tsinghua-A/JS/jquery.easing.1.3?action=raw&ctype=text/javascript"></script> | |
| − | + | <!-- Bootstrap --> | |
| − | + | <script src="https://2017.igem.org/Template:Tsinghua-A/JS/bootstrap?action=raw&ctype=text/javascript"></script> | |
| − | + | <!-- Waypoints --> | |
| − | + | <script src="https://2017.igem.org/Template:Tsinghua-A/JS/jquery.waypoints.min?action=raw&ctype=text/javascript"></script> | |
| − | + | <!-- Superfish --> | |
| − | + | <script src="https://2017.igem.org/Template:Tsinghua-A/JS/hoverIntent?action=raw&ctype=text/javascript"></script> | |
| − | + | <script src="https://2017.igem.org/Template:Tsinghua-A/JS/superfish?action=raw&ctype=text/javascript"></script> | |
| − | + | <!-- Flexslider --> | |
| − | + | <script src="https://2017.igem.org/Template:Tsinghua-A/JS/jquery.flexslider-min?action=raw&ctype=text/javascript"></script> | |
| − | + | <!-- Main JS (Do not remove) --> | |
| − | + | <script src="https://2017.igem.org/Template:Tsinghua-A/JS/main?action=raw&ctype=text/javascript"></script> | |
| − | + | <script src="fixed.js"></script> | |
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 00:45, 2 November 2017
TSINGHUA-A
Solid game
I Introduction
In solid media,things are not so easy as it is in the fluid media. In this case, the bacteria are not mixed at once.Besides, we have to consider the influence of the initial position of each bacterium. Like the situation in fluid media, now for solid media, we still have three characters, the farmers, the warriors and the beggars. And the cute bacteria still face the severe war against another battalion. Now let us learn more about them.
 |
 |
Farmers are aimed to produce resources for all the bacteria. In our experiment, the ‘farmer’ bacteria can generate invertase to break down glucose; while in our online game, they can produce food for others to make their living. Be careful, your farmer’s food can also be eaten by the enemies so you need to take care of where to initialize them.
 |
 |
Warriors' skill is to kill enemies. No matter who the enemy is, your brave warriors can kill both farmers and beggars from the enemy troop and can fight against your enemy’s warriors as soon as they meet. But these little combatants can’t make a living without food from farmers so you have to initialize them within the nutrition range around farmers.
 |
 |
Beggars are so lazy that they just sit there doing nothing. They don’t produce food so they have to rely on farmers. Also, they are not part of the military force so they kill ‘nobody’.
II Rule
The following is our main menu for game pattern. By choosing ‘One Player’ you can play with the virtual player AI (artificial intelligence). We have designed smart algorithm to help you computer think up game strategies like we human do and AI can initialize its bacteria after your action at once. If you choose ‘Two Players’, then you can play with your friends or initialize both sides yourself.
Each battalion has the same amount of bacteria.You can initialize your bacterial camp at the beginning of the game before you click the button ’start’.
By click on different bacteria characters you can initialize them on the round Petri dishes. Different colors represent different kind of bacteria and the green box around the farmers surround the area of nutrition they can support so don’t put your bacteria out of green boxes.
The number following ‘total’ tells us the amount of live bacteria in each bacteria troop. At the bottom of the picture we can see the ‘remaining chances’ we have to initialize bacteria. The days which bacteria have growing for and the coordinate point of where you mouse click are at the upper right corner.
Now we can learn more about the toolbar.
Now we can learn more about the toolbar.
After you finish initializing all the bacteria, clicking the ‘start’ button can run the game. If you click on the button ‘restart’, all the progress can be cleared. By clicking the button ‘model’, you can choose again whether you want to play with AI or not. Now let us click the button ‘setting’ and we can see the following pop-up:
The first option line is for setting background music volume. The middle line decides the volume of bacteria actor's lines and after you click on each character, you can hear them speaking. By dragging the last line’s option button you can change the amount of bacteria of each side.
"Lufylegend loading..."
Home Copyright© iGEM 2017 Tsinghua-A. All rights reserved. | Follow us: igem2017THU_A@163.com
