コメント：ボールは箱の中を自由に動かすことができ、黒いレンガを制御して、ボールと衝突する方向キーを左右に上下に動かすことができます。特定の実装のアイデアとコードは次のとおりです。興味のある友達はそれを参照できます。誰もがHTML5を学ぶことが役立つことを願っています。
デモアドレス
簡単な紹介
ボールは箱の中を自由に移動できます
黒いレンガを制御して、方向キーを通って左右に動き、ボールと衝突することができます
コード実装
<！ -
このテンプレートを変更するには、ツールを選択します|テンプレート
エディターでテンプレートを開きます。
- >
<！doctype html>
<html>
<head>
<Title>卓球ゲーム</title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<スクリプト>
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;
関数交差（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の場合（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）
trueを返します。
それ以外
falseを返します。
}
functionmove_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;
}
}
関数move_wall（ev）
{
var keycode;
if（event == null）
{
keycode = window.event.keycode;
window.event.preventdefault（）;
}
それ以外
{
keycode = event.keycode;
event.preventdefault（）;
}
スイッチ（keycode）
{
ケース37：//左;
wall_x- = unit;
if（wall_x <bound_left）
wall_x = bound_left;
壊す;
ケース38：// up
wall_y- = unit;
if（wall_y <bound_top）
wall_y = bound_top;
壊す;
ケース39：//右
wall_x+= unit;
if（wall_x+wall_width> bound_right）
wall_x = bound_right-wall_width;
壊す;
ケース40：//ダウン
wall_y+= unit;
if（wall_y+wall_height> bound_bottom）
wall_y = bound_bottom-wall_height;
壊す;
デフォルト：
壊す;
}
}
関数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）;
}
関数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>
<canvas> </canvas>
</body>
</html>
困難
小さなボールとレンガの衝突検出と衝突治療
レンガを4つのラインセグメントに分解します
衝突検出は、それぞれボールと各ラインセグメントで実行されます。
別の記事では、ボールとラインセグメントの衝突検出が紹介されています。