<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>bricks</title></head><body><canvas id="canvas3" width="500" height="500" style=" background:#333333;border:1px solid #000;" data-mce-style="background: #333333; border: 1px solid #000;"> your browser doesn't support this element! </canvas><script type="text/javascript"> var vas = document.getElementById("canvas3"); if(vas && vas.getContext){ var o = vas.getContext("2d"); var x = 130, //圆心x y = 430, //圆心y r = 10, //圆半径r dx=1.5, //圆心移动增量x dy= -7, //圆心移动增量y time = 10, //间隔时间 oWidth = 500, //canvas画布宽 oHeight = 500, //canvas画布高 wRect = 100, //接球的矩形的宽 hRect = 10, //接球的矩形的高 iLeft = oWidth/2, //接球矩形默认的left dLeft = 5, //按键盘左右接球矩形水平增量 rightDown = false, //是否在按键盘右方向键 leftDown = false, //是否在按键盘左方向键 bricks, //砖块 rows = 5, //砖块行数 cols = 10, //砖块列数 padding = 1, //砖块间隔 wBricks = oWidth/cols - padding, //砖块宽度 hBricks = 12, //砖块的高度 color =[ [255,0,0], [255,255,0], [0,255,0], [0,255,255], [0,0,255], [255,0,0] ], colors,//颜色 randomColor; function initBricks(){ bricks = new Array(rows); for(var k = 0;k < rows; k++){ bricks[k] = new Array(cols); for(var n = 0;n < cols; n++){ bricks[k][n] = 1; } } } initBricks(); function initColor(){ colors = new Array(rows); for(var k = 0;k < rows; k++){ colors[k] = new Array(cols); for(var n = 0;n < cols; n++){ randomColor = Math.floor(Math.random()*6); colors[k][n] = "rgb("+color[randomColor][0]+","+color[randomColor][1]+","+color[randomColor][2]+")"; } } } initColor(); var t = setInterval(function(){ o.clearRect(0,0,oWidth,oHeight); o.beginPath(); for(var s = 0;s < rows; s++){ for(var m = 0;m < cols; m++){ if(bricks[s][m] == 1){ o.fillStyle = colors[s][m]; o.fillRect(m * (wBricks + padding) + padding,s * (hBricks + padding) + padding,wBricks,hBricks); } } } o.fillStyle="#000"; o.arc(x,y,r,0,Math.PI*2,true); if(rightDown){ iLeft += dLeft; if(iLeft + wRect >= oWidth){ iLeft = oWidth - wRect; } } if(leftDown){ iLeft -= dLeft; if(iLeft <= 0){ iLeft = 0; } } o.fillRect(iLeft,oHeight - hRect,wRect,hRect); o.closePath(); o.fill(); if(y - r <= rows * (hBricks + padding)){ var this_col = Math.floor(x / (wBricks + padding)), this_row = Math.floor((y - r) / (hBricks + padding)); if(this_row == rows){ this_row = this_row -1; } var this_bricks = bricks[this_row][this_col]; if(this_bricks == 1){ bricks[this_row][this_col] = 0; dx = -dx; dy = -dy; } } if(x + r + dx > oWidth || x - r + dx < 0){ dx = -dx; } if(y - r + dy < 0){ dy = -dy; }else if(y + r + dy > oHeight - hRect){ if(x + r > iLeft && x - r < iLeft + wRect){ dy = -dy; }else{ if(y + r + dy > oHeight){ clearInterval(t); t = null; } } } x += dx; y += dy; },time); function keyFn(e){ var E = e || window.event; document.onkeydown = function(E){ if(E.keyCode == 39){ rightDown = true; }else if(E.keyCode == 37){ leftDown = true; } }; document.onkeyup = function(E){ if(E.keyCode == 39){ rightDown = false; }else if(E.keyCode == 37){ leftDown = false; } } } vas.onmousemove = function(e){ var E = e || window.event; iLeft = getMous(E).x - getPos(this).x; if(iLeft + wRect >= oWidth){ iLeft = oWidth - wRect; } } keyFn(); } function getPos(obj){ var X = 0,Y = 0,D = document.documentElement || document.body; if(obj.getBoundingClientRect){ X = obj.getBoundingClientRect().left + D.scrollLeft - D.clientLeft; Y = obj.getBoundingClientRect().top + D.scrollTop - D.clientTop; }else{ while(obj && obj != document.body){ X += obj.offsetLeft; Y += obj.offsetTop; obj = obj.offsetParent; } } return { "x" : X, "y" : Y } } function getMous(e){ var e = e || window.event,X = Y = 0,D = document.documentElement || document.body; if(e.pageX && e.pageY){ X = e.pageX; Y = e.pageY; }else{ X = e.clientX + D.scrollLeft - D.clientLeft; Y = e.clientY + D.scrollTop - D.clientTop; } return { "x" : X, "y" : Y } } </script></body></html>