js版俄罗斯方块

最新推荐文章于 2024-09-25 09:44:53 发布

zhaoyp1985

最新推荐文章于 2024-09-25 09:44:53 发布

阅读量321

点赞数

文章标签： colors function border 游戏 table c

本文链接：https://blog.csdn.net/zhaoyp1985/article/details/6875455

版权

<html>
<head>

<style>
#tb1 {
   width: 210px;
   height: 410px;
   border: 1px solid #999922;
   background-color: #fffedd;
    -moz-user-select:none;
}

#tb2 {
   width: 80px;
   height: 65px;
   background-color: #fffedd;
    -moz-user-select:none;
}

#d1,#d2 {
   float: left;
}

#d2 {
   margin-left: 20px;
}

td {
   width: 20px;
   border: 1px solid #fffedd;
}

.c1,.c2,.c3,.c4,.c5,.c6,.c7 {
   border-top: 1px solid white;
   border-left: 1px solid white;
   border-bottom: 1px solid #121212;
   border-right: 1px solid #121212;
}

.c1 {
   background-color: #ff4444;
}

.c2 {
   background-color: #44ff44;
}

.c3 {
   background-color: #4444ff;
}

.c4 {
   background-color: #ffff44;
}

.c5 {
   background-color: #44ffff;
}

.c6 {
   background-color: #ff44ff;
}

.c7 {
   background-color: #fea484;
}

tr {
   height: 20px;
   padding: 0px;
}
</style>
</head>
<body onselectstart='return false'>
<div id="d1"></div>
<div id="d2">
<div
   style="border: 1px solid #999922; width: 100px; padding-left: 10px; background-color: #fffedd; padding-top: 10px;">
<table id="tb2" cellpadding="0" cellspacing="0" border="0">
   <tr>
       <td> </td>
       <td> </td>
       <td> </td>
       <td> </td>
   </tr>
   <tr>
       <td> </td>
       <td> </td>
       <td> </td>
       <td> </td>
   </tr>
   <tr>
       <td> </td>
       <td> </td>
       <td> </td>
       <td> </td>
   </tr>
   <tr>
       <td> </td>
       <td> </td>
       <td> </td>
       <td> </td>
   </tr>
</table>
</div>
<br></br>
<div>分数：<span id="fushu">0</span></div>
<br>
<div>速度：<span id="id_speed">1</span></div>
<br>
</div>
<div id="sound" style="display: none;"></div>
<div id="sound2" style="display: none;"><embed src="sound/10.wav" loop="true" />
<audio src="sound/10.wav" autoplay="true" loop="true" loop="loop"   loop="100"></audio></div>
</body>
<script>
// 获取对象
function getid(str){
   return document.getElementById(str);
}
// 播放声音
function playsound(soundsrc){
   if(!-[1,]){
            document.getElementById("sound").innerHTML = '<embed   src="'+soundsrc+'" />';
       } else{
           document.getElementById("sound").innerHTML = '<audio src="'+soundsrc+'" autoplay="true" ></audio>';
       }
}
// 关闭声音
function closesound()
{
   document.getElementById("sound").innerHTML = '';
}
//判断v是否在数组a中
function in_array(a,v)
{
   for (var i = 0; i < a.length; i++) {
       if (a[i] == v) {
            return true;
        }
    }
    return false;

}

//冒泡排序
function mysort(a)
{
    var t;
   for(var i=0;i<a.length;i++)
       for(var j=i+1;j<a.length;j++){
           if(a[i]> a[j]){
               t= a[j];
               a[j] = a[i];
               a[i] = t;
           }
       }
   return a;
}

//初始化页面
var obj = getid("d1");
var obj2 = getid("d2");
stt='<table cellpadding="0" cellspacing="0" border="0" id="tb1" >';
for(i=0;i<20;i++){
   stt += "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
}
obj.innerHTML = stt + '<table>';

// 获取所有的格子
var tbs = obj.getElementsByTagName('td');
for(i=0;i<tbs.length;i++){
   tbs[i].innerHTML = "&nbsp";
}
// 获取所有的小格子
var tbs2 = obj2.getElementsByTagName('td');
</script>

<script>
//用方块的每一块初始位置形成不同的形状
var allkuai = [];
allkuai[0] = [[[0,4],[0,5],[0,6],[0,7]],
               [[0,5],[1,5],[2,5],[3,5]]]; // 长条
allkuai[1] = [[[0,4],[0,5],[1,4],[1,5]]];// 四方块
allkuai[2] = [[[0,4],[1,4],[1,5],[1,6]],[[1,4],[0,4],[0,5],[2,4]]]; // 反L
allkuai[3] = [[[0,4],[0,5],[0,6],[1,5]],[[0,6],[1,6],[2,6],[1,5]]]; // T
allkuai[4] = [[[0,4],[0,5],[1,5],[1,6]],[[0,5],[1,5],[1,4],[2,4]]]; // 之
allkuai[5] = [[[1,4],[1,5],[0,5],[0,6]],[[0,4],[1,4],[1,5],[2,5]]]; // 反之
allkuai[6] = [[[0,6],[1,6],[1,4],[1,5]],[[0,4],[2,4],[2,5],[1,4]]]; // L

//定义几种颜色的样式
var colors = ['c1','c2','c3','c4','c5','c6','c7'];
//定义速度
var speeds = [1000,800,700,600,400,300,200,100];
// 当前颜色
var thecolor = 'c1';
// 保存小区域里面的方块
var oldkuai = [];
//小区域里面的颜色
var oldcolor = 'c1';
//当前速度
var speed = speeds[0];
// 定义一个句柄
var downhand;
</script>
<script>
// 定义方块行为属性的方法
function getAkuai(k){
    var kuai = [];
    kuai.weizhi = k; // 保存形状
    kuai.top = true; //记录是否在顶部
    kuai.di = false; //记录是否到底部
    kuai.p = false; //记录暂停
    kuai.game = true; // 游戏是否进行中
    kuai.hide = function(){
        for(j=0;j<4;j++){
            var t = this.weizhi[j][0]*10 + this.weizhi[j][1];
            tbs[t].className = "";
        }
    };
    // 显示方块
    kuai.show = function(){
        for(j=0;j<4;j++){
            var t = this.weizhi[j][0]*10 + this.weizhi[j][1];
            tbs[t].className = thecolor;
        }
    }
    // 下降
    kuai.down = function(){
        if(this.p) return;
        var t = [];
        for( j=0;j<4;j++){
            t[j] = this.weizhi[j][0] * 10 + this.weizhi[j][1];
            }

        for( j=0;j<4;j++){
            if(t[j] + 10 >=200){
                this.di = true;
            } else if(! in_array(t,t[j]+10) && in_array(colors,tbs[t[j]+10].className) ){
                this.di = true;
            }
        }
        if(this.di) { return; }

        this.hide();
        for(var j=0;j<4;j++){
            this.weizhi[j][0] += 1;
        }
        this.show();
        this.top = false;
    }
    // 向右
    kuai.right = function(){
        if(this.p) return;
        var t = [];
        var l = [];
        for( j=0;j<4;j++){
            t[j] = this.weizhi[j][0] * 10 + this.weizhi[j][1];
            l[j] = this.weizhi[j][1];
        }
        for( j=0;j<4;j++){
            if(l[j] + 1 >=10){
                return;
            } else if(! in_array(t,t[j]+1) && in_array(colors,tbs[t[j]+1].className) ){
                return;
            }
        }
        this.hide();
        for(j=0;j<4;j++){
          this.weizhi[j][1] += 1;
        }
        this.show();
    }
    // 向左
    kuai.left = function(){
        if(this.p) return;
        var t = [];
        var l = [];
        for( j=0;j<4;j++){
            t[j] = this.weizhi[j][0] * 10 + this.weizhi[j][1];
            l[j] = this.weizhi[j][1];
        }
        for( j=0;j<4;j++){
            if(l[j] - 1 < 0){
               return;
            } else if(!in_array(t,t[j]-1) && in_array(colors,tbs[t[j]-1].className) ){
               return;
            }
        }
        this.hide();
       for(var j=0;j<4;j++){
          this.weizhi[j][1] -= 1;
        }
        this.show();
    }
    // 旋转
    kuai.round = function(){
        if(this.p) return;
        if(thecolor == 'c2') return;
        var tmpweizhi = [[0,0],[0,0],[0,0],[0,0]];
        for(var i=0;i<4;i++){
           tmpweizhi[i][1] = this.weizhi[i][1];
            tmpweizhi[i][0] = this.weizhi[i][0];
        }
        for( i=0;i<4;i++){
            l = tmpweizhi[i][0] - tmpweizhi[1][0];
            h = tmpweizhi[i][1] - tmpweizhi[1][1];
            tmpweizhi[i][0] = tmpweizhi[1][0] + h;
            tmpweizhi[i][1] = tmpweizhi[1][1] - l;
        }
        for(i=0;i<4;i++){
            if(tmpweizhi[i][1] < 0 || tmpweizhi[i][1] > 9 ){
                return;
            }
       }

        var t = [],t2=[];
        for( j=0;j<4;j++){
            t[j] = this.weizhi[j][0] * 10 + this.weizhi[j][1];;
            t2[j] = tmpweizhi[j][0] * 10 + tmpweizhi[j][1];
        }

        for(j=0;j<4;j++){
            if(t2[j] >= 200 || t2[j]< 0){
                return;
            }
            if(! in_array(t,t2[j]) && in_array(colors,tbs[t2[j]].className)) {
                return;
            }
        }

        this.hide();
        for(i=0;i<4;i++){
             this.weizhi[i][1] =tmpweizhi[i][1] ;
             this.weizhi[i][0] =tmpweizhi[i][0];
        }
        this.show();
    }
    return kuai;
}

// 设置小区域里面的方块
function setoldkuai(){
   for(var n =0; n<tbs2.length;n++){
       tbs2[n].className = '';
   }
   for(var i=0;i<4;i++){
        n = oldkuai[i][0]*4+oldkuai[i][1] - 4;
        tbs2[n].className = oldcolor;
    }
}

// 当一个方块到底时初始化下一个方块
function initk()
{
   k1.top = true;
   k1.di = false;
   ll =   0;
   lv =   0;
   //随机生成方块的形状
    ll = parseInt(allkuai.length * Math.random());
    lv = parseInt(allkuai[ll].length * Math.random());
    //小区域是否有方块，没有就是刚开始
    if(oldkuai.length == 4){
        // 小区域有方块就将他复制到大区域过来
        for(var i=0;i<4;i++){
            k1.weizhi[i][0] = oldkuai[i][0];
            k1.weizhi[i][1] = oldkuai[i][1];
        }
        thecolor = oldcolor;
        //把上面生成是放到小区域
        for(var i=0;i<4;i++){
           oldkuai[i][0] = allkuai[ll][lv][i][0];
           oldkuai[i][1] = allkuai[ll][lv][i][1];
        }
        oldcolor = colors[ll];
    } else {
        //没有就多随机生成一次
       oldkuai = [[0,0],[0,0],[0,0],[0,0]];
        for(var i=0;i<4;i++){
           oldkuai[i][0] = allkuai[ll][lv][i][0];
           oldkuai[i][1] = allkuai[ll][lv][i][1];
        }
        oldcolor = colors[ll];

        ll = parseInt(allkuai.length * Math.random());
        lv = parseInt(allkuai[ll].length * Math.random());
        thecolor = colors[ll];
        for(var i=0;i<4;i++){
           k1.weizhi[i][0] = allkuai[ll][lv][i][0];
           k1.weizhi[i][1] = allkuai[ll][lv][i][1];
        }
    }

    setoldkuai();

    // 根据新形成的方块的位置有没有原来的方块判断游戏是否结束
    var t = [];
    for( j=0;j<4;j++){
        t[j] = k1.weizhi[j][0] * 10 + k1.weizhi[j][1];
    }
    for( j=0;j<4;j++){
         if(in_array(colors,tbs[t[j]].className) ){
           return false;
        }
    }
    return true;
}

// 记录是否有要消的格子计算分数
function checkcore()
{
    var xiao = [];
    var x = 0;
    var t = [];
   for(var i=0,j=0;i<4;i++){
        if(!in_array(t,k1.weizhi[i][0]))
            t[j++] = k1.weizhi[i][0];
   }
   for(var l=0;l<t.length;l++){
       var flag = 1;
       var line = t[l];
       for(var m=0;m<10;m++){
           if(! in_array(colors,tbs[line * 10 + m].className)){
               flag = 0;
           }
       }
       if(flag == 1){
           xiao[x++] = line;
       }
   }
   if(xiao.length == 0) return;
   var sx = mysort(xiao);
   playsound("sound/flystar.wav");
   var maxtd;
   var fen = 1;
   for(var n=sx.length-1;n>=0;n--){
       maxtd = sx[n]*10 + 9;
       for(;maxtd > 9; maxtd--){
           tbs[maxtd].className = tbs[maxtd-10].className;
       }
       for(var ii = n-1;ii >= 0;ii--){
           sx[ii] += 1;
       }
       fen = fen * 2;
   }
   fen = fen * 10;
    document.getElementById("fushu").innerHTML = parseInt(document.getElementById("fushu").innerHTML) + fen;

   var total_fen = parseInt(document.getElementById("fushu").innerHTML);
    var g = parseInt(total_fen/500) ;
    g > speeds.length-1 ? g = speeds.length-1 :'';
    speed = speeds[g];
   document.getElementById("id_speed").innerHTML = g+1;
}

//控制方块的下降判断游戏是否结束
function setkdown()
{
    // 如果即是顶又是底部游戏结束
    if(k1.di && k1.top){
        k1.show();
        playsound("sound/lost.wav");
        k1.game = false;
        alert('game over');
    } else if(k1.di){
        // 如果只是到底计算分数重新生成
       checkcore();
       if(initk()){
            k1.show();
            downhand = setTimeout("setkdown()",speed);
       } else {
           k1.show();
           playsound("sound/lost.wav");
           k1.game = false;
           alert('game over');
       }
    } else {
        //如果在中间就继续下降
       k1.down();
       downhand = setTimeout("setkdown()",speed);
    }

}
//键盘控制方块的行为
document.onkeydown = function (e1)
{
    if(!k1.game) return;
   var event = window.event || e1;
   var key = event.keyCode || event.which;
    if(key == 40 || key == 37 || key == 39 || key == 38 ){
        playsound("sound/btn.wav");
    }
   if(key == 40 ){
       k1.down();
   }
   if(key == 37 ){
       k1.left();
   }
   if(key == 39 ){
       k1.right();
   }
   if(key == 32 ){
       playsound("sound/fixup.wav");
       for(var i=0;i<20;i++){
           k1.down();
       }
       clearTimeout(downhand);
       setkdown();
   }
   if(key == 38){
           k1.round();
   }
   // 暂停
   if(key == 80){
        if(!k1.p){
           k1.p = true;
        } else {
           k1.p = false;
        }
   }
}
// 启动游戏
var k1 = getAkuai([[0,0],[0,0],[0,0],[0,0]]);
initk();
k1.show();
setTimeout("setkdown()",500);
</script>
</html>