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

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.

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

Chia sẻ để thành công

Lập trình game java cơ bản - phát hiện va chạm

phát hiện va chạm trong game

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

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

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

			  `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:

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

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.