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

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

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

分享自己写的Javascript的俄罗斯方块+送分（三）
今天加入：1.暂停功能，2.瞬落功能，3.调整预告和计分栏的位置，效果图如下：
本来还想加入等级系统和支持手机的，今天实在木有时间了，下次一定更新上来。
本人QQ：605494869 新浪微博：http://weibo.com/605494869，非常欢迎加好友和互粉~

具体代码如下：

HTML code


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
  .activityModel{margin:1px; width:19px; height:19px; background:red; position:absolute;}
  .forecastModel{margin:0.5px; width:9.5px; height:9.5px; background:yellow; position:absolute;}
  .stationaryModel{margin:1px; width:19px; height:19px; background:gray; position:absolute;}
  .container{top:0px; left:0px; background:black; position:absolute;}
  .info{top:0px; position:absolute;}
  .score{width:80px; height:20px; font-size:10pt; text-align:right; color:white; position:absolute;}
  .forecast{top:0px; left:0px; width:48px; height:48px; background:#151515; position:absolute;}
</style>
<script type="text/javascript">

var tetris;
var container;
var intervalId;
var intervalId2;

var speed = 600;
var size = 20;
var forecastSize = 10;
var rowCount = 18;
var colCount = 10;
var announcement = 6;

var isOver = false;
var isStop = 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(";");

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:"activityModel";
  this.divs = [createElm("div",myCss),createElm("div",myCss),createElm("div",myCss),createElm("div",myCss)];
  
  if(!shape)
  {
    // 初始化计分栏  
    this.score = createElm("div","score");
    this.score.style.top = "0px";
    this.score.style.left = 6*size+"px";
    this.score.innerHTML = "score:000";
    // 初始化预告栏和预告方块
    var forecastCss = "forecastModel";
    this.forecast = createElm("div","forecast");
    this.divs2 = [createElm("div",forecastCss),createElm("div",forecastCss),createElm("div",forecastCss),createElm("div",forecastCss)];
  }
  
  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]- -0.2)*forecastSize+"px";
      this.divs2[i].style.left = (this.shape2[i*2]- -0.2)*forecastSize+"px";
    }
  }
  
  // 显示分数
  this.showScore = function()
  {
    if(this.container && this.score)
    {
      switch((this.container.score + "").length)
      {
        case 1:
          this.score.innerHTML = "score:" + "00" + this.conta

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

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

相关资料更多>

推荐阅读更多>