<!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
分享到：
相关推荐
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
《使用HTML5 Canvas构建打砖块游戏：Hit-The-Bricks》 HTML5 Canvas作为现代网页开发中的一个重要元素，提供了一种在网页上绘制图形的动态方式，它使得开发者能够创建丰富的、交互式的2D游戏。本文将深入探讨如何...
【微信小程序 uni-app wxml-to-canvas】是一个用于在微信小程序中利用静态模板和样式来绘制canvas，并最终能够导出为图片的工具。这个技术在实际应用中特别适合用来生成分享图，即用户在社交平台上分享时看到的个性...
"canvas小游戏－连连看"是一款基于JavaScript和HTML5 Canvas技术实现的经典连连看游戏。Canvas是HTML5中的一个重要元素，它允许开发者在网页上绘制图形，非常适合用来开发各种交互式的2D游戏。在这个项目中，...
在Delphi编程环境中，Canvas是一个非常重要的概念，它是GDI（图形设备接口）的一部分，用于在窗体、控件或其他图形表面进行绘图操作。在这个名为"Canvas1-2-3-4.rar"的压缩包中，我们能看到作者通过Canvas实现了四个...
- 结合canvas的toDataURL方法，可以将生成的Canvas转换为数据URL，用于发送到服务器或在社交媒体上分享。 总的来说，html2canvas@1.0.0-rc.4版本提供了一个强大且可靠的浏览器内HTML转Canvas解决方案，尤其适用于...
在微信小程序中，`ec-canvas` 是一个特殊的画布组件，它能够提供丰富的图形绘制能力，如线条、形状、图像处理等，这对于创建动态图表、游戏、数据可视化等场景非常有用。然而，在实际使用中，开发者可能会遇到一些...
《Leaflet.Canvas-Markers-0.2.0：在地图上绘制高性能的canvas标记》 在Web开发中，地图已经成为一种常见的数据可视化工具，而Leaflet作为一款轻量级的JavaScript库，因其易于使用和强大的功能深受开发者喜爱。本文...
canvas绘制基础图形（canvas 气泡框 网格线 三角形 圆角矩形 箭头）1.初始化画布 initCanvas * 2.绘制网格线 drawGridlines * 3.绘制圆点 drawDot * 4.绘制圆环 drawRing
html2canvas-1.0.0-rc.4版本
微信小程序canvas-drag组件是为了解决在微信小程序中对图片进行编辑的需求而设计的。这个组件基于canvas元素，提供了一种简单的方式让用户在小程序内部实现图片的拉伸、压缩和裁剪操作。通过这个组件，开发者可以...
本项目“canvas小游戏-爱心鱼”是一款利用Canvas技术开发的前端互动游戏，旨在展示Canvas在游戏制作中的应用。 首先，我们要了解Canvas的基本用法。Canvas是一个二维绘图上下文，通过`<canvas>`标签在HTML页面中...
"CanvasLayer-gh-pages.zip" 文件提供了一个基于百度地图API的解决方案，用于实现渐变色轨迹的显示。这是一个JavaScript技术的应用，主要用于增强地图的可视化效果，尤其适用于展示动态轨迹数据，如车辆行驶路径、...
资源分类：Python库 所属语言：Python 资源全名：streamlit_drawable_canvas-0.5.1-py3-none-any.whl 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
JavaScript-Canvas-to-Blob-master库解决了这个问题，确保在这些浏览器中也能正常运行。 Blob对象是JavaScript中用来表示二进制数据的一种方式。它由一个包含二进制数据的数组和一个可选的MIME类型组成，可以用于...
EC-Canvas动态加载是其核心特性之一，允许开发者在运行时根据需要加载图表，减少初始页面的加载负担，提高用户体验。 在EC-Canvas中，动态加载主要涉及到以下几个知识点： 1. **异步加载**：在网页初始化时，可能...
"canvas小游戏开发"的主题聚焦于如何利用JavaScript与canvas结合，创建具有互动性的游戏，比如涉及撞击和消除效果的小游戏。在这样的游戏中，用户可能通过鼠标或触摸屏幕来控制游戏对象，而canvas则负责实时渲染和...
修改html2canvas.js源码,可以解决截图不全问题.使用方式参考 http://blog.csdn.net/q2365921/article/details/54377479
《Canvas小游戏中消灭方块的实现与探索》 在网页开发领域，Canvas作为一个强大的图形绘制API，被广泛用于创建各种动态、交互式的图形效果。在这个名为"消灭方块"的小游戏中，开发者通过Canvas API实现了一个趣味性...
HTML5 Canvas俄罗斯方块2-haiyong.site.zip是一个基于HTML5 Canvas技术开发的俄罗斯方块游戏。该游戏使用了HTML5的新特性，如Canvas绘图、触摸事件处理等，为用户提供了丰富的游戏体验。以下是关于该游戏的一些技术...