Difference between revisions of "Team:McMaster/Game"

 
(12 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<html>
 
<html>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="bannerContainer" style="margin-top:-13px">
+
 
      <img width = "100%"; src = "https://static.igem.org/mediawiki/2018/3/39/T--McMaster--Header.png">
+
</div>
+
  
 
</body>
 
</body>
Line 13: Line 11:
  
 
     <h2 style="color: #f2f0f0;">NGS Game — Drylab-Human Practices Collaboration Project</h2>
 
     <h2 style="color: #f2f0f0;">NGS Game — Drylab-Human Practices Collaboration Project</h2>
 +
 +
      <!-- Centered Image 0 -->
 +
    <center><a href = "https://umasehs.github.io/ngs-game/"> <img width = 850px src="https://static.igem.org/mediawiki/2018/9/9b/T--McMaster--Game0.png"></a></center>
 
     <p><span style="color: #f2f0f0;">Drylab team collaborated with the Human Practices team to develop games, that would explain the steps in the Next Generation Sequencing (NGS) process. Meetings with the human practices team helped determine pre-existing games that are analogous to the steps in the NGS process. Using open source software as prototypes to the games, the three games (Fragmentation, Bridge Amplification and Assembly) were developed.</span></p>
 
     <p><span style="color: #f2f0f0;">Drylab team collaborated with the Human Practices team to develop games, that would explain the steps in the Next Generation Sequencing (NGS) process. Meetings with the human practices team helped determine pre-existing games that are analogous to the steps in the NGS process. Using open source software as prototypes to the games, the three games (Fragmentation, Bridge Amplification and Assembly) were developed.</span></p>
  
 
     <h2 style="color: #f2f0f0;">Fragmentation</h2>
 
     <h2 style="color: #f2f0f0;">Fragmentation</h2>
    <p><span style="color: #f2f0f0;">The above image shows the starting page of the game.</span></p>
 
<p><span style="font-size: 12pt; line-height: 107%; font-family: Arial, sans-serif; color: #f2f0f0;">Fragmentation is analogous to fruit ninja game. In order to score points, the green DNA has to be sliced. The game ends when a red DNA is sliced. Failing to slice the green DNA will result in a loss of lives and each trial has 3 lives. Loss of all three lives will also result in the end of the game.</span></p>
 
    <p><span style="color: #f2f0f0;">The game was developed by referencing&nbsp; the fruit ninja game[1]. The green and red objects of the game were altered&nbsp; to graphics of DNA molecules. The sizes of these images were adjusted to fit the graphics on screen. High score and cumulative score were added to the game. High score is the score for the current game. Cumulative score is the score across all the games. Music and sound effects from a royalty free website [2] were also added to the game using audio methods in phaser.</span></p>
 
    <p><span style="color: #f2f0f0;">The following image shows the end screen of the game with the scores obtained in the game. </span></p>
 
  
     <h2 style="color: #f2f0f0;">Bridge Amplification</h2>
+
      <!-- Centered Image 1 -->
 +
     <center><img width = 850px src="https://static.igem.org/mediawiki/2018/0/01/T--McMaster--Game1.png"></center>  
  
     <p><span style="color: #f2f0f0;">The above image is the start screen of the Bridge Amplification game.</span></p>
+
     </br></br><p><span style="color: #f2f0f0;">The above image shows the starting page of the game.</span></p>
     <p><span style=" color: #f2f0f0;">This game is similar to knife throw. Clicking the DNA molecule at the bottom of the screen shoots it to a rotating plate with DNA primers. To score points, the DNA should not superimpose another DNA.&nbsp; Overlay of two DNA molecules on the plate ends the game. </span></p>
+
    </br><p><span style="color: #f2f0f0;">Fragmentation is analogous to fruit ninja game. In order to score points, the green DNA has to be sliced. The game ends when a red DNA is sliced. Failing to slice the green DNA will result in a loss of lives and each trial has 3 lives. Loss of all three lives will also result in the end of the game.</span></p>
     <p><span style="color: #f2f0f0;">This game was developed by referencing a knife throw game[3]. The graphics of the knife and plate were changed to DNA and rotating plates of primer respectively. The sizes of images were adjusted. Scoring for this game is similar to the fragmentation game.</span></p>
+
    </br><p><span style="color: #f2f0f0;">The game was developed by referencing&nbsp; the fruit ninja game[1]. The green and red objects of the game were altered&nbsp; to graphics of DNA molecules. The sizes of these images were adjusted to fit the graphics on screen. High score and cumulative score were added to the game. High score is the score for the current game. Cumulative score is the score across all the games. Music and sound effects from a royalty free website [2] were also added to the game using audio methods in phaser.</span></p>
     <p><span style="color: #f2f0f0;">The following image is how the game looks while playing. </span></p>
+
    </br><p><span style="color: #f2f0f0;">The following image shows the end screen of the game with the scores obtained in the game. </span></p></br>
     <p><span style="color: #f2f0f0;">&nbsp;</span></p>
+
 
 +
    <!-- Centered Image 2 -->
 +
    <center><img src="https://static.igem.org/mediawiki/2018/6/60/T--McMaster--Game2.png"></center> </br>
 +
 
 +
    <h2 style="color: #f2f0f0;">Bridge Amplification</h2></br>
 +
 
 +
    <!-- Centered Image 3 -->
 +
    <center><img src="https://static.igem.org/mediawiki/2018/e/eb/T--McMaster--Game3.png"></center>
 +
 
 +
    </br><p><span style="color: #f2f0f0;">The above image is the start screen of the Bridge Amplification game.</span></p>
 +
     </br><p><span style=" color: #f2f0f0;">This game is similar to knife throw. Clicking the DNA molecule at the bottom of the screen shoots it to a rotating plate with DNA primers. To score points, the DNA should not superimpose another DNA.&nbsp; Overlay of two DNA molecules on the plate ends the game. </span></p>
 +
     </br><p><span style="color: #f2f0f0;">This game was developed by referencing a knife throw game[3]. The graphics of the knife and plate were changed to DNA and rotating plates of primer respectively. The sizes of images were adjusted. Scoring for this game is similar to the fragmentation game.</span></p>
 +
     </br><p><span style="color: #f2f0f0;">The following image is how the game looks while playing. </span></p></br>
 +
 
 +
     <!-- Centered Image 4 -->
 +
    <center><img src="https://static.igem.org/mediawiki/2018/1/17/T--McMaster--Game4.png"></center>  
  
 
     <h2 style="color: #f2f0f0;">Post Production</h2>
 
     <h2 style="color: #f2f0f0;">Post Production</h2>
<p><span style=" color: #f2f0f0;">After producing the games, a HTML script was written to link the games together. The script has a home screen, options page that links all the games together. </span></p>
+
    <p><span style=" color: #f2f0f0;">After producing the games, a HTML script was written to link the games together. The script has a home screen, options page that links all the games together. </span></p>
<p><span style=" color: #f2f0f0;">The following image is the home screen.</span></p>
+
    </br><p><span style=" color: #f2f0f0;">The following image is the home screen.</span></p></br>
<p><span style="color: #f2f0f0;">The following image is the options page. </span></p>
+
 
<p><span style="color: #f2f0f0;">Title cards and an introduction to each game were also added to the script.</span></p>
+
    <!-- Centered Image 5 -->
<p><span style="color: #f2f0f0;">The following images show the title card and the introduction of the fragmentation game.</span></p>
+
    <center><img src="https://static.igem.org/mediawiki/2018/d/da/T--McMaster--Game5.png"></center>
<p>&nbsp;</p>
+
 
<p>&nbsp;</p>
+
    </br></br><p><span style="color: #f2f0f0;">The following image is the options page. </span></p></br></br>
<p><span style="color: #f2f0f0;">The introduction of each game explains a step of NGS and how to play the game.</span></p>
+
 
<p><span style="color: #f2f0f0;"><u><span style="font-size: 12.0pt; line-height: 107%; font-family: 'Arial',sans-serif;">References to the game and music</span></u></span></p>
+
    <!-- Centered Image 6 -->
<p><span style="color: #f2f0f0;">[1] <a style="color: #f2f0f0;" href="https://codepen.io/labdev/pen/sCAKe">https://codepen.io/labdev/pen/sCAKe</a></span></p>
+
    <center><img width = 850px src="https://static.igem.org/mediawiki/2018/a/ac/T--McMaster--Game6.png"></center>
<p><span style=" color: #f2f0f0;">[2] <a style="color: #f2f0f0;" href="http://www.bensound.com">www.bensound.com</a></span></p>
+
 
<p><span style=" color: #f2f0f0;">[3] <a style="color: #f2f0f0;" href="https://www.emanueleferonato.com">https://www.emanueleferonato.com</a> </span></p>
+
    </br><p><span style="color: #f2f0f0;">Title cards and an introduction to each game were also added to the script.</span></p>
<p><span style="color: #f2f0f0;">&nbsp;</span></p>
+
    </br><p><span style="color: #f2f0f0;">The following images show the title card and the introduction of the fragmentation game.</span></p></br>
<p><span style="color: #f2f0f0;">&nbsp;</span></p>
+
 
 +
    <!-- Centered Image 7 -->
 +
    <center><img width = 850px src="https://static.igem.org/mediawiki/2018/7/7b/T--McMaster--Game7.png"></center> </br>
 +
    <!-- Centered Image 8 -->
 +
    <center><img width = 850px src="https://static.igem.org/mediawiki/2018/8/89/T--McMaster--Game8.png"></center> </br>
 +
 
 +
    </br><p><span style="color: #f2f0f0;">The introduction of each game explains a step of NGS and how to play the game.</span></p>
 +
    </br><p><span style="color: #f2f0f0;"><u><span style="font-size: 12.0pt; line-height: 107%; font-family: 'Arial',sans-serif;">References to the game and music</span></u></span></p>
 +
    </br><p><span style="color: #f2f0f0;">[1] <a style="color: #f2f0f0;" href="https://codepen.io/labdev/pen/sCAKe">https://codepen.io/labdev/pen/sCAKe</a></span></p>
 +
    </br><p><span style=" color: #f2f0f0;">[2] <a style="color: #f2f0f0;" href="http://www.bensound.com">www.bensound.com</a></span></p>
 +
    </br><p><span style=" color: #f2f0f0;">[3] <a style="color: #f2f0f0;" href="https://www.emanueleferonato.com">https://www.emanueleferonato.com</a> </span></p>
 +
    </br><p><span style="color: #f2f0f0;">&nbsp;</span></p>
 +
    </br><p><span style="color: #f2f0f0;">&nbsp;</span></p>
 
      
 
      
  
  
 +
</div>
 
</div>
 
</div>
  
 
</html>
 
</html>
 
{{McMaster/Footer}}
 
{{McMaster/Footer}}

Latest revision as of 03:33, 18 October 2018

NGS Game — Drylab-Human Practices Collaboration Project

Drylab team collaborated with the Human Practices team to develop games, that would explain the steps in the Next Generation Sequencing (NGS) process. Meetings with the human practices team helped determine pre-existing games that are analogous to the steps in the NGS process. Using open source software as prototypes to the games, the three games (Fragmentation, Bridge Amplification and Assembly) were developed.

Fragmentation



The above image shows the starting page of the game.


Fragmentation is analogous to fruit ninja game. In order to score points, the green DNA has to be sliced. The game ends when a red DNA is sliced. Failing to slice the green DNA will result in a loss of lives and each trial has 3 lives. Loss of all three lives will also result in the end of the game.


The game was developed by referencing  the fruit ninja game[1]. The green and red objects of the game were altered  to graphics of DNA molecules. The sizes of these images were adjusted to fit the graphics on screen. High score and cumulative score were added to the game. High score is the score for the current game. Cumulative score is the score across all the games. Music and sound effects from a royalty free website [2] were also added to the game using audio methods in phaser.


The following image shows the end screen of the game with the scores obtained in the game.



Bridge Amplification



The above image is the start screen of the Bridge Amplification game.


This game is similar to knife throw. Clicking the DNA molecule at the bottom of the screen shoots it to a rotating plate with DNA primers. To score points, the DNA should not superimpose another DNA.  Overlay of two DNA molecules on the plate ends the game.


This game was developed by referencing a knife throw game[3]. The graphics of the knife and plate were changed to DNA and rotating plates of primer respectively. The sizes of images were adjusted. Scoring for this game is similar to the fragmentation game.


The following image is how the game looks while playing.


Post Production

After producing the games, a HTML script was written to link the games together. The script has a home screen, options page that links all the games together.


The following image is the home screen.




The following image is the options page.




Title cards and an introduction to each game were also added to the script.


The following images show the title card and the introduction of the fragmentation game.





The introduction of each game explains a step of NGS and how to play the game.


References to the game and music


[1] https://codepen.io/labdev/pen/sCAKe


[2] www.bensound.com


[3] https://www.emanueleferonato.com