<!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;">
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>
- 大小: 11 KB
分享到：
相关推荐
html2canvas 的 @1.0.0-rc.4 版本，兼容IOS13，npm install时候安装版本不对可以直接下载这个，选择dist内的js文件引入
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
html2canvas-1.0.0-rc.4版本
canvas绘制基础图形（canvas 气泡框 网格线 三角形 圆角矩形 箭头）1.初始化画布 initCanvas * 2.绘制网格线 drawGridlines * 3.绘制圆点 drawDot * 4.绘制圆环 drawRing
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
前端canvas小游戏-爱心鱼，大鱼吃到水中的浮游生物后喂给小鱼吃，维持小鱼生存。
js 小游戏 canvas版连连看 内置20张地图 图片素材来源于网络 仅限学习使用 js 小游戏 canvas版连连看 内置20张地图 图片素材来源于网络 仅限学习使用
打砖块一个用HTML5 canvas写的最简单的打砖块游戏。随着剩余砖块数量的减小，球运动的速度会越来越大。样例：
Canvas，Delphi中的画布，本压缩包中包含了四个特效，我也是从网上找的教程，但教程中有点小错误，也可能是有的站长复制粘贴时不小心哈，我研究了下教程后就直接做成了程序了。喜欢的朋友拿去。。。
asp-net-mvc-canvasjs-chart-samples，.NET的MVC图表组件
Canvas的实际使用--自定义搜索效果 资源博客地址：http://blog.csdn.net/wangwo1991/article/details/77940721
解决了不能识别颜色的问题报错
修改html2canvas.js源码,可以解决截图不全问题.使用方式参考 http://blog.csdn.net/q2365921/article/details/54377479
基于微信小程序非Canvas的五子棋小游戏demoWXApp-FiveStone-master.zip
H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏 H5 canvas 实现小游戏
canvas-nest.js一个基于html5 canvas绘制的网页背景效果
Canvas动画转视频-前段框架whammy，由于英文比较晦涩难懂，接下来就实践一下体会whammy的用法。
这会将JavaScript文件相对于当前目录安装在./node_modules/blueimp-canvas-to-blob/js/ ，您可以从中将它们复制到Web服务器提供的文件夹中。 接下来，在HTML标记中包含缩小JavaScript Canvas to Blob脚本： < ...
canvas绘制音频波形demo