【小游戏】转贴一个<打砖块>小游戏

梦里的蝴蝶

<!--DOCUTYPE HTML-->

       
                <title>
                        打砖块. by 一只柯楠
                </title>
                <style type="text/css">
                        #zn{
                                border: 10px red solid;
                                margin: 0 auto;
                                display: block;
                        }
                </style>
       
       
                <h1>打砖块</h1>
                <hr>
                Esc键：开始 暂停;<br>
                方向左右键：控制接球板;<br>
                转贴的，作者：一只柯楠;<br>
                <canvas id="zn" width="480" height="760"></canvas>
                <script type="text/javascript">
                        var Brick= function () {
                                var requestAnim= window.requestAnimationFrame ||
                                                window.webkitRequestAnimationFrame ||
                                                window.mozRequestAnimationFrame ||
                                                window.oRequestAnimationFrame ||
                                                window.msRequestAnimationFrame ||
                                                function(callback) { return setTimeout(callback, 100/6); },
                                cancelAnim= window.cancelAnimationFrame ||
                                        window.webkitCancelAnimationFrame ||
                                        window.mozCancelAnimationFrame ||
                                        window.oCancelAnimationFrame ||
                                        window.msCancelAnimationFrame ||
                                        function(timeid) { return clearTimeout(timeid); },
                                col= 8, row= 8, BW, BH= 30, BS= 1, r= 18, random= function (n1, n2) {        return Math.round(Math.random()*(n2- n1))+n1},
                                elWidth, elHeight, cycle= 200, N= 0, score= 0,
                                randColor= function(c1, c2){ return 'rgb('+ random(c1 || 0, c2 || 255)+ ','+ random(c1 || 0, c2 || 255)+ ','+ random(c1 || 0, c2 || 255)+ ')'} ,
                                init = function (id) {
                                var el= this.el= document.querySelector(id);
                                        elWidth= el.width, elHeight= el.height;
                                        this.c= el.getContext('2d');
                                        BW= +(elWidth/col-BS).toFixed(2);
                                        this.RL= (elWidth- BW)/2;
                                        this.RT= elHeight- BH- BS;
                                        this.x= this.RL+ (BW/2);
                                        this.y= elHeight-r- BH- BS;
                                        this.xv= random(46, 90)* (Math.random()> .5 ? 2 : -2);
                                        this.yv= -4* 126;
                                        this.initBricks();
                                        //暂停
                                        this.suspend= true;         
                                        this.listenerEvent();
                                }

                                init.prototype= {

                                        start: function (timestamp) {
                                                var self= this, newTime= Date.now(), diffX, diffY, diffTime= newTime- (timestamp || newTime) , x, y;
                                                if(++N=== cycle){
                                                        N= 0;
                                                        var ary= [];
                                                        this.tables.unshift(ary);
                                                        for(var i =0 ; i< col; i++){
                                                                ary.push(1);
                                                        }
                                                }
                                                diffX= this.xv* diffTime/1000;
                                                diffY= this.yv* diffTime/1000;
                                                this.clearView();
                                                //绘制砖块
                                                this.drawBricks();
                                                //绘制小球
                                                this.drawBall(0, 0);
                                                //绘制接球板
                                                this.drawRacket();
                                                //绘制得分
                                                this.showText(score);
                                                if(this.downKeyLeft)
                                                        this.RL= Math.max(this.RL- BW/5, 0);
                                                else if(this.downKeyRight)
                                                        this.RL= Math.min(this.RL+ BW/5, elWidth- 2*BW);
                                                x= this.x+ diffX;
                                                y= this.y+ diffY;

                                                if(x- r <0 || x+ r > elWidth)
                                                        this.xv *= -1;
                                                if(y- r< 0)
                                                        this.yv *= -1;
                                                else if(y+ r> this.RT){
                                                        if(x+ r> this.RL && x-r< this.RL+ 2*BW)
                                                                this.yv *= -1;
                                                        else{
                                                                this.suspend= true ;
                                                                this.clearView();
                                                                this.showText('GAME OVER');
                                                        }
                                                }
                                                var i= Math.floor(x/(BW +BS)), j= Math.floor(y/(BH +BS));
                                                        if(this.tables[j] && this.tables[j][i]===1){
                                                                this.tables[j][i]= 0;
                                                                score+= 100;
                                                                this.yv*=-1;
                                                        }
                                                if(!this.suspend){
                                                        this.x= x;
                                                        this.y= y;
                                                        this.animID= requestAnim(function () {
                                                                self.start(newTime);
                                                        })
                                                }
                                                return this;
                                        },

                                        clearView: function () {
                                                var c= this.c;
                                                c.clearRect(0, 0, elWidth, elHeight);
                                        },

                                        initBricks: function(){
                                                this.tables= [];
                                                for(var i=0; i< col; i++){
                                                        this.tables.push([]);
                                                        for(var j=0; j< row; j++){
                                                                this.tables[i][j]= 1;
                                                        }
                                                }
                                        },

                                        drawRacket: function () {
                                                this.drawRect(this.RL, this.RT, 2*BW, BH, 1, 1);
                                        },

                                        drawBall: function(c1, c2){
                                                var c= this.c;  
                                                c.beginPath();
                                                c.arc(this.x, this.y, r, 0, 2*Math.PI);
                                                c.fillStyle= '#000'//randColor(c1 || 150, c2 || 255);
                                                c.closePath();
                                                c.fill();
                                        },
                                       
                                        drawRect: function(x, y, w, h, c1, c2){
                                                var c= this.c;
                                                c.beginPath();
                                                c.fillStyle= randColor(c1 || 0, c2 || 255);
                                                c.closePath();
                                                c.fillRect(x, y, w, h);
                                        },

                                        drawBricks: function(){
                                                var i= 0,len= this.tables.length, cur, tables= this.tables;
                                                for(; i< len; i++){
                                                        cur= tables[i];
                                                        for(var j= 0; j< cur.length; j++){
                                                                cur[j]===1 && this.drawRect(j*(BW+ BS), i*(BH+ BS), BW, BH);
                                                        }
                                                }
                                        },

                                        listenerEvent: function(e){
                                                document.addEventListener('keydown', this, false);
                                                document.addEventListener('keyup', this, false);
                                        },

                                        handleEvent: function(e){
                                                var type= e.type, keycode= e.keyCode;
                                                if(keycode===37 || keycode=== 39 || keycode=== 27){
                                                        switch(type){
                                                                case 'keydown':
                                                                        if(keycode === 37) this.downKeyLeft= true;
                                                                           else if(keycode===39)  this.downKeyRight = true;
                                                                        break;
                                                                case 'keyup':
                                                                        if(keycode === 37)
                                                                                this.downKeyLeft= false;
                                                                        else if        (keycode===39)
                                                                                this.downKeyRight = false
                                                                        else{
                                                                                this.suspend= !this.suspend;
                                                                                !this.suspend && this.start();
                                                                        }

                                                        }
                                                }
                                        },

                                        showText: function(txt, left, top, size){
                                                var c= this.c, tw;
                                                size = size || 60;
                                                c.beginPath();
                                                c.font= size+ 'pt Calibri';
                                                tw= c.measureText(txt).width;
                                                left= left=== undefined ? (elWidth- tw)/2 : left;
                                                top= top=== undefined ? (elHeight- size)/2 : top;
                                                c.fillText(txt, left, top);
                                                c.closePath();
                                        },
                                       

                                }
                                return init;
                        }();
                b= new Brick('#zn');
                b.start();
                </script>
        </body>
</html>
               

斜眼君

仅仅打了个9500
另外报告一些可能的BUG
空格会把屏幕往下拉导致食物
左右键可能导致翻页界面过大

Ayomira

只适合下载玩，空格键害人啊

梦里的蝴蝶

按空格键前算好位置，他还有个问题，我来不及看分数