hujung hadapan web
Tutorial H5
Tutorial membuat permainan pingpong yang mudah dengan petua tutorial HTML5_html5
Tutorial membuat permainan pingpong yang mudah dengan petua tutorial HTML5_html5
Dengan cara ini, ini hanyalah DEMO yang mudah. Saya tidak terlalu memikirkan permainan, peraturan permainan, dsb. Jika anda berminat untuk memperhalusinya, anda boleh memperhalusinya, seperti memperhalusi peraturan, suis permainan, menambah bunyi, memperhalusi pengesanan matlamat dan lebih ketat lagi. . Periksa kekuatan pukulan, geseran sebenar meja, dsb. untuk menjadikan permainan lebih seperti permainan. Saya hanya memberi anda beberapa idea pengaturcaraan, cuma ambil demo dan ia tidak akan menyeronokkan untuk dimainkan~~
Permainan Snuker
Terdapat dua kategori dalam keseluruhan permainan snuker, satu ialah bola dan satu lagi ialah garisan sasaran tambahan. Jika anda ingin menjadikan permainan lebih kompleks, anda juga boleh mengabstraksi kelas bentuk untuk mengesan perlanggaran antara bola dan sudut serta gol. Permainan yang saya buat menggunakan pengesanan perlanggaran dinding yang paling mudah, jadi tiada pengesanan perlanggaran antara bola dan bentuk yang tidak sekata Jika anda ingin bermain perlanggaran yang lebih kompleks, anda boleh mencucuk tentang pengesanan perlanggaran mudah Cen An The speech was. masih sangat baik. Baiklah, mari lakukan langkah demi langkah:
【Bola】
Siarkan kod dahulu:
[/code]var Ball = function(x, y, ismine){
this.x = x;
this.y = y;
this. ismine = ismine;
this.oldx = x;
this.oldy = y;
this.vx = 0;
this.vy = 0;
this.radius = ballRadius;
this.inhole = false;this.moving = true;
}
Ball.prototype = {
constructor:Ball,
_paint:function(){
var b = this. ismine ?document.getElementById("wb") : document.getElementById("yb")
if(b.complete) {
ctx.drawImage(b , this.x-this.radius , this.y- Ini .radius, 2*this.radius, 2*this.radius);
ctx.drawimage (b, this.x-this .radius, this.y-his.radius, 2*this.radius, 2* this.radius);
fungsi lama ini this.oldy = this.y;
this.vx = Math.abs(this.vx)<0.1? 0 : (this.vx>0? this.vx-mcl*t : this.vx mcl*t);
this.vy = Math.abs(this.vy)<0.1? 0 : (this.vy>0? this.vy-mcl*t : this.vy mcl*t);
// ini. ;0? -mcl*t : mcl*t;
ini.x = t * ini.vx * pxpm;
this.y = t * this.vy * pxpm;
jika((ini.x<50 && ini.y<50) || (ini.x>370 && ini.x<430 && ini.y<50) || (ini.x > 758 && ini .y<50) ||. (ini.x<46 && ini.y>490) ||. (ini.x>377 && ini.x<420 && ini.y>490) || && this.y>490)){
this.inhole = benar;
jika(this.ismine){ setMasa(fungsi(){
itu. x = 202;
bahawa.y = kanvas.tinggi/2;
that.vy = 0;
that.inhole = palsu;
} , 500 )
}
lain {
document.getElementBy.Id Num").innerHTML) 1
}
}
lain {
jika (this.y > canvas.height - (ballRadius tbw) || ini.y < (ballRadius tbw)){
this.y = this.y < (ballRadius tbw) ? (ballRadius tbw): (canvas.height - (ballRadius tbw));
this.derectionY = !this.derectionY;
> }
jika (this.x > canvas.width - (ballRadius tbw) || this.x < (ballRadius tbw)){
this.x = this.x < (ballRadius tbw) ? (ballRadius tbw): (canvas.width - (ballRadius tbw));
this.derectionX = !this.derectionX;
🎜>
this.moving = false;
lain {
}
}
}[/kod]
Atribut bola: x, y kedudukan bola , vx, bola vy kelajuan mendatar dan kelajuan menegak , ismine mewakili sama ada bola putih atau bola lain (bola yang berbeza melukis gambar yang berbeza dalam kaedah _paint), oldx, oldy digunakan untuk menyelamatkan kedudukan bola sebelumnya. bingkai, tetapi mereka belum digunakan lagi, ia sepatutnya berguna. Tiada apa yang boleh dikatakan tentang kaedah _paint Kaedah _run adalah untuk menjejaki kedudukan bola dan mengira kenaikan anjakan dan kenaikan kelajuan bola berdasarkan masa setiap bingkai bola mcl dan pxpm adalah pemalar , mcl ialah daya geseran, dan pxpm ialah kira-kira Kira nisbah penukaran piksel dan realiti. . . . Kemudian terdapat pengesanan perlanggaran Ini mudah difahami Ia mengira sama ada kedudukan bola melebihi sempadan. Walau bagaimanapun, pengesanan perlanggaran seperti ini sangat longgar Jika anda benar-benar ingin membuat permainan, disyorkan untuk menggunakan sesuatu yang lebih rumit. Terdapat juga kaedah menghentikan bola mengikut kelajuannya.
Salin kod
this.display = false;
}
dotLine.prototype = {
constructor:dotLine,
_ready:function(){
this. panjang = Math .sqrt(Math.pow(this.y1 - this.y0 , 2) Math.pow(this.x1 - this.x0 , 2));
this.dotNum = Math.ceil(this.length /ini. dotlength);
},
_paint:function(){
this._ready();
xadd = this.dotlength*(this.x1 - this.x0)/this. panjang;
yadd = this.dotlength*(this.y1 - this.y0)/this.length;
ctx.save();
ctx.beginPath();
for(var i =1; i<=this.dotNum;i ){
if(i%2!==0){
ctx.moveTo(this.x0 (i-1)*xadd , this.y0 (i -1) *yadd);
ctx.lineTo(this.x0 i*xadd , this.y0 i*yadd);
}
}
ctx.strokeStyle = "#FFF";
ctx .stroke();
ctx.beginPath();
ctx.arc(this.x1, this.y1, ballRadius-2, 0, 2*Math.PI);
ctx. stroke() ;
ctx.restore();
}
}
Hanya lukis garis putus-putus Ini agak mudah bola, dan kemudian lukiskan jarak antara kedua-duanya, dan kemudian ia menjadi garis putus-putus.
Salin kod
untuk(var i=0;i
if(b1 !== b2 && !b1.inhole && !b2.inhole){
var rc = Math.sqrt(Math.pow( b1.x - b2.x , 2) Math.pow(b1.y - b2.y , 2));
if(Math.ceil(rc) < (b1.radius b2.radius)){
if(!b1.moving && !b2.moving) return;
//Dapatkan kenaikan kelajuan selepas perlanggaran
var ax = ((b1.vx - b2.vx)*Math.pow((( b1.x - b2.x) , 2) (b1.vy - b2.vy)*(b1.x - b2.x)*(b1.y - b2.y))/Math.pow(rc , 2)
var ay = ((b1.vy - b2.vy)*Math.pow((b1.y - b2.y) , 2) (b1.vx - b2.vx)*(b1.x - b2. x)*(b1.y - b2.y))/Math.pow(rc , 2)
//Tentukan kenaikan kelajuan kepada bola perlanggaran
b1.vx = b1.vx-ax;< > b1.vy = b1.vy-ay;
b2.vx = b2.vx ax;
b2.vy = b2.vy ay;
//Jarak perlanggaran bola yang betul
var clength = ((b1.radius b2.radius)-rc)/2;
var cx = clength * (b1.x-b2.x)/rc;
var cy = clength * (b1.y- b2. y)/rc;
b1.x = b1.x cx;
b1.y = b1.y cy;
b2.x = b2.x-cx;
b2.y = b2 .y-cy;
}
}
}
}
}
Reka Bentuk Algoritma Perlanggaran Bola Kecil. , yang menerangkan Ia agak terperinci, dan apabila digabungkan, kami mendapat siri formula di atas. Tetapkan kenaikan kelajuan kepada bola perlanggaran. Kerana dalam bingkai apabila dua bola berlanggar, dua bola sebahagiannya bertindih, jadi pembetulan kedudukan mesti dilakukan, jika tidak, bola kecil akan sentiasa berlanggar dan kemudiannya bercantum Prinsip pembetulan kedudukan juga mudah Jarak antara dua bola, hitung lebar kawasan bertindih kedua-dua bola melalui teorem Pythagoras, dan kemudian bahagikan lebar dengan 2 dan tetapkan kedudukan baru kepada bola itu daripada dua bola itu betul-betul sama dengan jarak antara pusat-pusat bola itu.
【Tindakan tetikus】
if(balls[0].moving) return;
document.querySelector(".shotPower").style.display = "block";
document.querySelector(".shotPower").style.top = bola[0].y-60 "px";
document.querySelector(".shotPower").style.left = bola[0].x-40 "px";
document.getElementById("pow").className = "animate";
var x = event.clientX document.body.scrollLeft document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;
var y = event.clientY document.body.scrollTop document.documentElement.scrollTop - document.querySelector( ".view").offsetTop;
dotline.display = true;
dotline.x0 = balls[0].x;
dotline.y0 = balls[0].y;
dotline. x1 = x;
dotline.y1 = y;
window.addEventListener("mouseup" , muHandle , false);
window.addEventListener("mouseup" , mmHandle , false);
fungsi mmHandle(){
var x = event.clientX document.body.scrollLeft document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;
var y = event.clientY document.body. scrollTop document.documentElement.scrollTop - document.querySelector(".view").offsetTop;
dotline.x1 = x;
dotline.y1 = y;
}
fungsi muHandle(){
var x = event.clientX document.body.scrollLeft document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;
var y = event.clientY document.body.scrollTop document.documentElement.scrollTop - document.querySelector(".view").offsetTop;
sudut var = Math.atan((y - bola[0].y)/(x - bola[0].x));
var h = document.getElementById("pow").offsetHeight/document.getElementById ("powbar").offsetHeight;
var v = 60*h;
document.getElementById("pow").style.height = h*100 "%"
bola[0].vx = x - bola[0].x>0 ? v*Math.abs(Math.cos(sudut)): -v*Math.abs(Math.cos(sudut));
bola[0].vy = y - bola[0].y>0 ? v*Math.abs(Math.sin(sudut)): -v*Math.abs(Math.sin(sudut));
document.getElementById("pow").className = "";
window.removeEventListener("mouseup" , muHandle , false);
window.removeEventListener("mousemove" , muHandle , false);
dotline.display = false;
document.querySelector(".shotPower") .style.display = "tiada";
}
},salah);
鼠标动作也比较简单，有js基础的基本上都梡，间作也比较简单。后计算鼠标位置，然后产生辅助虚线，鼠标移动后修改辅助虚线的终点位置。鼠标按下一的时下的时下量计，我就只用用animation做动画了，然后鼠标按键抬起时通过计算力量计的大小来确定白球的速度，然后再分解成水平速度以及垂直速度赋给白球。同时取水平速度以及垂直速度赋给白球。同时取涠以抬起的事件绑定，把辅助虚线以及力量计隐藏。
【动画舞台】
ctx.clearRect(0,0,canvas.width,canvas.height)
var t1 = new Date();
var t = (t1 - t0)/ 1000;
perlanggaran();
balls.foreach(function(){
if(!this.inhole) this._run(t);
});
if(dotline.display){
dotline.x0 = bola[0].x;
dotline.y0 = bola[0].y;
dotline._paint();
}
t0 = t1;
if(!animateStop){
if("requestAnimationFrame" dalam tetingkap){
requestAnimationFrame(animate);
}
else if("webkitRequestAnimationFrame" dalam tetingkap){
webkitRequestAnimationFrame(animate);
}
else if("msRequestAnimationFrame" dalam tetingkap){
msRequestAnimationFrame(animate);
}
else if("mozRequest"AnimationFrame){
mozRequestAnimationFrame(animate);
}
else {
setTimeout(animate , 16);
}
}
}
这个就丏是帧的逻辑处理现场，如果小球进洞了，就不再进行绘制，如果辅助虚线的display，属怐了论虚线的绘制，还有就是计算每一帧的时间。 【常量与初始化】
var ctx = canvas.getContext('2d');
var mcl = 1 , collarg = 0.8 , ballRadius = 15 , t0 = 0 , balls=[] , tbw = 32 , animateStop = benar , powAnimation = palsu;
var dotline;
pxpm = canvas.width/20;
window.onload = function(){
var myball = new Ball(202 , canvas.height/2 , true);
balls.push(myball);
for(var i=0;i< 6;i ){
untuk(var j=0;j
balls.push(other);
}
}
t0 = new Date();
dotline = new dotLine (0,0,0,0);
animateStop = false;
animate();
}
源码地址：
https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Game-demo/snooker
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
