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 05 HTML / CSS
css3 border-radius属性详解
Jul 05 HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 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
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
html5清空画布方法(三种)
2017/10/16 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
怎样声明一个匿名的内部类
2016/06/01 面试题
教导处工作制度
2014/01/18 职场文书
法人委托书范本
2014/04/04 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
研讨会致辞
2015/07/31 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers