JS实现——俄罗斯方块

把以下代码保存成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>

出处：qq群--编程算法&思想 459909287

JS实现——俄罗斯方块的更多相关文章

使用JS实现俄罗斯方块游戏
简单的JS俄罗斯方块游戏源码效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...
纯JS实现俄罗斯方块，打造属于你的游戏帝国
纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...
用纯JS做俄罗斯方块 - 简要思路介绍（1）
大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代 ...
60行JS实现俄罗斯方块
参考文献:http://www.cnblogs.com/jimaojin/p/5413857.html 原版: <!doctype html><html><head> ...
[前端 3]纯Js制作俄罗斯方块游戏
导读:在别人文章里看到了,然后写了一遍.结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法.忘了在哪一篇上面看的了,就贴不出来链接地址.原谅.呃,真没自己的东西,权当练打字了吧.其实, ...
JS实现俄罗斯方块
在80后.90后的儿时记忆里,俄罗斯方块是必备的消遣小游戏,它的玩法非常简单基本大家都懂,但如何用编程语言开发一款儿时同款「俄罗斯方块」,恐怕知道的同学就很少啦. 位置掩码和旋转掩码俄罗斯方块游戏中 ...
JAVASCRIPT实现网页版：俄罗斯方块
HTML+CSS+JS实现俄罗斯方块完整版,素材只有图片,想要的下载图片按提示名字保存,css中用的时候注意路径!!主要在JS中!JS附有详细注释效果: 按键提示:[键盘按键] 素材:图片名字与代码 ...
使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)
在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...
jQuery原型属性和方法总结
从大四下学期开始了解jquery源码相关的东西,在回校参加毕业典礼(准确的说是参加补考挂科太多)期间便开始借着<jQuery>内幕学习jquery源码,然后在博客园写笔记也已经两个月了,也 ...

随机推荐

HTTP状态码完整版
HTTP 状态代码的完整列表 1xx(临时响应) 用于表示临时响应并需要请求者执行操作才能继续的状态代码. 代码说明 100(继续) 请求者应当继续提出请求.服务器返回此代码则意味着,服务器已收 ...
多线程（Thread、线程创建、线程池）
第1章多线程 1.1 多线程介绍学习多线程之前,我们先要了解几个关于多线程有关的概念. 进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程 ...
null、undefined和NaN的区别
未定义的值和定义未赋值的值是undefined: null是一种特殊的Object,可以给变量赋一个值null,来清除变量的值: NaN是一种特殊的number:
Python3+Selenium3+webdriver学习笔记5（模拟常用键盘和鼠标事件）
#!/usr/bin/env python# -*- coding:utf-8 -*- from selenium import webdriverfrom selenium.webdriver.co ...
Cause: java.lang.UnsupportedOperationException
运行web项目的时候出现以下错误: ### Cause: java.lang.UnsupportedOperationException at org.mybatis.spring.MyBati ...
HDU 5459 Jesus Is Here (递推，组合数学)
有点麻烦的递推,递推的原则:向小的问题方向分解,注意边界. 字符串的递推式为定义f为Si中的总方案数首先可以得到 fi=fi-1+fi-2+组合(si-2,si-1) 然后考虑Si-2和Si-1之 ...
VS开发软winform软件的更改用户使用权限
在使用软件的过程中,我们经常需要使用的软件拥有管理员权限,在开发的过程中,本人就遇到了应为权限不足的问题导致软件不能正常使用的状况. 在此我来记录我遇到的问题. 为开发的软件赋予管理员权限 https ...
java面试基础篇（一）
最近想深入的理解一下java 的工作机制,也是便于后期的面试. 1.A:HashMap和Hashtable有什么区别? Q:HashMap和Hashtable都实现了Map接口,因此很多特性非常相似. ...
java基础—对象转型
一.对象转型介绍对象转型分为两种:一种叫向上转型(父类对象的引用或者叫基类对象的引用指向子类对象,这就是向上转型),另一种叫向下转型.转型的意思是:如把float类型转成int类型,把double类 ...
java基础—数组
一．数组的基本概念数组可以看成是多个相同类型数据组合,对这些数据的统一管理. 数组变量属引用类型,数组也可以看成是对象,数组中的每个元素相当于该对象的成员变量. 数组的元素可以是任何数据类型,包括基 ...

JS实现——俄罗斯方块

JS实现——俄罗斯方块的更多相关文章

随机推荐

热门专题