HTML5_html5 튜토리얼 팁을 사용하여 간단한 탁구 게임을 만드는 방법에 대한 튜토리얼
- WBOY원래의
- 2016-05-16 15:46:431818검색
그런데 이것은 단순한 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 {
}
}
}[/code]
공 속성: x, y 공 위치 , vx, vy 공의 수평 속도 및 수직 속도, ismine은 흰색 공인지 다른 공인지를 나타냅니다(공마다 _paint 메소드에서 서로 다른 그림을 그립니다). oldx, oldy는 이전 공의 위치를 저장하는 데 사용됩니다. 프레임이지만 아직 사용되지 않았으므로 유용할 것입니다. _paint 방법에 대해서는 별로 말할 것이 없습니다. _run 방법은 공의 위치를 추적하고 공의 각 프레임 시간을 기준으로 공의 변위 증가분과 속도 증가분을 계산하는 것입니다. mcl과 pxpm은 모두 상수입니다. , mcl은 마찰력, pxpm은 대략적인 픽셀과 현실 변환 비율을 계산합니다. . . . 그리고 충돌 감지가 있는데, 이는 공의 위치가 경계를 초과하는지 여부를 계산하는 것입니다. 그러나 이런 종류의 충돌 감지는 매우 느슨합니다. 실제로 게임을 만들고 싶다면 좀 더 복잡한 것을 사용하는 것이 좋습니다. 공의 속도에 따라 공을 멈추는 방법도 있다.
코드 복사
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();
}
}
점선을 그리면 됩니다. 이것은 비교적 간단합니다. 그리고 두 선 사이에 거리를 그리면 점선이 됩니다.
코드 복사
for(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;
//충돌 후 속도 증가분을 가져옵니다
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)
//충돌 공에 속도 증가분 할당
b1.vx = b1.vx-ax;
b1.vy = b1.vy-ay;
b2.vx = b2.vx ax;
b2.vy = b2.vy ay;
//공 충돌 거리 수정
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;
}
}
}
}
}
모든 공을 탐색하고 두 공의 중심 사이의 거리를 계산합니다. 두 공의 반경의 합보다 작아서 충돌이 발생했습니다. 두 작은 공이 모두 정지해 있으면 충돌 감지가 수행되지 않습니다. 그렇지 않으면 충돌 후 속도 증가분이 계산됩니다. 충돌 속도 증가분을 계산하는 방법은 작은 공 충돌의 알고리즘 설계에서 직접 볼 수 있습니다. , 이는 매우 상세하며 결합되면 위의 일련의 공식을 얻습니다.
충돌 공에 속도 증가분을 할당합니다. 두 개의 공이 충돌할 때 프레임에서 두 개의 공이 부분적으로 겹치기 때문에 위치 수정을 수행해야 합니다. 그렇지 않으면 작은 공이 항상 충돌한 후 서로 달라붙게 됩니다. 위치 수정의 원리도 간단합니다. 두 공 사이의 거리, 피타고라스 정리를 통해 두 공이 겹치는 부분의 너비를 계산한 다음 너비를 2로 나누어 새 위치를 공에 할당합니다. 두 공의 거리는 공의 중심 사이의 거리와 정확히 같습니다.
【마우스 액션】
if(balls[0].moving) return;
document.querySelector(".shotPower").style.display = "블록";
document.querySelector(".shotPower").style.top = 공[0].y-60 "px";
document.querySelector(".shotPower").style.left = 공[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 = 공[0].x;
dotline.y0 = 공[0].y;
점선. x1 = x;
dotline.y1 = y;
window.addEventListener("mouseup" , muHandle , false);
window.addEventListener("mousemove" , mmHandle , false);
function 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;
}
function 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;
var angle = Math.atan((y - 공[0].y)/(x - 공[0].x));
var h = document.getElementById("pow").offsetHeight/document.getElementById ("powbar").offsetHeight;
var v = 60*h;
document.getElementById("pow").style.height = h*100 "%"
공[0].vx = x - 공[0].x>0 ? v*Math.abs(Math.cos(각도)) : -v*Math.abs(Math.cos(각도));
공[0].vy = y - 공[0].y>0 ? v*Math.abs(Math.sin(각)) : -v*Math.abs(Math.sin(각));
document.getElementById("pow").className = "";
window.removeEventListener("mouseup" , muHandle , false);
window.removeEventListener("mousemove" , muHandle , false);
dotline.display = false;
document.querySelector(".shotPower") .style.display = "none";
}
},false);
鼠标动事也比较简单，有js基础的基本上書没问题，就是鼠标按下厡算鼠标位置,然后产生辅助虚线,鼠标移动后修改辅助虚线的终点位置. 용용 애니메이션做动画了，然后鼠标按键抬起时过计算력량计的大小来确取消鼠标移动以及鼠标抬起的事件绑定, 把辅助虚线以及력량计隐藏。
【动画舞台】
ctx.clearRect(0,0,canvas.width,canvas.height)
var t1 = new Date();
var t = (t1 - t0)/ 1000;
충돌();
공.foreach(function(){
if(!this.inhole) this._run(t);
});
if(dotline.display){
dotline.x0 = 공[0].x;
dotline.y0 = 공[0].y;
dotline._paint();
}
t0 = t1;
if(!animateStop){
if(창의 "requestAnimationFrame"){
requestAnimationFrame(animate);
}
else if(창의 "webkitRequestAnimationFrame"){
webkitRequestAnimationFrame(animate);
}
else if(창의 "msRequestAnimationFrame"){
msRequestAnimationFrame(animate);
}
else if(창의 "mozRequestAnimationFrame"){
mozRequestAnimationFrame(animate);
}
else {
setTimeout(animate , 16);
}
}
}
这个就是游戏每一帧的逻辑处理现场，如果小球进洞了，就不再进行绘如果辅助虚线的display属性设成false，就不进行辅助虚线的绘就，还有就是计算每一帧的时间。 【常weight与初始化】
var canvas = document.getElementById( "cas");
var ctx = canvas.getContext('2d');
var mcl = 1 , collarg = 0.8 , ballRadius = 15 , t0 = 0 ,balls=[] , tbw = 32 , animateStop = true , powAnimation = false;
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 ){
for(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