Line 72: | Line 72: | ||
margin-bottom: 15px; | margin-bottom: 15px; | ||
margin-left: 15%; | margin-left: 15%; | ||
+ | text-align: center; | ||
} | } | ||
− | + | .myPicDis { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | . | + | |
margin-left: 5%; | margin-left: 5%; | ||
left: 45%; | left: 45%; | ||
top: 370px; | top: 370px; | ||
− | font-size: | + | font-size: 18px; |
text-align: center; | text-align: center; | ||
} | } | ||
− | + | .myPicDis2 { | |
margin-left: 10%; | margin-left: 10%; | ||
left: 45%; | left: 45%; | ||
top: 370px; | top: 370px; | ||
− | font-size: | + | font-size: 18px; |
text-align: left; | text-align: left; | ||
} | } | ||
.background { | .background { | ||
position:absolute; | position:absolute; | ||
− | width: | + | width:70%; |
height:5000px; | height:5000px; | ||
z-index:10000; | z-index:10000; | ||
top: 150px; | top: 150px; | ||
− | left: | + | left: 15%; |
} | } | ||
− | .mytable { | + | .mytable { |
− | + | width:100%; | |
− | + | cellpadding:100; | |
− | + | ||
cellspacing:50; | cellspacing:50; | ||
border-width:0; | border-width:0; | ||
border-color:rgba(0, 0, 0, 0.00); | border-color:rgba(0, 0, 0, 0.00); | ||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
</head> | </head> | ||
Line 126: | Line 109: | ||
<div id="fh5co-page"> | <div id="fh5co-page"> | ||
<div id="fh5co-header"> | <div id="fh5co-header"> | ||
− | + | ||
</div> | </div> | ||
<!-- end:fh5co-header --> | <!-- end:fh5co-header --> | ||
− | <aside id="fh5co-hero"class="js-fullheight"> | + | <aside id="fh5co-hero" class="js-fullheight"> |
<div class="flexslider js-fullheight"> | <div class="flexslider js-fullheight"> | ||
<ul class="slides"> | <ul class="slides"> | ||
Line 147: | Line 130: | ||
</aside> | </aside> | ||
<div id="fh5co-services-section"></div> | <div id="fh5co-services-section"></div> | ||
− | <div class="background" id="apDiv_background"> | + | <div class="background" id="apDiv_background"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <div class="myTitle1" >Game Overview</div> | ||
+ | <!-- <div class="myTitle2" >副标题</div> | ||
+ | --> <div class="myPara" > There are many factors (Like initial number of each populations and spatial factors) can have influence on the results of population interactions in our system, and we found that it will be much easier to consider effects of these factors if we can visualize it. Therefore, we designed our game---<font style="font-style:italic;">E.coli War</font> to satisfy our needs.<br> | ||
+ | Our games are made on structure of html5. The videos below are two short videos of our Fluid <font style="font-style:italic;">E.coli War</font> and solid <font style="font-style:italic;">E.coli War</font>. </div> | ||
+ | <div class="myPic1" ><video src="https://static.igem.org/mediawiki/2017/c/c9/Playgame.mp4" width="700" height="467"></video></div> | ||
+ | <div class="myPicDis" >See more details on <a href="https://2017.igem.org/Team:Tsinghua-A/fluid_game"><font style="font-style:italic;">Fluid E.coli War</font></a> and <a href="https://2017.igem.org/Team:Tsinghua-A/solid_game"><font style="font-style:italic;">Solid E.coli War</font></a></div> | ||
+ | |||
+ | <div class="myPara" > <br> After we designed our game preliminarily, we visited Beijing Perfect World Network Technology Co., Ltd (Perfect World), one of the largest game company in China, to learn more about the design of a game. The useful advice from the experts help us a lot in improving our <font style="font-style:italic;">E.coli War</font>, making it more fun and easier for kids to play.<br> </div> | ||
+ | <div class="myPic1" ><img src="https://static.igem.org/mediawiki/2017/f/f8/EPE-PWgame.jpeg" width="700" height="467"></div> | ||
+ | <div class="myPicDis" >See more details at <a href="https://2017.igem.org/Team:Tsinghua-A/Engagement#link2"><font style="font-style:italic;">Visiting Perfect World</font></a> </div> | ||
+ | <div class="myPara" > | ||
+ | Afterwards, when children played this game during our exhibition in China Science and Technology Museum (CSTM), they found many interesting results which can even promote our understanding of this system. (Fig.11) (See more details at <a href="https://2017.igem.org/Team:Tsinghua-A/Engagement#link1"><font style="font-style:italic;">Exhibition at National Museum</font></a>, <a href="https://2017.igem.org/Team:Tsinghua-A/Game_Discovery"><font style="font-style:italic;">Game Discovery</font></a>) Furthermore, this can also be helpful for our further research design. | ||
+ | </div> | ||
+ | <div class="myPic1" ><img src="https://static.igem.org/mediawiki/2017/8/81/TsinghuaA-GameOverview-ChildrenPlaying.JPG" width="700" height="467"></div> | ||
+ | <div class="myPicDis" >Children are playing <font style="font-style:italic;">E.coli War</font> in CSTM!</div> | ||
+ | |||
+ | |||
Line 206: | Line 176: | ||
<!-- Main JS (Do not remove) --> | <!-- Main JS (Do not remove) --> | ||
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/main?action=raw&ctype=text/javascript"></script> | <script src="https://2017.igem.org/Template:Tsinghua-A/JS/main?action=raw&ctype=text/javascript"></script> | ||
− | <script src=" | + | <script src="fixed.js"></script> |
</body> | </body> | ||
</html> | </html> |
Revision as of 18:05, 29 October 2017
Game Overview
There are many factors (Like initial number of each populations and spatial factors) can have influence on the results of population interactions in our system, and we found that it will be much easier to consider effects of these factors if we can visualize it. Therefore, we designed our game---E.coli War to satisfy our needs.
Our games are made on structure of html5. The videos below are two short videos of our Fluid E.coli War and solid E.coli War.
Our games are made on structure of html5. The videos below are two short videos of our Fluid E.coli War and solid E.coli War.
See more details on Fluid E.coli War and Solid E.coli War
After we designed our game preliminarily, we visited Beijing Perfect World Network Technology Co., Ltd (Perfect World), one of the largest game company in China, to learn more about the design of a game. The useful advice from the experts help us a lot in improving our E.coli War, making it more fun and easier for kids to play.
![](https://static.igem.org/mediawiki/2017/f/f8/EPE-PWgame.jpeg)
See more details at Visiting Perfect World
Afterwards, when children played this game during our exhibition in China Science and Technology Museum (CSTM), they found many interesting results which can even promote our understanding of this system. (Fig.11) (See more details at Exhibition at National Museum, Game Discovery) Furthermore, this can also be helpful for our further research design.
Children are playing E.coli War in CSTM!