以下是 html5俄罗斯方块游戏代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5俄罗斯方块游戏代码</title>
<link type="text/css" href="css/all.css" media="screen" rel="stylesheet" />
<style>
#container{margin:0 auto;text-align:center;}
.cyr{text-align:center;}
</style>
<SCRIPT type="text/javascript" src="js/main.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/logic_min2.js"></SCRIPT>
</head>
<body style="visibility: visible; ">
<DIV id="benjoffe">
<DIV id="content">
<DIV id="loading" style="display: none; "><IMG src="js/loading.gif" alt="" style="width:16px;height:16px;vertical-align:top;"> Loading game...</DIV>
<SCRIPT type="text/javascript"><!--
if (!window.CanvasRenderingContext2D)
{
document.getElementById('loading').innerHTML = 'Your browser doesn\'t support canvas, if you are using IE then the <a href="v1/">older version</a> will likely work.<br>I suggest you download a standards compliant browser such as <a href="http://www.opera.com/">Opera</a>.';
}
else
{
document.getElementById('loading').innerHTML = '<img src="img/loading.gif" alt="" style="width:16px;height:16px;vertical-align:top;"> Loading game...';
}
--></SCRIPT>
<DIV id="container" style="visibility: visible; ">
<DIV id="menu" style="display:none; ">
<DIV id="menu_area">
<DIV id="screen0">
<DIV id="helpBox">
<P><B>玩法</B><BR>
Use the arrow keys to guide the falling blocks, spacebar and the up-arrow will rotate the block in opposite directions.
Alternatively the keys A,W,S and D can be used as arrow keys for the same purpose.<BR>
<BR>
When a complete horizontal ring of 15 blocks is occupied by pieces the row will collapse and earn 100 points.
If multiple rows are cleared at a time you will earn bonus points. </P></DIV>
<DIV id="copy">©2010 <A href="http://www.html5china.com/">HTML5China.com</A></DIV>
<DIV id="but_main0" class="but"></DIV>
</DIV>
<DIV id="screen1">
<DIV id="go1" class="but"></DIV>
<DIV id="go2" class="nonstick"></DIV>
<DIV id="go3" class="nonstick"></DIV>
<DIV id="but_main1" class="but"></DIV>
</DIV>
<DIV id="screen2">
<DIV id="quote">"A <B>circle</B> may be small, yet it may be as mathematically beautiful and perfect as a large one."<BR>
<SPAN>- Isaac Disraeli</SPAN></DIV>
<DIV id="but_play" class="but"></DIV>
<DIV id="but_settings" class="but"></DIV>
<DIV id="but_high" class="but"></DIV>
<DIV id="but_help" class="but"></DIV>
</DIV>
<DIV id="screen3">
<SELECT id="bestType">
<OPTION>Traditional</OPTION>
<OPTION>Time Attack</OPTION>
<OPTION>Garbage</OPTION>
</SELECT>
<DIV id="best1"><B>Traditional</B><BR>
1. Empty (0)<BR>
2. Empty (0)<BR>
3. Empty (0)</DIV>
<DIV id="best2"><B>Time Attack</B><BR>
1. Empty (0)<BR>
2. Empty (0)<BR>
3. Empty (0)</DIV>
<DIV id="best3"><B>Garbage</B><BR>
1. Empty (59:59)<BR>
2. Empty (59:59)<BR>
3. Empty (59:59)</DIV>
<DIV id="but_main2" class="but"></DIV>
</DIV>
<DIV id="screen4">
<DIV id="div_base">
<LABEL>Skin:
<SELECT id="set_base">
<OPTION>Glass</OPTION>
</SELECT>
</LABEL>
</DIV>
<DIV id="div_ghost">
<LABEL>
<INPUT id="set_ghost" type="checkbox">
Show ghost</LABEL>
</DIV>
<DIV id="but_main3" class="but"></DIV>
</DIV>
</DIV>
</DIV>
<DIV id="out"></DIV>
<DIV id="playing" style="background-image: url(img/base0.png); ">
<CANVAS id="canvas" width="200" height="400" style="opacity: 0; "></CANVAS>
<DIV id="paused" style="opacity: 1; display: block; ">
<DIV id="but_resume" class="but"></DIV>
<DIV id="but_restart" class="but"></DIV>
<DIV id="but_quit" class="but"></DIV>
</DIV>
<DIV id="panel" style="display: none; ">
<DIV id="title1" style="display: block; "></DIV>
<DIV id="title2" style="display: none; "></DIV>
<DIV id="title3" style="display: none; "></DIV>
<DIV id="score">0</DIV>
<DIV id="time">0:00</DIV>
<DIV id="next" style="background-position: -240px 0px; "></DIV>
<DIV id="but_pause" class="but"></DIV>
</DIV>
<DIV id="gameover" style="display: block; ">
<DIV id="winner" style="display: block; ">
<FORM id="high_form">
You have achieved a high score, please enter your name:<BR>
<INPUT type="text" id="high_name" maxlength="20">
<INPUT type="submit" value="OK">
</FORM>
</DIV>
<DIV id="newgame" style="display: none; ">
<DIV id="sorryText"></DIV>
<DIV id="skull"></DIV>
<DIV id="but_restart2" class="but"></DIV>
<DIV id="but_main4" class="but"></DIV>
</DIV>
</DIV>
</DIV>
<DIV id="close" class="nonstick" style="left: 435px; top: 185px; "></DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>JS代码(main.js):
// make sure website is not running in a frame:try{
if (top!=window){
top.location.replace(location.href)}
}
catch(ignore){
}
CSS代码(all.css):
#content{height:480px;}
#container{visibility:hidden;position:absolute;top:0;left:170px;right:170px;font-family:Arial;background-color:red;}
#link{position:absolute;top:470px;width:100%;text-align:center;font-size:small;}
#footer{display:block;padding-top:500px;}
CANVAS{position:absolute;top:0;left:0;}
#paused{width:110px;height:30px;position:absolute;top:346px;left:48px;background-image:url(../img/paused.png);display:none;}
#but_resume{top:-150px;left:7px;width:86px;background-image:url(../img/but_resume.png);}
#but_restart{top:-110px;left:7px;width:86px;background-image:url(../img/but_restart.png);}
#but_quit{top:-70px;left:7px;width:86px;background-image:url(../img/but_quit.png);}
#score{position:absolute;top:33px;left:19px;font-size:14pt;color:#666;font-family:Arial;font-weight:700;}
#time{position:absolute;top:83px;left:19px;font-size:14pt;color:#666;font-family:Arial;font-weight:700;}
#playing{position:absolute;top:0;left:0;width:200px;height:450px;background-image:url(../img/base0.png);background-repeat:no-repeat;background-position:8px 320px;}
#panel{display:none;position:absolute;top:200px;left:250px;width:94px;height:233px;background-image:url(../img/panel.png);}
#title1{position:absolute;top:-74px;left:-17px;width:125px;height:126px;background-image:url(../img/title_traditional.png);}
#title2{position:absolute;top:-76px;left:-29px;width:150px;height:108px;background-image:url(../img/title_time.png);}
#title3{position:absolute;top:-83px;left:-8px;width:112px;height:97px;background-image:url(../img/title_garbage.png);}
#gameover{display:none;position:absolute;top:175px;left:200px;width:253px;height:221px;background-image:url(../img/game_over.png);font-size:10pt;color:#333;}
#winner{position:absolute;top:50px;left:19px;padding-left:11px;width:205px;height:200px;background-image:url(../img/coins.png);background-repeat:no-repeat;background-position:0 64px;}
#winner FORM{margin:0;padding:0;}
#but_main4{top:167px;left:150px;width:86px;background-image:url(../img/but_main.png);}
#but_restart2{top:127px;left:150px;width:86px;background-image:url(../img/but_restart.png);}
#sorryText{position:absolute;top:45px;left:30px;width:205px;}
#skull{position:absolute;top:90px;left:-35px;width:120px;height:150px;background-image:url(../img/skull.png);}
#but_pause{top:180px;left:15px;width:64px;background-image:url(../img/but_pause.png);}
#next{position:absolute;top:127px;left:7px;width:80px;height:50px;background-image:url(../img/blocks.png);}
#menu{position:absolute;top:234px;left:0px;width:450px;height:220px;background-image:url(../img/menu.png);background-repeat:no-repeat;background-position:92px 0px;}
#menu_area{position:absolute;top:39px;left:111px;width:321px;height:157px;overflow:hidden;}
.nonstick{-apple-dashboard-region:dashboard-region(control rectangle 0 0 0 0);}
.but{-apple-dashboard-region:dashboard-region(control rectangle 0 0 0 0);position:absolute;cursor:pointer;height:36px;}
.but:hover{background-position:0 -36px;}
.but:active{background-position:0 -72px;}
#screen0{position:absolute;left:321px;top:0;width:321px;height:157px;background-image:url(../img/title_help.png);background-repeat:no-repeat;background-position:30px 4px;}
#copy{position:absolute;top:125px;left:90px;font-size:10pt;color:#444;}
#helpBox{display:none;position:absolute;top:8px;left:90px;width:220px;height:100px;overflow:auto;font-size:9pt;}
#but_main0{top:117px;left:229px;width:86px;background-image:url(../img/but_main.png);}
#screen1{position:absolute;left:0;top:157px;width:321px;height:157px;background-image:url(../img/modes.png);background-position:45px 7px;background-repeat:no-repeat;}
#go1,#go2,#go3{position:absolute;width:40px;height:36px;background-image:url(../img/but_go.png);cursor:pointer;}
#go1{top:110px;left:75px;}
#go2{top:110px;left:152px;}
#go2:hover{background-position:0 -108px;}
#go2:active{background-position:0 -144px;}
#go3{top:68px;left:229px;}
#go3:hover{background-position:0 -180px;}
#go3:active{background-position:0 -216px;}
#but_main1{top:117px;left:229px;width:86px;background-image:url(../img/but_main.png);}
#screen2{position:absolute;left:321px;top:157px;width:321px;height:157px;}
#quote{position:absolute;top:7px;left:62px;width:250px;font-family:Arial;color:#FFF;font-weight:700;font-size:10pt;font-style:italic;}
#quote B{color:#000;}
#quote SPAN{font-style:normal;padding-left:50px;}
#but_play{top:115px;left:71px;width:62px;background-image:url(../img/but_play.png);}
#but_settings{top:115px;left:137px;width:75px;background-image:url(../img/but_settings.png);}
#but_help{top:76px;left:256px;width:60px;background-image:url(../img/but_help.png);}
#but_high{position:absolute;top:115px;left:216px;width:98px;background-image:url(../img/but_high.png);}
#screen3{position:absolute;left:642px;top:157px;width:321px;height:157px;background-image:url(../img/title_high.png);background-repeat:no-repeat;background-position:32px 5px;font-size:9pt;font-family:Arial;}
#bestType{position:absolute;top:10px;left:200px;width:110px;}
#best1,#best2,#best3{display:none;position:absolute;top:40px;left:90px;}
#best1{display:block;}
#but_main2{top:115px;left:228px;width:86px;background-image:url(../img/but_main.png);}
#screen4{position:absolute;left:321px;top:314px;height:157px;width:321px;background-image:url(../img/title_settings.png);background-repeat:no-repeat;background-position:32px 5px;font-family:Arial;font-size:10pt;}
#screen4 SELECT{width:90px;}
#div_base{position:absolute;top:10px;left:150px;width:160px;text-align:right;}
#div_blocks{position:absolute;top:35px;left:150px;width:160px;text-align:right;}
#div_ghost{position:absolute;top:40px;left:217px;width:160px;}
#but_main3{top:115px;left:228px;width:86px;background-image:url(../img/but_main.png);}
#close{position:absolute;width:20px;height:20px;background-image:url(../img/close.png);display:none;}
#close:hover{background-position:0 20px;}
#close:active{background-position:0 40px;}
分享到QQ
分享到微博
微信扫一扫
