그런데 이것은 단순한 DEMO일 뿐입니다. 게임 플레이, 게임 규칙 등에 대해서는 별로 생각해본 적이 없습니다. 다듬는 데 관심이 있다면 규칙 다듬기, 게임 전환, 사운드 추가, 골 감지 다듬기 등을 다듬을 수 있으며, 더욱 엄격하게 다듬을 수 있습니다. .샷의 강도, 테이블의 실제 마찰력 등을 확인하여 게임을 더욱 게임처럼 만들어보세요. 프로그래밍 아이디어를 드릴 뿐입니다. 데모만 받아보시면 플레이가 별로 즐겁지 않을 거에요~~
스누커 게임
전체 스누커 게임에는 두 가지 범주가 있는데, 하나는 공이고 다른 하나는 보조 조준선입니다. 게임을 더 복잡하게 만들고 싶다면 모양 클래스를 추상화하여 공과 모서리 및 골 사이의 충돌을 감지할 수도 있습니다. 제가 만든 게임은 가장 간단한 벽 충돌 감지를 사용하기 때문에 공과 불규칙한 모양 간의 충돌 감지가 없습니다. 좀 더 복잡한 충돌을 플레이하고 싶다면 단순 충돌 감지에 대해 찔러볼 수 있습니다. 아직도 아주 좋아요. 좋습니다. 단계별로 해보겠습니다.
【공】
먼저 코드를 게시하세요.
[/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- this .radius , 2*this.radius , 2*this.radius);
(b, this.x-this .radius , this.y-this.radius , 2*this.radius , 2* this.radius);
실행:function(t){
this.oldx = this.x;
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);
// this.vx = this.vx> ;0? -mcl*t : mcl*t;
this.x = t * this.vx * pxpm;
this.y = t * this.vy * pxpm;
if((this.x<50 && this.y<50) || (this.x>370 && this.x<430 && this.y<50) || (this.x > 758 && this .y<50) || (this.x<46 && this.y>490) || (this.x>377 && this.x<420 && this.y>490) || && this.y>490)){
this.inhole = true;
if(this.ismine){
var that = this;
setTimeout(function(){
그거. x = 202;
that.y = canvas.height/2;
that.vx = 0;
that.vy = 0;
that.inhole = false;
} , 500 )
}
else {
document.getElementById("shotNum").innerHTML =parseInt(document.getElementByI d("shotNum").innerHTML) 1
}
}
else {
if(this.y > canvas.height - (ballRadius tbw) || this.y < (ballRadius tbw)){
this.y = this.y < (ballRadius tbw) ? (ballRadius tbw) : (canvas.height - (ballRadius tbw));
this.derectionY = !this.derectionY;
this.vy = -this.vy*0.6;
}
경우 (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.vx = -this.vx*0.6;
~ ~
this.moving = false;
else {
This.moving = true;
}
}
}[/code]
공 속성: x, y 공 위치 , vx, vy 공의 수평 속도 및 수직 속도, ismine은 흰색 공인지 다른 공인지를 나타냅니다(공마다 _paint 메소드에서 서로 다른 그림을 그립니다). oldx, oldy는 이전 공의 위치를 저장하는 데 사용됩니다. 프레임이지만 아직 사용되지 않았으므로 유용할 것입니다. _paint 방법에 대해서는 별로 말할 것이 없습니다. _run 방법은 공의 위치를 추적하고 공의 각 프레임 시간을 기준으로 공의 변위 증가분과 속도 증가분을 계산하는 것입니다. mcl과 pxpm은 모두 상수입니다. , mcl은 마찰력, pxpm은 대략적인 픽셀과 현실 변환 비율을 계산합니다. . . . 그리고 충돌 감지가 있는데, 이는 공의 위치가 경계를 초과하는지 여부를 계산하는 것입니다. 그러나 이런 종류의 충돌 감지는 매우 느슨합니다. 실제로 게임을 만들고 싶다면 좀 더 복잡한 것을 사용하는 것이 좋습니다. 공의 속도에 따라 공을 멈추는 방법도 있다.
코드 복사
this.y1 = this.y1;
this .dotlength = 3;
this.display = false;
}
dotLine.prototype = {
constructor:dotLine,
_ready:function(){
this. 길이 = 수학 .sqrt(Math.pow(this.y1 - this.y0, 2) Math.pow(this.x1 - this.x0, 2));
this.dotNum = Math.ceil(this.length /this.dotlength);
},
_paint:function(){
this._ready();
xadd = this.dotlength*(this.x1 - this.x0)/this. length;
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. 스트로크() ;
ctx.restore();
}
}
점선을 그리면 됩니다. 이것은 비교적 간단합니다. 그리고 두 선 사이에 거리를 그리면 점선이 됩니다.
【다중구 충돌 감지】
코드 복사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
