Rumah > Artikel > hujung hadapan web > 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
Salin kod
【Tindakan tetikus】
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做动画了,然后鼠标按键抬起时通过计算力量计的大小来确定白球的速度,然后再分解成水平速度以及垂直速度赋给白球。同时取水平速度以及垂直速度赋给白球。同时取涠以抬起的事件绑定,把辅助虚线以及力量计隐藏。
【动画舞台】
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);
}
}
}
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