How to change the ball color every time it bounces off the brick in javascript? -


trying build game following tutorital-

https://developer.mozilla.org/en-us/docs/games/tutorials/2d_breakout_game_pure_javascript/collision_detection

as per exercise im trying change color of ball when hits brick. code fails.

this first question in stackoverflow pardon me grammar mistakes

html:

   <title>gamedev canvas workshop</title>    <canvas id="mycanvas" width="580" height="520"></canvas>

javascript:

var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); var ctx1 = canvas.getcontext("2d"); var pad = canvas.getcontext("2d");  var x = canvas.width/2; var y = canvas.height-30;  var x1 = canvas.width/12; var y1 = canvas.height-10; var dx = 2; var dy = -3; var dx1 = 2; var dy1 = -2;  var ballradius = 10;   document.addeventlistener("keydown", keydownhandler, false); document.addeventlistener("keyup", keyuphandler, false);  /*paddle creation declaration*/ var paddleheight = 10; var paddlewidth = 75; var paddlex = (canvas.width-paddlewidth)/2;   /* key board button declaration event handling */  var rightpressed = false; var leftpressed = false;        /*brick declararation*/  var brickrowcount = 3; var brickcolumncount = 6; var brickwidth = 75; var brickheight = 20; var brickpadding = 10; var brickoffsettop = 30; var brickoffsetleft = 30;   var bricks = []; for(c=0; c<brickcolumncount; c++) {     bricks[c] = [];     for(r=0; r<brickrowcount; r++) {         bricks[c][r] = { x: 0, y: 0,status:1 };     } }  /*draw paddle function*/ function drawpaddle() {      ctx.beginpath();     ctx.rect(paddlex, canvas.height-paddleheight, paddlewidth, paddleheight);     ctx.fillstyle = "#0095dd";     ctx.fill();     ctx.closepath(); }   function keydownhandler(e) {     if(e.keycode == 39) {         rightpressed = true;     }     else if(e.keycode == 37) {         leftpressed = true;     } }  function keyuphandler(e) {     if(e.keycode == 39) {         rightpressed = false;     }     else if(e.keycode == 37) {         leftpressed = false;     } }  var color1="#0095dd" var color2="#000000"   function drawball() {         ctx.beginpath();  ctx.fillstyle = color1; ctx.arc(x, y, ballradius, 0, math.pi*2); ctx.fill(); ctx.closepath();  }  function drawball2() {         ctx1.beginpath(); ctx1.arc(x1, y1, ballradius, 0, math.pi*2); ctx1.fillstyle = color2; ctx1.fill(); ctx1.closepath();  }   function drawbricks() {     for(c=0; c<brickcolumncount; c++) {         for(r=0; r<brickrowcount; r++) {             if(bricks[c][r].status == 1) {                 var brickx = (c*(brickwidth+brickpadding))+brickoffsetleft;                 var bricky = (r*(brickheight+brickpadding))+brickoffsettop;                 bricks[c][r].x = brickx;                 bricks[c][r].y = bricky;                 pad.beginpath();                 pad.rect(brickx, bricky, brickwidth, brickheight);                 pad.fillstyle = "#0095dd";                  pad.fill();                 pad.closepath();               }          }     } }     function collisiondetection() {     for(c=0; c<brickcolumncount; c++) {         for(r=0; r<brickrowcount; r++) {             var b = bricks[c][r];             if(b.status == 1) {                 if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) {                      dy = -dy;                     alert("hit")                     ctx.fillstyle=color2;                   b.status = 0;                  }             }         }     } }   function draw() {     // drawing code   ctx.clearrect(0, 0, canvas.width, canvas.height); ctx1.clearrect(0, 0, canvas.width, canvas.height);  drawbricks(); drawball(); drawball2();    drawpaddle();  collisiondetection();   if(x + dx > canvas.width - ballradius || x + dx < 0) {     dx = -dx; }  if(y1 + dy1 > canvas.height - ballradius || y1 + dy1 < 0) {     dy1 = -dy1; } if(x1 + dx1 > canvas.width - ballradius || x1 + dx1 < 0) {     dx1 = -dx1; }   if(rightpressed && paddlex < canvas.width-paddlewidth) {     paddlex += 7; } else if(leftpressed && paddlex > 0) {     paddlex -= 7; }  if(y + dy < ballradius)  {    dy = -dy; }   else if(y + dy > canvas.height) {      if(x >= paddlex && x <= paddlex + paddlewidth) {          if(y= y-paddleheight)         {         dy = -dy;         } }      else {         alert("game over");                document.location.reload();     }  }  x1 += dx1; y1 += dy1;  x += dx; y += dy; } setinterval(draw, 10); enter code here

in code i'm performing alert whenever brick collided testing purpose.

https://jsfiddle.net/rkr1/kxrqhhhh/


Comments

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more