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 相关文章推荐
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
js编写三级联动简单案例
Dec 21 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 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程序的php代码
2008/04/07 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
JS鼠标拖拽实例分析
2015/11/23 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
深入理解Python对Json的解析
2017/02/14 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
铁路工务反思材料
2014/02/07 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
python删除csv文件的行列
2021/04/06 Python
正确使用MySQL update语句
2021/05/26 MySQL
mysql事务隔离级别详情
2021/10/24 MySQL