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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
php date与gmdate的获取日期的区别
2010/02/08 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
使用PDB简单调试Python程序简明指南
2015/04/25 Python
python3使用GUI统计代码量
2019/09/18 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
外贸学院会计专业应届生求职信
2013/11/14 职场文书
给领导的致歉信范文
2014/01/13 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2014年教务工作总结
2014/12/03 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL