Tutorial membuat permainan pingpong yang mudah dengan petua tutorial 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~~
2015512171509746.png (737×458)

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 {

This.moving = true;

}
}
}[/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

Kod adalah seperti berikut:var dotLine = function(x0,y0, x1,y1 ){ ini.x0 = ini.x0; ini.y0 = ini.y0;

ini.x1 = ini.x1;

ini.y1 = ini.y1;

ini .dotlength = 3;
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.

　【Pengesanan perlanggaran berbilang bola】

Salin kod

Kodnya adalah seperti berikut:

perlanggaran fungsi(){
untuk(var i=0;i for(var j=0;j var b1 = bola[i],b2 = bola[j];
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;
}
}
}
}
}

Lintas semua bola dan hitung jarak antara pusat kedua-dua bola itu kurang daripada jumlah jejari kedua-dua bola, satu perlanggaran telah berlaku. Jika kedua-dua bola kecil pegun, tiada pengesanan perlanggaran akan dilakukan Jika tidak, kenaikan kelajuan selepas perlanggaran akan dikira Kaedah pengiraan kenaikan kelajuan perlanggaran boleh dilihat secara langsung dalam
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】

Salin kodKodnya adalah seperti berikut:

canvas.addEventListener("mousedown" , function(){
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做动画了，然后鼠标按键抬起时通过计算力量计的大小来确定白球的速度，然后再分解成水平速度以及垂直速度赋给白球。同时取水平速度以及垂直速度赋给白球。同时取涠以抬起的事件绑定，把辅助虚线以及力量计隐藏。

　　【动画舞台】

复制代码

代码如下:

function animate(){
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，属怐了论虚线的绘制，还有就是计算每一帧的时间。　【常量与初始化】

复制代码

代码如下:

Dokumen yivar "cas");
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 var lain = baru Bola(520 i*(ballRadius-2)*2 , (kanvas.height-i*2 *ballRadius)/2 ballRadius 2*ballRadius*j , false);
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

Label berkaitan：

html5

sumber：php.cn

Artikel sebelumnya：Tutorial membuat pemberitahuan web menggunakan Pemberitahuan HTML5 API_html5 petua tutorial Artikel seterusnya：Tutorial menggunakan Kanvas dalam HTML5 untuk melukis muka tersenyum_html5 petua tutorial

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