欢迎来到程序小院

打砖块小游戏

玩法：【点击任意位置开始】左、右箭头键或移动鼠标，球拍接住球弹起消掉砖块，知道打完砖块进入下一个关卡，总共10关，赶紧去闯关吧^^。

开始游戏

html

<canvas id="canvas" width="960" height="520"></canvas>

#d1 {        border: 1px solid transparent;        background-clip: padding-box, border-box;        background-origin: padding-box, border-box;        background-image: linear-gradient(to right, #fff, #fff),            linear-gradient(120deg, #f7716d, #60C4FD, #EDC951, #7ac630,             #f7716d, #60C4FD, #EDC951, #7ac630,#7ac630, #f7716d, #60C4FD, #EDC951, #7ac630);        margin:0 auto;        width: 960px;    }

window.onload = function() {//页面加载完成后执行        Game.setup();    };var ctx = null;//游戏主体var Game = {    canvas: document.getElementById('canvas'),//获取canvas画布    setup: function() {        if (this.canvas.getContext) {            ctx = this.canvas.getContext('2d');//获取ctx            this.width = this.canvas.width;            this.height = this.canvas.height;    Game.runGame();            Ctrl.init();//对键盘、鼠标和触摸监听时间进行初始化        }    },    animate: function() {        Game.play = requestAnimFrame(Game.animate);        //调用requestAnimFrame方法，进行每秒六十次的调用        Game.draw();    },    init: function() {        Background.init();        Hud.init();        Bricks.init();        Ball.init();        Paddle.init();        //this.animate();    },    draw: function() {        ctx.clearRect(0, 0, this.width, this.height);//对canvas画布进行清除        Background.draw();        Bricks.draw();        Paddle.draw();        Hud.draw();        Ball.draw();    },    levelUp: function() {        Hud.lv += 1;        Bricks.init();        Ball.init();        Paddle.init();    },    levelLimit: function(lv) {        if(lv<=10){            return lv;        }        else{        return  10;}    },    runGame: function() {        Game.canvas.removeEventListener('click', Game.runGame, false);        //移除canvas的点击监听，移除当时runGame方法的调用        Game.init();        Game.animate();    },    restartGame: function() {        Game.canvas.removeEventListener('click', Game.restartGame, false);        //移除canvas的点击监听，移除当时restartGame方法的调用        Game.init();    }};//得分与关卡计数器var Hud = {    init: function() {        this.lv =1;        this.score = 0;    },    draw: function() {        ctx.font = '18px helvetica, arial';        ctx.fillStyle = 'white';        ctx.textAlign = 'right';        ctx.fillText('分数: ' + this.score, Game.width - 15, Game.height - 35);        ctx.textAlign = 'right';  ctx.font = '12px helvetica, arial';        ctx.fillText('关卡: ' + this.lv, Game.width - 15, Game.height - 15);    }};//创建游戏开始和结束的画面var Screen = {    create: function() {//具体绘制的方法        ctx.fillStyle = 'rgba(0,0,0,0.6)';        ctx.fillRect(0, 0, Game.width, Game.height);        ctx.fillStyle = this.textColor;        ctx.textAlign = 'center';        ctx.font = '30px helvetica, arial';        ctx.fillText(this.text, Game.width / 2, Game.height / 2);        ctx.fillStyle = '#f7716d';        ctx.font = '14px helvetica, arial';        ctx.fillText(this.textSub, Game.width / 2, Game.height / 2 + 60);    },    gameover: function(score) {//游戏结束画面的设置        this.text = '游戏结束，分数：'+score;        this.textSub = '点击重玩';        this.textColor = '#f7716d';        this.create();//调用本身的图像绘制方法    }};//第3步：显示背景图像var Background = {    init: function() {        this.ready = false;        this.img = new Image();        this.img.src = '/default/game/dzk/background.jpg';        this.img.onload = function() {            Background.ready = true;        };    },    draw: function() {        if (this.ready) {            ctx.drawImage(this.img, 0, 0);        }    }};//第4步：计算矩形砖块的宽度与高度var Bricks = {    gap: 6,    col: 10,    w: 91,    h: 30,    r:5,    init: function() {        //this.row = 3;        //this.row = 2 + Hud.lv;        this.row = 2 + Game.levelLimit(Hud.lv);        //设置每关砖块的行数，调用limit方法        this.total = 0;        //对count二维数组进行赋值        this.count = [this.row];        for (var i = this.row; i--;) {            this.count[i] = [this.col];        }    },    draw: function() {//对砖块绘制的方法        //清除被小球击中的砖块        var i, j;        for (i = this.row; i--;) {            for (j = this.col; j--;) {                if (this.count[i][j] !== false) {                    //碰撞侦测，判断小球是否与当前重绘的砖块发生重叠                    if (Ball.x >= this.x(j) &&//对小球碰撞的砖块进行判断                        Ball.x <= (this.x(j) + this.w) &&                        Ball.y >= this.y(i) &&                        Ball.y <= (this.y(i) + this.h)) {                        //判断条件都为真时，执行下两行代码                        this.collide(i, j);//将碰撞的砖块的值设置为false                        continue;                    }                    ctx.fillStyle=this.gradient(i),                    //ctx.fillRect(this.x(j), this.y(i), this.w, this.h);                        //将砖块绘制成椭圆                    ctx.beginPath();                    ctx.moveTo(this.x(j)+15, this.y(i));                    ctx.lineTo(this.x(j)+90-15, this.y(i));                    ctx.arcTo(this.x(j)+90, this.y(i), this.x(j)+90, this.y(i)+15, this.r);                    ctx.arcTo(this.x(j)+90, this.y(i)+30, this.x(j), this.y(i)+30, this.r);                    ctx.lineTo(this.x(j)+15, this.y(i)+30);                    ctx.arcTo(this.x(j), this.y(i)+30, this.x(j), this.y(i), this.r);                    ctx.arcTo(this.x(j), this.y(i),                        this.x(j)+90, this.y(i), this.r);                    ctx.closePath();                    //ctx.stroke();                    ctx.fill();                }            }        }        if (this.total === (this.row * this.col)) {        //当计数器等于当前关卡砖块总数时            Game.levelUp();//调用Game里面levelUp的方法(升级关卡)        }    },    collide: function(i, j) {        Hud.score += 1;//如果碰撞判断成立，成绩积分+1        this.total += 1;//计数器+1        //如果发生重叠，将其设定为false，并将小球的y坐标取负        this.count[i][j] = false;        Ball.sy = -Ball.sy;    },    x: function(row) {//返回当前砖块所占用X的区间        return (row * this.w) + (row * this.gap);    },    y: function(col) {//返回当前砖块所占用Y的区间        return (col * this.h) + (col * this.gap);    },    //第5步：给砖块着色    gradient: function(row) {        for(;row>3;){           //按行数循环将砖块着色            row=row-4;}        switch(row) {//对相应的砖块行进行着色            case 0:                return this.gradientPurple ?                    this.gradientPurple :                    this.gradientPurple =                        this.makeGradient(row, '#bd06f9', '#9604c7');            case 1:                return this.gradientRed ?                    this.gradientRed :                    this.gradientRed =                        this.makeGradient(row, '#F9064A', '#c7043b');            case 2:                return this.gradientGreen ?                    this.gradientGreen :                    this.gradientGreen =                        this.makeGradient(row, '#05fa15', '#04c711');           case 3:                return this.gradientOrange ?                    this.gradientOrange :                    this.gradientOrange =                        this.makeGradient(row, '#faa105', '#c77f04');        }    },    makeGradient: function(row, color1, color2) {        var y = this.y(row);        var grad = ctx.createLinearGradient(0, y, 0, y + this.h);        //渐变起始颜色为color1，终止颜色为color2        grad.addColorStop(0, color1);        grad.addColorStop(1, color2);        return grad;    }};

源码

需要源码请关注添加好友哦^ ^

转载：欢迎来到本站，转载请注明文章出处