Team:CINVESTAV-IPN-UNAM MX

From 2012.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
 
-
 
<html>
<html>
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
 
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
 
-
This is a template page. READ THESE INSTRUCTIONS.
 
-
</div>
 
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
 
-
You are provided with this team page template with which to start the iGEM season.  You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki.  You can find some examples <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>.
 
-
</div>
 
-
<div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
 
-
You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace. 
 
-
</div>
 
-
</div>
 
-
</html>
 
-
<!-- *** End of the alert box *** -->
+
<head>
 +
<style>
 +
*{margin:0;padding:0;font-family:trebuchet ms;}
 +
body{width:900px;position:realtive;margin:0 auto;}
 +
table{margin:0 auto 10px auto;border:1px solid #ccc;box-shadow:3px 3px 10px #999;}
 +
td{width:6px;height:6px;border:1px solid #fff;cellpadding:0;cellspacing:0;}
 +
td.snakeCell{background:#000;-moz-border-radius:5px;border:1px solid #000;box-shadow:1px 1px 1px #aaa;}
 +
td.snakeHead{background:red;-moz-border-radius:5px;border:1px solid red;}
 +
td.fruitCell{background:green;-moz-border-radius:5px;border:1px solid green;box-shadow:1px 1px 1px #aaa;}
 +
 +
#scoreBoard{text-shadow:2px 2px 1px #fff;box-shadow:0 -3px 5px #aaa;width:482px;margin:50px auto 0 auto;border:1px solid #ccc;background:#eee;font-weight:bold;padding:10px;}
 +
.gameOver{font-weight:bold;text-shadow:2px 2px 1px #fff;position:absolute;top:0;left:550px;background:#eee;color:red;width:70px;border:50px solid #eee;text-align:center;-moz-border-radius:90px;-webkit-border-radius:90px;border-radius:90px;box-shadow:3px 3px 10px #999;}
 +
</style>
-
{|align="justify"
 
-
|You can write a background of your team here.  Give us a background of your team, the members, etc.  Or tell us more about something of your choosing.
 
-
|[[Image:CINVESTAV-IPN-UNAM_MX_logo.png|200px|right|frame]]
 
-
|-
 
-
|
 
-
''Tell us more about your project.  Give us background.  Use this as the abstract of your project.  Be descriptive but concise (1-2 paragraphs)''
 
-
|[[Image:CINVESTAV-IPN-UNAM_MX_team.png|right|frame|Your team picture]]
 
-
|-
 
-
|
 
-
|align="center"|[[Team:CINVESTAV-IPN-UNAM_MX | Team CINVESTAV-IPN-UNAM_MX]]
 
-
|}
 
-
<!--- The Mission, Experiments --->
+
<link href="estilo.css" media="screen" rel="stylesheet" type="text/css">
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
var direction = 'right', speed = 100, ticker = null, fruitCell = [], score = 0, size = 50;
 +
var snakeCells = [
 +
[ 10, 14 ],
 +
[ 10, 13 ],
 +
[ 10, 12 ],
 +
[ 10, 11 ],
 +
[ 10, 10 ],
 +
[ 10, 9 ],
 +
[ 10, 8 ],
 +
[ 10, 7 ]
 +
];
 +
var snakeHead = [ 10, 14 ];
 +
 +
function renderSnake (){
 +
$('td').removeClass('snakeCell snakeHead');
 +
for (var cell in snakeCells ){
 +
$('tr').eq( snakeCells[cell][0] ).find('td').eq(snakeCells[cell][1]).addClass('snakeCell');
 +
}
 +
$('tr').eq( snakeHead[0] ).find('td').eq(snakeHead[1]).addClass('snakeHead');
 +
}
 +
 +
function getFruitCell() {
 +
fruitCell = [ getRandomNumber( $( 'tr' ).length ), getRandomNumber( $( 'tr:eq(0)>td' ).length ) ];
 +
}
 +
 +
function gameOver() {
 +
$('div.gameOver').show('fast', function() {
 +
$( this ).animate({top:250}, 'slow');
 +
});
 +
clearInterval( ticker );
 +
}
 +
 +
function updateSnakeCell(){
 +
var snakeNewHead = [];
 +
switch(direction){
 +
case 'right':
 +
snakeNewHead = [ snakeHead[0], snakeHead[1]+1 ];
 +
break;
 +
case 'left':
 +
snakeNewHead = [ snakeHead[0], snakeHead[1]-1 ];
 +
break;
 +
case 'up':
 +
snakeNewHead = [ snakeHead[0]-1, snakeHead[1] ];
 +
break;
 +
case 'down':
 +
snakeNewHead = [ snakeHead[0]+1, snakeHead[1] ];
 +
break;
 +
}
 +
var newCell = {length:0}
 +
if( snakeNewHead[0] < 0 || snakeNewHead[1] < 0 ) {
 +
gameOver();
 +
return;
 +
} else if( snakeNewHead[0] >= size || snakeNewHead[1] >= size ) {
 +
gameOver();
 +
return;
 +
}
 +
var newCell = $('tr').eq( snakeNewHead[0] ).find('td').eq(snakeNewHead[1]);
 +
if( newCell.length == 0 ) {
 +
gameOver();
 +
} else {
 +
if ( newCell.hasClass('snakeCell') ) {
 +
gameOver();
 +
} else {
 +
if( newCell.hasClass( 'fruitCell' ) ) {
 +
snakeCells.push( [] );
 +
getFruitCell();
 +
renderFruitCell();
 +
score += 100;
 +
$( '#scoreBoard' ).html( 'Your Score : ' + score );
 +
speed = speed - 10 > 5 ? speed - 10 : speed;
 +
clearInterval( ticker );
 +
startGame();
 +
}
 +
for( var i = ( snakeCells.length - 1 ); i > 0 ; i-- ) {
 +
snakeCells[ i ] = snakeCells[ i - 1 ];
 +
}
 +
snakeCells[ 0 ] = snakeHead = snakeNewHead;
 +
renderSnake();
 +
}
 +
}
 +
}
 +
 +
function getRandomNumber( limit ) {
 +
return parseInt( Math.random() * limit % limit );
 +
}
 +
 +
function getNewDirection( keyCode ) {
 +
var codes = {
 +
37 : 'left',
 +
38 : 'up',
 +
39 : 'right',
 +
40 : 'down'
 +
};
 +
 +
if( typeof codes[ keyCode ] != 'undefined' ) {
 +
var newDirection = codes[ keyCode ], changeDirection = true;
 +
switch( direction ) {
 +
case 'up' :
 +
changeDirection = newDirection != 'down';
 +
break;
 +
case 'down' :
 +
changeDirection = newDirection != 'up';
 +
break;
 +
case 'right' :
 +
changeDirection = newDirection != 'left';
 +
break;
 +
case 'left' :
 +
changeDirection = newDirection != 'right';
 +
break;
 +
}
 +
direction = changeDirection ? newDirection : direction;
 +
}
 +
}
 +
 +
function renderBoard() {
 +
var rowhtml = '';
 +
for( var i = 0; i < size; i++ ) {
 +
rowhtml +='<td cellpadding="0" cellspacing="0"></td>'
 +
}
 +
html = [];
 +
for( var i = 0; i < size; i++ ) {
 +
html.push( '<tr cellpadding="0" cellspacing="0">' + rowhtml + '</tr>' );
 +
}
 +
$( document.body ).append( '<table>' + html.join( '\n' ) + '</table>' );
 +
getFruitCell();
 +
}
 +
 +
function renderFruitCell() {
 +
$( 'td' ).removeClass( 'fruitCell' );
 +
$('tr').eq( fruitCell[0] ).find('td').eq(fruitCell[1]).addClass( 'fruitCell' );
 +
}
 +
 +
function startGame() {
 +
ticker = setInterval( updateSnakeCell, speed );
 +
}
 +
 +
$( document ).ready(function(){
 +
renderBoard();
 +
renderFruitCell();
 +
$( document ).bind('keydown', function( e ) {
 +
getNewDirection( e.keyCode );
 +
});
 +
startGame();
 +
});
 +
</script>
 +
</head>
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
<body>
-
!align="center"|[[Team:CINVESTAV-IPN-UNAM_MX|Home]]
+
    <div id="scoreBoard">Your Score : 0</div>
-
!align="center"|[[Team:CINVESTAV-IPN-UNAM_MX/Team|Team]]
+
    <div class="gameOver" style="display:none">Oops! Game Over</div>
-
!align="center"|[https://igem.org/Team.cgi?year=2012&team_name=CINVESTAV-IPN-UNAM_MX Official Team Profile]
+
</body>
-
!align="center"|[[Team:CINVESTAV-IPN-UNAM_MX/Project|Project]]
+
 
-
!align="center"|[[Team:CINVESTAV-IPN-UNAM_MX/Parts|Parts Submitted to the Registry]]
+
</html>
-
!align="center"|[[Team:CINVESTAV-IPN-UNAM_MX/Modeling|Modeling]]
+
-
!align="center"|[[Team:CINVESTAV-IPN-UNAM_MX/Notebook|Notebook]]
+
-
!align="center"|[[Team:CINVESTAV-IPN-UNAM_MX/Safety|Safety]]
+
-
!align="center"|[[Team:CINVESTAV-IPN-UNAM_MX/Attributions|Attributions]]
+
-
|}
+

Revision as of 02:24, 2 June 2012

Your Score : 0

Retrieved from "http://2012.igem.org/Team:CINVESTAV-IPN-UNAM_MX"