Комментарий: мяч может свободно перемещаться в коробку, а черные кирпичи можно контролировать, чтобы перемещаться вверх и вниз, влево и вправо через ключ направления, чтобы столкнуться с мячом. Конкретные идеи и коды реализации следующие. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что для всех будет полезно изучать html5.
Демо -адрес
Краткое введение
Мяч может свободно перемещаться в коробку
Черный кирпич можно контролировать, чтобы двигаться вверх и вниз, влево и вправо через направление, чтобы столкнуться с мячом
Реализация кода
<!-
Чтобы изменить этот шаблон, выберите инструменты | Шаблоны
и откройте шаблон в редакторе.
->
<! Doctype html>
<html>
<голова>
<Title> Table Tennis Game </title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<Скрипт>
var ctx;
вар холст;
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;
}
иначе 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)
вернуть истину;
еще
вернуть ложь;
}
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 (пересечь (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 (пересечь (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 (пересечь (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 (пересечь (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 (событие == null)
{
KeyCode = window.event.keyCode;
window.event.preventdefault ();
}
еще
{
KeyCode = event.KeyCode;
Event.preventDefault ();
}
переключатель (KeyCode)
{
Случай 37: // осталось;
Wall_x- = единица;
if (wall_x <bound_left)
wall_x = bound_left;
перерыв;
Случай 38: // up
Wall_y- = единица;
if (wall_y <bound_top)
wall_y = bound_top;
перерыв;
Случай 39: // Правильно
Wall_x+= единица;
if (wall_x+wall_width> bound_right)
Wall_x = bound_right-wall_width;
перерыв;
Случай 40: // вниз
Wall_y+= единица;
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 (); // Примечание
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', ove_wall, false); // Примечание
}
</script>
</head>
<тело>
<Canvas> </canvas>
</body>
</html>
сложность
Обнаружение столкновений и обработка столкновений с небольшими шариками и кирпичами
Разложить кирпич на 4 сегмента линии
Обнаружение столкновения выполняется на мяче и в каждом сегменте линии соответственно.
Обнаружение столкновений шаров и линейных сегментов представлено в другой статье.