Komentar: Bola dapat bergerak bebas di dalam kotak, dan batu bata hitam dapat dikontrol untuk bergerak ke atas dan ke bawah, kiri dan kanan melalui kunci arah untuk bertabrakan dengan bola. Ide dan kode implementasi spesifik adalah sebagai berikut. Teman yang tertarik dapat merujuknya. Saya harap akan sangat membantu bagi semua orang untuk belajar html5.
Alamat demo
Pendahuluan singkat
Bola bisa bergerak bebas di dalam kotak
Bata hitam dapat dikontrol untuk bergerak ke atas dan ke bawah, kiri dan kanan melalui kunci arah untuk bertabrakan dengan bola
Implementasi Kode
<!-
Untuk mengubah template ini, pilih Tools | Template
dan buka template di editor.
->
<! Doctype html>
<Html>
<head>
<title> Table Tennis Game </title>
<meta http-equiv = "konten tipe" 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;
unit var = 10;
Fungsi 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;
}
lain jika (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)
Kembali Benar;
kalau tidak
mengembalikan 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;
}
// jatuh ke atas
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;
}
// crash di sebelah kiri
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;
}
// crash ke kanan
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;
}
// jatuh
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 ();
}
kalau tidak
{
KeyCode = Event.KeyCode;
event.preventdefault ();
}
sakelar (kode kunci)
{
Kasus 37: // Kiri;
wall_x- = unit;
if (wall_x <bound_left)
wall_x = bound_left;
merusak;
Kasus 38: // Up
wall_y- = unit;
if (wall_y <bound_top)
wall_y = bound_top;
merusak;
Kasus 39: // Benar
wall_x+= unit;
if (wall_x+wall_width> bound_right)
wall_x = bound_right-wall_width;
merusak;
Kasus 40: // Down
wall_y+= unit;
if (wall_y+wall_height> bound_bottom)
wall_y = bound_bottom-wall_height;
merusak;
bawaan:
merusak;
}
}
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);
}
fungsi 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> </an Canvas>
</body>
</html>
kesulitan
Deteksi tabrakan dan perawatan tabrakan bola dan batu bata kecil
Mengurai batu bata menjadi 4 segmen garis
Deteksi tabrakan dilakukan pada bola dan masing -masing segmen baris.
Deteksi tabrakan segmen bola dan garis diperkenalkan di artikel lain.