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 相关文章推荐
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
请求时token过期自动刷新token操作
Sep 11 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
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
python getopt 参数处理小示例
2009/06/09 Python
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python实现的RSS阅读器实例
2015/07/25 Python
Python字符串处理实现单词反转
2017/06/14 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python PIL库图片灰化处理
2020/04/07 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
慰问信格式
2015/02/14 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技