HTML5打砖块游戏canvas.doc

使用canvas + js var canvas = document.querySelector(canvas);var paint = canvas.getContext(2d);/画出游戏画布：黑色paint.fillStyle=black;paint.fillRect(0,0,canvas.width,canvas.height);/* * 游戏中每个元素：1，小球、2，砖块、3，挡板； */小球：先画一个小球，让小球滚动起来；var ball_x=40;var ball_y=190;var ball_r=10;var ball_speed_x=5;var ball_speed_y=5;/砖块：定义砖块类，创建砖块对象；function Brick(x,y,width,height)this.x = x;this.y = y;this.width = width;this.height = height;this.isShow = true;/创建砖块var brick_x = 23;var brick_y = 20;var brick_width = 50;var brick_height = 10;var x_off = 5;var y_off = 5;/首先，创建一个砖块/var brick = new Brick(brick_x,brick_y,brick_width,brick_height);/创建50个砖块var bricks = new Array();for(i=0;i canvas.width)brick_x = 23;brick_y += brick_height + y_off;/focuson:注意顺序，先创建一个砖块，然后再给x坐标+;var brick = new Brick(brick_x,brick_y,brick_width,brick_height);brick_x += brick_width + x_off;bricks.push(brick);/挡板：创建挡板var box_x = 10;var box_y = 280;var box_width = 80;var box_height = 15;/定义方法，让挡板跟随鼠标移动canvas.onmousemove = function(e)box_x = e.pageX - canvas.width + 200;/清除小球轨迹function clearcanvas()paint.beginPath();paint.fillStyle=black;paint.fillRect(0,0,canvas.width,canvas.height);paint.closePath();setInterval(function()/清除小球移动痕迹clearcanvas();/绘制小球paint.fillStyle=aqua;paint.arc(ball_x,ball_y,ball_r,0,2*Math.PI,false);paint.fill();/绘制一个砖块/paint.fillStyle=aqua;/paint.fillRect(brick.x,brick.y,brick.width,brick.height);/绘制50个砖块paint.fillStyle=aqua;for(i=0;i 砖.x & 球_x - 球_r 砖.y & 球_y - 球_r bricksi.x & ball_x-ball_r bricksi.y & ball_y-ball_r box_x & ball_x-ball_r box_y & ball_y-ball_r=canvas.width