Team:CINVESTAV-IPN-UNAM MX

From 2012.igem.org

(Difference between revisions)
 
(53 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
 
+
<head>
<head>
 +
<style type="text/css">
-
<style>
+
#top-section {
-
*{margin:0;padding:0;font-family:trebuchet ms;}
+
position: relative;
-
body{width:900px;position:realtive;margin:0 auto;}
+
height: 20px;
-
table{margin:0 auto 10px auto;border:1px solid #ccc;box-shadow:3px 3px 10px #999;}
+
width: 975px;
-
td{width:6px;height:6px;border:1px solid #fff;cellpadding:0;cellspacing:0;}
+
margin: 0 auto 0 auto;
-
td.snakeCell{background:#000;-moz-border-radius:5px;border:1px solid #000;box-shadow:1px 1px 1px #aaa;}
+
border-left: hidden;
-
td.snakeHead{background:red;-moz-border-radius:5px;border:1px solid red;}
+
border-right: hidden;
-
td.fruitCell{background:green;-moz-border-radius:5px;border:1px solid green;box-shadow:1px 1px 1px #aaa;}
+
border-bottom: hidden;
-
+
}
-
#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;}
+
 +
body {
 +
background: #FFFFFF url(https://static.igem.org/mediawiki/2012/f/f3/Fondo_bod.jpg) repeat-x;
 +
text-align: justify;
 +
font-family: Georgia, "Times New Roman", Times, serif;
 +
font-size: 12px;
 +
color: #000000;
 +
}
 +
 +
.firstHeading {
 +
margin-bottom: .1em;
 +
visibility:hidden;
 +
}
 +
 +
img[src*="/wiki/skins/common/images/wiki.png"]{
 +
    width:0;
 +
    height:0px;
 +
    padding-right:975px;
 +
    background:transparent url(https://2011.igem.org/wiki/skins/common/images/wiki.png) top left no-repeat;
 +
}
</style>
</style>
 +
<title>CINVESTAV-IPN-UNAM MX</title>
 +
<meta HTTP-EQUIV="Refresh" CONTENT="3; URL=/Team/CINVESTAV-IPN-UNAM_MX/home.htm" />
-
<link href="estilo.css" media="screen" rel="stylesheet" type="text/css">
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+
<!--Fireworks CS6 Dreamweaver CS6 target.  Created Tue Sep 25 16:03:30 GMT-0500 (Central Daylight Time (Mexico)) 2012-->
-
<script type="text/javascript">
+
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
-
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>
</head>
-
 
+
<body bgcolor="#ffffff">
-
<body>
+
<p>&nbsp;</p>
-
    <div id="scoreBoard">Your Score : 0</div>
+
<p>&nbsp;</p>
-
     <div class="gameOver" style="display:none">Oops! Game Over</div>
+
<p>
-
</body>
+
  <div><center><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400" id="FlashID" title="Index">
-
 
+
    <param name="movie" value="https://static.igem.org/mediawiki/2012/1/1a/Rodonuevo.swf" />
 +
    <param name="quality" value="high" />
 +
    <param name="wmode" value="opaque" />
 +
    <param name="swfversion" value="6.0.65.0" />
 +
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
 +
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
 +
     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
 +
    <!--[if !IE]>-->
 +
    <object type="application/x-shockwave-flash" data="https://static.igem.org/mediawiki/2012/1/1a/Rodonuevo.swf" width="550" height="400">
 +
      <!--<![endif]-->
 +
      <param name="quality" value="high" />
 +
      <param name="wmode" value="opaque" />
 +
      <param name="swfversion" value="6.0.65.0" />
 +
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
 +
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
 +
      <div>
 +
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
 +
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
 +
      </div>
 +
      <!--[if !IE]>-->
 +
    </object>
 +
    <!--<![endif]-->
 +
  </object>
 +
</p>
 +
<script type="text/javascript">
 +
swfobject.registerObject("FlashID");
 +
</script>
 +
</center></div>
 +
</body>
</html>
</html>

Latest revision as of 18:27, 25 October 2012

CINVESTAV-IPN-UNAM MX

 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

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