html5弹跳球示例代码


Posted in HTML / CSS onJuly 23, 2013

html5弹跳球示例代码 

复制代码
代码如下:

<html>
<head>
<meta charset=utf-8>
<title>跳跳球</title>
<script>
//box
var box_x=0;
var box_y=0;
var box_width=300;
var box_height=300;
//注意:定位球采用球的中心
var ball_x=10;
var ball_y=10;
var ball_radius=10;
var ball_vx=5;
var ball_vy=3;
var box_bound_left=box_x+ball_radius;
var box_bound_right=box_x+box_width-ball_radius;
var box_bound_top=box_y+ball_radius;
var box_bound_bottom=box_y+box_height-ball_radius;
//ball
//context
var ctx;
function init()
{
ctx=document.getElementById('canvas').getContext('2d');
ctx.lineWidth=ball_radius;
ctx.fillStyle="rgb(200,0,50)";
move_ball();
setInterval(move_ball,100);//note
}
function move_ball()
{
ctx.clearRect(box_x,box_y,box_width,box_height);
move_and_check();
ctx.beginPath();
ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true);
ctx.fill();
ctx.strokeRect(box_x,box_y,box_width,box_height);
}
function move_and_check()
{
var cur_ball_x=ball_x+ball_vx;
var cur_ball_y=ball_y+ball_vy;
if(cur_ball_x<box_bound_left)
{
ball_vx=-ball_vx;
cur_ball_x=box_bound_left;
}
if(cur_ball_x>box_bound_right)
{
ball_vx=-ball_vx;
cur_ball_x=box_bound_right;
}
if(cur_ball_y<box_bound_top)
{
ball_vy=-ball_vy;
cur_ball_y=box_bound_top;
}
if(cur_ball_y>box_bound_bottom)
{
ball_vy=-ball_vy;
cur_ball_y=box_bound_bottom;
}
ball_x=cur_ball_x;
ball_y=cur_ball_y;
}
</script>
</head>
<body onLoad="init()">
<canvas id="canvas" width="400" height="400"/>
</body>
</html>
HTML / CSS 相关文章推荐
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 #HTML / CSS
canvas使用注意点总结
Jul 19 #HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 #HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 #HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 #HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 #HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 #HTML / CSS
You might like
截获网站title标签之家内容的例子
2006/10/09 PHP
php array_walk() 数组函数
2011/07/12 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python实现按长宽比缩放图片
2018/06/07 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python编写万花尺图案实例
2021/01/03 Python
关于感恩的演讲稿500字
2014/08/26 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
周年庆典答谢词
2015/01/20 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
幽默导游词开场白
2015/05/29 职场文书