分享自己写的Javascript的俄罗斯方块+送分解决办法-JavaSript-爱易网页

分享自己写的Javascript的俄罗斯方块+送分解决办法

日期：2014-05-16　浏览次数：20413 次

分享自己写的Javascript的俄罗斯方块+送分
前段时间论坛上看到，大牛贴出来的Javascript版俄罗斯方块，实在是佩服之极，恰巧本人也在学习Javascript，所以先看懂了那段代码，然后自己写了一个出来，说真的看懂和能写出来完全是天壤之别，写的时候很多次都实在想不通了，只有回头再看看代码、再想想逻辑，才能接着写下去，最终还是写出来了，不过只是具备基本功能的版本而已，之后准备再出N个版本的方块出来，一步一步完善各种功能，做一个高品质的方块出来。如果大家有什么好的意见，欢迎交流~
本人QQ：605494869 新浪微博：http://weibo.com/605494869，非常欢迎加好友和互粉~
具体代码如下：

HTML code


<!DOCTYPE html>
<html>
<head>
<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;}
</style>
<script type="text/javascript">

var row = 18;
var col = 10;
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;

// 创建DIV的公用方法
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)];
  
  this.container = null;
  
  this.refresh = function()
  {
    this.x = (typeof(x)!='undefined')?x:3;
    this.y = (typeof(y)!='undefined')?y:0;
    this.shape = shape?shape: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.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.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.createBackground = function()
  {
    var bgDiv = createElm("div","f");
    bgDiv.style.width = size*col+"px";
    bgDiv.style.height = size*row+"px";
  }
  
  // 检查边界越界
  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])

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

分享自己写的Javascript的俄罗斯方块+送分解决办法

相关资料更多>

推荐阅读更多>