(ADDED Game Image 1, 2, 3, 4, 5, 6, 7, 8) |
|||
(10 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"> | ||
− | + | ||
− | + | ||
− | + | ||
</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> | ||
Line 18: | Line 19: | ||
<!-- Centered Image 1 --> | <!-- Centered Image 1 --> | ||
− | <center><img src="https://static.igem.org/mediawiki/2018/0/01/T--McMaster--Game1.png"></center> | + | <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 shows the starting page of the 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=" | + | </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;">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.</span></p> | + | </br><p><span style="color: #f2f0f0;">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.</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> | + | </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> |
<!-- Centered Image 2 --> | <!-- Centered Image 2 --> | ||
− | <center><img src="https://static.igem.org/mediawiki/2018/6/60/T--McMaster--Game2.png"></center> | + | <center><img src="https://static.igem.org/mediawiki/2018/6/60/T--McMaster--Game2.png"></center> </br> |
− | <h2 style="color: #f2f0f0;">Bridge Amplification</h2> | + | <h2 style="color: #f2f0f0;">Bridge Amplification</h2></br> |
<!-- Centered Image 3 --> | <!-- Centered Image 3 --> | ||
<center><img src="https://static.igem.org/mediawiki/2018/e/eb/T--McMaster--Game3.png"></center> | <center><img src="https://static.igem.org/mediawiki/2018/e/eb/T--McMaster--Game3.png"></center> | ||
− | <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;">The above image is the start screen of the Bridge Amplification 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. Overlay of two DNA molecules on the plate ends the 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. Overlay of two DNA molecules on the plate ends 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;">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> |
− | <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 is how the game looks while playing. </span></p></br> |
<!-- Centered Image 4 --> | <!-- Centered Image 4 --> | ||
Line 43: | Line 44: | ||
<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> |
<!-- Centered Image 5 --> | <!-- Centered Image 5 --> | ||
<center><img src="https://static.igem.org/mediawiki/2018/d/da/T--McMaster--Game5.png"></center> | <center><img src="https://static.igem.org/mediawiki/2018/d/da/T--McMaster--Game5.png"></center> | ||
− | <p><span style="color: #f2f0f0;">The following image is the options page. </span></p> | + | </br></br><p><span style="color: #f2f0f0;">The following image is the options page. </span></p></br></br> |
<!-- Centered Image 6 --> | <!-- Centered Image 6 --> | ||
− | <center><img src="https://static.igem.org/mediawiki/2018/a/ac/T--McMaster--Game6.png"></center> | + | <center><img width = 850px src="https://static.igem.org/mediawiki/2018/a/ac/T--McMaster--Game6.png"></center> |
− | <p><span style="color: #f2f0f0;">Title cards and an introduction to each game were also added to the script.</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;">The following images show the title card and the introduction of the fragmentation game.</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> |
<!-- Centered Image 7 --> | <!-- Centered Image 7 --> | ||
− | <center><img width = | + | <center><img width = 850px src="https://static.igem.org/mediawiki/2018/7/7b/T--McMaster--Game7.png"></center> </br> |
<!-- Centered Image 8 --> | <!-- Centered Image 8 --> | ||
− | <center><img width = | + | <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> | |
− | <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;">[2] <a style="color: #f2f0f0;" href="http://www.bensound.com">www.bensound.com</a></span></p> |
− | <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;">[3] <a style="color: #f2f0f0;" href="https://www.emanueleferonato.com">https://www.emanueleferonato.com</a> </span></p> |
− | <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;"> </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;"> </span></p> |
− | <p><span style="color: #f2f0f0;"> </span></p> | + | |
− | <p><span style="color: #f2f0f0;"> </span></p> | + | |
Latest revision as of 03:33, 18 October 2018