分享自己写的Javascript的俄罗斯方块+送分（三）解决办法
日期：2014-05-16 浏览次数：20325 次
分享自己写的Javascript的俄罗斯方块+送分（三）
今天加入：1.暂停功能，2.瞬落功能，3.调整预告和计分栏的位置，效果图如下：
本来还想加入等级系统和支持手机的，今天实在木有时间了，下次一定更新上来。
本人QQ：605494869 新浪微博：http://weibo.com/605494869，非常欢迎加好友和互粉~
具体代码如下：
今天加入：1.暂停功能，2.瞬落功能，3.调整预告和计分栏的位置，效果图如下：
本来还想加入等级系统和支持手机的，今天实在木有时间了，下次一定更新上来。
本人QQ：605494869 新浪微博：http://weibo.com/605494869，非常欢迎加好友和互粉~
具体代码如下：
- HTML code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.activityModel{margin:1px; width:19px; height:19px; background:red; position:absolute;}
.forecastModel{margin:0.5px; width:9.5px; height:9.5px; background:yellow; position:absolute;}
.stationaryModel{margin:1px; width:19px; height:19px; background:gray; position:absolute;}
.container{top:0px; left:0px; background:black; position:absolute;}
.info{top:0px; position:absolute;}
.score{width:80px; height:20px; font-size:10pt; text-align:right; color:white; position:absolute;}
.forecast{top:0px; left:0px; width:48px; height:48px; background:#151515; position:absolute;}
</style>
<script type="text/javascript">
var tetris;
var container;
var intervalId;
var intervalId2;
var speed = 600;
var size = 20;
var forecastSize = 10;
var rowCount = 18;
var colCount = 10;
var announcement = 6;
var isOver = false;
var isStop = false;
var shapes = ("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";");
function createElm(tag,css)
{
var elm = document.createElement(tag);
elm.className = css;
document.body.appendChild(elm);
return elm;
}
function Tetris(css,x,y,shape)
{
// 创建4个div用来组合出各种方块
var myCss = css?css:"activityModel";
this.divs = [createElm("div",myCss),createElm("div",myCss),createElm("div",myCss),createElm("div",myCss)];
if(!shape)
{
// 初始化计分栏
this.score = createElm("div","score");
this.score.style.top = "0px";
this.score.style.left = 6*size+"px";
this.score.innerHTML = "score:000";
// 初始化预告栏和预告方块
var forecastCss = "forecastModel";
this.forecast = createElm("div","forecast");
this.divs2 = [createElm("div",forecastCss),createElm("div",forecastCss),createElm("div",forecastCss),createElm("div",forecastCss)];
}
this.container = null;
this.refresh = function()
{
this.x = (typeof(x)!='undefined')?x:3;
this.y = (typeof(y)!='undefined')?y:0;
// 如果有传参，优先使用参数的，如果有预告，优先使用预告，都没有就自己生成
if(shape)
this.shape = shape;
else if(this.shape2)
this.shape = this.shape2;
else
this.shape = shape?shape:shapes[Math.floor((Math.random()*shapes.length-0.000000001))].split(",");
this.shape2 = shapes[Math.floor((Math.random()*shapes.length-0.000000001))].split(",");
if(this.container && !this.container.check(this.x,this.y,this.shape))
{
isOver = true;
alert("游戏结束");
}
else
{
this.show();
this.showScore();
this.showAnnouncement();
}
}
// 显示方块
this.show = function()
{
for(var i in this.divs)
{
this.divs[i].style.top = (this.shape[i*2+1]- -this.y)*size+"px";
this.divs[i].style.left = (this.shape[i*2]- -this.x)*size+"px";
}
}
// 显示预告
this.showAnnouncement = function()
{
for(var i in this.divs2)
{
this.divs2[i].style.top = (this.shape2[i*2+1]- -0.2)*forecastSize+"px";
this.divs2[i].style.left = (this.shape2[i*2]- -0.2)*forecastSize+"px";
}
}
// 显示分数
this.showScore = function()
{
if(this.container && this.score)
{
switch((this.container.score + "").length)
{
case 1:
this.score.innerHTML = "score:" + "00" + this.conta
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
