JavaScript实现简洁的俄罗斯方块完整实例


Posted in Javascript onMarch 01, 2016

本文实例讲述了JavaScript实现简洁的俄罗斯方块。分享给大家供大家参考,具体如下:

先来看看运行效果图:

JavaScript实现简洁的俄罗斯方块完整实例

完整实例代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>俄罗斯方块</title>
<style type="text/css">
 .c{margin:1px; width:19px; height:19px; background:red; position:absolute;}
 .d{margin:1px; width:19px; height:19px; background:gray; position:absolute;}
 .f{top:0px; left:0px; background:black; position:absolute;}
 .e{top:0px; background:#151515; position:absolute;}
 .g{width:100px; height:20px; color:white; position:absolute;}
</style>
<script type="text/javascript">
var row = 18;
var col = 10;
var announcement = 6;
var size = 20;
var isOver = false;
var shapes = ("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";");
var tetris;
var container;
function createElm(tag,css)
{
 var elm = document.createElement(tag);
 elm.className = css;
 document.body.appendChild(elm);
 return elm;
}
function Tetris(css,x,y,shape)
{
 // 创建4个div用来组合出各种方块
 var myCss = css?css:"c";
 this.divs = [createElm("div",myCss),createElm("div",myCss),createElm("div",myCss),createElm("div",myCss)];
 if(!shape)
 {
  this.divs2 = [createElm("div",myCss),createElm("div",myCss),createElm("div",myCss),createElm("div",myCss)];
  this.score = createElm("div","g");
  this.score.style.top = 10*size+"px";
  this.score.style.left = (col- -1)*size+"px";
  this.score.innerHTML = "score:0";
 }
 this.container = null;
 this.refresh = function()
 {
  this.x = (typeof(x)!='undefined')?x:3;
  this.y = (typeof(y)!='undefined')?y:0;
  // 如果有传参,优先使用参数的,如果有预告,优先使用预告,都没有就自己生成
  if(shape)
   this.shape = shape;
  else if(this.shape2)
   this.shape = this.shape2;
  else
   this.shape = shape?shape:shapes[Math.floor((Math.random()*shapes.length-0.000000001))].split(",");
  this.shape2 = shapes[Math.floor((Math.random()*shapes.length-0.000000001))].split(",");
  if(this.container && !this.container.check(this.x,this.y,this.shape))
  {
   isOver = true;
   alert("游戏结束");
  }
  else
  {
   this.show();
   this.showScore();
   this.showAnnouncement();
  }
 }
 // 显示方块
 this.show = function()
 {
  for(var i in this.divs)
  {
   this.divs[i].style.top = (this.shape[i*2+1]- -this.y)*size+"px";
   this.divs[i].style.left = (this.shape[i*2]- -this.x)*size+"px";
  }
 }
 // 显示预告
 this.showAnnouncement = function()
 {
  for(var i in this.divs2)
  {
   this.divs2[i].style.top = (this.shape2[i*2+1]- -1)*size+"px";
   this.divs2[i].style.left = (this.shape2[i*2]- -1- -col)*size+"px";
  }
 }
 // 显示分数
 this.showScore = function()
 {
  if(this.container && this.score)
  {
   this.score.innerHTML = "score:" + this.container.score;
  }
 }
 // 水平移动方块的位置
 this.hMove = function(step)
 {
  if(this.container.check(this.x- -step,this.y,this.shape))
  {
   this.x += step;
   this.show();
  }
 }
 // 垂直移动方块位置
 this.vMove = function(step)
 {
  if(this.container.check(this.x,this.y- -step,this.shape))
  {
   this.y += step;
   this.show();
  }
  else
  {
   this.container.fixShape(this.x,this.y,this.shape);
   this.container.findFull();
   this.refresh();
  }
 }
 // 旋转方块
 this.rotate = function()
 {
  var newShape = [this.shape[1],3-this.shape[0],this.shape[3],3-this.shape[2],this.shape[5],3-this.shape[4],this.shape[7],3-this.shape[6]];
  if(this.container.check(this.x,this.y,newShape))
  {
   this.shape = newShape;
   this.show();
  }
 }
 this.refresh();
}
function Container()
{
 this.init = function()
 {
  // 绘制方块所在区域
  var bgDiv = createElm("div","f");
  bgDiv.style.width = size*col+"px";
  bgDiv.style.height = size*row+"px";
  // 绘制预告所在区域
  var bgDiv = createElm("div","e");
  bgDiv.style.left = size*col+"px";
  bgDiv.style.width = size*announcement+"px";
  bgDiv.style.height = size*row+"px";
  // 清空积分
  this.score = 0;
 }
 this.check = function(x,y,shape)
 {
  // 检查边界越界
  var flag = false;
  var leftmost=col;
  var rightmost=0;
  var undermost=0;
  for(var i=0;i<8;i+=2)
  {
   // 记录最左边水平坐标
   if(shape[i]<leftmost)
    leftmost = shape[i];
   // 记录最右边水平坐标
   if(shape[i]>rightmost)
    rightmost = shape[i];
   // 记录最下边垂直坐标
   if(shape[i+1]>undermost)
    undermost = shape[i+1];
   // 判断是否碰撞
   if(this[(shape[i+1]- -y)*100- -(shape[i]- -x)])
    flag = true;
  }
  // 判断是否到达极限高度
  for(var m=0;m<3;m++)
   for(var n=0;n<col;n++)
    if(this[m*100+n])
     flag = true;
  if((rightmost- -x+1)>col || (leftmost- -x)<0 || (undermost- -y+1)>row || flag)
   return false;
  return true;
 }
 // 用灰色方块替换红色方块,并在容器中记录灰色方块的位置
 this.fixShape = function(x,y,shape)
 {
  var t = new Tetris("d",x,y,shape);
  for(var i=0;i<8;i+=2)
   this[(shape[i+1]- -y)*100- -(shape[i]- -x)] = t.divs[i/2];
 }
 // 遍历整个容器,判断是否可以消除
 this.findFull = function()
 {
  var s = 0;
  for(var m=0;m<row;m++)
  {
   var count = 0;
   for(var n=0;n<col;n++)
    if(this[m*100+n])
     count++;
   if(count==col)
   {
    s++;
    this.removeLine(m);
   }
  }
  this.score -= -this.calScore(s);
 }
 this.calScore = function(s)
 {
  if(s!=0)
   return s- -this.calScore(s-1)
  else
   return 0;
 }
 // 消除指定一行方块
 this.removeLine = function(row)
 {
  // 移除一行方块
  for(var n=0;n<col;n++)
   document.body.removeChild(this[row*100+n]);
  // 把所消除行上面所有的方块下移一行
  for(var i=row;i>0;i--)
  {
   for(var j=0;j<col;j++)
   {
    this[i*100- -j] = this[(i-1)*100- -j]
    if(this[i*100- -j])
     this[i*100- -j].style.top = i*size + "px";
   }
  }
 }
}
function init()
{
 container = new Container();
 container.init();
 tetris = new Tetris();
 tetris.container = container;
 document.onkeydown = function(e)
 {
  if(isOver) return;
  var e = window.event?window.event:e;
  switch(e.keyCode)
  {
   case 38: //up
    tetris.rotate();
    break;
   case 40: //down
    tetris.vMove(1);
    break;
   case 37: //left
    tetris.hMove(-1);
    break;
   case 39: //right
    tetris.hMove(1);
    break;
  }
 }
 setInterval("if(!isOver) tetris.vMove(1)",500);
}
</script>
</head>
<body onload="init()">
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
json传值以及ajax接收详解
May 24 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
原生js+ajax分页组件
Jan 30 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
vue v-model的用法解析
Oct 19 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 #Javascript
JS实现图片平面旋转的方法
Mar 01 #Javascript
JS显示日历和天气的方法
Mar 01 #Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 #Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 #Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 #Javascript
JavaScript Date对象详解
Mar 01 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
详解node中创建服务进程
2017/05/09 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
Python Socket编程入门教程
2014/07/11 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
python实现字符串和数字拼接
2020/03/02 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
致长跑运动员加油稿
2014/02/20 职场文书
车间主任岗位职责
2014/03/16 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
PHP中->和=>的意思
2021/03/31 PHP
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫