Line 17: | Line 17: | ||
<link rel="stylesheet" href="https://2018.igem.org/Template:HebrewU/w3?action=raw&ctype=text/css"> | <link rel="stylesheet" href="https://2018.igem.org/Template:HebrewU/w3?action=raw&ctype=text/css"> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | |||
<style> | <style> | ||
/* Disable I-GEM defult properties for blank page */ | /* Disable I-GEM defult properties for blank page */ | ||
Line 40: | Line 41: | ||
− | |||
− | |||
− | |||
− | + | @media (max-width: 1000px) { | |
− | + | ||
− | @media (max-width: 1000px) { | + | |
.fixed { | .fixed { | ||
display: none; | display: none; | ||
Line 55: | Line 51: | ||
− | + | /* index Buttons style */ | |
− | + | button { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
border: none; | border: none; | ||
− | + | border-radius: 2px; | |
− | + | padding: 12px 18px; | |
+ | font-size: 16px; | ||
+ | text-transform: uppercase; | ||
+ | cursor: pointer; | ||
color: white; | color: white; | ||
− | + | box-shadow: 0 0 4px #999; | |
− | + | outline: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | .ripple { | ||
+ | background-position: center; | ||
+ | transition: background 0.8s; | ||
+ | border-radius: 50%; | ||
− | |||
} | } | ||
− | . | + | .ripple:hover { |
− | + | background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%; | |
− | + | } | |
− | + | .ripple:active { | |
− | + | background-color: white; | |
− | + | background-size: 100%; | |
− | + | transition: background 0s; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | @media (max-width: 1000px) { | ||
+ | .fixed { | ||
+ | display: none; | ||
+ | } | ||
− | . | + | .ulogo { display:none; } |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | @media (max-width: 1000px) { | ||
+ | img { | ||
+ | display: block; | ||
+ | } | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | @keyframes flash { | |
− | + | 0% { opacity: 1.0 } | |
+ | 50% { opacity: 0.5 } | ||
+ | 100% { opacity: 1.0 } | ||
} | } | ||
− | + | /* Chrome 4+, Safari 4+, Opera 15+ */ | |
− | + | @-webkit-keyframes flash { | |
− | + | 0% { opacity: 1.0 } | |
− | + | 50% { opacity: 0.5 } | |
− | + | 100% { opacity: 1.0 } | |
} | } | ||
− | + | /* Firefox 5+ */ | |
− | + | @-moz-keyframes flash { | |
− | + | 0% { opacity: 1.0 } | |
− | + | 50% { opacity: 0.5 } | |
− | + | 100% { opacity: 1.0 } | |
− | + | ||
− | + | ||
} | } | ||
− | . | + | .highlights_huji p{ |
− | + | text-align:justify; | |
} | } | ||
− | . | + | .abstract_huji { |
− | + | width:80%; | |
− | + | padding-left:10%; | |
− | + | text-align:center; | |
− | + | ||
} | } | ||
− | . | + | .start_button { |
− | + | display:block; | |
− | + | ||
} | } | ||
− | + | canvas { | |
− | + | display:none; | |
− | + | border: solid 1px black; | |
− | + | position:relative; | |
+ | margin: 0 auto 0 auto; | ||
} | } | ||
− | + | .index_body { | |
− | + | width: 80%; | |
− | + | color: black; | |
− | + | Padding-left: 10%; | |
− | + | Padding-right: 10%; | |
− | + | Padding-top: 3%; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .ahuji { |
− | + | color: white; | |
} | } | ||
+ | .index_body { | ||
+ | color: white; | ||
− | |||
− | |||
− | |||
} | } | ||
− | + | #HQ_page p { | |
− | color: | + | color:white; |
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
} | } | ||
Line 241: | Line 166: | ||
+ | <body> | ||
+ | <div class="w3-blue-gray"> | ||
− | |||
− | |||
− | |||
<ul id="ddmenu_hebrewu"> | <ul id="ddmenu_hebrewu"> | ||
<li style="float:left;margin-top:12px;padding-left:15px;"><br />Hebrew</li> | <li style="float:left;margin-top:12px;padding-left:15px;"><br />Hebrew</li> | ||
Line 277: | Line 201: | ||
<li><a href="https://2018.igem.org/Team:HebrewU/Safety">Safety</a></li> | <li><a href="https://2018.igem.org/Team:HebrewU/Safety">Safety</a></li> | ||
<li><a href="https://2018.igem.org/Team:HebrewU/Protocols">Protocols</a></li> | <li><a href="https://2018.igem.org/Team:HebrewU/Protocols">Protocols</a></li> | ||
+ | |||
</ul> | </ul> | ||
Line 294: | Line 219: | ||
<ul> | <ul> | ||
<li><a href="https://2018.igem.org/Team:HebrewU/Team">Members</a></li> | <li><a href="https://2018.igem.org/Team:HebrewU/Team">Members</a></li> | ||
− | <li><a href="https://2018.igem.org/Team:HebrewU/ | + | <li><a href="https://2018.igem.org/Team:HebrewU/Attributions">Attributions</a></li> |
<li><a href="https://2018.igem.org/Team:HebrewU/Collaborations">Collaborations</a></li> | <li><a href="https://2018.igem.org/Team:HebrewU/Collaborations">Collaborations</a></li> | ||
<li><a href="https://2018.igem.org/Team:HebrewU/Photo_Gallery">Photo Gallery</a></li> | <li><a href="https://2018.igem.org/Team:HebrewU/Photo_Gallery">Photo Gallery</a></li> | ||
Line 384: | Line 309: | ||
</script> | </script> | ||
− | + | <div class="huji_container"> | |
+ | <img src="https://static.igem.org/mediawiki/2018/a/a2/T--hebrewu--final_index_pic.png" alt="Snow" style="width:100%;"> | ||
+ | <div class="centered"></div> | ||
</div> | </div> | ||
+ | |||
+ | |||
<!--- Page content start ---> | <!--- Page content start ---> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <div class="index_body"> | |
− | + | <!--- Abstract ---> | |
− | + | <h2 id="huji_hughlights" class="ahuji">The Catalysis of Dioxin Degradation </h2> | |
− | + | <p class="abstract_huji"> | |
− | + | Dioxins, a family of chemical compounds, pose a serious threat to humans, animals, and the environment. Classified as persistent environmental pollutants, these compounds move up the food chain via bioaccumulation; consequently, they are found in very harmful concentrations by the time the reach humans. Our team has set out to engineer a metabolic pathway for the complete degradation of dioxins, and detoxification of chlorinated compounds. <br /> <br />The pathway would involve the uptake of these pollutants and their subsequent breakdown into molecules that would enter organisms’ native metabolism. We are testing the pathway in S. cerevisiae, and have prepared expression vectors and means to engineer a multitude of plants. By deploying such pathways directly into endemic plants, our solution can be tailored to specific regions. Furthermore, because we can efficiently control plant reproduction, we can responsibly implement synthetic biology to solve this issue in a non-invasive and ecological manner.</p> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | + | <!-- Team Container --> | |
− | + | <div class="w3-container w3-padding-64 w3-center"> | |
− | + | <h2 id="huji_hughlights" class="ahuji">Highlights: </h2> | |
− | + | <div class="w3-row"><br> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <div class="w3-third"> | ||
+ | <button class="ripple"><img src="https://static.igem.org/mediawiki/2018/3/3c/T--Hebrewu--highlight_OS.png" width="150px" height="150px"></button> | ||
+ | <p style="text-align:justify"> We made an open source platform, where local researchers can take our synthetic pathway and conduct a research themselves, inserting it to local plants and other flora as well as improving it for us all.</p> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <div class="w3-third"> | |
− | + | <button class="ripple"><img src="https://static.igem.org/mediawiki/2018/c/c0/T--Hebrewu--highlight_Moolti.png" width="150px" height="150px"></button> | |
− | + | <p style="text-align:justify;padding-left:10%;width:80%;">Our <b>M</b>ultiple <b>O</b>rganism <b>O</b>ptimization <b>L</b>ab <b>T</b>ool for <b>i</b>GEM Allows biologists to optimize codon usage for multiple organisms simultaneously. | |
− | + | </p> | |
− | + | ||
− | + | <br /><br /> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div class="w3-third"> | |
− | + | <button class="ripple"><img src="https://static.igem.org/mediawiki/2018/5/57/T--Hebrewu--highlight_gibson.png" width="150px" height="150px"></button> | |
− | + | <p style="text-align:justify">We created 40 bp oligos that can be used as primers for all BioBrick parts. When amplified, these “GBs” can be used for Gibson Assembly which can save time and resources.</p> | |
+ | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | <div | + | </div> |
− | + | <div> | |
− | + | <!-- Second Grid --> | |
− | + | <canvas style="text-align:center" id="canvas" width="800" height="600" tabindex='2'></canvas> | |
− | + | <div > | |
− | + | <div class='box_container' id="TC" style="float:right;"> | |
− | + | </div> | |
− | + | </div> | |
− | + | ||
− | + | <div id="myDIV" style="text-align:center;"> | |
− | + | <button class="flashing" onClick="init()"><img src="https://static.igem.org/mediawiki/2018/1/18/T--Hebrewu--TCDD-invasion.png" width="800" heiht="600"> | |
− | + | </button> | |
− | + | </div> | |
− | + | ||
− | + | </div> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | <!---game script---> | |
− | + | <script type="text/javascript"> | |
− | + | $(function() { | |
− | + | var images = ['https://static.igem.org/mediawiki/2018/5/55/T--Hebrewu--game_background_1.png', 'https://static.igem.org/mediawiki/2018/7/74/T--Hebrewu--game_background_2.png', 'https://static.igem.org/mediawiki/2018/9/91/T--Hebrewu--game_background_3.png']; | |
− | + | $('#canvas').css({'background-image': 'url(' + images[Math.floor(Math.random() * images.length)] + ')'}); | |
− | + | }); | |
− | + | </script> | |
+ | |||
+ | <script> | ||
+ | function myFunction() { | ||
+ | var x = document.getElementById("myDIV"); | ||
+ | if (x.style.display === "none") { | ||
+ | x.style.display = "block"; | ||
+ | } else { | ||
+ | x.style.display = "none"; | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
− | |||
− | |||
− | |||
− | + | <script> | |
− | + | function init() { | |
− | + | ||
− | + | ||
− | + | var x = document.getElementById("myDIV"); | |
− | + | ||
− | + | if (x.style.display === "none") { | |
− | + | x.style.display = "block"; | |
− | + | } else { | |
− | + | x.style.display = "none"; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | // defining the canvas | |
− | + | var canvas = document.getElementById("canvas"); | |
− | + | canvas.style.display = "block"; | |
− | + | canvas.width = 800; | |
− | + | canvas.height = 600; | |
− | + | ||
− | + | // defining some variables | |
− | + | var c = canvas.getContext("2d"); | |
− | + | var WIDTH = canvas.width; | |
− | + | var HEIGHT = canvas.height; | |
− | + | var keys = []; | |
− | + | var theCoins = []; | |
− | + | var timeRemaining = 30; | |
− | + | var theBadGuys = []; | |
− | + | var spawnX, spawnY; | |
− | + | var gameOver = false; | |
− | + | var endMessage = ""; | |
+ | var mouseX, mouseY; | ||
+ | var deltaX = 0; | ||
+ | var deltaY = 0; | ||
+ | var rotation = 0; | ||
+ | var xtarget = 0; | ||
+ | var ytarget = 0; | ||
+ | var theBullets = []; | ||
+ | var deltaX, deltaY, newAngle = 0; | ||
+ | var endStatsDisplay = "score"; | ||
+ | |||
+ | var coinCollectSwitcher = 1; | ||
+ | |||
+ | function loadImages() { | ||
+ | playerImage = new Image(); | ||
+ | playerImage.src = 'https://static.igem.org/mediawiki/2018/b/b2/T--Hebrewu--game_player.png'; | ||
+ | |||
+ | badGuyImage = new Image(); | ||
+ | badGuyImage.src = 'https://static.igem.org/mediawiki/2018/5/53/T--Hebrewu--game_badguy.png'; | ||
+ | |||
+ | |||
+ | |||
+ | balls = new Image(); | ||
+ | balls.src = 'https://static.igem.org/mediawiki/2018/9/98/T--Hebrewu--balls.png'; | ||
+ | |||
+ | } | ||
+ | loadImages(); | ||
+ | |||
+ | |||
+ | |||
+ | // construct a player | ||
+ | function Player () { | ||
+ | this.x = 285; | ||
+ | this.y = 290; | ||
+ | this.w = 200; | ||
+ | this.h = 45; | ||
+ | this.health = 200; | ||
+ | this.points = 0; | ||
+ | this.image = playerImage; | ||
+ | } | ||
+ | var Player1 = new Player(); | ||
+ | |||
+ | // set the game loop interval | ||
+ | createNewCoins(); | ||
+ | setInterval(mainDraw, 20); | ||
+ | |||
+ | |||
+ | function playerDraw() { | ||
+ | |||
+ | c.beginPath(); | ||
+ | |||
+ | c.strokeStyle="blue"; | ||
+ | //c.rect(Player1.x, Player1.y, Player1.w, Player1.h); | ||
+ | c.lineWidth=1; | ||
+ | c.stroke(); | ||
+ | |||
+ | c.save(); | ||
+ | deltaX = mouseX - Player1.x; | ||
+ | deltaY = mouseY - Player1.y; | ||
+ | newAngle = Math.atan(deltaY / deltaX); | ||
+ | |||
+ | c.translate(Player1.x + (Player1.w / 2), Player1.y + (Player1.h / 2) ); | ||
+ | if (deltaX < 0) { | ||
+ | c.rotate(newAngle); | ||
+ | c.scale(-1, 1); | ||
+ | } else { | ||
+ | c.rotate(newAngle); | ||
+ | } | ||
+ | |||
+ | c.drawImage(Player1.image, -(Player1.w / 2) - 7, -(Player1.h / 2) - 5, Player1.w * 1.3, Player1.h * 1.3); | ||
+ | |||
+ | c.restore(); | ||
+ | } | ||
+ | |||
+ | function createNewCoins() { | ||
+ | theCoins.push({x: Math.floor(Math.random() * 800),y: Math.floor(Math.random() * 600),w: 20,h: 20, points: 10, color: 'yellow', sourceX: 0, sourceY: 130, sourceW: 130, sourceH: 130}); | ||
− | + | theCoins.push({x: Math.floor(Math.random() * 800),y: Math.floor(Math.random() * 600),w: 45,h: 45, points: 5, color: 'grey', sourceX: 130, sourceY: 130, sourceW: 130, sourceH: 130}); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | theCoins.push({x: Math.floor(Math.random() * 800),y: Math.floor(Math.random() * 600),w: 60,h: 60, points: 2, color: 'brown', sourceX: 0, sourceY: 0, sourceW: 130, sourceH: 130}); | |
− | + | ||
− | + | } | |
+ | |||
+ | function drawCoins() { | ||
+ | theCoins.forEach( function(i, j) { | ||
+ | c.beginPath(); | ||
+ | c.strokeStyle=i.color; | ||
+ | // c.rect(i.x, i.y, i.w, i.h); | ||
+ | c.drawImage(balls, i.sourceX, i.sourceY, i.sourceW, i.sourceH, i.x, i.y, i.w, i.h); | ||
+ | c.lineWidth=1; | ||
+ | c.stroke(); | ||
+ | }); | ||
+ | } | ||
− | + | function drawHUD() { | |
− | + | c.font = '18pt Calibri'; | |
− | + | c.fillStyle = 'white'; | |
− | + | c.fillText("Health:", 10, 25); | |
− | + | ||
− | + | c.beginPath(); | |
− | + | if (Player1.health < 50) { | |
− | + | c.strokeStyle= 'red'; | |
− | + | } else { | |
− | + | c.strokeStyle= 'yellow'; | |
− | + | } | |
− | + | c.moveTo(85,18); | |
− | + | c.lineTo(85 + Player1.health, 18); | |
− | + | c.lineWidth=15; | |
− | + | c.stroke(); | |
− | + | ||
− | + | c.fillStyle = 'white'; | |
− | + | c.fillText("Points:", 370, 25); | |
− | + | c.fillText("Time remaining:", 585, 25); | |
− | + | ||
− | + | if (timeRemaining < 10) { | |
− | + | c.fillStyle = "red" | |
− | + | } | |
− | + | c.fillText(Math.ceil(timeRemaining), 750, 25); | |
− | + | ||
− | + | c.fillStyle = 'yellow'; | |
− | + | c.fillText(Player1.points, 445, 25); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | function collides(a, b) { | |
− | + | return !(a.x >= b.x + b.w || | |
− | + | a.x + a.w <= b.x || | |
− | < | + | a.y >= b.y + b.h || |
− | < | + | a.y + a.h <= b.y); |
− | + | } | |
− | + | ||
− | + | ||
+ | function collidesStep(a, b) { | ||
+ | return !(a.x + a.xStep >= b.x + b.w || | ||
+ | a.x + a.xStep + a.w <= b.x || | ||
+ | a.y + a.yStep >= b.y + b.h || | ||
+ | a.y + a.yStep + a.h >= b.y); | ||
+ | } | ||
+ | |||
+ | function checkCollision() { | ||
+ | theCoins.forEach( function(i, j){ | ||
+ | if ( collides(i, Player1) ) { | ||
+ | Player1.points += i.points; | ||
+ | theCoins.splice(0); | ||
+ | createNewCoins(); | ||
+ | |||
+ | if (coinCollectSwitcher === 1) { | ||
+ | coinCollect1.play(); | ||
+ | } | ||
+ | |||
+ | if (coinCollectSwitcher === 2) { | ||
+ | coinCollect2.play(); | ||
+ | } | ||
+ | |||
+ | if (coinCollectSwitcher === 3) { | ||
+ | coinCollect3.play(); | ||
+ | } | ||
+ | if (coinCollectSwitcher === 4) { | ||
+ | coinCollect4.play(); | ||
+ | } | ||
+ | if (coinCollectSwitcher === 5) { | ||
+ | coinCollect5.play(); | ||
+ | } | ||
+ | if (coinCollectSwitcher === 6) { | ||
+ | coinCollect6.play(); | ||
+ | } | ||
+ | |||
+ | coinCollectSwitcher++; | ||
+ | |||
+ | if (coinCollectSwitcher === 7) { | ||
+ | coinCollectSwitcher = 1; | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | function endStats() { | ||
+ | |||
+ | if (keys[67]) { | ||
+ | endStatsDisplay = "credits"; | ||
+ | } | ||
+ | |||
+ | if (keys[83]) { | ||
+ | endStatsDisplay = "score"; | ||
+ | } | ||
+ | |||
+ | if (endStatsDisplay === "credits") { | ||
+ | c.font = '20pt Calibri'; | ||
+ | c.fillStyle = 'cyan'; | ||
+ | c.fillText("The Code for the game was taken from Frozen Lizard website", 200, 30); | ||
+ | c.fillText("http://frozenlizardproductions.com", 200, 70); | ||
+ | |||
+ | |||
+ | c.save(); | ||
+ | c.translate(20,130); | ||
+ | c.font = '16pt Calibri'; | ||
+ | c.fillStyle = 'white'; | ||
+ | c.fillText("Graphics Thanks:", 0, 0); | ||
+ | |||
+ | c.font = '12pt Calibri'; | ||
+ | c.fillText("Vortex background by darkrose:", 0, 30); | ||
+ | c.fillText("http://opengameart.org/users/darkrose", 0, 50); | ||
+ | |||
+ | c.fillText("Player and bad guys by C-TOY:", 0, 90); | ||
+ | c.fillText("http://c-toy.blogspot.co.uk", 0, 110); | ||
+ | |||
+ | c.fillText("Orbs by AMON:", 0, 150); | ||
+ | c.fillText("http://opengameart.org/users/amon", 0, 170); | ||
+ | c.restore(); | ||
+ | |||
+ | |||
+ | |||
+ | c.save(); | ||
+ | c.translate(450,130); | ||
+ | c.font = '16pt Calibri'; | ||
+ | c.fillStyle = 'white'; | ||
+ | c.fillText("Sound Thanks:", 0, 0); | ||
+ | |||
+ | c.font = '12pt Calibri'; | ||
+ | c.fillText("Laser and orb collection sounds by Kenney Vleugels", 0, 30); | ||
+ | c.fillText("http://www.kenney.nl", 0, 50); | ||
+ | |||
+ | c.fillText("Bad guy explosion by dklon:", 0, 90); | ||
+ | c.fillText("http://opengameart.org/users/dklon", 0, 110); | ||
+ | |||
+ | c.restore(); | ||
+ | |||
+ | c.font = '30pt Calibri'; | ||
+ | c.fillStyle = 'white'; | ||
+ | c.fillText("Press enter to play again!", 190, 455); | ||
+ | c.fillText("Press S for score", 250, 520); | ||
+ | |||
+ | } | ||
+ | |||
+ | if (endStatsDisplay === "score") { | ||
+ | c.font = '60pt Calibri'; | ||
+ | c.fillStyle = 'white'; | ||
+ | c.fillText(endMessage, 70, 100); | ||
+ | |||
+ | c.font = '80pt Calibri'; | ||
+ | c.fillText("Your Score:", 70, 220); | ||
+ | c.fillStyle = 'yellow'; | ||
+ | c.fillText(Player1.points, 580, 220); | ||
+ | |||
+ | c.font = '30pt Calibri'; | ||
+ | c.fillStyle = 'white'; | ||
+ | c.fillText("Press enter to play again!", 190, 455); | ||
+ | c.fillText("Press C for credits", 250, 520); | ||
+ | |||
+ | c.fillStyle = 'cyan'; | ||
+ | } | ||
+ | |||
+ | if ( keys[13] ) { | ||
+ | Player1.points = 0; | ||
+ | theCoins.splice(0); | ||
+ | createNewCoins(); | ||
+ | timeRemaining = 30; | ||
+ | theBadGuys.splice(0); | ||
+ | Player1.x = 395; | ||
+ | Player1.y = 295; | ||
+ | gameOver = false; | ||
+ | Player1.health = 200; | ||
+ | theBullets.splice(0); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | function pushBadGuy() { | ||
+ | if (Math.random() < 0.5) { | ||
+ | spawnX = Math.random() < 0.5 ? -20 : 820; | ||
+ | spawnY = Math.random() * 600; | ||
+ | } else { | ||
+ | spawnX = Math.random() * 800; | ||
+ | spawnY = Math.random() < 0.5 ? -20 : 620; | ||
+ | } | ||
+ | theBadGuys.push( { | ||
+ | x: spawnX, y: spawnY, w: 10, h: 10, speed: Math.ceil(Math.random()* 2), hit: false, image: badGuyImage | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | |||
+ | function badGuyCollidesY (i, j, step) { | ||
+ | for (k = theBadGuys.length - 1; k >= 0; k--){ | ||
+ | if (j != k) { | ||
+ | if ( | ||
+ | i.x < theBadGuys[k].x + theBadGuys[k].w) { | ||
+ | |||
+ | if ( | ||
+ | i.x + i.w > theBadGuys[k].x) { | ||
+ | |||
+ | if ( | ||
+ | i.y + step < theBadGuys[k].y + theBadGuys[k].h) { | ||
+ | if (i.y + step + i.h > theBadGuys[k].y) { | ||
+ | return true; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | if (i.x + step < Player1.x + Player1.w) { | ||
+ | if (i.x + step + i.w > Player1.x) { | ||
+ | |||
+ | if (i.y < Player1.y + Player1.h) { | ||
+ | if (i.y + i.h > Player1.y) { | ||
+ | !i.hit | ||
+ | Player1.health -= 40; | ||
+ | if (Player1.health <= 0){ | ||
+ | gameOver = true; | ||
+ | endMessage = "Oh no! Game Over"; | ||
+ | } | ||
+ | i.hit = true; | ||
+ | return true; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | }} | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | function badGuyCollidesX (i, j, step) { | ||
+ | for (k = theBadGuys.length - 1; k >= 0; k--){ | ||
+ | if (j != k) { | ||
+ | if ( | ||
+ | i.x + step < theBadGuys[k].x + theBadGuys[k].w) { | ||
+ | |||
+ | if ( | ||
+ | i.x + step + i.w > theBadGuys[k].x) { | ||
+ | |||
+ | if ( | ||
+ | i.y < theBadGuys[k].y + theBadGuys[k].h) { | ||
+ | if (i.y + i.h > theBadGuys[k].y) { | ||
+ | return true; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | if (i.x + step < Player1.x + Player1.w) { | ||
+ | if (i.x + step + i.w > Player1.x) { | ||
+ | if (i.y < Player1.y + Player1.h) { | ||
+ | if (i.y + i.h > Player1.y) { | ||
+ | if (!i.hit) { | ||
+ | Player1.health -= 40; | ||
+ | if (Player1.health <= 0){ | ||
+ | gameOver = true; | ||
+ | endMessage = "Oh no! Game Over"; | ||
+ | } | ||
+ | } | ||
+ | i.hit = true; | ||
+ | return true; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | }} | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | function badGuysMove() { | ||
+ | theBadGuys.forEach( function(i, j) { | ||
+ | if (i.x > Player1.x) { | ||
+ | if (!badGuyCollidesX(i, j, -i.speed)) {i.x -= i.speed;} | ||
+ | } | ||
+ | if (i.x < Player1.x) { | ||
+ | if (!badGuyCollidesX(i, j, -i.speed)) {i.x += i.speed;} | ||
+ | } | ||
+ | if (i.y > Player1.y) { | ||
+ | if (!badGuyCollidesY(i, j, -i.speed)) {i.y -= i.speed;} | ||
+ | } | ||
+ | if (i.y < Player1.y) { | ||
+ | if (!badGuyCollidesY(i, j, -i.speed)) {i.y += i.speed;} | ||
+ | } | ||
+ | |||
+ | if (i.hit === true){ theBadGuys.splice(j, 1); } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | //out the if on | ||
+ | |||
+ | function badGuysDraw() { | ||
+ | theBadGuys.forEach( function(i, j) { | ||
+ | c.beginPath(); | ||
+ | c.strokeStyle="red"; | ||
+ | // c.rect(i.x, i.y, i.w, i.h); | ||
+ | c.drawImage(i.image, i.x - 12 , i.y - 12, 50, 50); | ||
+ | c.lineWidth=1; | ||
+ | c.stroke(); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function createBullet(targetX, targetY, shooterX, shooterY) { | ||
+ | if (!gameOver) { | ||
+ | console.log (gameOver); | ||
+ | deltaX = targetX - shooterX; | ||
+ | deltaY = targetY - shooterY; | ||
+ | rotation = Math.atan2(deltaY, deltaX); | ||
+ | xtarget = Math.cos(rotation); | ||
+ | ytarget = Math.sin(rotation); | ||
+ | |||
+ | theBullets.push({ | ||
+ | active:true, | ||
+ | x: shooterX, //updates | ||
+ | y: shooterY, | ||
+ | speed: 10, | ||
+ | xtarget: xtarget, | ||
+ | ytarget: ytarget, | ||
+ | w: 5, | ||
+ | h: 5, | ||
+ | color: 'red', | ||
+ | angle: rotation | ||
+ | }); | ||
+ | |||
+ | if (shotSwitcher === 1) { | ||
+ | laser1.currentTime = 0.1; | ||
+ | laser1.play(); | ||
+ | } | ||
+ | |||
+ | if (shotSwitcher === 2) { | ||
+ | laser2.currentTime = 0.1; | ||
+ | laser2.play(); | ||
+ | } | ||
+ | |||
+ | if (shotSwitcher === 3) { | ||
+ | laser3.currentTime = 0.1; | ||
+ | laser3.play(); | ||
+ | } | ||
+ | if (shotSwitcher === 4) { | ||
+ | laser4.currentTime = 0.1; | ||
+ | laser4.play(); | ||
+ | } | ||
+ | if (shotSwitcher === 5) { | ||
+ | laser5.currentTime = 0.1; | ||
+ | laser5.play(); | ||
+ | } | ||
+ | if (shotSwitcher === 6) { | ||
+ | laser6.currentTime = 0.1; | ||
+ | laser6.play(); | ||
+ | } | ||
+ | |||
+ | shotSwitcher++; | ||
+ | |||
+ | if (shotSwitcher === 7) { | ||
+ | shotSwitcher = 1; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | } | ||
+ | |||
+ | function bulletsMove() { | ||
+ | theBullets.forEach( function(i, j) { | ||
+ | i.x += i.xtarget * i.speed; | ||
+ | i.y += i.ytarget * i.speed; | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function bulletsDraw() { | ||
+ | theBullets.forEach( function(i, j) { | ||
+ | c.beginPath(); | ||
+ | c.save(); | ||
+ | c.fillStyle = i.color; | ||
+ | c.rect(i.x, i.y, i.w, i.h); | ||
+ | c.fill(); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function checkBulletHits() { | ||
+ | if (theBullets.length > 0) { | ||
+ | if(theBadGuys.length > 0) { | ||
+ | for (j = theBullets.length - 1; j >= 0; j--) { | ||
+ | for (k = theBadGuys.length - 1; k >= 0; k--) { | ||
+ | if (collides(theBadGuys[k], theBullets[j])) { | ||
+ | console.log("collides"); | ||
+ | theBadGuys.splice(k, 1); | ||
+ | theBullets.splice(j, 1); | ||
+ | Player1.points += 1; | ||
+ | |||
+ | if (boomSwitcher === 1) { | ||
+ | boom1.play(); | ||
+ | } | ||
+ | |||
+ | if (boomSwitcher === 2) { | ||
+ | boom2.play(); | ||
+ | } | ||
+ | |||
+ | if (boomSwitcher === 3) { | ||
+ | boom3.play(); | ||
+ | } | ||
+ | if (boomSwitcher === 4) { | ||
+ | boom4.play(); | ||
+ | } | ||
+ | if (boomSwitcher === 5) { | ||
+ | boom5.play(); | ||
+ | } | ||
+ | if (boomSwitcher === 6) { | ||
+ | boom6.play(); | ||
+ | } | ||
+ | |||
+ | boomSwitcher++; | ||
+ | |||
+ | if (boomSwitcher === 7) { | ||
+ | boomSwitcher = 1; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | function mainDraw() { | ||
+ | c.clearRect(0, 0, WIDTH, HEIGHT); | ||
+ | if (!gameOver) { | ||
+ | playerMove(); | ||
+ | playerDraw(); | ||
+ | bulletsMove(); | ||
+ | bulletsDraw(); | ||
+ | checkBulletHits(); | ||
+ | drawCoins(); | ||
+ | drawHUD(); | ||
+ | checkCollision(); | ||
+ | |||
+ | badGuysMove(); | ||
+ | badGuysDraw(); | ||
+ | if (Math.random() * 100 < 1 ) { | ||
+ | pushBadGuy(); | ||
+ | } | ||
+ | |||
+ | timeRemaining -= 0.02; | ||
+ | if (timeRemaining < 0) { | ||
+ | gameOver = true; | ||
+ | endMessage = " You Survived!"; | ||
+ | } | ||
+ | } // if !gameOver | ||
+ | if (gameOver) { | ||
+ | endStats(); | ||
+ | } | ||
+ | |||
+ | } //mainDraw | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | function playerMove(e){ | ||
+ | |||
+ | if (keys[87]) { | ||
+ | if (Player1.y > 2) { | ||
+ | Player1.y -= 3; | ||
+ | } | ||
+ | } | ||
+ | if (keys[83] ) { | ||
+ | if (Player1.y < HEIGHT - Player1.h - 2) { | ||
+ | Player1.y += 3; | ||
+ | } | ||
+ | } | ||
+ | if (keys[65] ) { | ||
+ | if (Player1.x > 2) { | ||
+ | Player1.x -= 3; | ||
+ | } | ||
+ | } | ||
+ | if (keys[68] ) { | ||
+ | if (Player1.x < WIDTH - Player1.w - 2) { | ||
+ | Player1.x += 3; | ||
+ | } | ||
+ | } | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | canvas.addEventListener("keydown", function (e) { | ||
+ | keys[e.keyCode] = true; | ||
+ | }); | ||
+ | canvas.addEventListener("keyup", function (e) { | ||
+ | keys[e.keyCode] = false; | ||
+ | }); | ||
+ | |||
+ | canvas.addEventListener("click", function() { | ||
+ | if (!gameOver){ | ||
+ | createBullet(mouseX, mouseY, Player1.x + (Player1.w / 2), Player1.y + (Player1.h / 2)); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | function mouseMove(e) { | ||
+ | if(e.offsetX) { | ||
+ | mouseX = e.offsetX; | ||
+ | mouseY = e.offsetY; | ||
+ | } | ||
+ | else if (e.layerX) { | ||
+ | mouseX = e.layerX; | ||
+ | mouseY = e.layerY; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | canvas.addEventListener('mousemove', mouseMove, true); | ||
+ | |||
+ | } // init | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- end game script --> | ||
+ | |||
+ | <!--game style--> | ||
+ | <style> | ||
+ | .flashing{ | ||
+ | border:none; | ||
+ | display:inline-block; | ||
+ | animation-name: flash; | ||
+ | animation-duration: 1s; | ||
+ | animation-timing-function: linear; | ||
+ | animation-iteration-count: infinite; | ||
+ | text-align:center; | ||
+ | |||
+ | /* Chrome 4+, Safari 4+, Opera 15+ */ | ||
+ | -webkit-animation-name: flash; | ||
+ | -webkit-animation-duration: 1s; | ||
+ | -webkit-animation-timing-function: linear; | ||
+ | -webkit-animation-iteration-count: infinite; | ||
+ | |||
+ | /* Firefox 5+ */ | ||
+ | -moz-animation-name: flash; | ||
+ | -moz-animation-duration: 1s; | ||
+ | -moz-animation-timing-function: linear; | ||
+ | -moz-animation-iteration-count: infinite | ||
+ | } | ||
+ | |||
+ | @keyframes flash { | ||
+ | 0% { opacity: 1.0 } | ||
+ | 50% { opacity: 0.5 } | ||
+ | 100% { opacity: 1.0 } | ||
+ | } | ||
+ | |||
+ | /* Chrome 4+, Safari 4+, Opera 15+ */ | ||
+ | @-webkit-keyframes flash { | ||
+ | 0% { opacity: 1.0 } | ||
+ | 50% { opacity: 0.5 } | ||
+ | 100% { opacity: 1.0 } | ||
+ | } | ||
+ | |||
+ | /* Firefox 5+ */ | ||
+ | @-moz-keyframes flash { | ||
+ | 0% { opacity: 1.0 } | ||
+ | 50% { opacity: 0.5 } | ||
+ | 100% { opacity: 1.0 } | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | <!--game style end--> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 14:52, 11 October 2018
The Catalysis of Dioxin Degradation
Dioxins, a family of chemical compounds, pose a serious threat to humans, animals, and the environment. Classified as persistent environmental pollutants, these compounds move up the food chain via bioaccumulation; consequently, they are found in very harmful concentrations by the time the reach humans. Our team has set out to engineer a metabolic pathway for the complete degradation of dioxins, and detoxification of chlorinated compounds.
The pathway would involve the uptake of these pollutants and their subsequent breakdown into molecules that would enter organisms’ native metabolism. We are testing the pathway in S. cerevisiae, and have prepared expression vectors and means to engineer a multitude of plants. By deploying such pathways directly into endemic plants, our solution can be tailored to specific regions. Furthermore, because we can efficiently control plant reproduction, we can responsibly implement synthetic biology to solve this issue in a non-invasive and ecological manner.
Highlights:
We made an open source platform, where local researchers can take our synthetic pathway and conduct a research themselves, inserting it to local plants and other flora as well as improving it for us all.
Our Multiple Organism Optimization Lab Tool for iGEM Allows biologists to optimize codon usage for multiple organisms simultaneously.
We created 40 bp oligos that can be used as primers for all BioBrick parts. When amplified, these “GBs” can be used for Gibson Assembly which can save time and resources.