masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > HTML5 melantun bola contoh kod_html5 kemahiran tutorial

HTML5 melantun bola contoh kod_html5 kemahiran tutorial

WBOY
Lepaskan： 2016-05-16 15:49:02
asal
1643 orang telah melayarinya
 

复制代码
代码如下:
<


跳跳球

//kotak
var box_x=0;
var box_y=0;
var box_width=300;
var box_height=300;
//注意:定位球采用球的中心
var ball_x=10;
var ball_y=10;
jari_bola var=10;
var ball_vx=5;
var ball_vy=3;
var box_bound_left=box_x ball_radius;
var box_bound_right=box_x box_width-ball_radius;
var box_bound_top=box_y ball_radius;
var box_bound_bottom=box_y box_height-ball_radius;
//bola
//konteks
var ctx;
fungsi init()
{
ctx=document.getElementById('canvas').getContext('2d');
ctx.lineWidth=jejari_bola;
ctx.fillStyle="rgb(200,0,50)";
move_ball();
setInterval(move_ball,100);//note
}
function move_ball()
{
ctx.clearRect(box_x,box_y,box_width,box_height);
move_and_check();
ctx.beginPath();
ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true);
ctx.fill();
ctx.strokeRect(box_x,box_y,box_width,box_height);
}
fungsi move_and_check()
{
var cur_ball_x=ball_x ball_vx;
var cur_ball_y=ball_y ball_vy;
jika(cur_ball_x{
ball_vx=-ball_vx;
cur_ball_x=box_bound_left;
}
jika(cur_ball_x>box_bound_right)
{
ball_vx=-ball_vx;
cur_ball_x=box_bound_right;
}
jika(cur_ball_y{
ball_vy=-ball_vy;
cur_ball_y=box_bound_top;
}
jika(cur_ball_y>box_bound_bottom)
{
ball_vy=-ball_vy;
cur_ball_y=box_bound_bottom;
}
ball_x=cur_ball_x;
ball_y=cur_ball_y;
}







Label berkaitan：
html5 bola melantun
sumber：php.cn
Artikel sebelumnya：Pramuat HTML5 membolehkan halaman dipaparkan dengan cepat_html5 petua tutorial Artikel seterusnya：Contoh demonstrasi cara menggunakan kemahiran tutorial HTML5 Canvas shadow_html5
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
daripada 2024-04-06 15:33:12
0
1
433
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
daripada 2024-04-02 11:47:56
0
1
275
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan