<!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>
<title>无标题页</title>
<style type="text/css">
#map{border:3px solid green;background-image:url(images/tetris_grid.gif);float:left;margin-right:20px;}
#preview{float:left;}
#previewArea{border:2px solid green;width:140px;height:168px;padding-left:28px;}
#map td{width:28px;height:28px;}
#preview td{width:28px;height:28px;}
#perviewTable{margin-top:56px;}
#score,#rank{font-size:20px;color:Red;font-weight:bold;}
</style>
<script type="text/javascript">
function Tetris(){}
Tetris.prototype={
BlogsSetting:[//方块设置
[
[1,1,1,1],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,1,0],
[1,0,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,1,0],
[0,1,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,1,0],
[0,0,1,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,0,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
],
[
[0,1,1,0],
[1,1,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,0,0],
[1,1,0,0],
[0,0,0,0],
[0,0,0,0]
]
],
GameMap:[],//游戏地图，对应table中的td值
BlokWidth:28,//方块集的宽高，也就是images/tetris_grid.gif图片的宽高
HorizontalNum:10,//水平td数量
VerticalNum:18,//垂直td数量
BlokSize:4,//设置方块占用位置4 * 4
BlockWidth:0,//获取当前方块的非0的最大宽度
BlockHeight:0,//获取当前方块的非0的最大高度
CurrentIndex:0,//当前随机获得的索引
NextCurrentIndex:0,//获取下一个方块的索引
BlokCurrent:[],//当前方块
InitPosition:{},//当前方块运动的x,y
IsPlay:false,//是否开始游戏
IsOver:false,//游戏是否结束
IsOverIndex:0,//设置游戏结束的索引还有空几行
Score:0,
ScoreIndex:100,
ColorEnum: [[0, 0], [-28, 0], [-56, 0], [-84, 0], [-112, 0], [-140, 0], [-168, 0], [0, 0]], //颜色的枚举，对应BlogsSetting
CreateMap:function(){
//加载地图，设置其宽高，根据HorizontalNum,VerticalNum的数量决定
var map = document.getElementById("map");
var w = this.BlokWidth7*this.HorizontalNum;
var h = this.BlokWidth*this.VerticalNum;
map.style.width=w+"px";
map.style.height=h+"px";
//加载地图对应的数组，初始化为0，当被占据时为1
for(var i=0;i<this.VerticalNum;i++){
this.GameMap.push([]);
for(var j=0;j<this.HorizontalNum;j++){
this.GameMap[i][j]=0;
}
}
//创建table td填充div根据HorizontalNum,VerticalNum的数量决定，创建HorizontalNum * VerticalNum的表格区域
var table = document.createElement("table");
table.id="area";
var tbody = document.createElement("tbody");
table.cellPadding=0;
table.cellSpacing=0;
table.appendChild(tbody);
for(var i=0;i<this.VerticalNum;i++){
var tr = document.createElement("tr");
for(var j=0;j<this.HorizontalNum;j++){
var td = document.createElement("td");
tr.appendChild(td);
}
tbody.appendChild(tr);
}
map.appendChild(table);
this.CreatePreViewMap();
this.CreateNextBlock();
},
CreatePreViewMap:function(){//加载一个4*4的表格到预览区域
var preview = document.getElementById("previewArea");
var table = document.createElement("table");
table.id="perviewTable";
var tbody = document.createElement("tbody");
table.cellPadding=0;
table.cellSpacing=0;
table.appendChild(tbody);
for(var i=0;i<this.BlokSize;i++){
var tr = document.createElement("tr");
for(var j=0;j<this.BlokSize;j++){
var td = document.createElement("td");
tr.appendChild(td);
}
tbody.appendChild(tr);
}
preview.appendChild(table);
},
LoadPreview:function(index){//加载到预览区域
var previewTable = document.getElementById("perviewTable");
for(var i=0;i<this.BlogsSetting[index].length;i++){
for(var j=0;j<this.BlogsSetting[index][i].length;j++){
previewTable.rows[i].cells[j].style.backgroundImage="";
if(this.BlogsSetting[index][i][j]==1){
previewTable.rows[i].cells[j].style.backgroundImage="url(images/tetris.gif)";
previewTable.rows[i].cells[j].style.backgroundPosition=this.ColorEnum[index][0]+"px"+" "+this.ColorEnum[index][1]+"px";
}
}
}
},
SettingBlock:function(){//设置地图中方块的背景图片
var tb = this.getTable();
for(var i=0;i<=this.BlockHeight;i++){
for(var j=0;j<=this.BlockWidth;j++){
if(this.BlokCurrent[i][j]==1){
tb.rows[this.InitPosition.y+i].cells[this.InitPosition.x+j].style.backgroundImage="url(images/tetris.gif)";
tb.rows[this.InitPosition.y+i].cells[this.InitPosition.x+j].style.backgroundPosition=this.ColorEnum[this.CurrentIndex][0]+"px"+" "+this.ColorEnum[this.CurrentIndex][1]+"px";
}
}
}
},
CanMove:function(x,y){//根据传过来的x,y，检测方块是否能左右下移动
if(y+this.BlockHeight>=this.VerticalNum)//判断是否有到最底部，如果到底部的话停止向下移动
return false;
for(var i=this.BlockHeight;i>=0;i--){//检测方块的最高坐标相对应的地图的坐标是否有都等于1，如果有等于1说明地图放不下该方块
for(var j=0;j<=this.BlockWidth;j++){
if(this.GameMap[i][x+j]==1&&this.BlokCurrent[i][j]==1){
this.IsOverIndex=i;
this.IsOver=true;
}
}
}
for(var i=this.BlockHeight;i>=0;i--){//检测方块的移动轨迹在地图中是否有被标记为1，如果有被标记为1就是下一步的轨迹不能运行。
for(var j=0;j<=this.BlockWidth;j++){
if(this.GameMap[y+i][x+j]==1&&this.BlokCurrent[i][j]==1){//判断方块的下一步轨迹是否是1并且判断下一步方块的轨迹在地图中是否有为1。
return false;
}
}
}
return true;
},
ClearOldBlok:function(){//当this.InitPosition.y>=0 也就是显示在地图的时候，每次左右下移动时清除方块，使得重新绘制方块
if(this.InitPosition.y>=0){
for(var i=0;i<=this.BlockHeight;i++){
for(var j=0;j<=this.BlockWidth;j++){
if(this.BlokCurrent[i][j]==1){
this.getTable().rows[this.InitPosition.y+i].cells[this.InitPosition.x+j].style.backgroundImage="";
}
}
}
}
},
MoveLeft:function(){ //向左移动
var x = this.InitPosition.x-1;
if(x<0||this.InitPosition.y==-1)
return;
if(this.CanMove(x,this.InitPosition.y)){
this.ClearOldBlok();
this.InitPosition.x=x;
}
this.SettingBlock();
},
MoveRight:function(){//向右移动
var x = this.InitPosition.x+1;
if(x+this.BlockWidth>=this.HorizontalNum||this.InitPosition.y==-1)
return;
if(this.CanMove(x,this.InitPosition.y)){
this.ClearOldBlok();
this.InitPosition.x=x;
}
this.SettingBlock();
},
MoveDown:function(){//向下移动
var y = this.InitPosition.y+1;
if(this.CanMove(this.InitPosition.x,y)){//判断是否能向下移动，不能的话表示该方块停止运行，继续判断是否游戏结束，如果游戏还没结束重新创建个方块继续游戏
this.ClearOldBlok();
this.InitPosition.y=y;
this.SettingBlock();
}
else{
if(this.IsOver){
window.clearTimeout(OverTime);
this.GameOver();
return;
}
this.SettingBlock();
this.SettingGameMap();
this.CheckFull();
this.NewBlock();
this.CreateNextBlock();
return;
}
},
ChangeBlock:function(){//向上方块变型
if(this.InitPosition.y==-1)
return;
var newBlock = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
for(var i=0;i<=this.BlockHeight;i++){
for(var j=0;j<=this.BlockWidth;j++){
newBlock[this.BlockWidth-j][i] = this.BlokCurrent[i][j];
}
}
var temp = this.BlokCurrent;
this.ClearOldBlok();
this.BlokCurrent=newBlock;
this.BlockWidth=this.GetWidth(this.BlokCurrent);
this.BlockHeight=this.GetHeight(this.BlokCurrent);
if(this.InitPosition.x+this.BlockWidth>=this.HorizontalNum||!this.CanMove(this.InitPosition.x,this.InitPosition.y)){//this.InitPosition.x+this.BlockWidth>=this.HorizontalNum判断变型后x+它的宽度是否有超过地图的宽度
this.BlokCurrent=temp;
this.BlockHeight=this.GetHeight(this.BlokCurrent)
this.BlockWidth=this.GetWidth(this.BlokCurrent);
}
this.SettingBlock();
},
CheckFull:function(){//检测是否有满行的
var arr=[];
for(var i=0;i<this.VerticalNum;i++){
var flag=true;
for(var j=0;j<this.HorizontalNum;j++){
if(this.GameMap[i][j]==0){
flag=false;
break;
}
}
if(flag){
this.ClearFull(i);
}
}
},
ClearFull:function(index){//清除满行的，使上一行的背景图等于该行，并使上一行的坐标值等于该行，如果是第一行的话坐标值清0，背景清空
var tb = this.getTable();
if(index==0){
for(var i=0;i<this.HorizontalNum;i++){
this.GameMap[0][j]=0;
tb.rows[i].cells[j].style.backgroundImage="";
}
}
else{
for(var i=index;i>0;i--){
for(var j=0;j<this.HorizontalNum;j++){
this.GameMap[i][j]=this.GameMap[i-1][j];
tb.rows[i].cells[j].style.backgroundImage=tb.rows[i-1].cells[j].style.backgroundImage;
tb.rows[i].cells[j].style.backgroundPosition=tb.rows[i-1].cells[j].style.backgroundPosition;
}
}
}
this.getScore().innerHTML=parseInt(this.getScore().innerHTML)+this.ScoreIndex;
},
NewBlock:function(){//创建方块，初始化数据
this.CurrentIndex=this.NextCurrentIndex;//获取下一个方块的索引作为当前索引
this.BlokCurrent=this.BlogsSetting[this.CurrentIndex];//根据获得的新索引重新获取方块
this.BlockWidth=this.GetWidth(this.BlokCurrent);//重新获取方块的最大宽值
this.BlockHeight=this.GetHeight(this.BlokCurrent);//重新获取方块的最大高值
this.GetInitPosition();//初始化方块出现的坐标
},
GameOver:function(){//游戏结束后补齐获得当前方块，补齐地图空白地方
var tb = this.getTable();
for(var i=this.IsOverIndex-1;i>=0;i--){//循环空白的IsOverIndex-1行，给空白的行补上当前方块，从最高值递件。减1是因为IsOverIndex获取的是被占据的行，所以减1为空白行。
for(var j=0;j<=this.BlockWidth;j++){
if(this.BlokCurrent[this.BlockHeight-i][j]==1){
tb.rows[i].cells[this.InitPosition.x+j].style.backgroundImage="url(images/tetris.gif)";
tb.rows[i].cells[this.InitPosition.x+j].style.backgroundPosition=this.ColorEnum[this.CurrentIndex][0]+"px"+" "+this.ColorEnum[this.CurrentIndex][1]+"px";
}
}
}
this.IsPlay=false;
alert("游戏结束");
},
SettingGameMap:function(){//设置游戏地图被占有的位置标记为1
for(var i=0;i<=this.BlockHeight;i++)
for(var j=0;j<=this.BlockWidth;j++)
if(this.BlokCurrent[i][j]==1){
this.GameMap[this.InitPosition.y+i][this.InitPosition.x+j]=1;//减1是因为每次y加1，然后在去进行判断，所以当碰到方块或底部的时候要减去多加的1
}
},
Start:function(){//游戏开始
this.IsPlay=true;
this.CurrentIndex=this.NextCurrentIndex;
this.BlokCurrent=this.BlogsSetting[this.CurrentIndex];
this.BlockWidth=this.GetWidth(this.BlokCurrent);
this.BlockHeight=this.GetHeight(this.BlokCurrent);
this.GetInitPosition();
this.MoveDown();
this.CreateNextBlock();
},
CreateNextBlock:function(){//获取下一个方块的索引，并显示在预览区域中
this.NextCurrentIndex=this.getRandom();
this.LoadPreview(this.NextCurrentIndex);
},
GetHeight:function(blokArr){//获取当前方块不是0的最大高值
for(var i=blokArr.length-1;i>=0;i--)
for(var j=0;j<blokArr[i].length;j++)
if(blokArr[i][j]==1)
return i;
},
GetWidth:function(blokArr){//获取当前方块不是0的最大宽值
for(var i=blokArr.length-1;i>=0;i--)
for(var j=0;j<blokArr[i].length;j++)
if(blokArr[j][i]==1)
return i;
},
GetInitPosition:function(){//获取方块的初始位置
this.InitPosition = {x:Math.floor((this.HorizontalNum-this.BlokSize)/2),y:-1};
},
getRandom:function(){//随机获得7种放块中的其中一种
return Math.floor(Math.random()*7);
},
getTable:function(){
return document.getElementById("area");
},
getScore:function(){
return document.getElementById("score");
},
getRank:function(){
return document.getElementById("rank");
}
}
var t = new Tetris();
var OverTime=null;
var IsPause=false;
var Speed=500;
var btn_start;
window.onload=InitGame;
function InitGame(){
t.CreateMap();
btn_start = document.getElementById("start");
btn_start.onclick=function(){
t.Start();
this.value="P 暂停游戏"
OverTime=setInterval(MoveBoxDown,Speed);
this.disabled="disabled";
}
}
function MoveBoxDown(){
t.MoveDown();
}
function KeyDown(e){
if(!t.IsPlay||t.IsOver)return;
e=e||window.event;
var keyCode = e.keyCode||e.which||e.charCode;
switch(keyCode){
case 37://左
if(!IsPause)t.MoveLeft();
break;
case 38://上
if(!IsPause)t.ChangeBlock();
break;
case 39://右
if(!IsPause)t.MoveRight();
break;
case 40://下
if(!IsPause)t.MoveDown();
break;
case 80://p 暂停or开始
IsPause=!IsPause;
if(IsPause){
btn_start.value="P 开始游戏";
window.clearInterval(OverTime);
}
else{
btn_start.value="P 暂停游戏";
OverTime=setInterval(MoveBoxDown,Speed);
}
break;
}
}
</script>
</head>
<body onkeydown="KeyDown(event)">
<div id="map"></div>
<div id="preview">
<br />
<div id="previewArea"></div>
<div style="margin-top:10px;font-size:9pt;"><input id="start" type="button" value="开始游戏" /><br /><br />得分：<span id="score">0</span><br />目前排名：<span id="rank">游戏结束后统计</span></div>
<div style="border:2px solid green;padding-top:10px;padding-left:3px;padding-bottom:5px;width:168px;margin-top:10px;">
<div style="text-align:center;width:168px;font-size:10pt;font-weight:bold;padding-bottom:8px;color:Red;">俄罗斯方块——黄文权</div>
<span style="font-size:9pt;"> 游戏规则：游戏由 ↑ ↓ → ← 方向键控制。<br/>↑：方块变型 <br/>↓：加速下落 <br/>→：向右移动 <br/>←：向左移动<br />P：暂停或开始游戏</span>
</div>
</div>
</body>
</html>
分享到：
相关推荐
python基于pygame的俄罗斯方块小游戏源码。python基于pygame的俄罗斯方块小游戏源码。python基于pygame的俄罗斯方块小游戏源码。python基于pygame的俄罗斯方块小游戏源码。python基于pygame的俄罗斯方块小游戏源码。...
java毕业设计——俄罗斯方块项目（论文+答辩PPT+源代码+数据库+讲解视频）.zip java毕业设计——俄罗斯方块项目（论文+答辩PPT+源代码+数据库+讲解视频）.zip java毕业设计——俄罗斯方块项目（论文+答辩PPT+源代码+...
俄罗斯方块是我大学一年级刚学VC++时的课程设计，当时的课程设计有三种，单文档、多文档和俄罗斯方块。我选择俄罗斯方块，就是因为它是游戏。 之前我是玩过俄罗斯方块的，一种是单人的（单人版），一种是两人对战的...
C语言版本的俄罗斯方块，实现了俄罗斯方块的基本功能。
俄罗斯方块源代码，俄罗斯方块源代码，俄罗斯方块源代码，
俄罗斯方块,用java写的小项目，适合课程设计和Java刚学习的人做的项目
C#俄罗斯方块（winform)C#俄罗斯方块（winform)C#俄罗斯方块（winform)C#俄罗斯方块（winform)C#俄罗斯方块（winform)C#俄罗斯方块（winform)C#俄罗斯方块（winform)
好游戏java编的俄罗斯方块好游戏java编的俄罗斯方块好游戏java编的俄罗斯方块好游戏java编的俄罗斯方块好游戏java编的俄罗斯方块好游戏java编的俄罗斯方块好游戏java编的俄罗斯方块好游戏java编的俄罗斯方块好游戏...
俄罗斯方块 俄罗斯方块 俄罗斯方块 俄罗斯方块
200行Python代码实现俄罗斯方块所有功能源码200行Python代码实现俄罗斯方块所有功能源码200行Python代码实现俄罗斯方块所有功能源码200行Python代码实现俄罗斯方块所有功能源码200行Python代码实现俄罗斯方块所有...
基于强化学习的AI俄罗斯方块基于强化学习的AI俄罗斯方块基于强化学习的AI俄罗斯方块基于强化学习的AI俄罗斯方块基于强化学习的AI俄罗斯方块基于强化学习的AI俄罗斯方块基于强化学习的AI俄罗斯方块基于强化学习的AI...
PSP俄罗斯方块.iso
俄罗斯方块、俄罗斯方块、俄罗斯方块、俄罗斯方块、俄罗斯方块、俄罗斯方块、俄罗斯方块、
顶下俄罗斯方块 c#俄罗斯方块 c#俄罗斯方块 c#顶下俄罗斯方块 c#俄罗斯方块 c#俄罗斯方块 c#顶下俄罗斯方块 c#俄罗斯方块 c#俄罗斯方块 c#顶下俄罗斯方块 c#俄罗斯方块 c#俄罗斯方块 c#
俄罗斯方块是一款非常经典的游戏，风靡全球，,经久不衰，是学习面向对象的编程思想的理想实例。本毕业设计论文介绍用JAVA语言设计一个“俄罗斯方块”游戏的过程，整个游戏系统是一个应用程序（Java Application），...
俄罗斯方块源程序俄罗斯方块源程序俄罗斯方块源程序俄罗斯方块源程序俄罗斯方块源程序俄罗斯方块源程序俄罗斯方块源程序俄罗斯方块源程序
俄罗斯方块游戏，C语言实现。 世界上最流行的休闲游戏之一——俄罗斯方块。它的发明者阿列克谢·帕基特诺夫及其合作伙伴、美国蓝色行星软件公司总裁亨克·罗杰斯6月2日宣布，俄罗斯方块诞生25周年庆祝活动在美国洛杉...
俄罗斯方块游戏源代码，一起学习俄罗斯方块游戏源代码，一起学习俄罗斯方块游戏源代码，一起学习俄罗斯方块游戏源代码，一起学习俄罗斯方块游戏源代码，一起学习俄罗斯方块游戏源代码，一起学习俄罗斯方块游戏源代码...
俄罗斯方块 是一款风靡全球的电视游戏机和掌上游戏机游戏，它由俄罗斯人阿列克谢·帕基特诺夫发明，故得此名。俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块，使之排列成完整的一行或多行并且消除...
200行Python代码实现俄罗斯方块所有功能（源码） 200行Python代码实现俄罗斯方块所有功能（源码） 200行Python代码实现俄罗斯方块所有功能（源码） 200行Python代码实现俄罗斯方块所有功能（源码） 200行Python...