javascript - How to make the ball respond to the paddle thickness? -


hey guys! finished couse @ udemy, , how make game using js. question related small part of game.

the game in question pong. want know way can make ball respond thickness of paddle. when paddle @ x position bigger 0, ball won't go though it.

here code. i'm sorry if little bit messy:

<html>    <canvas id="gamecanvas" width ="800" height="600"></canvas>     <script>  	var canvas;  	var canvascontext;  	var ballx = 0;  	var bally = 0;  	var ballspeedx = 10;  	var ballspeedy = 4;        var player1 = 0;  	var player2 = 0;  	const winning_score = 3;        var winscreen = false;    	var paddle1y = 250;      var paddle2y = 250;  	const paddle_height = 100;      const paddle_thicknes = 10;    	function calculatemouseposition(event){  	    var rect = canvas.getboundingclientrect();      	var root = document.documentelement;  		var mousex = event.clientx - rect.left - root.scrollleft;  	    var mousey = event.clienty - rect.top - root.scrolltop;      	return{  			x:mousex,  		    y:mousey  	    };      }    	function mousehandle(evt){      	if (winscreen){  			player1 = 0;  		    player2 = 0;  	    	winscreen = false;      	}  	}        window.onload = function(){  		canvas = document.getelementbyid("gamecanvas");  	    canvascontext = canvas.getcontext("2d");  	      	var framespersecond = 60;  		setinterval(function () {  	    	moveeverything();      		draweverything();  		}, 1000 / framespersecond);    	    canvas.addeventlistener("mousemove",       		function(event){  				var mouseposition = calculatemouseposition(event);  			    paddle1y = mouseposition.y - (paddle_height / 2);  		    }  	    );        	canvas.addeventlistener('mousedown', mousehandle);  	}     	function computermovement(){      	var paddle2ycenter = paddle2y + (paddle_height / 2);  		if (paddle2ycenter < bally - 35){  	    	paddle2y += 5;      	}    		else if (paddle2ycenter > bally + 35){  	    	paddle2y -= 5;      	}  	}        function moveeverything(){  		if(winscreen){  	    	return;      	}    		computermovement();     	    ballx = ballx + ballspeedx;      	bally = bally + ballspeedy;    		if (ballx > canvas.width) {  	    	if (bally > paddle2y &&      		    bally < paddle2y + paddle_height){  				ballspeedx = -ballspeedx;       		    	var deltay = bally - (paddle2y + paddle_height / 2)  	    		ballspeedy = deltay * 0.35;      		    }  			else{  		    	player1 ++;  	    		ballreset();      		}  		}  	    	    if (ballx < 0) {      		if (bally > paddle1y &&  			    bally < paddle1y + paddle_height){  			    ballspeedx = -ballspeedx;    		    	var deltay = bally - (paddle1y + paddle_height / 2)  	    		ballspeedy = deltay * 0.35;      		     }  			else{  			    player2 ++; // must e before ballreset;  		    	ballreset();  	    	}      	}  		if (bally > canvas.height) {  	    	ballspeedy = -ballspeedy;      	}  	  		if (bally < 0) {  	    	ballspeedy = -ballspeedy      	}  	}        function drawnet(){  		for (var = 0; <canvas.height; += 40){  		    colorrect(canvas.width / 2 - 1, i, 2, 20, 'white');  	    }      }    	function draweverything(){      	// makes black background  		colorrect(0, 0, canvas.width, canvas.height, "black");    	    if (winscreen){      		canvascontext.fillstyle = 'white';    			if (player1 >= winning_score){  			    canvascontext.filltext('left player won!', 350, 200);  		    }  	    	else if (player2 >= winning_score){      			canvascontext.filltext('right player one!', 350, 200);  			}      	    	canvascontext.filltext('click continue', 350, 500);      		return;  		}    	    // draws net      	drawnet();  	  		// makes left paddle  	    colorrect(0, paddle1y, paddle_thicknes, paddle_height, "white");  	      	// makes ball  		colorcircle(ballx, bally, 10, "white");    	    // makes right paddle      	colorrect(canvas.width - 10, paddle2y, paddle_thicknes, 100, "white");    		// makes score  	    canvascontext.filltext(player1, 100, 100);      	canvascontext.filltext(player2, canvas.width - 100, 100);  }         function colorrect(linex, liney, width, height, color) {  		canvascontext.fillstyle = color;  	    canvascontext.fillrect(linex, liney, width, height);      }    	function colorcircle(centerx, centery, radius, color){  	    canvascontext.fillstyle = "color";      	canvascontext.beginpath();  		canvascontext.arc(centerx, centery, radius, 0, math.pi*2, true);  	    canvascontext.fill();      }        function ballreset(){  		if (player1 >= winning_score || player2 >= winning_score){  		    winscreen = true;  	    }        	ballspeedx = -ballspeedx;  		ballx = canvas.width / 2;  	    bally = canvas.height / 2;      }  </script>    </html>


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more