html5 乒乓球(碰撞检测)实例二


Posted in HTML / CSS onJuly 25, 2013

html5 乒乓球(碰撞检测)实例二

演示地址

http://koking.8u.hanmandarin.com/html5/1.html

简单介绍

小球可以在方框内部自由运动
可以通过方向键控制黑色砖块上下左右移动去与小球发生碰撞

代码实现

复制代码
代码如下:

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title>乒乓球游戏</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
var ctx;
var canvas;
var ball_x=10;
var ball_y=10;
var ball_radius=10;
var ball_vx=10;
var ball_vy=8;
var wall_x=30;
var wall_y=40;
var wall_width=30;
var wall_height=60;
var box_x=0;
var box_y=0;
var box_width=300;
var box_height=300;
var bound_left=box_x+ball_radius;
var bound_right=box_x+box_width-ball_radius;
var bound_top=box_y+ball_radius;
var bound_bottom=box_y+box_height-ball_radius;
var unit=10;
function intersect(sx, sy, fx, fy, cx, cy, rad)
{
var dx;
var dy;
var t;
var rt;
dx = fx - sx;
dy = fy - sy;
t = 0.0 - (((sx - cx) * dx + (sy - cy) * dy) / (dx * dx + dy * dy));
if (t < 0.0)
{
t = 0.0;
}
else if (t > 1.0)
t = 1.0;
var dx1 = (sx + t * dx) - cx;
var dy1 = (sy + t * dy) - cy;
var rt = dx1 * dx1 + dy1 * dy1;
if (rt < rad * rad)
return true;
else
return false;
}
function move_ball()
{
ball_x=ball_x+ball_vx;
ball_y=ball_y+ball_vy;
if(ball_x<bound_left)
{
ball_x=bound_left;
ball_vx=-ball_vx;
}
if(ball_x>bound_right)
{
ball_x=bound_right;
ball_vx=-ball_vx;
}
if(ball_y<bound_top)
{
ball_y=bound_top;
ball_vy=-ball_vy;
}
if(ball_y>bound_bottom)
{
ball_y=bound_bottom;
ball_vy=-ball_vy;
}
//撞到上边
if(intersect(wall_x,wall_y,wall_x+wall_width,wall_y+wall_height,ball_x,ball_y,ball_radius))
{
ball_y=wall_y-ball_radius;
ball_vy=-ball_vy;
}
//撞到左边
if(intersect(wall_x,wall_y,wall_x,wall_y+wall_height,ball_x,ball_y,ball_radius))
{
ball_x=wall_x-ball_radius;
ball_vx=-ball_vx;
}
//撞到右边
if(intersect(wall_x+wall_width,wall_y,wall_x+wall_width,wall_y+wall_height,ball_x,ball_y,ball_radius))
{
ball_x=wall_x+wall_width+ball_radius;
ball_vx=-ball_vx;
}
//撞到下边
if(intersect(wall_x,wall_y+wall_height,wall_x+wall_width,wall_y+wall_height,ball_x,ball_y,ball_radius))
{
ball_y=wall_y+wall_height+ball_radius;
ball_vy=-ball_vy;
}
}
function move_wall(ev)
{
var keyCode;
if(event==null)
{
keyCode=window.event.keyCode;
window.event.preventDefault();
}
else
{
keyCode=event.keyCode;
event.preventDefault();
}
switch(keyCode)
{
case 37://left;
wall_x-=unit;
if(wall_x<bound_left)
wall_x=bound_left;
break;
case 38://up
wall_y-=unit;
if(wall_y<bound_top)
wall_y=bound_top;
break;
case 39://right
wall_x+=unit;
if(wall_x+wall_width>bound_right)
wall_x=bound_right-wall_width;
break;
case 40://down
wall_y+=unit;
if(wall_y+wall_height>bound_bottom)
wall_y=bound_bottom-wall_height;
break;
default:
break;
}
}
function draw_all()
{
ctx.beginPath();
ctx.clearRect(box_x,box_y,box_width,box_height);
ctx.fillStyle="rgb(255,0,0)";
//ctx.lineWidth=ball_radius;
ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true);
ctx.fill();//note
ctx.fillStyle="rgb(0,0,0)";
ctx.fillRect(wall_x,wall_y,wall_width,wall_height);
ctx.strokeRect(box_x,box_y,box_width,box_height);
}
function init()
{
canvas=document.getElementById('canvas');
ctx=canvas.getContext('2d');
draw_all();
setInterval(draw_all,100);
setInterval(move_ball,50);
window.addEventListener('keydown',move_wall,false);//note
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

难点

小球和砖块的碰撞检测以及碰撞处理
将砖块分解为4条线段
分别对小球和每条线段进行碰撞检测。

小球和线段的碰撞检测在另一篇文章https://3water.com/html5/93997.html中有介绍。

HTML / CSS 相关文章推荐
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 #HTML / CSS
html5弹跳球示例代码
Jul 23 #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
You might like
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
python批量下载图片的三种方法
2013/04/22 Python
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
HTML的form表单和django的form表单
2019/07/25 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS