HTML5 pingpong (pengesan perlanggaran) contoh two_html5 kemahiran tutorial

Alamat demo

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

Pengenalan ringkas

Bola boleh bergerak bebas di dalam kotak
Anda boleh menggunakan kekunci arah untuk mengawal batu bata hitam untuk bergerak ke atas, bawah, kiri dan kanan untuk berlanggar dengan bola

Pelaksanaan kod

Salin kod

Kod tersebut adalah seperti berikut:

乒乓球游戏


var ctx;
var kanvas;
var ball_x=10;
var ball_y=10;
jari_bola var=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 bersilang(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));
jika (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;
jika (rt < rad * rad)
kembali benar;
lain
kembali palsu;
}
fungsi move_ball()
{
ball_x=ball_x ball_vx;
ball_y=ball_y ball_vy;
jika(bola_x{
bola_x=terikat_kiri;
ball_vx=-ball_vx;
}
jika(bola_x>terikat_kanan)
{
bola_x=terikat_kanan;
ball_vx=-ball_vx;
}
jika(ball_y{
ball_y=bound_top;
ball_vy=-ball_vy;
}
jika(ball_y>bound_bottom)
{
ball_y=bound_bottom;
ball_vy=-ball_vy;
}
//撞到上边
jika(bersilang(dinding_x,dinding_y,dinding_x lebar_dinding,dinding_y dinding_tinggi,ball_x,ball_y,jejari_bola))
{
ball_y=us_y;
ball_vy=-ball_vy;
}
//撞到左边
jika(bersilang(dinding_x,dinding_y,dinding_x,tinggi_dinding_y,bola_x,bola_y,jejari_bola))
{
jejari_bola_x=dinding_x
ball_vx=-ball_vx;
}
//撞到右边
jika(bersilang(dinding_x lebar_dinding,dinding_y,dinding_x lebar_dinding,dinding_ytinggi_dinding,bola_x,bola_y,jejari_bola))
{ ball_vx=-ball_vx;
}
//撞到下边
jika(bersilang(wall_x,wall_y wall_height,wall_x wall_width,wall_y wall_height,ball_x,ball_y,ball_radius))
{ ball_vy=-ball_vy;
}
}
fungsi move_wall(ev)
{
Kod kunci var;
jika(event==null)
{
keyCode=window.event.keyCode;
window.event.preventDefault();
}
lain
{
keyCode=event.keyCode;
event.preventDefault();
}
suis(Kod Kunci)
{
kes 37://kiri;
dinding_x-=unit;
jika(dinding_xdinding_x=diikat_kiri;
pecah;
kes 38://up
wall_y-=unit;
if(wall_ywall_y=bound_top;
pecah;
kes 39://kanan
dinding_x =unit;
jika(wall_x wall_width>bound_right)
wall_x=bound_right-wall_width;
pecah;
kes 40://down
wall_y =unit;
jika(ketinggian_dinding_dinding>diikat_bawah)
dinding_y=tinggi_dinding_bawah_dinding;
pecah;
lalai:
pecah;
}
}
fungsi draw_all()
{
ctx.beginPath();
ctx.clearRect(box_x,box_y,box_width,box_height);
ctx.fillStyle="rgb(255,0,0)";
//ctx.lineWidth=jejari_bola;
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);//nota
}








难点

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

小球和线段的碰撞检测在另一篇文章
http://www.jb51.net/html5/93997.html
中有介绍。