javascript - Stop a bitmap when it collides with another bitmap -
i learning createjs , having issue game working on.
i have keyboard movement , impact detection figured out, not happens after bitmaps collide. right pass through each other, , console logs impact. want happen when player (bitmap) hits wall (bitmap), player can no longer move in direction anymore.
can help?
<script type="text/javascript"> var stage; //big, root level container display objects //assign keycodes readable variables var keycode_a = 65; var keycode_d = 68; var keycode_w = 87; var keycode_s = 83; alphathreshold = 1; function init(){ stage = new createjs.stage("mycanvas"); startgame(); } function startgame(){ //load bitmaps player = new createjs.bitmap("assets/player-square.jpg"); player.x = 10; player.y = 200; stage.addchild(player); mazesquare = new createjs.bitmap("assets/maze-test.png"); mazesquare.x = 250; mazesquare.y = 0; stage.addchild(mazesquare); //move player, listening key pressed window.addeventlistener('keydown', keypressed, true); stage.update(); } function keypressed(event) { switch(event.keycode) { case keycode_w: //console.log("move up"); if(player.y > 0){ player.y -= 10; } break; case keycode_s: //console.log("move down"); if(player.y < 430){ //stage height - square height player.y += 10; } break; case keycode_a: //console.log("move left"); if(player.x > 0){ //stage height - square height player.x -= 10; } break; case keycode_d: //console.log("move right"); if(player.x < 730){ //stage height - square height player.x += 10; } break; } //check collisions after button press checkcollision(); stage.update(); } function checkcollision(keypressed) { //collision-detection-for-easeljs var intersection = ndgmr.checkpixelcollision(player, mazesquare, alphathreshold); //if the intersection not empty, that's because there collision. if (!intersection) { console.log("no impact"); } else { console.log("impact"); } //end else } </script> </head> <body onload="init();"> <center> <canvas id="mycanvas" width="800" height="500" style="border: 1px solid #000000; background-image: url(assets/grass.png);"> browser not support html5 canvas tag. </canvas> <br> w s d - moves player </center>
Comments
Post a Comment