js手写俄罗斯方块

代码如下

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/k.css"/>        
    </head>
    <body>
        <div class="k">
            <div class="main-box">
                <div class="main">                                
            
                </div>
            </div>
            
            <div class="opt-box" style="visibility: hidden;visibility: visible;">
                <div class="title">
                    <p>连氏俄罗斯方块</p>
                    <p style="font-size: 14px;color: mediumorchid;">玩200分算你牛</p>
                </div>
                <div class="next">
                    <!--  一个方块-->
                    <div class="o" style="display:none;top: 60px;left: 60px;">
                        <div class="block"></div>
                    </div>
                    <!--   L 型拐角-->
                    <div class="l" style="display:none;top: 60px;left: 45px;">                        
                        <div class="inset">
                            <div class="block i0"></div>
                            <div class="block i"></div>
                            <div class="block ii"></div>
                            <div class="block iii"></div>
                        </div>        
                    </div>
                    <!-- 田字块 -->
                    <div class="oooo" style="display:none;left: 45px;top: 45px;">
                        <div class="inset">
                            <div class="block i0"></div>
                            <div class="block i"></div>
                            <div class="block ii"></div>
                            <div class="block iii"></div>
                        </div>        
                    </div>
                    <!--长条bar-->
                    <div class="bar" style="display:none;left: 50px;top: 45px;">
                        <div class="inset">
                            <div class="block i0"></div>
                            <div class="block i"></div>
                            <div class="block ii"></div>
                            <div class="block iii"></div>
                        </div>        
                    </div>
                    <!--小字-->
                    <div class="xiao" style="display:none;left: 70px;top: 45px;">
                        <div class="inset">
                            <div class="block i0"></div>
                            <div class="block i"></div>
                            <div class="block ii"></div>
                            <div class="block iii"></div>
                            <div class="block iiii"></div>
                            <div class="block iiiii"></div>
                            <div class="block iiiiii"></div>
                        </div>        
                    </div><!--壮字-->
                    <div class="zhuang" style="display:none;left: 30px;top: 30px;">
                        <div class="inset">
                            <div class="block i0"></div>
                            <div class="block i"></div>
                            <div class="block ii"></div>
                            <div class="block iii"></div>
                            <div class="block iiii"></div>
                            <div class="block iiiii"></div>
                            <div class="block iiiiii"></div>
                            <div class="block iiiiiii"></div>
                            <div class="block iiiiiiii"></div>
                            <div class="block _i"></div>
                            <div class="block _ii"></div>
                            <div class="block _iii"></div>
                            <div class="block _iiii"></div>
                            <div class="block _iiiii"></div>
                            <div class="block _iiiiii"></div>
                            <div class="block _iiiiiii"></div>
                        </div>        
                    </div>
                </div>
                <p>下一个</p>    
                
                <div class="opt">    
                    <p>得分:<span class="score">0</span>分</p>
                    <div style="width: 100%;height: 40px;clear: both;font-size: 12px;color: red;">玩的过程中可设置下落顺序随机哦</div>
                    <span>设置:</span>
                    <select class="sel" name="">
                        <option value="1">顺序</option>
                        <option value="0">随机</option>                        
                    </select>
                    <div class="s">
                        <div class="start">start</div>
                        <div class="stop">stop</div>
                    </div>                    
                </div>
                <div class="fff">
                    <p>说明:</p>
                    <p>
                        ↑变换,↓快速下落<br />←左     →右,
                    </p>
                    <p>空格 : 暂停/开始</p>
                </div>
            </div>
        </div>
    </body>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/k.js" type="text/javascript" charset="utf-8"></script>    
</html>

css:

* {
  margin: 0;
  padding: 0;
  font-family: "微软雅黑";
  font-size: 16px;
}
.k {
  width: 500px;
  height: 600px;
  margin: 0 auto;
  margin-top: 50px;
}
.k .inset {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
}
.k .main-box {
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  width: 300px;
  height: 600px;
  float: left;
}
.k .main {
  width: 300px;
  height: 600px;
  position: relative;
  background: #fff url(../img/b.PNG) repeat;
}
.k .opt-box {
  float: right;
  width: 198px;
  height: 601px;
  background: #eee;
  text-align: center;
}
.k .opt-box .title {
  width: 150px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  background: #dfdfdf;
  border: 1px solid #aaa;
  border-top: none;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.k .opt-box .next {
  width: 150px;
  height: 150px;
  position: relative;
  text-align: center;
  margin: 0 auto;
  margin-top: 30px;
  background: #fff;
  border: 1px solid #afafaf;
}
.k .opt-box .opt {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  margin-top: 100px;
  background: #ddd;
  border-radius: 4px;
}
.k .opt-box .opt .s {
  width: 100%;
  height: 28px;
  margin-top: 10px;
  text-align: center;
}
.k .opt-box .opt select {
  border: 1px solid #000;
  outline: none;
}
.k .opt-box .opt p {
  margin: 5px 0;
}
.k .opt-box .opt .start,
.k .opt-box .opt .stop {
  height: 26px;
  line-height: 26px;
  padding: 0 13px;
  color: #222;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #666;
  display: inline-block;
}
.k .opt-box .opt .start:active,
.k .opt-box .opt .stop:active {
  opacity: 0.5;
}
.k .opt-box .opt .start:hover,
.k .opt-box .opt .stop:hover {
  background: #000;
  color: #fff;
}
.k .opt-box .opt .start.active,
.k .opt-box .opt .stop.active {
  background: #000;
  color: #fff;
}
.k .block {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: #000;
  box-shadow: inset 0 0 10px -3px #fff;
}
.k .o {
  width: 0;
  height: 0;
  position: absolute;
  display: inline-block;
}
.k .l {
  width: 0;
  height: 0;
  display: inline-block;
  position: absolute;
}
.k .l .i0 {
  position: absolute;
  top: 0px;
  left: 0px;
}
.k .l .i {
  position: absolute;
  top: -30px;
  left: 0;
}
.k .l .ii {
  position: absolute;
  top: 30px;
  left: 0;
}
.k .l .iii {
  position: absolute;
  left: 30px;
  top: 30px;
}
.k .l.left .i {
  position: absolute;
  top: 0px;
  left: -30px;
}
.k .l.left .ii {
  position: absolute;
  top: 0px;
  left: 30px;
}
.k .l.left .iii {
  position: absolute;
  left: 30px;
  top: -30px;
}
.k .l.bottom .i {
  position: absolute;
  top: -30px;
  left: 0px;
}
.k .l.bottom .ii {
  position: absolute;
  top: -30px;
  left: -30px;
}
.k .l.bottom .iii {
  position: absolute;
  left: 0px;
  top: 30px;
}
.k .l.right .i {
  position: absolute;
  top: 0px;
  left: -30px;
}
.k .l.right .ii {
  position: absolute;
  top: 30px;
  left: -30px;
}
.k .l.right .iii {
  position: absolute;
  left: 30px;
  top: 0px;
}
.k .oooo {
  width: 0;
  height: 0;
  position: absolute;
}
.k .oooo .i {
  position: absolute;
  top: 0px;
  left: 30px;
}
.k .oooo .ii {
  position: absolute;
  top: 30px;
  left: 0;
}
.k .oooo .iii {
  position: absolute;
  left: 30px;
  top: 30px;
}
.k .bar {
  width: 0;
  height: 0;
  position: absolute;
}
.k .bar .i {
  position: absolute;
  top: 30px;
  left: 0px;
}
.k .bar .ii {
  position: absolute;
  top: 60px;
  left: 0;
}
.k .bar .iii {
  position: absolute;
  left: 0px;
  top: -30px;
}
.k .bar.left .i,
.k .bar.right .i {
  position: absolute;
  top: 0px;
  left: 30px;
}
.k .bar.left .ii,
.k .bar.right .ii {
  position: absolute;
  top: 0px;
  left: 60px;
}
.k .bar.left .iii,
.k .bar.right .iii {
  position: absolute;
  left: -30px;
  top: 0px;
}
.k .bar.bottom .i {
  position: absolute;
  top: 30px;
  left: 0px;
}
.k .bar.bottom .ii {
  position: absolute;
  top: 60px;
  left: 0;
}
.k .bar.bottom .iii {
  position: absolute;
  left: 0px;
  top: -30px;
}
.k .xiao {
  width: 0;
  height: 0;
  position: absolute;
}
.k .xiao .i {
  position: absolute;
  top: -30px;
  left: 0px;
}
.k .xiao .ii {
  position: absolute;
  top: 30px;
  left: 0px;
}
.k .xiao .iii {
  position: absolute;
  left: 0px;
  top: 60px;
}
.k .xiao .iiii {
  position: absolute;
  left: -30px;
  top: 60px;
}
.k .xiao .iiiii {
  position: absolute;
  left: -60px;
  top: 0px;
}
.k .xiao .iiiiii {
  position: absolute;
  left: 60px;
  top: 0px;
}
.k .zhuang {
  width: 0;
  height: 0;
  position: absolute;
}
.k .zhuang .i {
  position: absolute;
  top: -30px;
  left: 0px;
}
.k .zhuang .ii {
  position: absolute;
  top: 30px;
  left: 0px;
}
.k .zhuang .iii {
  position: absolute;
  left: 0px;
  top: 60px;
}
.k .zhuang .iiii {
  position: absolute;
  left: 0px;
  top: 90px;
}
.k .zhuang .iiiii {
  position: absolute;
  left: -30px;
  top: 0px;
}
.k .zhuang .iiiiii {
  position: absolute;
  left: -30px;
  top: 60px;
}
.k .zhuang .iiiiiii {
  position: absolute;
  left: 60px;
  top: 0px;
}
.k .zhuang .iiiiiiii {
  position: absolute;
  left: 60px;
  top: -30px;
}
.k .zhuang ._i {
  position: absolute;
  left: 30px;
  top: 30px;
}
.k .zhuang ._ii {
  position: absolute;
  left: 60px;
  top: 30px;
}
.k .zhuang ._iii {
  position: absolute;
  left: 90px;
  top: 30px;
}
.k .zhuang ._iiii {
  position: absolute;
  left: 30px;
  top: 90px;
}
.k .zhuang ._iiiii {
  position: absolute;
  left: 60px;
  top: 90px;
}
.k .zhuang ._iiiiii {
  position: absolute;
  left: 90px;
  top: 90px;
}
.k .zhuang ._iiiiiii {
  position: absolute;
  left: 60px;
  top: 60px;
}
.fff {
  width: 150px;
  height: 90px;
  background: #ccc;
  margin: 0 auto;
}
.fff p {
  font-size: 14px;
}

js:

/*
 Lian-Russia Block Game,
 date:2017/5/3--2017/5/9
 * */
(function(win, doc, $, undefined) {
    var K = function(k) {
        var $k = $("."+k);
        this.author="lianxiaozhuang";
        this.method="核心思想:用一个监测函数checkOverLap(时刻监测是否超出盒子或者与内部方块重合),"+
                            "若当前移动不符合要求(超出的或者重合了)则隐式的撤回当前步";
        this.main = $k.find(".main");
        this.mainWidth = this.main.width();
        this.mainHeight = this.main.height();
        this.next = $k.find(".next");
        this.score =0;//分数值
        this.sel = $k.find(".sel");
        this.start = $k.find(".start");
        this.stop = $k.find(".stop");
        this.timer = null;//定时器
        this.index =0;//初始下落块的索引(可修改)
        this.width = 30;//方块宽(和css样式保持一致)
        this.speed = 400;//下落块定时器速度
        this.mark = false;//暂停或者开始标记
        this.end = false;//游戏结束标记
        this.init();
    }
    K.prototype = {
        constructor: K,
        init: function() {
            var _this = this;
            var flag= false;    //二次点击标记    
            this.start.click(function() {//点击开始
                if(!_this.end){//游戏结束标记(标记为true停止任何键盘或鼠标事件)
                    _this.mark = true;//用于点击start和stop之间切换的标记
                    $(this).addClass("active").siblings().removeClass("active");
                    if(!flag){//防止二次点击
                        flag = true;                                    
                        if(_this.main.find(".running").length!=0){//中途暂停后在点击开始
                            _this.goDown();//下落函数
                        }else{//首次点开始
                            _this.main.append(_this.blockStr[_this.index]);
                            //下落块顺序出现
                            _this.index  = (_this.index >= _this.blockClass.length-1) ? 0 : _this.index+1;
                            //右侧的下一块提示窗
                            _this.next.find("."+_this.blockClass[_this.index]).show().siblings().hide();
                            _this.goDown();
                        }    
                    }
                }                
            });        
            this.stop.click(function(){    //暂停
                if(!_this.end){//游戏结束标记(标记为true停止任何键盘或鼠标事件)
                    flag = false;
                    _this.mark = false;//用于点击start和stop之间切换的标记
                    clearInterval(_this.timer);
                    //点击start和stop按钮后的颜色变化
                    $(this).addClass("active").siblings().removeClass("active");    
                }                                            
            });
            doc.onkeydown = function(evt) {//键盘
                if(!_this.end){//游戏结束标记(标记为true停止任何键盘或鼠标事件)
                    _this.keyBoardEvent(win.event || evt);
                }                
            }
        },
        blockClass: ["o", "l", "oooo","bar","zhuang","o", "l", "oooo","o", "l", "oooo","o", "l","oooo",],//块对应class名
        blockStr: [//每一个块的html代码、和上面的class名一一对应
            '<div class="running o top" style="left:150px;">'+
                '<div class="block"></div>'+
            '</div>',

            '<div class="running l top" style="left:120px;top:-30px;">' +
                '<div class="inset">'+
                    '<div class="block i0"></div>'+
                    '<div class="block i"></div>' +
                    '<div class="block ii"></div>' +
                    '<div class="block iii"></div>' +
                '</div>'+
            '</div>',

            '<div class="running oooo top" style="left:120px;top:-30px;">' +
                '<div class="inset">'+
                    '<div class="block i0"></div>'+
                    '<div class="block i"></div>' +
                    '<div class="block ii"></div>' +
                    '<div class="block iii"></div>' +
                '</div>'+
            '</div>',
            '<div class="running bar top" style="left:120px;top: -60px;">'+
                '<div class="inset">'+
                    '<div class="block i0"></div>'+
                    '<div class="block i"></div>'+
                    '<div class="block ii"></div>'+
                    '<div class="block iii"></div>'+
                '</div>'+        
            '</div>',
            
            '<div class="running zhuang top" style="left: 120px;top: -120px;">'+
                '<div class="inset">'+
                    '<div class="block i0"></div>'+
                    '<div class="block i"></div>'+
                    '<div class="block ii"></div>'+
                    '<div class="block iii"></div>'+
                    '<div class="block iiii"></div>'+
                    '<div class="block iiiii"></div>'+
                    '<div class="block iiiiii"></div>'+
                    '<div class="block iiiiiii"></div>'+
                    '<div class="block iiiiiiii"></div>'+
                    '<div class="block _i"></div>'+
                    '<div class="block _ii"></div>'+
                    '<div class="block _iii"></div>'+
                    '<div class="block _iiii"></div>'+
                    '<div class="block _iiiii"></div>'+
                    '<div class="block _iiiiii"></div>'+
                    '<div class="block _iiiiiii"></div>'+
                '</div>',
            '<div class="running o top" style="left:150px;">'+
                '<div class="block"></div>'+
            '</div>',

            '<div class="running l top" style="left:120px;top:-30px;">' +
                '<div class="inset">'+
                    '<div class="block i0"></div>'+
                    '<div class="block i"></div>' +
                    '<div class="block ii"></div>' +
                    '<div class="block iii"></div>' +
                '</div>'+
            '</div>',

            '<div class="running oooo top" style="left:120px;top:-30px;">' +
                '<div class="inset">'+
                    '<div class="block i0"></div>'+
                    '<div class="block i"></div>' +
                    '<div class="block ii"></div>' +
                    '<div class="block iii"></div>' +
                '</div>'+
            '</div>',
            '<div class="running o top" style="left:150px;">'+
                '<div class="block"></div>'+
            '</div>',

            '<div class="running l top" style="left:120px;top:-30px;">' +
                '<div class="inset">'+
                    '<div class="block i0"></div>'+
                    '<div class="block i"></div>' +
                    '<div class="block ii"></div>' +
                    '<div class="block iii"></div>' +
                '</div>'+
            '</div>',

            '<div class="running oooo top" style="left:120px;top:-30px;">' +
                '<div class="inset">'+
                    '<div class="block i0"></div>'+
                    '<div class="block i"></div>' +
                    '<div class="block ii"></div>' +
                    '<div class="block iii"></div>' +
                '</div>'+
            '</div>',
            
            '<div class="running o top" style="left:150px;">'+
                '<div class="block"></div>'+
            '</div>',

            '<div class="running l top" style="left:120px;top:-30px;">' +
                '<div class="inset">'+
                    '<div class="block i0"></div>'+
                    '<div class="block i"></div>' +
                    '<div class="block ii"></div>' +
                    '<div class="block iii"></div>' +
                '</div>'+
            '</div>',

            '<div class="running oooo top" style="left:120px;top:-30px;">' +
                '<div class="inset">'+
                    '<div class="block i0"></div>'+
                    '<div class="block i"></div>' +
                    '<div class="block ii"></div>' +
                    '<div class="block iii"></div>' +
                '</div>'+
            '</div>'
        ],
        rotateBlock: function(dom) { //换class实现旋转(旋转的时候也是(先设置不可见)如果旋转后不满足要求就退回上一步操作;直到满足要求了块才会显示)
            var _this = this;
            var tempClassN = ["top","left", "bottom", "right"];//下落块的四个旋转方向对应的class数组
            var t = dom.attr("class").split(" ");//取出当前运动的running的class值放到一个数组
            var i = $.inArray(t[t.length - 1], tempClassN); //上面的那个末尾的class名在tempClassN中的位置
            var _i = (i+1==tempClassN.length)?0:i+1;//取tempClassN中的下一值(可循环)
            dom.removeClass(tempClassN[i]).addClass(tempClassN[_i]).css({"visibility":"hidden"});//先设置不可见。之后判断此步是否符合要求
            if(_this.checkOverLap()){//不符合要求
                dom.removeClass(tempClassN[_i]).addClass(tempClassN[i]).css({"visibility":"visible"});//退回上一次旋转(效果页面看不到的)
            }else{
                dom.css({"visibility":"visible"});//符合要求、显示
            }
        },
        moveBlock: function(dom, n){//左右移动
            var _this = this,a = 1;
            a = n?-1:1;    //系数a为正或负实现左移右移    
            var  _left = parseInt(dom.css("left"));            
            dom.css({"left":_left +a*_this.width,"visibility":"hidden"});
            //console.log(_this.checkOverLap());
            if(_this.checkOverLap()){//超出或者重合                    
                var  _left = parseInt(dom.css("left"));    
                dom.css({"left":_left - a*_this.width,"visibility":"visible"});
            }else{
                dom.css({"visibility":"visible"});
            }
        },
        goDown:function(){//下落
            var _this = this;            
            _this.timer = setInterval(function() {                                
                _this.interVal()
             },_this.speed);            
        },
        fastGoDown:function(){//快速下落
            var _this = this;        
            clearInterval(_this.timer);
            _this.timer = setInterval(function() {    //实际上就是    goDown函数的一个快速的执行                        
                _this.interVal()
             },5);            
        },
        interVal:function(){//定时器内部下落实现的函数.供goDown和fastGoDown里的setInterval调用
            var  _this = this;            
            var r = _this.main.find(".running");                
            var _top  = r.offset().top;
            if(_top!=null){//经测试,防止按快速下落,ie8报错
                r.offset({"top":_top + _this.width}).css({"visibility":"hidden"});
            }                                        
            if(_this.checkOverLap()){//如果移动的这一步超出了范围或者重合了(不满足要求了).就让它退回来这一步(这都是隐藏操作的所以也没看不到)
                var _top = parseInt(r.css("top"));
                r.css({"top": _top - _this.width}).css({"visibility":"visible"});                    
                clearInterval(_this.timer);                    
                _this.checkGameOver(r);//检查游戏结束
                r.removeClass("running");
                r.find(".block").addClass("fallen");
                _this.checkOverFlow();//检查是否一行排满
                //重新开始下一轮降落
                if(!_this.end){//为true时停止下落函数的回调
                    _this.main.append(_this.blockStr[_this.index]);
                    var _val = _this.sel.val();        
                    console.log(_val)
                    if(_val=="1"){//顺序出现下落块
                        _this.index  = (_this.index >= _this.blockClass.length-1) ? 0 : _this.index+1;
                    }else if(_val=="0"){//随机
                        _this.index = parseInt(Math.random()*_this.blockClass.length);                                                        
                    }
                    //console.log(_this.index);
                    _this.next.find("."+_this.blockClass[_this.index]).show().siblings().hide();                    
                    _this.goDown();    //设置完毕后回调
                }
                                
            }else{//满足要求。显示当方块
                r.css({"visibility":"visible"});
            }
        },
        checkOverLap:function(){//移动过程中检测是否超出或者重合
            var m = Math,_this = this,overlap = false;
            var $main_left = this.main.offset().left,$main_top = this.main.offset().top;
            var e_left_min=Infinity,e_left_max=-Infinity,e_top_min=Infinity,e_top_max=-Infinity;            
            $(".running").find(".block").each(function(index,element){//取下落块的位置最值
                var e_left = $(element).offset().left,e_top = $(element).offset().top;                    
                e_left_min = m.min(e_left_min,e_left);
                e_top_min = m.min(e_top_min,e_top);
                e_left_max = m.max(e_left_max,e_left);
                e_top_max = m.max(e_top_max,e_top);
               $(".fallen").each(function(index,element){
                     var $f_top = $(element).offset().top,
                         $f_left = $(element).offset().left;
                         //console.log($left+" "+$f_left);                             
                    if(e_top==$f_top&&e_left==$f_left){
                        overlap = true;
                    }
                });
            });    
            //不超出左边、右边和底部;且不与已经下落的方块重合
            //console.log($main_top+_this.mainHeight-e_top_max)
            if((e_left_min-$main_left>=0)&&($main_left+_this.mainWidth-_this.width-e_left_max >=0)
                                            &&($main_top+_this.mainHeight-e_top_max>0)&&(!overlap)){
                return false;//符合要求的移动
            }else{
                return true;//不合符要求
            }
        },
        checkOverFlow:function(){//若有一行排满;删除并得分
            var _this = this;            
            var ary = [], res = [];  
            $(".fallen").each(function(index,element){
                var $top = $(element).offset().top;
                ary.push($top);
            });            
            ary.sort();  
            //下面的两个for循环摘自网上;用于打印出一个js数组中个个元素出现的个数
            for(var i = 0;i<ary.length;){                     
                var count = 0;  
                for(var j=i;j<ary.length;j++) {                         
                   if(ary[i] == ary[j]){  
                       count++;  
                   }                      
                 }  
                res.push([ary[i],count]);  
                 i+=count;                     
            }  
            //res 二维数维中保存了 值和值的重复数  
            for(var  i = 0 ;i<res.length;i++){                  
                // console.log("值:"+res[i][0]+"     重复次数:"+res[i][1]);  
                 if(res[i][1]==_this.mainWidth/_this.width){//如果有一行满了
                     //console.log(res[i][0])
                     $(".fallen").each(function(index,element){
                        var $top = $(element).offset().top;
                        if($top==res[i][0]){
                            $(element).remove();
                            _this.score++;//加分                            
                            $(".score").html(_this.score);
                            if(_this.score>=100){//大于100分加速
                                _this.speed=200;
                            }
                            if(_this.score>=200){
                                alert("恭喜通关!!!!");
                            }
                        }                                            
                    });
                    $(".fallen").each(function(index,element){//本次删除行上面的块下移动一格                        
                        var _top  = $(element).offset().top;                    
                        if(_top<res[i][0]){
                            $(element).offset({"top":_top + _this.width});
                        }                                            
                    });
                 }
            }
        },
        checkGameOver:function(dom){//检查游戏结束
            var _this = this;
            var $main_top = this.main.offset().top;
            //console.log($main_top);
            dom.each(function(index,element){//下落块下落完毕后检查有超出最上面的情况则Game Over
                if($(element).offset().top<$main_top){
                    _this.end = true;
                    if(_this.score<=50){//提示语设置
                        var l ="垃圾!!"
                    }else if(_this.score>50&&_this.score<=100){
                        l = " 还行!"
                    }else if(_this.score>100&&_this.score<=150){
                        l =" 很棒!";
                    }else if(_this.score>150&&_this.score<200){
                        l =" 牛人!!!!";
                    }else if(_this.score>=200){
                        l =" 超越神啦!!!!";
                    }
                    alert("Game Over!"+"  "+"得分:"+_this.score+" "+l);                    
                    return;
                }
            });
        },
        keyBoardEvent: function(e) {
            var _this = this,
                _key = e.keyCode || e.which; 
            var $running = $(".main .running");
            switch(_key) {    
                case 37: //左键    
                    if(_this.mark){//暂停后不可操作
                        _this.moveBlock($running, 1);
                    }                
                    break;    
                case 38: //向上键    
                    if(_this.mark){
                        _this.rotateBlock($running);
                    }                    
                    break;    
                case 39: //右键        
                    if(_this.mark){
                        _this.moveBlock($running, 0);
                    }                        
                    break;    
                case 40: //向下键
                    if(_this.mark){
                        _this.fastGoDown($running);
                    }
                    break;    
                case 13: //回车键                     

                    break;
                case 32: //空格                                            
                    return _this.mark?_this.stop.click():_this.start.click();
                    break;
                default:                       
                    break;
            }  
        }
    }

    new K("k");

}(window, document, jQuery))

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏生信宝典

利用ComplexHeatmap绘制热图(一)

作者:严涛 浙江大学作物遗传育种在读研究生(生物信息学方向)伪码农,R语言爱好者,爱开源。

6752
来自专栏生信技能树

学IGV必看的初级教程

Integrative Genomics Viewer (IGV)作为一个高性能的可视化工具,可以交互式的察看综合的基因组相关数据,也友好的支持多种数据类型,自...

1.1K12
来自专栏阿炬.NET

FineUIMvc表格数据库分页,使用CYQ.Data组件

4208
来自专栏逍遥剑客的游戏开发

挑战蓝龙Kalecgos

1172
来自专栏Android点滴积累

Android高效内存之让你的图片省内存

Android高效内存之让你的图片省内存        在做内存优化的时候,我们发现除了解决内存泄露问题,剩下的就只有想办法减少真实的内存占用。而在App中,大...

22611
来自专栏知晓程序

小程序也能做这么精致的动效?看完我给大神献上了膝盖…… | 开发

1783
来自专栏林德熙的博客

gif 格式

请看图片,gif 图分为图片文件头(File Header),gif信息(GIF Data Stream)和文件结尾(Trailer)三个部分,最主要的是 gi...

2542
来自专栏HT

HTML5五种客户端离线存储方案

最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie、WebS...

2496
来自专栏阿炬.NET

FineUIMvc表格数据库分页,使用CYQ.Data组件

1434
来自专栏腾讯Bugly的专栏

Android自绘动画实现与优化实战——以Tencent OS录音机波形动画为实例

前言 我们所熟知的,Android 的图形绘制主要是基于 View 这个类实现。 每个 View 的绘制都需要经过 onMeasure、onLayout、onD...

4344

扫码关注云+社区

领取腾讯云代金券