コメント:ボールは箱の中を自由に動かすことができ、黒いレンガを制御して、ボールと衝突する方向キーを左右に上下に動かすことができます。特定の実装のアイデアとコードは次のとおりです。興味のある友達はそれを参照できます。誰もが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つのラインセグメントに分解します
衝突検出は、それぞれボールと各ラインセグメントで実行されます。
別の記事では、ボールとラインセグメントの衝突検出が紹介されています。