《JavaScript實現(xiàn)簡潔的俄羅斯方塊完整實例_》由會員分享，可在線閱讀，更多相關(guān)《JavaScript實現(xiàn)簡潔的俄羅斯方塊完整實例_（14頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、JavaScript實現(xiàn)簡潔的俄羅斯方塊完整實例_
本文實例講解并描述了JavaScript實現(xiàn)簡潔的俄羅斯方塊。分享給大家供大家參考，具體如下：
完整實例代碼如下：
代碼如下:
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title俄羅斯方塊/title
style type="text/css"
.c{margin:1px; width:19px; height:19px;
2、background:red; position:absolute;}
.d{margin:1px; width:19px; height:19px; background:gray; position:absolute;}
.f{top:0px; left:0px; background:black; position:absolute;}
.e{top:0px; background:#151515; position:absolute;}
.g{width:100px; height:20px; color:white; position:absolute
3、;}
/style
script type="text/javascript"
var row = 18;
var col = 10;
var announcement = 6;
var size = 20;
var isOver = 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(";");
4、 var tetris;
var container;
function createElm(tag,css)
{
var elm = document.createElement(tag);
elm.className = css;
document.body.appendChild(elm);
return elm;
}
function Tetris(css,x,y,shape)
{
// 創(chuàng)建4個div用來組合出各種方塊
var myCss = css?css:"c";
this.
5、divs = [createElm("div",myCss),createElm("div",myCss),createElm("div",myCss),createElm("div",myCss)];
if(!shape)
{
this.divs2 = [createElm("div",myCss),createElm("div",myCss),createElm("div",myCss),createElm("div",myCss)];
this.score = createElm("div","g");
this.score.style.to
6、p = 10*size+"px";
this.score.style.left = (col- -1)*size+"px";
this.score.innerHTML = "score:0";
}
this.container = null;
this.refresh = function()
{
this.x = (typeof(x)!=undefined)?x:3;
this.y = (typeof(y)!=undefined)?y:0;
// 假如有傳參，優(yōu)先用法參數(shù)的，假如有預告，優(yōu)先用法預告，都沒有就自
7、己生成
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))].spli
8、t(",");
if(this.container !this.container.check(this.x,this.y,this.shape))
{
isOver = true;
alert("嬉戲結(jié)束");
}
else
{
this.show();
this.showScore();
this.showAnnouncement();
}
}
// 顯示方塊
this.show = function()
{
for(var i in t
9、his.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.
10、shape2[i*2+1]- -1)*size+"px";
this.divs2[i].style.left = (this.shape2[i*2]- -1- -col)*size+"px";
}
}
// 顯示分數(shù)
this.showScore = function()
{
if(this.container this.score)
{
this.score.innerHTML = "score:" + this.container.score;
}
}
// 水平移動方塊的位置
11、
this.hMove = function(step)
{
if(this.container.check(this.x- -step,this.y,this.shape))
{
this.x += step;
this.show();
}
}
// 垂直移動方塊位置
this.vMove = function(step)
{
if(this.container.check(this.x,this.y- -step,this.shape))
{
this.y += st
12、ep;
this.show();
}
else
{
this.container.fixShape(this.x,this.y,this.shape);
this.container.findFull();
this.refresh();
}
}
// 旋轉(zhuǎn)方塊
this.rotate = function()
{
var newShape = [this.shape[1],3-this.shape[0],this.shape[3],3-this.shape[2],this
13、.shape[5],3-this.shape[4],this.shape[7],3-this.shape[6]];
if(this.container.check(this.x,this.y,newShape))
{
this.shape = newShape;
this.show();
}
}
this.refresh();
}
function Container()
{
this.init = function()
{
// 繪制方塊所在區(qū)域
var bgDiv
14、= createElm("div","f");
bgDiv.style.width = size*col+"px";
bgDiv.style.height = size*row+"px";
// 繪制預告所在區(qū)域
var bgDiv = createElm("div","e");
bgDiv.style.left = size*col+"px";
bgDiv.style.width = size*announcement+"px";
bgDiv.style.height = size*row+"px";
// 清空
15、積分
this.score = 0;
}
this.check = function(x,y,shape)
{
// 檢查邊界越界
var flag = false;
var leftmost=col;
var rightmost=0;
var undermost=0;
for(var i=0;i8;i+=2)
{
// 記錄最左邊水平坐標
if(shape[i]leftmost)
leftmost = shape[i];
// 記錄最右邊水平坐標
16、
if(shape[i]rightmost)
rightmost = shape[i];
// 記錄最下邊垂直坐標
if(shape[i+1]undermost)
undermost = shape[i+1];
// 推斷是否碰撞
if(this[(shape[i+1]- -y)*100- -(shape[i]- -x)])
flag = true;
}
// 推斷是否到達極限高度
for(var m=0;m3;m++)
for(var n=0;ncol;n++)
17、 if(this[m*100+n])
flag = true;
if((rightmost- -x+1)col || (leftmost- -x)0 || (undermost- -y+1)row || flag)
return false;
return true;
}
// 用灰色方塊替換紅色方塊，并在容器中記錄灰色方塊的位置
this.fixShape = function(x,y,shape)
{
var t = new Tetris("d",x,y,shape);
for(var i=0
18、;i8;i+=2)
this[(shape[i+1]- -y)*100- -(shape[i]- -x)] = t.divs[i/2];
}
// 遍歷整個容器，推斷是否可以消退
this.findFull = function()
{
var s = 0;
for(var m=0;mrow;m++)
{
var count = 0;
for(var n=0;ncol;n++)
if(this[m*100+n])
count++;
if(count==col)
19、 {
s++;
this.removeLine(m);
}
}
this.score -= -this.calScore(s);
}
this.calScore = function(s)
{
if(s!=0)
return s- -this.calScore(s-1)
else
return 0;
}
// 消退指定一行方塊
this.removeLine = function(row)
{
// 移除一行方塊
for(va
20、r n=0;ncol;n++)
document.body.removeChild(this[row*100+n]);
// 把所消退行上面全部的方塊下移一行
for(var i=row;i0;i--)
{
for(var j=0;jcol;j++)
{
this[i*100- -j] = this[(i-1)*100- -j]
if(this[i*100- -j])
this[i*100- -j].style.top = i*size + "px";
}
}
}
21、 }
function init()
{
container = new Container();
container.init();
tetris = new Tetris();
tetris.container = container;
document.onkeydown = function(e)
{
if(isOver) return;
var e = window.event?window.event:e;
switch(e.keyCode)
{
case 38: //
22、up
tetris.rotate();
break;
case 40: //down
tetris.vMove(1);
break;
case 37: //left
tetris.hMove(-1);
break;
case 39: //right
tetris.hMove(1);
break;
}
}
setInterval("if(!isOver) tetris.vMove(1)",500);
}
/script
/head
body onload="init()"
/body
/html
盼望本文所述對大家JavaScript程序設計有所關(guān)心。
...
JavaScript實現(xiàn)簡潔的俄羅斯方塊完整實例_
