html canvas 弹球(模仿)
<!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 弹球(模仿)的更多相关文章
- javascript实例教程使用canvas技术模仿echarts柱状图
canvas 画布是HTML5中新增的标签,可以通过js操作 canvas 绘图 API在网页中绘制图像. 百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图.柱状图.散点图 ...
- Html5最简单的游戏Demo——Canvas绘图的弹弹球
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- java 图形化小工具Abstract Window Toolit :画笔Graphics,画布Canvas(),弹球小游戏
画笔Graphics Java中提供了Graphics类,他是一个抽象的画笔,可以在Canvas组件(画布)上绘制丰富多彩的几何图和位图. Graphics常用的画图方法如下: drawLine(): ...
- [ html canvas 模仿支付宝刮刮卡效果 ] canvas绘图属性 模仿支付宝刮刮卡效果实例演示
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- canvas模仿微信抢红包功能
1.原理:先创建一张img图片,用filter滤镜制作毛玻璃效果. 2.利用绝对定位,使canvas刚好盖在img上面. 3.利用canvas原生clip函数剪辑一个圆形. 地址:http://san ...
- CANVAS模仿龙卷风特效
大学时候,有一段时间对flash比较感兴趣.去图书馆借了一本很厚很厚的falsh书籍. 翻了几页之后,就再没有往后看过.印象比较深的是作者说他用flash完成了一个龙卷风效果. 一直到现在我也没有看到 ...
- canvas学习作业,模仿做一个祖玛的小游戏
这个游戏的原理我分为11个步骤,依次如下: 1.布局, 2.画曲线(曲线由两个半径不同的圆构成) 3.画曲线起点起始圆和曲线终点终止圆 4.起始的圆动起来, 5.起始的圆沿曲线走起来 6.起始的圆沿曲 ...
- 自定义控件(模仿微信ToggleButton控件)
弄过android开发的都知道,系统有一个默认的ToggleButton,但很多人都觉得他很难看,当然也包括我.如果你感觉他不难看,那你就继续使用系统的吧,这篇文章对你来说是多余的了. 今天来写一个模 ...
- Java---实力弹弹球,弹弹弹
直接上代码了. 微调按钮加画布画几个圆,再实现监听... package cn.hncu.threadDemo.thread2; import java.awt.Canvas; import java ...
随机推荐
- 18TH赛事管理
赛事管理者 项目psp: 一.计划 估计这个任务需要7天时间 二.开发 1.需求分析 作为一个赛事管理者,我希望知道每场比赛的队伍得分和积分情况,以便给每队进行排名. 2.生成设计文档 查询出每场得分 ...
- Python_Day8_面向对象编程进阶
本节内容: 面向对象高级语法部分异常处理 经典类vs新式类 静态方法.类方法.属性方法 类的特殊方法 反射 Socket开发基础 经典类vs新式类 classical vs new style: 经典 ...
- Windows 7 封装篇(一)【母盘定制】[手动制作]定制合适的系统母盘
Windows 7 封装篇(一)[母盘定制][手动制作]定制合适的系统母盘 http://www.win10u.com/article/html/10.html Windows 7 封装篇(一)[母盘 ...
- 撤销git reset soft head操作
一不小心在eclipse的git库中执行了Reset Soft(HEAD ONLY)操作,不料界面中竟然没有找到撤销方法(于是心中五味俱全,经过一番折腾,无果还是回归Git本身),最终通过命令行,很快 ...
- centos 忘记密码
装了个 centos 6.8 安装的时候 要输入 新用户和密码 用 新的用户密码 进去后 各种没权限 重新修改 root 密码 一切OK 步骤 1.重新启动Centos,在启动过程中,长按“ ...
- Entity framework在用于WCF时创建数据模型的问题
众所周知,WCF的传输对象,在创建时需要在类名上标识[DataContract]以及在属性上标识[DataMember],当我们在使用Entity framework时(不考虑Code first的情 ...
- 个人学习随笔(psi-blast随笔)
psi-blast学习 最近自己学习了一些新工具,最近在学习关于蛋白质相互作用位点的预测,在学习中,接触了几个新的工具,下面说说自己正在学习的psi-blast. 首先要说我用psi-blast用来做 ...
- C++笔记(1)explicit构造函数
按照默认规定,只有一个参数的构造函数也定义了一个隐式转换,将该构造函数对应数据类型的数据转换为该类对象,如下面所示: class String { String ( const char* p ); ...
- mysql自增主键归零的方法
最近老是要为现在这个项目初始化数据,搞的很头疼,而且数据库的Id自增越来越大,要让自增重新从1开始:那么就用下面的方法吧:方法一: 如果曾经的数据都不需要的话,可以直接清空所有数据,并将自增字段恢复从 ...
- CentOS7 yum 安装git
1.查看系统是否已经安装git git --version 2.CentOS7 yum 安装git yum install -y git 3.安装成功 4.卸载git yum remove git