码迷，mamicode.com
首页 > Web开发 > 详细

JS实现——俄罗斯方块

时间：2019-05-18 09:53:12      阅读：151      评论：0      收藏：0      [点我收藏+]

标签：保存   child   red   tps   turn   draw   time   dtd   height   

把以下代码保存成Tetris.html文件，使用Google或360浏览器打开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="charset-8"/>
  <title> new document </title>
</head>

<body>
  <div id="space"></div>
  <div id="debug" style="position:relative;top:-600px;left:330px"></div>
</body>

<script>
//定义按键
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_ROTATE = 38;
var KEY_ACCELERATE = 40;
var KEY_PAUSE = 13;
var KEY_ONE_STOP = 32;

//定义地图大小
var MAP_R = 18;
var MAP_C = 10;

//定义方块大小
var BLOCK_R = 4;
var BLOCK_C = 4;
//定义各种方块
var BLOCKS = [
//I
[
 [[1,1,1,1], 
  [0,0,0,0],
  [0,0,0,0],
  [0,0,0,0]],
 [[0,1,0,0], 
  [0,1,0,0],
  [0,1,0,0],
  [0,1,0,0]],
 [[1,1,1,1], 
  [0,0,0,0],
  [0,0,0,0],
  [0,0,0,0]],
 [[0,1,0,0], 
  [0,1,0,0],
  [0,1,0,0],
  [0,1,0,0]]
],

//L
[
 [[1,0,0,0], 
  [1,1,1,0],
  [0,0,0,0],
  [0,0,0,0]],
 [[1,1,0,0], 
  [1,0,0,0],
  [1,0,0,0],
  [0,0,0,0]],
 [[1,1,1,0], 
  [0,0,1,0],
  [0,0,0,0],
  [0,0,0,0]],
 [[1,0,0,0], 
  [1,0,0,0],
  [1,1,0,0],
  [0,0,0,0]]
],

//J
[
 [[1,1,1,0],
  [1,0,0,0],
  [0,0,0,0],
  [0,0,0,0]],
 [[1,1,0,0],
  [0,1,0,0],
  [0,1,0,0],
  [0,0,0,0]],
 [[0,0,1,0],
  [1,1,1,0],
  [0,0,0,0],
  [0,0,0,0]],
 [[1,0,0,0],
  [1,0,0,0],
  [1,1,0,0],
  [0,0,0,0]]
],

//O
[
 [[0,1,1,0], 
  [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,1,1,0], 
  [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]]
],

//S
[
 [[0,1,1,0],
  [1,1,0,0],
  [0,0,0,0],
  [0,0,0,0]],
 [[0,1,0,0],
  [0,1,1,0],
  [0,0,1,0],
  [0,0,0,0]],
 [[0,1,1,0],
  [1,1,0,0],
  [0,0,0,0],
  [0,0,0,0]],
 [[0,1,0,0],
  [0,1,1,0],
  [0,0,1,0],
  [0,0,0,0]]
],

//T
[
 [[0,1,0,0],
  [1,1,1,0],
  [0,0,0,0],
  [0,0,0,0]],
 [[0,1,0,0],
  [0,1,1,0],
  [0,1,0,0],
  [0,0,0,0]],
 [[0,0,0,0],
  [1,1,1,0],
  [0,1,0,0],
  [0,0,0,0]],
 [[0,1,0,0],
  [1,1,0,0],
  [0,1,0,0],
  [0,0,0,0]]
],

//Z
[
 [[1,1,0,0],
  [0,1,1,0],
  [0,0,0,0],
  [0,0,0,0]],
 [[0,1,0,0],
  [1,1,0,0],
  [1,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,0,0],
  [1,1,0,0],
  [1,0,0,0],
  [0,0,0,0]]
]
];

var map = [];
for(var r = 0; r < MAP_R; r++) {
  map.push([]);
  for(var c = 0; c < MAP_C; c++) {
    map[r][c] = {};
    map[r][c].b = 0;
  }
}

var colors = [‘darkorange‘,‘darkviolet‘,‘mediumblue‘,‘red‘,‘lightseagreen‘,‘yellow‘,‘lime‘];

var enableShadow = true;
var shadow = {};

var currR, currC; //方格当前在Space的左顶点位置
var currType; //当前正在落下方块的种类
var currDir = 0; //当前正在落下方块的方向
var pause = false;

//可以落下
function canFall(currR, currC) {
  for(var c = 0; c < BLOCK_C; c++)
    for(var r = BLOCK_R - 1; r >= 0; r--) {
      if(!BLOCKS[currType][currDir][r][c])
        continue;
      if(currR + r + 1 > MAP_R - 1)
        return false;
      if(map[currR + r + 1][currC + c].b)
        return false;
   }
  return true;
}

//找方块的投影坐标
function makeShadow() {
  shadow.r = currR;
  shadow.c = currC;
  while(canFall(shadow.r, shadow.c)) {
    shadow.r++;
  }
}

//落下状态设置到map
function fall(block) {
  for(var r = 0; r < BLOCK_R; r++)
    for(var c = 0; c < BLOCK_C; c++)
      if(BLOCKS[currType][currDir][r][c]) {
        map[currR + r][currC + c].b = BLOCKS[currType][currDir][r][c];
        map[currR + r][currC + c].c = currType;
      }
}

//可以左移
function canLeft() {
  for(var r = 0; r < BLOCK_R; r++)
    for(var c = 0; c < BLOCK_C; c++) {
      if(!BLOCKS[currType][currDir][r][c])
        continue;
      if(currC + c - 1 < 0)
        return false;
      if(map[currR + r][currC + c - 1].b)
        return false;
   }
  return true;
}

//可以右移
function canRight() {
  for(var r = 0; r < BLOCK_R; r++)
    for(var c = BLOCK_C - 1; c >= 0; c--) {
      if(!BLOCKS[currType][currDir][r][c])
        continue;
      if(currC + c + 1 > MAP_C - 1)
        return false;
      if(map[currR + r][currC + c + 1].b)
        return false;
   }
  return true;
}

//可以旋转
function canRotate() {
  return true;
}

//获得满行的行位置
function checkFullRows() {
  var rows = [];
  var full;
  for(var r = currR; r < MAP_R; r++) {
    full = true;
    for(var c = 0; full && c < MAP_C; c++)
      full = map[r][c].b;
    if(full)
      rows.push(r);
  }
  return rows;
}

function showPop(rows) {
  for(var i = 0; i < rows.length; i++)
    for(var c = 0; c < MAP_C; c++)
      $(rows[i] + ‘-‘ + c).style.backgroundColor = ‘transparent‘;
}

//在map消除指定行位置的行
function popRows(rows) {
  for(var i = 0; i < rows.length; i++)
    for(var r = rows[i] - 1; r >= 0; r--)
      for(var c = 0; c < MAP_C; c++) {
        map[r + 1][c].b = map[r][c].b;
        map[r + 1][c].c = map[r][c].c;
      }
}

document.onkeydown = function(event) {
  var keyCode = window .event?event.keyCode:event.which;

  if(keyCode == KEY_LEFT ||  keyCode == KEY_RIGHT) {
    easeBlock();
    if(enableShadow)
      easeShadow();
    if(keyCode == KEY_LEFT) {
      if(canLeft())
        --currC;
    } else if(keyCode == KEY_RIGHT) {
      if(canRight())
        ++currC;
    }
    drawBlock();
    if(enableShadow) {
      makeShadow();
      drawShadow();
    }
  } else if(keyCode == KEY_ROTATE) {
    if(canRotate()) {
      easeBlock();
      if(enableShadow)
        easeShadow();
      currDir = [1,2,3,0][currDir];
      drawBlock();
      if(enableShadow) {
        makeShadow();
        drawShadow();
      }
    }
  } else if(keyCode == KEY_ACCELERATE) {
    loop();
  } else if(keyCode == KEY_PAUSE) {
    pause = !pause;
    if(pause)
      clearInterval(timer);
    else
      timer = setInterval(loop, 300);  
  } else if(keyCode == KEY_ONE_STOP) {
    easeBlock();
    makeShadow();
    currR = shadow.r;
    currC = shadow.c;
    drawBlock();  
  }
    
  //printMapState();
}

function nextBlock() {
  function randInt(n, m) {
    return Math.floor(Math.random() * (m - n)) + n;
  }

  currR = 0;
  currC = MAP_C / 2 - BLOCK_C / 2;
  currType = randInt(0, BLOCKS.length);
  currDir = randInt(0, 4);
}

function printMapState() {
  var debug = $(‘debug‘);
  var html = ‘‘;
  for(var r = 0; r < MAP_R; r++) {
    for(var c = 0; c < MAP_C; c++)
      html += map[r][c].b;
    html += ‘</br>‘;
  }
  debug.innerHTML = html;
}

onload = function() {
init();
nextBlock();
drawBlock();
makeShadow();
drawShadow();

timer = setInterval(loop, 300);
};

function loop() {
  if(canFall(currR, currC)) {
    easeBlock();
    ++currR;
    drawBlock();
  } else {
    fall();
    if(currR == 0) {
      drawBlock();
      clearInterval(timer);
      alert(‘Game Over‘);
      return;
    }
    var rows = checkFullRows();
    if(rows.length > 0) {
      showPop(rows);
      popRows(rows);
      setTimeout(function(){
        drawMap();
      }, 100);
    }
    if(enableShadow)
      easeShadow();
    nextBlock();
    drawBlock();
    if(enableShadow) {
      makeShadow();
      drawShadow();
    }
  }
}

function drawMap() {
  for(var r = 0; r < MAP_R; r++)
    for(var c = 0; c < MAP_C; c++) {
      var div = $(r + ‘-‘ + c);
      if(map[r][c].b) {
        div.style.backgroundColor = colors[map[r][c].c];
      } else {
        div.style.backgroundColor = ‘transparent‘;
      }
    }
}

function drawBlock() {
  for(var r = 0; r < BLOCK_R; r++)
    for(var c = 0; c < BLOCK_C; c++) {
      if(BLOCKS[currType][currDir][r][c]) {
        var div = $((currR + r) + ‘-‘ + (currC + c));
        div.style.backgroundColor = colors[currType];
        div.style.border = ‘1px solid ‘ + colors[currType];
      }
    }
}

function easeBlock() {
  for(var r = 0; r < BLOCK_R; r++)
    for(var c = 0; c < BLOCK_C; c++) {
      if(BLOCKS[currType][currDir][r][c]) {
        var div = $((currR + r) + ‘-‘ + (currC + c));
        div.style.backgroundColor = ‘transparent‘;
        div.style.border = ‘1px solid ‘ + ‘transparent‘;
      }
    }
}

function drawShadow() {
  for(var r = 0; r < BLOCK_R; r++)
    for(var c = 0; c < BLOCK_C; c++) {
      if(BLOCKS[currType][currDir][r][c]) {
        var div = $((shadow.r + r) + ‘-‘ + (shadow.c + c));
        div.style.border = ‘1px solid blue‘;
      }
    }
}

function easeShadow() {
  for(var r = 0; r < BLOCK_R; r++)
    for(var c = 0; c < BLOCK_C; c++) {
      if(BLOCKS[currType][currDir][r][c]) {
        var div = $((shadow.r + r) + ‘-‘ + (shadow.c + c));
        div.style.border = ‘1px solid ‘ + ‘transparent‘;
      }
    }
}

function init() {
  var size = 28;

  var space = $(‘space‘);
  space.style.position = ‘relative‘;
  space.style.width = size * MAP_C + (MAP_C + 1) * 3 + 1 + ‘px‘;
  space.style.height = size * MAP_R + (MAP_R + 1) * 3 + 1 + ‘px‘;
  //space.style.backgroundColor = ‘lavender‘;
  space.style.border = ‘2px solid black‘;

  for(var r = 0; r < MAP_R; r++) {
    for(var c = 0; c < MAP_C; c++) {
      var div = document.createElement(‘div‘);
      div.id = r + ‘-‘ + c;
      div.style.position = ‘absolute‘;
      div.style.top = size * r + (r + 1) * 3 + ‘px‘;
      div.style.left = size * c + (c + 1) * 3 + ‘px‘;
      div.style.width = size + ‘px‘;
      div.style.height = size + ‘px‘;
      space.appendChild(div);
    }
  }
}

function $(id) {
  return document.getElementById(id);
}
</script>
</html>

https://www.cnblogs.com/mq0036/p/4946051.html

JS实现——俄罗斯方块

标签：保存   child   red   tps   turn   draw   time   dtd   height   

原文地址：https://www.cnblogs.com/7qin/p/10884419.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！