<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹球</title>
</head>

<body>
    <script type="text/javascript">
          window.onload=function(){
                var boxx=20,
                    boxy=20,
                    boxwidth=350,
                    boxheight=250,
                    ballrad=10,
                    boxboundx=boxx+boxwidth-ballrad,//右
                    boxboundy=boxy+boxheight-ballrad,//下
                    inboxboundx=boxx+ballrad,//左
                    inboxboundy=boxy+ballrad,//上
                    ballx=50,
                    bally=60,
                    ctx,
                    ballvx=4,
                    ballvy=8;
                
                function init(){
                    ctx=document.getElementById("canvas").getContext("2d");
                    ctx.fillStyle="rgb(200,0,50)";
                    moveball();
                    setInterval(moveball,50)
                }

function moveball(){
                    ctx.clearRect(boxx,boxy,boxwidth,boxheight);
                    moveandcheck();
                    ctx.beginPath();
                    ctx.arc(ballx,bally,ballrad,0,Math.PI*2,true);
                    ctx.fill();
                    ctx.strokeRect(boxx,boxy,boxwidth,boxheight);

}

function moveandcheck(){
                    var nballx=ballx+ballvx;
                    var nbally=bally+ballvy;

if(nballx > boxboundx){
                       ballvx = -ballvx;
                       nballx = boxboundx;
                    }
                    
                    if(nballx < inboxboundx){
                       nballx = inboxboundx;
                       ballvx = -ballvx;
                    }

if(nbally > boxboundy){
                      nbally = boxboundy;
                      ballvy = -ballvy
                    }

if(nbally < inboxboundy){
                       nbally = inboxboundy;
                       ballvy = -ballvy;
                    }

ballx= nballx;
                    bally= nbally;

}
                
                init();

}
    </script>
    <canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

html canvas 弹球(模仿)的更多相关文章

  1. javascript实例教程使用canvas技术模仿echarts柱状图

    canvas 画布是HTML5中新增的标签,可以通过js操作 canvas 绘图 API在网页中绘制图像. 百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图.柱状图.散点图 ...

  2. Html5最简单的游戏Demo——Canvas绘图的弹弹球

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. java 图形化小工具Abstract Window Toolit ：画笔Graphics，画布Canvas()，弹球小游戏

    画笔Graphics Java中提供了Graphics类,他是一个抽象的画笔,可以在Canvas组件(画布)上绘制丰富多彩的几何图和位图. Graphics常用的画图方法如下: drawLine(): ...

  4. [ html canvas 模仿支付宝刮刮卡效果 ] canvas绘图属性 模仿支付宝刮刮卡效果实例演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  5. canvas模仿微信抢红包功能

    1.原理:先创建一张img图片,用filter滤镜制作毛玻璃效果. 2.利用绝对定位,使canvas刚好盖在img上面. 3.利用canvas原生clip函数剪辑一个圆形. 地址:http://san ...

  6. CANVAS模仿龙卷风特效

    大学时候,有一段时间对flash比较感兴趣.去图书馆借了一本很厚很厚的falsh书籍. 翻了几页之后,就再没有往后看过.印象比较深的是作者说他用flash完成了一个龙卷风效果. 一直到现在我也没有看到 ...

  7. canvas学习作业，模仿做一个祖玛的小游戏

    这个游戏的原理我分为11个步骤,依次如下: 1.布局, 2.画曲线(曲线由两个半径不同的圆构成) 3.画曲线起点起始圆和曲线终点终止圆 4.起始的圆动起来, 5.起始的圆沿曲线走起来 6.起始的圆沿曲 ...

  8. 自定义控件(模仿微信ToggleButton控件)

    弄过android开发的都知道,系统有一个默认的ToggleButton,但很多人都觉得他很难看,当然也包括我.如果你感觉他不难看,那你就继续使用系统的吧,这篇文章对你来说是多余的了. 今天来写一个模 ...

  9. Java---实力弹弹球，弹弹弹

    直接上代码了. 微调按钮加画布画几个圆,再实现监听... package cn.hncu.threadDemo.thread2; import java.awt.Canvas; import java ...

随机推荐

  1. qq加好友加群限制ip怎么解决

    目前各样格式的推广都会用到腾讯QQ,现在就遇到了问题.QQ加好友加群,经常会提示你的账号存在不安全因素,暂停加好友功能.这个原因都是本地同一个IP,登陆的QQ过多,加好友过多.导致这个IP被记录,相当 ...

  2. 个人评测——K米

    K米APP案例分析 关于 K米 -- 的案例分析 产品 K米的APP (全国KTV点歌,手机直播,互动,交友,预订)的Android客户端 第一部分 调研,评测 评测: 软件的bug,功能评测,黑箱测 ...

  3. Java中的JDK动态代理

    所谓代理,其实就是相当于一个中间人,当客户端需要服务端的服务时,不是客户直接去找服务,而是客户先去找代理,告诉代理需要什么服务,然后代理再去服务端找服务,最后将结果返回给客户. 在日常生活中,就拿买火 ...

  4. vs2012配置OpenGL

    1.下载glut包: http://www.opengl.org/resources/libraries/glut/glutdlls37beta.zip 2.将下载的压缩包解压,得到5个文件,如下: ...

  5. IP地址的组成

    IP地址的组成:是因特网上,为了每一台主机分配的,由32位二进制数组成的唯一标识符,包括网络地址和主机地址两部分,网络地址标识一个物理网络,主机地址标识这个网络下的一台主机,其表示形式如下  IP地址 ...

  6. 搜集资料&安装环境

    开始入坑DSP,芯片是TI的TMS320C6678,硬件平台为TI官方的TMS320C6678L开发板. 官方给的资料有很多,各种用户手册.软件支持包,眼花缭乱.先尝试把开发环境搭起来,跑个Hello ...

  7. 50道 Sql语句题

    Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,Tname) 教师表   ...

  8. iOS：使用代理模式监听开关状态改变事件

    记一次解决跨控制器监听开关状态改变的尝试. 为了统一设置UITableViewCell里的内容,自定义了UITableViewCell类的一个基类,命名为SettingCell.SettingCell ...

  9. Windows Store App JavaScript 开发：文件选取器

    正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进 ...

  10. BZOJ3000 Big Number

    由Stirling公式: $$n! \approx \sqrt{2 \pi n} (\frac{n}{e})^n$$ 故:$$\begin{align} ans &= log_k n! + 1 ...