IGEM:Kyoto/sandbox: Difference between revisions
No edit summary |
No edit summary |
||
Line 55: | Line 55: | ||
</div> | </div> | ||
<form> | <form> | ||
<input id="game-start" type="button" value="start" onClick="game_start()"> | <input id="kyoto-game-start" type="button" value="start" onClick="game_start()"> | ||
</form> | </form> | ||
</div> | </div> |
Revision as of 06:55, 4 March 2015
<html> <style>
/******************デフォルトデザイン変更・横幅設定*****************/
- sidebar-main, #contentSub, #footer{
display:none;
} p{
margin:0px; line-height:2em; background-image:url(image);
} table{
font-size:16px;
}
- globalWrapper{
-webkit-text-size-adjust:100%;
} body{
background-color:#ffffff; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}
- column-content{
min-width:1024px; width:100%; margin-left:auto; margin-right:auto; margin-bottom:0px; float:none; border:0px; position:relative;
}
- column-one{
position:relative; min-width:1024px; width:100%; margin-left:auto; margin-right:auto; float:none; padding:0px; z-index:2;
}
- content, #bodyContent{
min-width:1024px; margin-left:0px; margin-right:0px; border:0px; margin:0px; padding:0px; line-height:2em; font-size:16px;
} a{
color:#ffc148;
} /*******メニューバー変更*******/
- p-cactions, #p-personal, #p-cactions .pBody, #p-personal .pBody{
position:static; padding-left:0px; padding-right:0px; border:0px;
}
- p-cactions{
float:left; width:45%;
}
- p-personal{
float:right; width:55%;
}
- p-cactions ul, #p-personal ul{
width:100%; height:20px; position:static; padding:0px; margin:0px;
background-color:#cccccc;
}
- p-cactions ul{
float:left; text-align:right;
}
- p-personal ul{
float:right; text-align:left;
}
- p-cactions ul li, #p-personal ul li, #p-cactions li a, #p-personal li a, #p-cactions li a:hover, #p-cactions li.selected a, #p-cactions .new a, #p-personal li a:hover{
position:static; padding-top:0px !important; padding-bottom:0px !important; margin:0px; border:0px; line-height:normal; font-size:12px; font-weight:normal; background-color:#cccccc; color:#ffffff;
} li#pt-userpage, li#pt-anonuserpage, li#pt-login{
background-image:none;
}
- p-cactions ul li, #p-personal ul li{
padding-left:5px; padding-right:5px;
} .firstHeading{
display:none;
} a, a:hover{
text-decoration:none;
}
/******************コンテンツ設定*****************/
/*******HEADER*******/
- kyoto-header-line{
position:fixed; width:100%; z-index:1; border-bottom:1px solid #ffffff; background-color:#1e1e20;
}
- kyoto-header-wrapper{
position:relative; width:960px; left:50%; margin-left:-480px;
}
- kyoto-header-home-wrapper, #kyoto-header-contact-wrapper{
position:relative; width:15%; height:78px; float:left;
}
- kyoto-header-about-wrapper, #kyoto-header-history-wrapper, #kyoto-header-events-wrapper, #kyoto-header-team-wrapper, #kyoto-header-finance-wrapper{
position:relative; width:14%; height:78px; float:left;
}
- kyoto-header-home, #kyoto-header-about, #kyoto-header-contact, #kyoto-header-history, #kyoto-header-events, #kyoto-header-team, #kyoto-header-finance{
position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;
}
- kyoto-header-home{
width:62px; height:26px;
}
- kyoto-header-about{
width:65px; height:26px;
}
- kyoto-header-history{
width:77px; height:26px;
}
- kyoto-header-events{
width:72px; height:26px;
}
- kyoto-header-team{
width:58px; height:25px;
}
- kyoto-header-finance{
width:82px; height:26px;
}
- kyoto-header-contact{
width:85px; height:26px;
}
- kyoto-header-contact a{
background:none !important;
} /*******FOOTER*******/
- kyoto-footer-line{
position:relative; background-color:#1e1e20; height:190px;
}
- kyoto-footer-wrapper{
width:960px; margin-left:auto; margin-right:auto;
} .kyoto-footer{
position:relative; float:left; width:320px; height:190px;
}
- kyoto-footer-mail, #kyoto-footer-twitter{
background:transparent !important;
} .kyoto-footer img{
position:absolute; margin:auto; top:0; bottom:0; left:0; right:0;
} /******************コンテンツ設定*****************/
- kyoto-wrapper{
position:relative; width:960px; margin-left:auto; margin-right:auto; padding-top:100px;
} .kyoto-chapter{
margin-left:auto; margin-right:auto; padding-top:20px; padding-bottom:40px; text-align:center;
} .kyoto-title{
margin-left:auto; margin-right:auto; padding-bottom:20px; text-align:center;
}
- kyoto-yearselect{
background-color:transparent; margin-bottom:55px;
}
- kyoto-yearselect td{
padding:0 10px 0 10px;
}
- kyoto-yearselect td a{
color:#ffffff; font-size:30px;
}
- kyoto-yearselect td a:hover{
color:#aaaaaa;
}
/*******TOP*******/
- kyoto-top-background{
position:fixed; width:100%; height:100%; background-image:url(http://openwetware.org/images/f/ff/Kyoto-top-background.jpg); background-size:cover;
}
- kyoto-background-color{
position:fixed; width:100%; height:100%; background-size:cover; background-color:#333333; opacity:0.8;
}
- kyoto-top-wrapper{
position:relative; width:1024px; margin-left:auto; margin-right:auto;
}
- kyoto-top-formula-wrapper{
padding:330px 0 0 0;
}
- kyoto-top-formula{
text-align:center;
}
- kyoto-top-sentence-wrapper{
padding:41px 0 130px 0;
}
- kyoto-top-sentence{
text-align:center;
} /*******ABOUT*******/
- kyoto-about-background{
position:fixed; width:100%; height:100%; background-image:url(http://openwetware.org/images/a/a4/Kyoto-about-background.jpg); background-size:cover;
} .kyoto-about-text{
padding-bottom:70px; color:#ffffff;
}
- kyoto-about-jamboree{
padding:54px 50px 54px 50px; margin-bottom:30px; width:860px; background:rgba(250,250,250,0.3);
}
- kyoto-about-jamboree img{
width:100%;
} /*******HISTORY*******/
- kyoto-history-background{
position:fixed; width:100%; height:100%; background-image:url(http://openwetware.org/images/6/6a/Kyoto-history-background.jpg); background-size:cover;
}
- kyoto-history-link{
padding-bottom:30px; text-align:center; color:#ffffff;
} .kyoto-history-year{
font-size:50px; color:#ffffff; padding-bottom:10px; border-bottom:1px solid #ffffff; margin-bottom:55px;
} .kyoto-history-table{
background-color:transparent; margin-bottom:55px;
} .kyoto-history-table td{
margin-bottom:55px; vertical-align:top;
} .kyoto-history-text{
width:450px; padding:0 30px 0 0; color:#ffffff;
} .kyoto-history-photo{
padding:0 30px 0 30px;
} .kyoto-history-photo img{
width:420px;
} /*******EVENTS*******/
- kyoto-events-background{
position:fixed; width:100%; height:100%; background-image:url(http://openwetware.org/images/0/03/Kyoto-events-background.jpg); background-size:cover;
}
- kyoto-events-content{
border-left:1px solid #ffffff; margin-top:10px;
} .kyoto-events-table{
width:959px; border:0px; background:transparent; color:#ffffff
} .kyoto-events-table td{
padding:10px; vertical-align:top;
} .kyoto-events-date{
width:150px; border:0px; text-align:center;
}
- kyoto-events-content img{
height:230px; padding-left:5px; padding-right:5px;
} .kyoto-events-photo{
max-width:763px; overflow-x:auto; white-space:nowrap;
}
- kyoto-events-2016, #kyoto-events-2015, #kyoto-events-2014, #kyoto-events-2013, #kyoto-events-2012, #kyoto-events-2011, #kyoto-events-2010{
display:none;
} /*******GAME*******/
- kyoto-game-background{
position:absolute; background-color:#000; opacity:0.7; display:none; width:100%; height:100%; top:0; z-index:2;
}
- kyoto-game-center{
position:fixed; width:0; height:0; left:50%; top:0; display:none; z-index:3;
}
- kyoto-game-wrapper{
position:relative; margin-left:-480px; width:960px;
}
- wrapper{
position:relative; height:498px; margin:80px 30px 0 30px; border:1px solid #000; background-color:#ffffff;
} .image{ position:absolute;
width:100px; height:80px;
}
- image0{
top:10px; left:55px;
}
- image1{
top:110px; left:55px;
}
- image2{
top:210px; left:55px;
}
- image3{
top:310px; left:55px;
}
- databox{
width:225px;
border-left:1px solid #000; float:right;
} .data{ width:225px;
height:83px; text-align:center;
display: table-cell; vertical-align: middle;
font-size:60px;
}
- databox img{
vertical-align:bottom;
} .menu{ position:absolute;
width:100px; height:80px;
}
- menu1{
top:410px; left:55px;
}
- menu2{
top:410px; left:210px;
}
- menu3{
top:410px; left:365px;
}
- menu4{
top:410px; left:520px;
} .area{ position:absolute;
width:898px; height:498px; font-size:60px; text-align:center;
}
- gamestart{
display:inline; background-color:#ffffff;
}
- gamestart div{
width:100%;
height:500px;
line-height:500px; }
- gameover{
display:none; background-color:#ffffff;
}
- gameover div{
width:100%;
height:250px;
line-height:250px; } .play{
position:absolute; width:898px; font-size:30px; bottom:0; text-align:center; margin:0 0 15px 0;
}
/*******TEAM*******/
- kyoto-team-background{
position:fixed; width:100%; height:100%; background-image:url(http://openwetware.org/images/4/4e/Kyoto-team-background.jpg); background-size:cover;
}
- kyoto-team-member-wrapper, #kyoto-team-instructor-wrapper, #kyoto-team-adviser-wrapper{
margin:0px 0px 55px 0px;
} .kyoto-team-table{
width:960px; border-collapse:collapse; margin:0px 0px 55px 0px; background:transparent;
} .kyoto-team-table td{
vertical-align:top; color:#ffffff;
} .kyoto-team-table-photo{
width:300px; padding-right:60px
} .kyoto-team-table-photo img{
width:300px;
} .kyoto-team-profile{
width:600px;
} .kyoto-team-profile h3{
padding:0; margin:0; border-bottom:1px solid #ffffff; font-size:20px; color:#ffffff;
} .kyoto-team-supporter{
margin:30px 10px 20px 0px; padding:0; border:0; line-height:1.5em; border-bottom:1px solid #000; width:50%;
} .kyoto-team-advisor{
margin:30px 10px 20px 0px; padding:0; border:0; line-height:1.5em; border-bottom:1px solid #000; width:50%;
} .kyoto-team-member{
color:#ffffff;
}
- kyoto-team-2016, #kyoto-team-2015, #kyoto-team-2014, #kyoto-team-2013, #kyoto-team-2012, #kyoto-team-2011, #kyoto-team-2010{
display:none;
} /*******FINANCE*******/
- kyoto-finance-background{
position:fixed; width:100%; height:100%; background-image:url(http://openwetware.org/images/d/de/Kyoto-finance-background.jpg); background-size:cover;
} .kyoto-finance-desc{
padding-bottom:55px; color:#ffffff;
}
- kyoto-finance-chart{
padding:30px 0 30px 0; text-align:center; margin-bottom:55px; background:rgba(250,250,250,0.3);
}
</style> </html> <html> <!-- メニュー --> <div id="kyoto-menu-background"> </div> <div class="kyoto-center" id="kyoto-menu-center">
<div id="kyoto-menu-base"> <div class="kyoto-menu-circle" id="kyoto-menu-events"> <a href="http://openwetware.org/wiki/IGEM:Kyoto/events-sandbox"></a> </div> <div class="kyoto-menu-circle" id="kyoto-menu-history"> <a href="http://openwetware.org/wiki/IGEM:Kyoto/history-sandbox"></a> </div> <div class="kyoto-menu-circle" id="kyoto-menu-about"> <a href="http://openwetware.org/wiki/IGEM:Kyoto/about-sandbox"></a> </div> <div class="kyoto-menu-circle" id="kyoto-menu-team"> <a href="http://openwetware.org/wiki/IGEM:Kyoto/team-sandbox"></a> </div> <div class="kyoto-menu-circle" id="kyoto-menu-contact"> <a href="http://openwetware.org/wiki/IGEM:Kyoto/contact-sandbox"></a> </div>
<div class="kyoto-menu-shadow" id="kyoto-menu-shadow-events"> <img src="http://openwetware.org/images/4/4c/Kyoto-menu-shadow.png"> </div> <div class="kyoto-menu-shadow" id="kyoto-menu-shadow-history"> <img src="http://openwetware.org/images/4/4c/Kyoto-menu-shadow.png"> </div> <div class="kyoto-menu-shadow" id="kyoto-menu-shadow-about"> <img src="http://openwetware.org/images/4/4c/Kyoto-menu-shadow.png"> </div> <div class="kyoto-menu-shadow" id="kyoto-menu-shadow-team"> <img src="http://openwetware.org/images/4/4c/Kyoto-menu-shadow.png"> </div> <div class="kyoto-menu-shadow" id="kyoto-menu-shadow-contact"> <img src="http://openwetware.org/images/4/4c/Kyoto-menu-shadow.png"> </div>
<div id="kyoto-menu-game" onClick="game_open()"> </div> <div id="kyoto-menu-close" onClick="menu_close()"> <img src="http://openwetware.org/images/c/c9/Kyoto-menu-close.png"> </div> </div>
</div>
<!-- ゲーム --> <div class="kyoto-center" id="kyoto-game-center">
<div id="kyoto-game-base"> <div id="kyoto-game-wall"> </div> <div id="kyoto-game-close" onClick="game_close()"> <img src="http://openwetware.org/images/c/c9/Kyoto-menu-close.png"> </div> <form> <input id="kyoto-game-start" type="button" value="start" onClick="game_start()"> </form> </div>
</div>
<!-- 本体 --> <div id="kyoto-ku-background"> </div> <div id="kyoto-top-wrapper">
<div id="kyoto-top-header"> <div id="kyoto-top-text-wrapper"> <div id="kyoto-top-text" onClick="location.href='http://openwetware.org/wiki/IGEM:Kyoto/about-sandbox'"></div> </div> <div id="kyoto-top-menu-wrapper"> <div id="kyoto-top-menu" onClick="menu_open()"></div> </div> </div> <div id="kyoto-top-content-wrapper"> <div id="kyoto-top-content"> <img src="http://openwetware.org/images/f/fc/Kyoto-top-designers.png"> </div> </div> <div id="kyoto-top-logo-wrapper"> <div id="kyoto-top-logo"> <div id="kyoto-top-logo-about"> <a href="http://openwetware.org/wiki/IGEM:Kyoto/about-sandbox"><img src="http://openwetware.org/images/6/67/Kyoto-top-logo-about.png"></a> </div> <img src="http://openwetware.org/images/7/77/Kyoto-top-logo.png"> </div> </div>
</div> </html> <html> <style> <!--
- kyoto-menu-game{
background-image:url("http://openwetware.org/images/4/42/Kyoto-menu-game.png");
} --> </style> </html> Template:IGEM Kyoto/header/js <html> <script type="text/javascript">
p=2017; pass=new Array(1,0,0,0,0); function events(year) { var a='kyoto-events-'+p var dpoff=document.getElementById(a); dpoff.style.display="none"; var b='kyoto-events-'+year var dpon=document.getElementById(b); dpon.style.display="block"; p=year; if(year=="2012") { if(pass[0]==1) { pass[1]=1; pass[0]=0; } else { pass[0]=1; for (i=1;i<5;i++){ pass[i]=0; } } } if(year=="2010") { if(pass[1]==1) { pass[2]=1; pass[1]=0; } else { pass[0]=1; for (i=1;i<5;i++){ pass[i]=0; } } } if(year=="2011") { if(pass[2]==1) { pass[3]=1; pass[2]=0; } else if(pass[4]==1) { var gameback=document.getElementById("kyoto-game-background"); var gamecenter=document.getElementById("kyoto-game-center"); gameback.style.display="block"; gamecenter.style.display="block"; } else { pass[0]=1; for (i=1;i<5;i++){ pass[i]=0; } } } if(year=="2014") { if(pass[3]==1) { pass[4]=1; pass[3]=0; } else { pass[0]=1; for (i=1;i<5;i++){ pass[i]=0; } } }
} dx=155, dy=100; x=55, sec=101, pnt=0, dmg=-15, lag=-3; mode=0; var i; baspos=new Array(3); for (i=0;i<3;i++){
baspos[i]=new Array(4);
} for(i=0;i<3;i++){
for(j=0;j<4;j++){
baspos[i][j]=0; } } catpos=new Array(0,1);
document.onkeydown=action;
function rnd(){
return Math.floor(Math.random()*4);
}
function loop() { if(sec>0) { if(dmg<100) { setTimeout("loop()",1000); } else { setTimeout("gameover()",1); } } else { setTimeout("gameover()",1); }
var a,b;
var base0=document.getElementById("image0"); var base1=document.getElementById("image1"); var base2=document.getElementById("image2"); var time=document.getElementById("time"); var score=document.getElementById("score"); var damage=document.getElementById("damage");
if(baspos[2][catpos[0]]+catpos[1]==5) { pnt+=5; } else{ dmg+=5; } sec-=1;
time.innerHTML=sec; score.innerHTML=pnt; damage.innerHTML=dmg;
for(j=0;j<4;j++){ baspos[2][j]=baspos[1][j]; } for(j=0;j<4;j++){ baspos[1][j]=baspos[0][j]; }
a=rnd(); b=rnd(); for(j=0;j<4;j++){ baspos[0][j]=0; } baspos[0][a]=b+1;
for(j=0;j<4;j++){ if(baspos[0][j]>0){ base0.style.left=55+155*j+"px"; if(baspos[0][j]==1) { base0.src="http://openwetware.org/images/0/0b/Kyoto-game-1.png"; } if(baspos[0][j]==2) { base0.src="http://openwetware.org/images/9/9f/Kyoto-game-2.png"; } if(baspos[0][j]==3) { base0.src="http://openwetware.org/images/6/61/Kyoto-game-3.png"; } if(baspos[0][j]==4) { base0.src="http://openwetware.org/images/3/3f/Kyoto-game-4.png"; } } } for(j=0;j<4;j++){ if(baspos[1][j]>0){ base1.style.left=55+155*j+"px"; if(baspos[1][j]==1) { base1.src="http://openwetware.org/images/0/0b/Kyoto-game-1.png"; } if(baspos[1][j]==2) { base1.src="http://openwetware.org/images/9/9f/Kyoto-game-2.png"; } if(baspos[1][j]==3) { base1.src="http://openwetware.org/images/6/61/Kyoto-game-3.png"; } if(baspos[1][j]==4) { base1.src="http://openwetware.org/images/3/3f/Kyoto-game-4.png"; } } } for(j=0;j<4;j++){ if(baspos[2][j]>0){ base2.style.left=55+155*j+"px"; if(baspos[2][j]==1) { base2.src="http://openwetware.org/images/0/0b/Kyoto-game-1.png"; } if(baspos[2][j]==2) { base2.src="http://openwetware.org/images/9/9f/Kyoto-game-2.png"; } if(baspos[2][j]==3) { base2.src="http://openwetware.org/images/6/61/Kyoto-game-3.png"; } if(baspos[2][j]==4) { base2.src="http://openwetware.org/images/3/3f/Kyoto-game-4.png"; } } } lag+=1; if(lag<0) { var damage=document.getElementById("damage"); damage.innerHTML="" } }
function gameover() {
var gameover=document.getElementById("gameover"); var showscore=document.getElementById("showscore"); showscore.innerHTML="SCORE : "+pnt; mode=2;
gameover.style.display="inline"; }
function action() {
if(event.keyCode==37)
{ if(catpos[0]!=0) { var catcher=document.getElementById("image3"); catpos[0]-=1; x-=dx; catcher.style.left=x+"px"; } }
if(event.keyCode==39)
{ if(catpos[0]!=3) { var catcher=document.getElementById("image3"); catpos[0]+=1; x+=dx; catcher.style.left=x+"px"; } }
if(event.keyCode==40)
{ var catcher=document.getElementById("image3"); catpos[1]=catpos[0]+1; catcher.src=catpos[1]+".png"; if(catpos[1]==1) { catcher.src="http://openwetware.org/images/0/0b/Kyoto-game-1.png" } if(catpos[1]==2) { catcher.src="http://openwetware.org/images/9/9f/Kyoto-game-2.png" } if(catpos[1]==3) { catcher.src="http://openwetware.org/images/6/61/Kyoto-game-3.png" } if(catpos[1]==4) { catcher.src="http://openwetware.org/images/3/3f/Kyoto-game-4.png" } }
if(event.keyCode==13)
{ if(mode==0) { var gamestart=document.getElementById("gamestart"); gamestart.style.display="none"; mode=1; setTimeout("loop()",1); } if(mode==2) { var gameover=document.getElementById("gameover"); mode=1; setTimeout("reset()",1); gameover.style.display="none"; setTimeout("loop()",10); } } }
function reset(){ x=55, sec=101, pnt=0, dmg=-15; var i; for (i=0;i<3;i++){ baspos[i]=new Array(4); } for(i=0;i<3;i++){ for(j=0;j<4;j++){ baspos[i][j]=0; } } catpos[0]=0; catpos[1]=1; var base0=document.getElementById("image0"); var base1=document.getElementById("image1"); var base2=document.getElementById("image2"); var catcher=document.getElementById("image3"); base0.src=""; base1.src=""; base2.src=""; catcher.style.left="55px"; lag=-3; } </script>
</html>