Hướng di chuyển quả bóng khi va chạm vào vật thể

#1

Mình đang làm game kiểu bóng phá gạch và đang gặp khó khăn ở chổ quả bóng khi va chạm vào một vật thể nào đó thì di chuyển theo hướng ngược lại. Trông nó không có tự nhiên. Mong mọi người đóng góp ý tưởng cho mình phần này.

// location, direction, size là thuộc tính của quả bóng
private void updateLocation() {
	location.x += direction.x;
	location.y += direction.y;

	if (location.x < 0 || location.x >= Game.WIDTH - size.width)
		direction.x = -direction.x;

	if (location.y < 0 || location.y >= Game.HEIGHT - size.height)
		direction.y = -direction.y;
}

Untitled.png656×518 15.4 KB

#2

Bạn nên dùng thư viện hỗ trợ tương tác vật lý để làm va chạm.

Phần collision này có công thức tính toán phức tạp nên khó cho bạn nếu tự hiện thực.

1 Like
#3

Thư viện nào thế bạn? Bạn dẫn dắt thêm một chút được không?

#4


Bạn có thể tham khảo bài viết này có nói rõ về va chạm 2 Object :slight_smile:

2 Likes
#5

Bạn phải xài vector, xem cái header của mình kìa .
http://vibigaba.esy.es/

Thậm chí khi hai quả bóng va chạm nó còn kích một đoạn text mới đấy.

Bạn cứ lấy giáo trình toán lớp 11 ra tự viết là có 1 thư viện vector :smile:

Có thích không mình copy cho một đoạn tham khảo? but not java, it is javascript

#6

hay làm thế này

<script>
	$(document).ready(function(e) {

		var canvas = document.getElementById('cv1');
		var ctx = canvas.getContext('2d');
		var raf;
		
		var ball = {
		  x: 100,
		  y: 100,
		  vx: 5,
		  vy: 2,
		  radius: 25,
		  color: 'blue',
		  draw: function() {
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
			ctx.closePath();
			ctx.fillStyle = this.color;
			ctx.fill();
		  }
		};
		
		function draw() {
		  ctx.clearRect(0,0, canvas.width, canvas.height);
		  ball.draw();
		  ball.x += ball.vx;
		  ball.y += ball.vy;
		  
			if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
			  ball.vy = -ball.vy;
			}
			if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
			  ball.vx = -ball.vx;
			}		  
		  
		  
		  
		  raf = window.requestAnimationFrame(draw);
		}
		
		canvas.addEventListener('mouseover', function(e){
		  raf = window.requestAnimationFrame(draw);
		});
		
		canvas.addEventListener("mouseout",function(e){
		  window.cancelAnimationFrame(raf);
		});
		
		ball.draw();

	});
</script>

exactly you need is :slight_smile:

			  `ball.vy = -ball.vy;`

Tuy nhiên đây là trường hợp đặc biệt của vector thôi, khi phương của vector là vertical và horizions:slight_smile:

#7

Tặng bạn luôn cái đoạn vector 2d

// JavaScript Document
//file name : vector2d2.js
//thuc101; 23/07/2015
    		var Vector2d=function(x,y){
    			this.x=x;
    			this.y=y;
    			this.draw=function(canvas_id,x,y,color){
    				$("#"+canvas_id).sim();
    				$("#"+canvas_id).sim("save").sim("translate",x,y);
    				$("#"+canvas_id).sim("draw_line",0,0,this.x,this.y,color,1);
    				var al=10;
    				var dai=15;
    				var don_vi=this.don_vi();
    				var l=Math.sqrt(this.x * this.x + this.y * this.y);
    				$("#"+canvas_id)
    					.sim("translate",this.x,this.y)
    					.sim("rotate",180+al)
    					.sim("draw_line",0,0,dai*this.x/l,dai*this.y/l,color,1)	
    					.sim("rotate",-180-al)
    					.sim("rotate",180-al)
    					.sim("draw_line",0,0,dai*don_vi.x,dai*don_vi.y,color,1)	
    				;
    				$("#"+canvas_id).sim("restore");	
    			};
    			this.don_vi=function(){//ngay 1/8/2015
    				return new Vector2d( this.x/this.length(),this.y/this.length() );
    			};
    			this.getxy=function(){
    				return {x:this.x,y:this.y};
    			};
    			this.getxy_from_point=function(x,y){
    				return {x:this.x+x,y:this.y+y};
    			};
    			this.add=function(v){
    				var x1=this.x+v.x;
    				var y1=this.y+v.y;
    				var vec=new Vector2d(x1,y1);
    				return vec;
    			};
    			this.vector_vuong=function(){
    				var v=new Vector2d(-this.y,this.x);
    				return v;
    			};
    			this.tich_vo_huong=function(v){
    				return this.x*v.x+this.y*v.y;
    			}
    			this.dot=function(v){
    				return this.x*v.x+this.y*v.y;
    			}
    			this.project=function(v){
    				var d=this.length() * Math.cos ( this.angle(v) * Math.PI/180 );
    				var x=v.x * d / v.length();
    				var y=v.y * d / v.length();
    				var v1=new Vector2d(x,y);
    				return v1;
    			};
    			this.vector_phan_xa=function(x,y,  x1,y1,x2,y2){
    				var OA=new Vector2d(x1,y1);
    				var OB=new Vector2d(x2,y2);
    				var OM=new Vector2d(x,y);
    				var AB=OA.dao().add(OB);//AO+OB;
    				var ux=this.project(AB);
    				var uy=this.project( AB.vector_vuong() );
    				var phan_xa=ux.add( uy.dao() );
    				return phan_xa;
    			};
    			this.length=function(){
    				return Math.sqrt( (this.x)*(this.x) + (this.y)*(this.y) );
    			};
    			this.angle=function(v){
    				var tu=(this.x*v.x)+(this.y * v.y);
    				var mau=(Math.sqrt(this.x*this.x+this.y*this.y)) * ( Math.sqrt(v.x*v.x+v.y*v.y) );
    				return Math.acos( tu/mau )*(180)/(Math.PI);
    			};
    			this.goc=function(v){
    				return (Math.atan(this.y/this.x)-Math.atan(v.y/v.x))*180/Math.PI;
    			};
    			this.rotate=function(n){
    				a=n*Math.PI/180;
    				var x=(this.x * Math.cos(a)) - (this.y * Math.sin(a));
    				var y=(this.x * Math.sin(a)) + (this.y * Math.cos(a));
    				var u=new Vector2d(x,y);
    				return u;
    			};
    			this.dao=function(){
    				var x=-this.x;
    				var y=-this.y;
    				var u=new Vector2d(x,y);
    				return u;
    			};
    			this.scale=function(k){
    				var x=this.x * k;
    				var y=this.y * k;
    				return new Vector2d(x,y);
    			};
    		}
    		//end Vector2d
    		function from_point(x1,y1,x2,y2){
    			var p=new Vector2d(x2-x1,y2-y1);
    			return p;
    		}
    		function distance_xy_to_line(x,y,   x1,y1,x2,y2){//tra ve chieu dai
    			BA=from_point(x1,y1,x2,y2);
    			BX=BA.vector_vuong();
    			BO1=from_point(x1,y1,x,y);
    			return BO1.project(BX).length();
    		}
    		function interset_two_line(u1,u2,   v1,v2){//tra ve vector giao diem
    			var A1=(u1.y-u2.y)/(u1.x-u2.x);
    			var B1=u1.y-((u1.y-u2.y)/( u1.x-u2.x )) * u1.x;
    			
    			var A2=(v1.y-v2.y)/(v1.x-v2.x);
    			var B2=v1.y-((v1.y-v2.y) / (v1.x-v2.x)) * v1.x;
    			
    			var x=( B2-B1 )/( A1-A2 );
    			var y=A1*(B2-B1)/(A1-A2)+B1;
    			return new Vector2d(x,y);
    			
    		}

chắc là cùi bắp như bảo đảm đã test và run smoothly

2 Likes
#8

Mình không quen code Javascrip lắm, với cả lý vertor nên chưa hiểu lắm, nhưng mình sẽ đọc hiểu từ từ. Cảm ơn bạn nhiều nha.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?