(ADDED Game Image 1, 2, 3, 4, 5, 6, 7, 8) |
|||
Line 16: | Line 16: | ||
<h2 style="color: #f2f0f0;">Fragmentation</h2> | <h2 style="color: #f2f0f0;">Fragmentation</h2> | ||
+ | |||
+ | <!-- Centered Image 1 --> | ||
+ | <center><img 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> | <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="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 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 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> | <p><span style="color: #f2f0f0;">The following image shows the end screen of the game with the scores obtained in the game. </span></p> | ||
+ | |||
+ | <!-- Centered Image 2 --> | ||
+ | <center><img src="https://static.igem.org/mediawiki/2018/6/60/T--McMaster--Game2.png"></center> | ||
<h2 style="color: #f2f0f0;">Bridge Amplification</h2> | <h2 style="color: #f2f0f0;">Bridge Amplification</h2> | ||
+ | |||
+ | <!-- Centered Image 3 --> | ||
+ | <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> | <p><span style="color: #f2f0f0;">The above image is the start screen of the Bridge Amplification game.</span></p> | ||
Line 27: | Line 37: | ||
<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;">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> | <p><span style="color: #f2f0f0;">The following image is how the game looks while playing. </span></p> | ||
− | < | + | |
+ | <!-- 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> | + | <p><span style=" color: #f2f0f0;">The following image is the home screen.</span></p> |
− | <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> </p> | + | |
− | <p> </p> | + | <p><span style="color: #f2f0f0;">The following image is the options page. </span></p> |
− | <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 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> | + | <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;"> </span></p> | + | <p><span style="color: #f2f0f0;">The following images show the title card and the introduction of the fragmentation game.</span></p> |
− | <p><span style="color: #f2f0f0;"> </span></p> | + | |
+ | <!-- Centered Image 7 --> | ||
+ | <center><img width = 700px src="https://static.igem.org/mediawiki/2018/7/7b/T--McMaster--Game7.png"></center> | ||
+ | <!-- Centered Image 8 --> | ||
+ | <center><img width = 700px src="https://static.igem.org/mediawiki/2018/8/89/T--McMaster--Game8.png"></center> | ||
+ | |||
+ | <p> </p> | ||
+ | <p> </p> | ||
+ | <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> | ||
+ | <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;">[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> | ||
+ | <p><span style="color: #f2f0f0;"> </span></p> | ||
+ | <p><span style="color: #f2f0f0;"> </span></p> | ||
Revision as of 03:07, 17 October 2018