Difference between revisions of "Team:Tsinghua-A/Game"

 
(51 intermediate revisions by 6 users not shown)
Line 39: Line 39:
  
 
     <style type="text/css">
 
     <style type="text/css">
 +
 
     .myTitle1 {
 
     .myTitle1 {
 
width:90%;
 
width:90%;
Line 45: Line 46:
 
margin-bottom: 10px;
 
margin-bottom: 10px;
 
font-size: 40px;
 
font-size: 40px;
 +
margin-top: 30px
 
}
 
}
 
.myTitle2 {
 
.myTitle2 {
Line 69: Line 71:
 
     .myPic1 {
 
     .myPic1 {
 
font-size: 100px;
 
font-size: 100px;
−
text-align: left;
+
 
margin-bottom: 15px;
 
margin-bottom: 15px;
−
margin-left: 15%;
+
 +
text-align: center;
 
}
 
}
−
  .myPic2 {
+
.myvedio {
 
font-size: 100px;
 
font-size: 100px;
 
text-align: left;
 
text-align: left;
 
margin-bottom: 15px;
 
margin-bottom: 15px;
−
margin-left: 10%;
+
margin-left: 12%;
 
}
 
}
−
.myPic3{
+
     .myPicDis {
−
font-size: 100px;
+
−
text-align: left;
+
−
margin-bottom: 15px;
+
−
margin-left: 20%;
+
−
}
+
−
     .myPicDis1{
+
 
margin-left: 5%;
 
margin-left: 5%;
−
left: 45%;
+
 
top: 370px;
 
top: 370px;
−
font-size: 20px;
+
font-size: 15px;
 
text-align: center;
 
text-align: center;
 
}
 
}
−
    .myPicDis2{
+
.myPicDis2 {
 
margin-left: 10%;
 
margin-left: 10%;
 
left: 45%;
 
left: 45%;
 
top: 370px;
 
top: 370px;
−
font-size: 20px;
+
font-size: 18px;
 
text-align: left;
 
text-align: left;
 
}
 
}
 
     .background {
 
     .background {
 
position:absolute;
 
position:absolute;
−
width:100%;
+
width:70%;
−
height:5000px;
+
height:2360px;
 
z-index:10000;
 
z-index:10000;
−
top: 150px;
+
top: 100px;
−
left: 0px;
+
left: 15%;
 +
 
 +
background-color:white;
 
}
 
}
−
.mytable {
+
#fh5co-hero {
−
                width:90%;
+
  min-height: 2360px;
−
        margin-left: 5%;
+
  style:"background: #fff url(https://static.igem.org/mediawiki/2017/thumb/8/87/TsinghuaA-backgroundpartten.jpeg/240px-TsinghuaA-backgroundpartten.jpeg) repeat;"
−
cellpadding:100;
+
}
 +
.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)；
−
                text-align: left;
 
 
}
 
}
 
     </style>
 
     </style>
Line 122: Line 123:
 
<div id="fh5co-page">
 
<div id="fh5co-page">
 
<div id="fh5co-header">
 
<div id="fh5co-header">
−
<header id="fh5co-header-section">
+
−
<div class="container">
+
−
<div class="nav-header">
+
−
  <div class="background" id="apDiv_background">
+
−
 
+
−
  <div class="myTitle1" >Overview of the games</div>
+
−
 
+
−
  <div class="myPara" >&nbsp;&nbsp;&nbsp;&nbsp;We find synthetic biology and our project really cool as we dig deeper into the field of science. However, it is hard to make others who do not have much knowledge about biology interested in it. </div>
+
−
 
+
−
+
−
<table class="mytable" >
+
−
  <tr>
+
−
    <td width="43%"><div class="myPicDis2" ><br><br>&nbsp;&nbsp;&nbsp;&nbsp; We noticed that everyone like playing games, so why not develop a game based on our project? People will get interested when they play games and learn more at the same time! Moreover, the game can greatly help us publicize synthetic biology and make more people interested in science. Science is fun!</div></td>
+
−
    <td width="57%"><br><div class="myPic2"  ><img src="https://static.igem.org/mediawiki/2017/c/c5/Tsinghua-a-overview_game_fig1.jpg" width="400px" height="300px"></div></td>
+
−
    </tr> 
+
−
  <tr>
+
−
    <td width="57%"><div class="myPic3"  ><br><img src="https://static.igem.org/mediawiki/2017/2/23/Tsinghua-a-overview_game_fig2.jpg" width="400px"height="300px"></div></td>
+
−
    <td width="43%"><div class="myPicDis2" >&nbsp;&nbsp;&nbsp;&nbsp;Many people, especially children indeed got interested in our game during our three-day exhibition in China Science and Technology Museum. Many children came and played our games and were really fascinated by the fancy work that synthetic biology can do. The game is indeed a great tool to help publicizing the seemingly formidable science!</div></td>
+
−
  </tr>
+
−
</table>
+
−
    <div class="myPara" >&nbsp;&nbsp;&nbsp;&nbsp;We have two games in total. One simulates the “war” under liquid conditions, while the other simulates the “war” under solid conditions. Want to know more about our games? Visit Liquid Game and Solid Game to see more details and play the game!</div>  
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
  </div>
+
−
<a href="https://2017.igem.org/Team:Tsinghua-A" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
+
−
<h1 id="fh5co-logo"><a href="https://2017.igem.org/Team:Tsinghua-A"><i class="icon-home2"></i>TSINGHUA-A IGEM</a></h1>
+
−
<!-- START #fh5co-menu-wrap -->
+
−
<nav id="fh5co-menu-wrap" role="navigation">
+
−
<ul class="sf-menu" id="fh5co-primary-menu">
+
−
<li>
+
−
<a href="https://2017.igem.org/Team:Tsinghua-A/Description"class="fh5co-sub-ddown">PROJECT</a>
+
−
                                    <ul class="fh5co-sub-menu">
+
−
                                    <li><a href="https://2017.igem.org/Team:Tsinghua-A/Description">DESCRIPTION</a></li>
+
−
                                    <li><a href="https://2017.igem.org/Team:Tsinghua-A/Results">RESULT</a></li>
+
−
                                    <li><a href="#">PROOF</a></li>
+
−
                                    <li><a href="#">BASIC PARTS</a></li>
+
−
                                    </ul>
+
−
</li>
+
−
<li>
+
−
                                    <a href="work.html"class="fh5co-sub-ddown">MODEL</a>
+
−
                                    <ul class="fh5co-sub-menu">
+
−
                                    <li><a href="#">OVERVIEW</a></li>
+
−
                                    <li><a href="#">FLUID MEDIUM</a></li>
+
−
                                    <li><a href="#">SOLID MEDIUM</a></li>
+
−
                                    </ul>
+
−
                                </li>
+
−
<li><a href="contact.html">GAME</a></li>
+
−
                                <li>
+
−
<a href="services.html" class="fh5co-sub-ddown">EXPERIMENT</a>
+
−
<ul class="fh5co-sub-menu">
+
−
<li><a href="#">ORTHOGONALITY TEST</a></li>
+
−
<li><a href="#">KILLING ABILITY</a></li>
+
−
                                                                                <li><a href="#">IMPROVED ORTHOGONALITY GENE CIRCUIT</a></li>
+
−
</ul>
+
−
</li>
+
−
<li><a href="about.html">HUMAN PRACTICE</a></li>
+
−
<li><a href="contact.html">TEAM</a></li>
+
−
</ul>
+
−
</nav>
+
−
  </div>
+
−
</div>
+
−
</header>
+
 
 
 
</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 217: Line 143:
 
  </div>
 
  </div>
 
</aside>
 
</aside>
−
<div id="fh5co-services-section"></div>
+
<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" >Game overview</div>
 +
  <div class="myPara" > &nbsp;&nbsp;&nbsp;&nbsp;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>
 +
&nbsp;&nbsp;&nbsp;&nbsp;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>
 +
                                          <p align="center"><table class="mytable"  frame=void>
 +
                                          <tr style="border:none;">
 +
                                <td style="border:none;"><center><video src="https://static.igem.org/mediawiki/2017/f/f8/TsinghuaA-Fluidgameplay.MP4" width="400" height="300" controls="controls" style=" text-align:center"></video></center></td>
 +
<td style="border:none;"><center><video src="https://static.igem.org/mediawiki/2017/c/c9/Playgame.mp4" width="400" height="300" controls="controls" style=" text-align:center"></video><center></td></tr>
 +
                </table>  </p>
 +
                               
 +
<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>&nbsp;&nbsp;&nbsp;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" >
 +
&nbsp;&nbsp;&nbsp;&nbsp;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. (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> and <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>
 +
<div class="myPara" ><br><br></div>
 +
<div class="myPic1" id="apDiv_figure1">
 +
    <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>&nbsp;&nbsp;&nbsp;&nbsp;Copyright©&nbsp;iGEM&nbsp;2017&nbsp;Tsinghua-A.&nbsp;All&nbsp;rights&nbsp;reserved.&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;Follow&nbsp;us:&nbsp;igem2017THU_A@163.com</div>
 +
 +
 
 +
 
 +
  </div>
 
</div>
 
</div>
 
<!-- END fh5co-page -->
 
<!-- END fh5co-page -->

Latest revision as of 15:57, 1 November 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM
Discription
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.

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.
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. (See more details at Exhibition at National Museum and Game Discovery) Furthermore, this can also be helpful for our further research design.
Children are playing E.coli War in CSTM!


Home    Copyright© iGEM 2017 Tsinghua-A. All rights reserved.    |    Follow us: igem2017THU_A@163.com