HTML5-CANVAS做的打砖块游戏

最近在学习HTML5,做了一个打砖块游戏。。。。

  点我看效果哦

 

<!DOCUTYPE HTML>
<html>
    <head>
        <title>
            打砖块. by 一只柯楠
        </title>
        <style type="text/css">
            #zn{
                border: 10px red solid;
                margin: 0 auto;
                display: block;
            }
        </style>
    </head>
    <body>
        <h1>打砖块</h1>
        <hr />
        空格键:暂停;<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=== 32){
                            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>

转自:www.6m5m.com

6m5m是中国最好的、最安全的游戏素材资源共享与交易网站,提供各种游戏素材下载,游戏素材交易,游戏源码下载,3d游戏模型,2d游戏图片,游戏音效,原创游戏作品等最新的游戏开发资源。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭