效果图如下
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
<title>俄罗斯方块</title>
<style>
/* Basic Reset */
* {
border: none;
}
.btnOption{
border-radius: 10px;
}
.labelstyle{
background-color: aliceblue;
border-radius: 5px 0 0 5px;
margin-left: 5px;
padding-left: 5px;
}
.labelscorce{
background-color: aliceblue;
border-radius:0 5px 5px 0;
margin-right: 5px;
padding-right: 5px;
width: 50px;
}
.center {
background-color: #6057ff;
height: auto;
margin: auto;
width: 250px;
padding: 10px;
border-radius: 10px;
}
div.showPanel {
background-color: #495678;
/*box-shadow: 4px 4px #b6b8bd;*/
border-radius: 10px;
margin: 10px 4px;
padding: 10px 10px 10px 10px;
/* width: 280px; */
}
.btn {
/*cursor: pointer;*/
height: 20px;
margin: 2px 0 0px 2px;
width: 20px;
border-radius: 5px;
background-color: #72778b;
}
.btnchange {
/*cursor: pointer;*/
height: 20px;
margin: 2px 0 0px 2px;
width: 20px;
border-radius: 5px;
background-color: #963f8e;
/* box-shadow: 0 5px #5f6680; */
}
</style>
</head>
<body>
<div class="center">
<button onclick="startGame()" class="btnOption">开始</button>
<button onclick="pauseGame()" class="btnOption">暂停</button>
<button onclick="stopGame()" class="btnOption">结束</button>
<label class="labelstyle">分数：</label><label id="lableSorce" class="labelscorce"></label>
<div id="showPanel" class="showPanel">
</div>
<!--<div style="width: auto ; padding: 20px auto" >-->
<!--<button >左</button>-->
<!--<button>右</button>-->
<!--<button>变形</button>-->
<!--<button>下降</button>-->
<!--</div>-->
</div>
<script type="text/javascript">
//七种方块类型，每一种都可以顺时针旋转一周
var bolcks = [[0x000f, 0x8888, 0x000f, 0x8888],//长条
[0x00cc, 0x00cc, 0x00cc, 0x00cc],//正方形
[0x004E, 0x08c8, 0x00E4, 0x04c4],//三角形，上右下左
[0x088c, 0x00E8, 0x0c44, 0x002E],//正L型,顺时针转
[0x044c, 0x008E, 0x0c88, 0x00E2],//反L型
[0x00c6, 0x04c8, 0x00c6, 0x04c8],//正Z型
[0x006c, 0x08c4, 0x006c, 0x08c4]];//反Z型
var gameState = 0; //0,结束，1开始，2暂停
var Block = {
blockType: 0,//0~6表示7种类型
blockState: 0,//0~3表示4种旋转
row: -1, cor: 4, //下落的方块的位置
};
function blockInit() {
Block.blockType = Math.round(Math.random() * 100) % 7;//产生随机数
Block.blockState = 0;
Block.row = -1; Block.cor = 4;
}
var sorce = 0; //分数统计
function addSorce(x) {
sorce = x * x * 8+sorce; //计算得分，x参数为消除的行数
lableSorce.innerHTML=sorce;
}
var lableSorce=document.getElementById("lableSorce");
var panel = new Array(20); //创建一个二维数组作为棋盘
for (var i = 0; i < panel.length; i++) {
panel[i] = new Array(10);
}
var showBlock = new Array(20);//dom对象界面上的方块
for (var i = 0; i < showBlock.length; i++) {
showBlock[i] = new Array(10);
}
function init() { //初始化界面
sorce = 0;//初始化分数
lableSorce.innerHTML=sorce;
blockInit();//初始化方块对象
//在html中创建棋盘界面,每个方块用Button表示，界面上有20*10个button
var parent = document.getElementById("showPanel");
parent.innerHTML = "";
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 10; j++) {
showBlock[i][j] = document.createElement("input");
showBlock[i][j].setAttribute("type","button");
showBlock[i][j].className = "btn";
parent.appendChild(showBlock[i][j]);
panel[i][j] = 0;
}
parent.appendChild(document.createElement("br"));
}
}
//初始化游戏
init();
var gameTimer;
function startGame() { //开始游戏，按下开始按钮将执行该方法
if(gameState==0){
init();
document.onkeydown = keydown; //注册监听器
gameTimer = window.setInterval(function () { moveDown() }, 1000);
}else if(gameState==1){ //开始游戏
}else if(gameState==2){ //暂停游戏状态
document.onkeydown = keydown; //注册监听器
gameTimer = window.setInterval(function () { moveDown() }, 1000);
}
gameState=1;
//runGame();
}
function pauseGame() { //暂停游戏
gameState=2;
clearInterval(gameTimer);
document.onkeydown=null;
}
function stopGame() { //停止游戏
gameState=0;
clearInterval(gameTimer);
alert("游戏结束！");
document.onkeydown=null;
}
function runGame() { //运行游戏
// deleteBlock();
while (gameState == 1) {
// if( blockMove(Block.row + 1, Block.cor)){
// }
// refrashColor();
}
}
//键盘监听
function keydown(event) {
switch (event.keyCode) {
case 37 : //左
case 97: //a
case 65: //A
if (blockMove(Block.row, Block.cor - 1)) {
Block.cor--;
}
break;
case 38: //上
case 119:
case 87:
blockChange();
break;
case 39: //右
case 100:
case 68:
if (blockMove(Block.row, Block.cor + 1)) {
Block.cor++;
}
break;
case 40: //下
case 115:
case 83:
moveDown();
break;
}
refrashColor(); //刷新界面
}
//方块变形
function blockChange() {
var temp = Block.blockState;
Block.blockState = (Block.blockState + 1) % 4;
if (!blockMove(Block.row, Block.cor)) {
Block.blockState = temp;
//向下移动失败后将方块固定
}
}
//方块下移
function moveDown(){
if (blockMove(Block.row + 1, Block.cor)) {
Block.row++;
console.log("下移成功，当前位置："+Block.row+" "+Block.cor+" ;Type:"+Block.blockType+" "+Block.blockState);
} else { //下不去就将方块固定
//检查如果有到了顶端，就结束游戏
if(Block.row==-1) stopGame();
console.log("固定位置×××××: "+Block.row+" "+Block.cor);
var blockstr = (bolcks[Block.blockType][Block.blockState]).toString(2);
blockstr=addZero(blockstr);
var row=Block.row; var cor=Block.cor;
for (var i = row - 3; i <= row;i++) {
for (var j = cor; j < cor+4; j++) {
if (i < 0 || j >= 10) {
} else {
panel[i][j] =(panel[i][j]) | (blockstr[(i - (row - 3)) * 4 + j - cor]);
}
}
//固定后刷新Block
blockInit();
//完成后检查是否能消除行
deleteBlock();
}
}
refrashColor();
}
//检查方块能否移动
function blockMove(row, cor) {
if (row < 0 || row >= 20 || cor < 0 || cor >= 10) return false;
var blockstr = (bolcks[Block.blockType][Block.blockState]).toString(2);
//在前面补零
blockstr=addZero(blockstr);
console.log(blockstr);
for (var i = row - 3; i <= row; i++) {
for (var j = cor; j < 4+cor; j++) {
if (j<0 || j >= 10) {
if (blockstr[(i - (row - 3)) * 4 + j - cor] == 1) return false;
} else if(i>=0 && i<20 && j>=0 && j<10) {
if (panel[i][j] == 1 && blockstr[(i - (row - 3)) * 4 + j - cor] == 1) return false;
}
}
}
return true;
}
//字符串补零操作
function addZero(str){
var length=16-str.length;
var tempStr='';
for(var i=0;i<length;i++){
tempStr +='0';
}
return tempStr+str;
}
//检查并消除行
function deleteBlock() {
var line = 19;//最后一行
var count = 0;//用于记录消除了几行
for (; line >= 0; line--) {
var isLine = true;
for (var j = 0; j < 10; j++) {
if (panel[line][j] == 0) {
isLine = false;
break;
}
}
if (isLine) {//到这里说明有整行可以消除，那么就进行消除。
count++;
for (var j = 0; j < 10; j++) {
panel[line][j] = 0;
console.log("清除位置"+line+" "+j);
//消除后刷新界面
// refrashColor();
}
for (var i = line; i > 0; i--) {
for (var j = 0; j < 10; j++) {
panel[i][j] = panel[i - 1][j];
}
}
for (var j = 0; j < 10; j++) { //将上方往下移动后，最上面一行置零
panel[0][j] = 0;
}
//在这里可以添加消除一行的界面变化
//addhear
//refrashColor();
}
}
addSorce(count);//统计分数
}
//程序暂停时间
function sleep(d){
for(var t = Date.now();Date.now() - t <= d;);
}
//刷新颜色
function refrashColor() {
//刷新界面颜色
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 10; j++) {
if (panel[i][j] == 1) {
//显示有方块时的颜色
//showBlock[i][j].calssName="btnchange";
showBlock[i][j].setAttribute("class", "btnchange");
//console.log(i+" "+j+"="+panel[i][j]);
} else {
//显示无方块时的颜色
showBlock[i][j].setAttribute("class","btn");
//showBlock[i][j].calssName = "btn";
}
}
}
//刷新方块颜色
var blockstr = (bolcks[Block.blockType][Block.blockState]).toString(2);
blockstr=addZero(blockstr);
var row=Block.row; var cor=Block.cor;
for (var i = row - 3; i <= row;i++) {
for (var j = cor; j < 4+cor; j++) {
if (i < 0 || j >= 10) {
} else if ( (blockstr[(i - (row - 3)) * 4+ j - cor] ) == 1) {
//showBlock[row][cor].className = "btnchange";
//console.log("刷新方块颜色位置："+(i-(row-4))*4+" "+(j-cor));
showBlock[i][j].setAttribute("class", "btnchange");
}
}
}
}
</script>
</body>
</html>
使用方法
将代码复制保存为*.html文件,然后用浏览器打开（因为没有做触屏操作，目前只能pc操作）。
操作按键w(变形) ，a(左)，d(右)， s(下） ; 或者使用 上，下，左，右 方向键
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
