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实现Material Design效果
Mar 09 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 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读取xml实例代码
2010/01/28 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
jquery蒙版控件实现代码
2010/12/08 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python简单I/O操作示例
2019/03/18 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python实现一个猜拳游戏
2020/04/05 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
煤矿安全生产月活动总结
2014/07/05 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
婚宴父亲致辞
2015/07/27 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS