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中“基本类型”之争小结
Jan 03 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
用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中的垃圾回收机制
2015/08/10 PHP
php实现网站留言板功能
2015/11/04 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
简述JS控制台的使用
2018/07/15 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python标准库与第三方库详解
2014/07/22 Python
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
python中zip和unzip数据的方法
2015/05/27 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
简历中求职的个人自我评价
2013/12/03 职场文书
医学专业毕业生个人的求职信
2013/12/04 职场文书
办公室副主任职责范本
2014/03/08 职场文书
红色故事演讲稿
2014/05/22 职场文书
纪律教育月活动总结
2014/08/26 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
纪委立案决定书
2015/06/24 职场文书