jquery - How do I add collision detection to my javascript game? -
so, here's deal, have been building little runner game in javascript seems working ok(ish). have both players able move simultaneously , have object constructor building objects array have. objects moving direction , speed want having trouble designing collision detection them. know javascript rather wonky on stuff , built game in weird way there's figure there has way add it. here of code. if knows stuff can explain can do?
var obstacles; var $char1 = $('#character1'); var $char2 = $('#character2'); var object = [{name: 'jerry', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'tammy', width: '9px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'yellow'}, {name: 'mr. meeseeks', width: '10px', height: '35px', position: 'absolute', left: '100%', bottom: '0px', background: 'blue'}, {name: 'mr. meeseeks', width: '10px', height: '35px', position: 'absolute', left: '100%', bottom: '0px', background: 'blue'}, {name: 'mr. meeseeks', width: '10px', height: '35px', position: 'absolute', left: '100%', bottom: '0px', background: 'blue'}, {name: 'mr. meeseeks', width: '10px', height: '35px', position: 'absolute', left: '100%', bottom: '0px', background: 'blue'}, {name: 'mr. meeseeks', width: '10px', height: '35px', position: 'absolute', left: '100%', bottom: '0px', background: 'blue'}, {name: 'telepathic spider', width: '40px', height: '15px', position: 'absolute', left: '100%', bottom: '0px', background: 'black'}, {name: 'telepathic spider', width: '40px', height: '15px', position: 'absolute', left: '100%', bottom: '0px', background: 'black'}, {name: 'telepathic spider', width: '40px', height: '15px', position: 'absolute', left: '100%', bottom: '0px', background: 'black'}, {name: 'telepathic spider', width: '40px', height: '15px', position: 'absolute', left: '100%', bottom: '0px', background: 'black'}, {name: 'counciler rick 1', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'white'}, {name: 'counciler rick 2', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'white'}, {name: 'counciler rick 3', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'white'}, {name: 'counciler rick 4', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'white'}, {name: 'federation police', width: '12px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'federation police', width: '12px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'federation police', width: '12px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'federation police', width: '12px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'federation police', width: '12px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'snowball', width: '15px', height: '45px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'jellybean king', width: '15px', height: '25px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'abradolf linkler', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'cousin nicki', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'fart', width: '15px', height: '15px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'fart', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'fart', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'fart', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}, {name: 'fart', width: '10px', height: '30px', position: 'absolute', left: '100%', bottom: '0px', background: 'green'}]; function jump($el){ $el.animate({bottom: '+=10px'}, .5); } function fall($el){ $el.animate({bottom: 0}); } keys = [false, false, false, false, false, false]; $(document).ready(function(){ console.log('hi') obstacles // obstacles = new component(10, 200, "green", 300, 120); $(document).on('keydown', function(ex){ switch(ex.keycode) { case 38: keys[1] = true; //left break; case 37: keys[0] = true; //up break; case 39: keys[2] = true; //right break; case 65: keys[3] = true; break; case 87: keys[4] = true; break; case 68: keys[5] = true; break; } }) $(document).on('keyup', function(ex){ switch(ex.keycode) { case 38: keys[1] = false; console.log('bottom'); $char1.finish().animate({bottom: '0px'}); break; case 37: keys[0] = false; break; case 39: keys[2] = false; break; case 65: keys[3] = false; break; case 87: keys[4] = false; console.log('2bottom'); $char2.finish().animate({bottom: '0px'}); break; case 68: keys[5] = false; break; } }) function checkkeys(e) { if(keys[1] || keys[0] || keys[2] || keys[3] || keys[4] || keys[5]) { if (keys[2]) { console.log('right') $char1.finish().animate({left: '+=5px'}); } if (keys[0]) { console.log('left'); $char1.finish().animate({left: '-=5px'}); } if (keys[1]) { console.log('up'); jump($char1); } if (keys[3]) { console.log('2left') $char2.finish().animate({left: '-=5px'}) } if (keys[4]) { console.log('2up') jump($char2); } if (keys[5]) { console.log('2right') $char2.finish().animate({left: '+=5px'}) } } } window.setinterval(checkkeys, 1000 / 60); if ($char1.bottom > '150px') { $char1.bottom = '150px'; } function enemy (name, width, height, background, position, left, bottom, move) { this.name = name; this.width = width; this.height = height; this.background = background; this.position = position; this.left = left; this.bottom = bottom; this.move = move; } enemy.prototype.render = function() { $('#uppersky').append($('<div>').addclass('enemyobject') .css('width', this.width) .css('height', this.height).css('background', this.background).css('position', this.position).css('left', this.left).css('bottom', this.bottom)); }; var enemyarray = []; (var = 0; < object.length; i++) { var r = makerandomnum(object.length); var myobject = new enemy(object[r].name, object[r].width, object[r].height, object[r].background, object[r].position, object[r].left, object[r].bottom); enemyarray.push(myobject); }; var intervalid; var paintenemies = function(){ if(!enemyarray.length) { clearinterval(intervalid) } enemyarray.pop().render(); }; intervalid = setinterval(paintenemies, 2000) function makerandomnum(max) { return math.floor(math.random() * max) } function moveobjectleft() { $('.enemyobject').finish().animate({left: '-=50px'}) } walkinterval = setinterval(moveobjectleft, 1000) // collision1(); // function collision1() { // if ($char1.position().left < $('.enemyobject').position().left + $('.enemyobject').width && $char1.left + $char1.width > $('.enemyobject').left && $char1.bottom < $('.enemyobject').bottom + $('.enemyobject').height && $char1.bottom + $char1.height > $('.enemyobject').bottom) { // console.log('collision detected'); // } // } }).container { border: 5px solid black; height: 400px; width: 600px; margin: 0 auto; } #uppersky { height: 300px; width: 600px; background-color: rgb(26, 167, 203); position: relative; overflow: auto; } #character1 { height: 30px; width: 10px; background-color: red; position: absolute; bottom: 0px; } #character2 { height: 30px; width: 10px; background-color: blue; position: absolute; bottom: 0px; } #cloud1 { height: 30px; width: 60px; background: url(../images/cloud1.png); position: absolute; } /* animation-duration: 15s; animation-name: character1;*/ /*@keyframes character1 { { margin-left: 0%; width: 5%; } { margin-left: 100%; width: 5%; } }*/ #topground { height: 15px; width: 600px; background-color: rgb(76, 40, 25); } #midground { height: 30px; width: 600px; background-color: rgb(90, 51, 11); } #lowground { height: 55px; width: 600px; background-color: rgb(136, 86, 21); }<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/styles.css"> <title>the rick , morty super showdown thiiiiiiiiing!!!!!</title> </head> <body> <div class="allbody"> <div class="headings"> <h1 class="h1" id="gametitle">the rick , morty super showdown of stuuuuuuuufffffff!!!!</h1> <h6 class="h6" id="gamesubtitle">blitz n chips not legally responsible real world psychotic damages game causes.</h6> </div> <div class="container"> <div class="environment sky" id="background"> <div class="environment sky" id="uppersky"> <div class="environment sky clouds" id="cloud1"></div> <div class="environment sky clouds" id="cloud2"></div> <div class="environment sky clouds" id="cloud3"></div> <div class="objects foreground characters" id="character1"></div> <div class="objects foreground characters" id="character2"></div> </div> <div class="environment backgroundworld"> <div class="environment backgroundworld mountains" id="mountain1"></div> <div class="environment backgroundworld mountains" id="mountain2"></div> <div class="environment backgroundworld mountains" id="mountain3"></div> </div> </div> <div class="environment ground" id="topground"></div> <div class="environment ground" id="midground"></div> <div class="environment ground" id="lowground"></div> </div> <div class="buttons gamebuttons" <button class="buttons gamebuttons" id="gamereturn">return home</button> <button class="buttons gamebuttons" id="gameplaygame">play game</button> <button class="buttons gamebuttons" id="gamereset">reset</button> </div> </div> </body> <script src="./js/jquery.2.2.0.min.js"></script> <script type="text/javascript" src="./js/app.js"></script> </html>
the basic collision detection, type non-transformed rectangles collide consists of following:
objects need checked collision. instance have array of coins , player character. want checked time if player colliding coins. 1 of important parts of writing performing collisions detection figuring out needs interact what.
a check confirm collision has occurred. mentioned, it's simple plain rectangle ( way, html elements are). can this:
var coins= []; var player= {};
lets assume coins array filled objects have x, y, width , height. player object similar in regard.
// function called every frame, or less if want optimize. function checkcollisions() { (var coinidx= 0; coinidx < coins.length; coinidx++) { var coin = coins[coinidx]; if (coin.x < player.x + player.width && coin.x + coin.width > player.x && coin.y < player.y + player.height && coin.height + coin.y > player.y) { console.log('collision'); } } }
Comments
Post a Comment