Beranda>Tutorial Desain Web>Tutorial Javascript

JS mengimplementasikan permainan biliar 2D

Penulis：Eve Cole Waktu Pembaruan：2009-10-27 18:42:56

DEMO: http://cnwander.com/demo/billiards/
Alamat asli: http://cnwander.com/blog/?p=11

Seri permainan mini JS:
[Mini-game JS] Ular + komentar mendetail

Paste dulu kodenya:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>Biliar oleh CNwander</title>
<gaya tipe="teks/css">
* {margin:0; bantalan:0}
isi {latar belakang:hitam; perataan teks:tengah;
h1 {ukuran font:12px; warna:abu-abu; berat font:normal; tinggi garis:200%}
h1 .sub {perataan vertikal:super; warna:merah;
.info {posisi:mutlak; kanan:0; warna:abu-abu}
#tabel {posisi:relatif; lebar:800px; margin:20px otomatis 10px; tinggi:544px; latar belakang:url( ); _background:none; skala', src=" ); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src=" _background :none; .AlphaImageLoader(enabled='true', sizingMethod='scale', src=" ) tanpa pengulangan}
#force {posisi:absolute; kiri:0; atas:18px; lebar:75px; tinggi:20px; latar belakang:url( ) tanpa pengulangan;
#scoreBoard {posisi:absolute; z-index:3; atas:230px; kiri:346px; ukuran font:50px; warna:putih; }
#tips {padding:15px 0 0 20px; perataan teks:kiri; warna:merah;
</gaya>
<skrip tipe="teks/javascript">
// umum
fungsi $(str) {
kembalikan dokumen.getElementById(str);
}
fungsi $tag(str,target) {
sasaran = sasaran ||.
kembalikan target.getElementsByTagName(str);
}
fungsi addEventHandler(obj,eType,fuc){
if(obj.addEventListener){
obj.addEventListener(eType,fuc,false);
}else if(obj.attachEvent){
obj.attachEvent("aktif" + eType,fuc);
}kalau tidak{
obj["on" + eType] = fuc;
}
}
fungsi hapusEventHandler(obj,eType,fuc){
if(obj.removeEventListener){
obj.removeEventListener(eType,fuc,false);
}else if(obj.attachEvent){
obj.detachEvent("aktif" + eType,fuc);
}
}
fungsi RandowNum(awal,akhir) {
return Math.floor(Math.random()*(end - start)) + start;
}
Array.prototipe.hapus=fungsi(dx) {
if(isNaN(dx)||dx>ini.panjangnya){return false;}
for(var i=0,n=0;i<ini.panjang;i++)
{
jika(ini[i]!=ini[dx])
{
ini[n++]=ini[i]
}
}
ini.panjang-=1
}
//konstan
var TOTALR = 15, //Jari-jari bola (termasuk bayangan)
R = 12, //Jari-jari bola sebenarnya
POKER = 20,
W = 736, //lebar kotak
H = 480, //tinggi casing
KETEBALAN = 32, //ketebalan tepi
RATE = 100, //refresh frekuensi
F = 0,01, //gaya gesekan
KERUGIAN = 0,2, // Hilangnya kecepatan tumbukan
TIPS = ["Tip1: Bola referensi, bola sasaran, tas sasaran, tiga poin dan satu garis, ini adalah cara paling dasar untuk mencetak gol", "Tip2: Bilah biru di pojok kanan bawah mewakili kekuatan pukulan. Kekuatan kecil lebih mudah untuk mengontrol posisi bola isyarat","Tip3: Titik biru pada bola putih di sudut kanan bawah mengontrol titik pukulan. Ini mengontrol bar tinggi, bar rendah dan plug ","Tip4: Dalam tenis meja, bola sasaran sebenarnya tidak dimainkan, melainkan bola isyarat"];
tabel var, //kasus
isyaratBall, //bola isyarat
guideBall, //bola referensi
dotWrap, //garis referensi
kecepatan = 12,
gulungan = 0,
putar Kanan = 0,
pengatur waktu,
pengatur waktu paksa,
bola = [],
bola bergerak = [],
tusukan = [[0,0],[W/2,-5],[W,0],[0,H],[W/2,H+5],[W,H]],
hasShot = salah;
tembakan = 0; //Jumlah tembakan kombo

jendela.onload = fungsi() {
initTable();
initShootPos();
tampilkanTips();
mulaiPermainan();
}
fungsi mulaiGame() {
initBall();
addEventHandler(tabel,"mousemove",dragCueBall);
addEventHandler(tabel,"mouseup",setCueBall);
}
fungsi initTable() {
tabel = $("tabel");
var dotWrapDiv = dokumen.createElement("div"),
guideBallDiv = dokumen.createElement("div");
dotWrapDiv.id = "dotWrap";
guideBallDiv.className = "bola pemandu";
setStyle(guideBallDiv,"display","tidak ada");
dotWrap = tabel.appendChild(dotWrapDiv);
guideBall = tabel.appendChild(guideBallDiv);
}
fungsi initBall() {
//Tambahkan bola isyarat
cueBall = Bola baru("isyarat",170,H/2);
bola.push(isyaratBola);

//Tambahkan bola target
untuk(var saya = 0; saya < 5; saya++) {
untuk(var j = 0; j <= i; j++) {
var bola = Bola baru("target",520 + i*2*R, H/2 - R*i + j*2*R);
bola.push(bola);
}
}
}
fungsi initShootPos() {
var bungkus = $("shootPos"),
pengendali = $("titik"),
panahR = 18;
addEventHandler(wrap,"mousedown",selectDot);
fungsi pilihTitik(e) {
e = e ||.
var pos = getElemPos(bungkus),
x = e.clientX - pos[0] - handler.offsetWidth/2,
y = e.clientY - pos[1] - handler.offsetHeight/2;

if(Matematika.sqrt((x-22)*(x-22) + (y-22)*(y-22)) > panahR) {
var sudut = Math.atan2(x-22,y-22);
x = panahR*Matematika.sin(sudut) + 22;
y = panahR*Matematika.cos(sudut) + 22;
}
setPos(penangan,x,y);
}
}
fungsi getElemPos(target,referensi) {
referensi = referensi ||.
var kiri = 0,atas = 0;
kembalikan getPos(target);
fungsi getPos(target) {
if(target != referensi) {
kiri += target.offsetKiri;
atas += target.offsetTop;
kembalikan getPos(target.parentNode);
} kalau tidak {
kembali [kiri, atas];
}
}
}
// kelas bola
fungsi Bola(tipe,x,y) {
var div = dokumen.createElement("div");
div.className = ketik + "bola";
this.elem = tabel.appendChild(div);
this.type = mengetik;
ini.x = x; //posisi
ini.y = y;
ini.sudut = 0; //Sudut
this.v = 0; //Kecepatan (tidak termasuk arah)
setBallPos(ini.elem,x,y);
kembalikan ini;
}
fungsi setCueBall() {
deleteEventHandler(tabel,"mousemove",dragCueBall);
hapusEventHandler(tabel,"mouseup",setCueBall);
startShot();
}
fungsi startShot() {
show(cueBall.elem);
addEventHandler(tabel,"mousemove",showGuide);
addEventHandler(tabel,"mousedown",updateForce);
addEventHandler(tabel,"mouseup",shotCueBall);

}
fungsi dragCueBall(e) {
var toX,toY;
e = e ||.
toX = e.clientX - table.offsetLeft - KETEBALAN,
mainanY = e.clientY - table.offsetTop - KETEBALAN;

keX = keX >= R ? keX : R;
toX = toX <= 170 ?toX : 170;
mainanY = mainanY >= R ? mainanY : R;
mainanY = mainanY <= H - R ? mainanY : H - R;

setBallPos(cueBall,toX,toY);
}
fungsi tembakanCueBall() {
hapusEventHandler(tabel,"mousemove",showGuide);
hapusEventHandler(tabel,"mousedown",updateForce);
deleteEventHandler(tabel,"mouseup",shotCueBall);
window.clearInterval(forceTimer);
kecepatan = $("force").offsetWidth * 0,15;
var dotDisX = $("dot").offsetLeft-22,
dotDisY = $("titik").offsetTop-22,
dotDis = Matematika.sqrt(dotDisX*dotDisX + dotDisY*dotDisY),
dotAngle = Matematika.atan2(dotDisX,dotDisY);
rollRight = Math.round(dotDis*Math.sin(dotAngle))/5;
rollUp = -Math.round(dotDis*Math.cos(dotAngle))/5;
var formPos = getBallPos(cueBall.elem),
toPos = getBallPos(panduanBall),
sudut = Math.atan2(toPos[0] - formPos[0],toPos[1] - formPos[1]);

sembunyikan(dotWrap);
sembunyikan(panduanBola);
isyaratBall.v = kecepatan;
isyaratBall.angle = sudut;
movingBalls.push(cueBall);

timer = window.setInterval(roll,1000 / RATE);
}
fungsi tampilkanPanduan(e) {
var dariX,dariY,keX,keY;
e = e ||.
toX = e.clientX - table.offsetLeft - KETEBALAN,
mainanY = e.clientY - table.offsetTop - KETEBALAN;
setBallPos(guideBall,toX,toY);
tampilkan(dotWrap);
show(panduanBola);
garis tarik();

//garis referensi
fungsi garis tarik() {
var titikNum = 16,
pos = getBallPos(cueBall.elem);
dotWrap.innerHTML = "";
dariX = pos[0];
dariY = pos[1];
var partX = (toX - dariX) / dotNum,
partyY = (toY - fromY) / dotNum;
untuk(var i = 1; saya < angka titik; i++) {
var x = dariX + bagianX * i,
y = dariY + pestaY * i;
drawDot(dotWrap,x,y);
}
}
}
fungsi gulungan() {
if(bola bergerak.panjang <= 0) {
if(!hasShot) tembakan = 0;
else tembakan ++; //akumulasi kombo
hasShot = salah;
setStyle($("force"),"width",80+"px");
setPos($("titik"),22,22);
window.clearInterval(pengatur waktu);

if(tembakan > 1) showScore(tembakan); //Tampilkan jumlah kombo
startShot();
}
for(var i = 0; i < movingBalls.length; i++) {
var bola = bola bergerak[i],
sin = Matematika.sin(bola.sudut),
cos = Matematika.cos(bola.sudut);
bola.v -= F;
//Keluarkan bola yang diam
if(Matematika.bulat(bola.v) == 0) {
bola.v = 0;
movingBalls.hapus(i);
melanjutkan;
}
var vx = bola.v * sin,
vy = bola.v * cos;
bola.x += vx;
bola.y += vy;

//Masukkan ke dalam tas
if(isPocket(bola.x,bola.y)) {
sembunyikan(bola.elem);

if(bola.type == "isyarat") {
if(!hasShot) tembakan = 0;
hasShot = salah;
jendela.setTimeout(fungsi(){

bola.v = 0;
setBallPos(bola,170.250);

},500);
}kalau tidak {
//Keluarkan bola yang dikantongi
hasShot = benar;
bola.v = 0;
for(var k = 0, l =0; k < panjang bola; k++) {
if(bola[k] != bola) {
bola[l++] = bola[k];
}
}
bola.panjang -= 1;
}
kembali;
}


//tabrakan tepi
if(bola.x < R || bola.x > W - R) {
bola.sudut *= -1;
bola.sudut %= Matematika.PI;
bola.v = bola.v * (1 - KALAH);
vx = bola.v*Matematika.sin(bola.sudut);
vy = bola.v*Matematika.cos(bola.sudut);
if(bola.x < R) bola.x = R;
if(bola.x > W - R) bola.x = W - R;
//isian bola isyarat
if(bola.type == "isyarat") {
if(bola.sudut > 0) vy -= rollKanan;
lain vy += rollKanan;
vx += rollUp;
rollUp *= 0,2;
putar Kanan *= 0,2;
bola.v = Matematika.sqrt(vx*vx + vy*vy);
bola.sudut = Matematika.atan2(vx,vy);
}
}
if(bola.y < R || bola.y > H - R) {
bola.sudut = bola.sudut > 0 ? Matematika.PI - bola.sudut : - Matematika.PI - bola.sudut ;
bola.sudut %= Matematika.PI;
bola.v = bola.v * (1 - KALAH);
vx = bola.v*Matematika.sin(bola.sudut);
vy = bola.v*Matematika.cos(bola.sudut);
if(bola.y < R) bola.y = R;
if(bola.y > H - R) bola.y = H - R;
//isian bola isyarat
if(bola.type == "isyarat") {
if(Math.abs(ball.angle) < Math.PI/2) vx += rollRight;
lain vx -= rollKanan;
vy += rollUp;
rollUp *= 0,2;
putar Kanan *= 0,2;
bola.v = Matematika.sqrt(vx*vx + vy*vy);
bola.sudut = Matematika.atan2(vx,vy);
}
}

//tabrakan bola
for(var j = 0; j < panjang bola; j++) {
var obj = bola[j];
if(obj == bola) lanjutkan;
var disX = obj.x - bola.x,
disY = obj.y - bola.y,
celah = 2 * R;
if(disX <= celah && disY <= celah) {
var dis = Matematika.sqrt(Matematika.pow(disX,2)+Matematika.pow(disY,2));
jika(dis <= celah) {
//Jika stasioner, tambahkan ke array movingBalls
if(Matematika.bulat(obj.v) == 0)
movingBalls.push(obj);

//Putar koordinat ke sumbu x untuk perhitungan tumbukan

// Hitung nilai sudut dan sinus serta kosinus – nilai eksak
//var c = (obj.x*bola.y - obj.y*bola.x)/(2*R),
// d = Matematika.sqrt(bola.x*bola.x + bola.y*bola.y),
// sudut = Matematika.asin(bola.y/d) - Matematika.asin(c/d) - bola.sudut%(Math.PI/2),
//sudut = Matematika.asin(oy / (2 * R)),

//Kembalikan keadaan singgung kedua bola - nilai perkiraan
bola.x -= (celah - dis)*sin;
bola.y -= (celah - dis)*cos;
disX = obj.x - bola.x;
disY = obj.y - bola.y;

// Menghitung nilai sudut dan sinus serta kosinus
var sudut = Math.atan2(disY, disX),
hitsin = Matematika.sin(sudut),
hitcos = Matematika.cos(sudut),
objVx = obj.v * Matematika.sin(obj.sudut),
objVy = obj.v * Math.cos(obj.angle);
//jejak(sudut*180/Math.PI);

// Memutar koordinat
varx1 = 0,
kamu1 = 0,
x2 = disX * hitcos + disY * hitin,
y2 = disY * hitcos - disX * hitsin,
vx1 = vx * hitcos + vy * hitin,
vy1 = vy * hitcos - vx * hitin,
vx2 = objVx * hitcos + objVy * hitsin,
vy2 = objVy * hitcos - objVx * hitsin;

// Kecepatan dan posisi setelah tumbukan
var plusVx = vx1 - vx2;
vx1 = vx2;
vx2 = tambahVx + vx1;

//isian bola isyarat
if(bola.type == "isyarat") {
vx1 += rollUp;
rollUp *= 0,2;
}

x1 += vx1;
x2 += vx2;

// Memutar posisinya kembali
var x1Final = x1 * hitcos - y1 * hitin,
y1Final = y1 * hitcos + x1 * hitin,
x2Final = x2 * hitcos - y2 * hitin,
y2Final = y2 * hitcos + x2 * hitin;
obj.x = bola.x + x2Final;
obj.y = bola.y + y2Final;
bola.x = bola.x + x1Final;
bola.y = bola.y + y1Final;

// Putar kembali kecepatannya
vx = vx1 * hitcos - vy1 * hitin;
vy = vy1 * hitcos + vx1 * hitin;
objVx = vx2 * hitcos - vy2 * hitin;
objVy = vy2 * hitcos + vx2 * hitin;

//kecepatan akhir
bola.v = Matematika.sqrt(vx*vx + vy*vy) * (1 - 0);
obj.v = Matematika.sqrt(objVx*objVx + objVy*objVy) * (1 - 0);

// Hitung sudut
bola.sudut = Matematika.atan2(vx, vy);
obj.angle = Matematika.atan2(objVx , objVy);


//merusak;
}
}
}

setBallPos(bola,bola.x,bola.y);
}
}
fungsi isPocket(x,y) {
if(y < POKER) kembalikan cek(0,2);
else if (y > H - POKER) return check(3,5);
jika tidak, kembalikan salah;

pemeriksaan fungsi(m,n) {
untuk(var i=m; saya<=n; i++) {
if(x >= tusukan[i][0] - POKER && x <= tusuk[i][0] + POKER) {
var dis = Math.sqrt(Math.pow(x - pokes[i][0],2) + Math.pow(y - pokes[i][1],2));
if(dis <= POKER) mengembalikan nilai benar;
jika tidak, kembalikan salah;
}
}
}

}
fungsi getBallPos(obj) {
var pos = [];
pos.push(obj.offsetLeft - KETEBALAN + TOTALR);
pos.push(obj.offsetTop - KETEBALAN + TOTALR);
pos kembali;
}
fungsi setPos(obj,x,y) {
obj.style.kiri = x + "px";
obj.style.top = y + "px";
}
fungsi setBallPos(bola,x,y) {
if(bola.konstruktor == Bola) {
bola.x = x;
bola.y = y;
bola = bola.elem;
}
setPos(bola,x + KETEBALAN - TOTALR,y + KETEBALAN - TOTALR);
}
fungsi drawDot(bungkus,x,y) {
var elem = dokumen.createElement("div");
setGaya(elemen,{
posisi: "mutlak",
lebar: "1 piksel",
tinggi: "1 piksel",
Ukuran font: "1 piksel",
latar belakang: "putih"
});
setPos(elemen,x,y);
bungkus.appendChild(elem);
}
fungsi pembaruanForce() {
var obj = $("memaksa"),
len = 80,
atas = benar;
forceTimer = window.setInterval(perbarui,10);

pembaruan fungsi() {
if(naik) setStyle(obj,"width",len+++"px");
else setStyle(obj,"lebar",len--+"px");
if(len > 136) naik = salah;
if(len <= 0) naik = benar;
}

}
fungsi setGaya() {
if(argumen.panjang == 2 && tipe argumen[1] == "objek") {
for(kunci var dalam argumen[1]) {
argumen[0].gaya[kunci] = argumen[1][kunci];
}
} else if (argumen.panjang > 2) {
argumen[0].gaya[argumen[1]] = argumen[2];
}
}
fungsi sembunyikan(obj) {
setStyle(obj,"tampilan","tidak ada");
}
pertunjukan fungsi(obj) {
setStyle(obj,"tampilan","blok");
}
//keluaran informasi
jejak fungsi(sth,siapa) {
siapa = siapa ||.$("tips");
if(dokumen.semua) who.innerText = sth;
lain siapa.textContent = sth;
kembalikan siapa;
}
fungsi showScore(n) {
var bungkus = $("Papan Skor");
trace(n+"batang penghubung",bungkus);
fadeIn(bungkus);
}
fungsi fadeIn(obj){
var dariY = 230,
posLangkah = [8,14,19,23,26,28,29,29,30,30,30],
opaStep = [0,0.05,0.1,0.15,0.2,0.25,0.3,0.4,0.5,0.6,0.8],
dariOpa = 0,
t = 0,
langkah = posStep.panjang,
inTimer = jendela.setInterval(showIn,20),
pengatur waktu;

fungsi tampilkan() {
setOpacity(obj,opaStep[t]);
obj.style.top = dariY + posStep[t] + "px";
t++;
jika(t>=langkah) {
window.clearInterval(dalamTimer);
outTimer = jendela.setInterval(fadeOut,50);
}
}

fungsi fadeOut() {
T--;
setOpacity(obj,opaStep[t]);
obj.style.top = dariY + posStep[t] + "px";
jika(t <= 0) {
window.clearInterval(outTimer);
sembunyikan(obj);
}
}

}
fungsi setOpacity(obj,n) {
obj.style.cssText = "filter:alpha(opacity="+ n*100 +"); -moz-opacity:"+ n +"; opacity:"+ n;
}
fungsi tampilkanTips() {
var saya = 0;
tip();
window.setInterval(tip,3000);

tip fungsi() {
jejak(TIPS[i++]);
if(i >= TIPS.panjang) i = 0;
}
}
</skrip>
</kepala>
<tubuh>
<div class="info">Diskusikan: <a href=" http://bbs.blueidea.com/thread-2951566-1-1.html"> Blueidea</a > <a href=" http: //cnwander.com/blog/?p=11">Ruang pengembara</a></div>
<h1>Orang-orang Tiongkok berdiri! <span class="sub">Hari Jadi ke-60</span></h1>
<div id="tabel">
<div id="papan skor"></div>
</div>
<div kelas="bot">
<div id="tips"></div>
<kelas div = "ctrl">
<div id="kekuatan"></div>
<div id="shootPos">
<div id="titik"></div>
</div>
</div>
</div>
</tubuh>
</html>

Meskipun tanpa malu-malu disebut tenis meja, sebenarnya ini jauh dari tenis meja sebenarnya, dan masih banyak hal yang perlu ditingkatkan.
Masalah khusus yang harus diselesaikan:

  1. Karena frekuensi penyegaran browser tidak boleh terlalu tinggi, ada kemungkinan ketika jarak antara dua bola terdeteksi, kedua bola tersebut sudah sebagian besar tumpang tindih atau bahkan bersilangan seluruhnya.
    Mengabaikan situasi persilangan sepenuhnya, jika bagian yang tumpang tindih dikembalikan ke keadaan singgung yang tepat, pengoperasiannya akan sangat lambat, jadi saya hanya menggunakan perkiraan dengan perhitungan yang lebih sedikit. Masalah spesifiknya terutama tercermin dalam kick-off, dan tabrakan multi-bola agak aneh.
    (Jika ada yang punya metode perhitungan optimasi yang bagus dan bisa membaginya dengan Wander, Wander akan sangat berterima kasih)
  2. Masalah gesekan antara bola yang menggelinding dan permukaan meja. Misalnya, pada saat bola mengenai bola, gaya gesek pada keadaan menggeser bola isyarat akan lebih besar dari gaya gesek saat menggelinding ke depan, lebih kecil dari gaya gesek saat tongkat ditarik, dan seterusnya. Masalah ini mudah diselesaikan, tetapi tidak dipertimbangkan di awal dan tidak ditambahkan kemudian. Khususnya, setelah dua bola bertabrakan, bola yang bertabrakan akan benar-benar diam, dan ini tidak benar.
  3. Masalah kehilangan energi, terlepas dari tumbukan dengan tepi atau tumbukan bola ke bola, adalah dengan mengurangi nilai tetap secara langsung, yang tentunya merupakan masalah besar.

Pasti akan ada banyak masalah lainnya. Saya khawatir saya akan terlalu terganggu selama liburan dan tidak dapat melanjutkannya nanti. Saya akan menyelesaikan semuanya sekaligus sedikit terburu-buru, nanti saya selesaikan soalnya pelan-pelan, saya posting dulu untuk siswa yang tertarik dengan topik ini.

Matematika perguruan tinggi pada dasarnya hanyalah formalitas, dan saya hanya sedikit melupakan fisika dan matematika di sekolah menengah.Hanya ketika saya benar-benar mulai melakukan sesuatu, saya menyadari bahwa saya terlalu lemah dalam bidang ini daerah akan memberi saya beberapa saran.

Artikel Terkait