俄罗斯方块JS游戏——黄文权
俄罗斯方块——黄文权 游戏规则：游戏由 ↑ ↓ → ← 方向键控制。↑：方块变型
↓：加速下落
→：向右移动
←：向左移动
P：暂停或开始游戏
当前位置：编程学习 > JS >>
↑：方块变型
↓：加速下落
→：向右移动
←：向左移动
P：暂停或开始游戏
↑：方块变型
↓：加速下落
→：向右移动
←：向左移动
P：暂停或开始游戏
答案：<!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>俄罗斯方块-Download by http://www.zzzyk.com</title>
<style type="text/css">
#map{border:3px solid green;background-image:url(http://www.zzzyk.com/jscss/demoimg/201109/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,//方块集的宽高，也就是http://www.zzzyk.com/jscss/demoimg/201109/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.BlokWidth*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(http://www.zzzyk.com/jscss/demoimg/201109/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(http://www.zzzyk.com/jscss/demoimg/201109/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，如果上一个：开心数独游戏
下一个：JS进行数制转换的代码
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思