Objects Colliding in Javascript Game

Question

I'm supposed to create a very simple javascript game, and I've managed to assemble the code above. I want to make the game end once the red box hits the target- is this possible to do without overcomplicating the code?

See my full code here: http://jsfiddle.net/sumaiya786/o5jpdxrL/8/

Thanks

HTML:

<body>
<h1> Game</h1>
<div id ="container">
<div id ="character"></div>
<div id="target"></div>
</div>


<div id="buttons">
 <button  class="control-button" onClick="moveup()">UP</button><br><br>
  <button class="control-button" onClick="moveleft()">LEFT</button>
  <button class="control-button" onClick="moveright()">RIGHT</button><br><br>
  <button class="control-button" onClick="movedown()">DOWN</button>
</div>

CSS:

#container {
  width: 800px;
  height: 550px;
  position: relative;
  background-image: url(ground.png);
  opacity: 0.9;
  margin-left: auto;
  margin-right: auto;
}
#character {
  width: 80px;
  height: 80px;
  left:50px;
  top:50px;
  position: absolute;
  content:url(dog.png);
}
#target {
  width: 70px;
  height: 60px;
  position: absolute;
  right: 100px;
  bottom: 200px;
 content:url(bone.png);
}

#buttons {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    display: block;

}

.control-button {
    background-color: #189B23;
    height: 2em;
    width: 90px;
    font-size: 15px;
    color: white;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-weight: bold;
}

JavaScript:

 var up = 20;
var side = 20;


function moveup(){
  up -=20;
 document.getElementById("character").style.top = up + "px";
}

function movedown(){
up +=20;
 document.getElementById("character").style.top = up + "px";
}

function moveleft(){
side -=20;
 document.getElementById("character").style.left = side + "px";
}

function moveright(){
side +=20;
document.getElementById("character").style.left = side + "px";
}

Answer 1

I hope this will help you.I have changed the color of the target when collision occurs.Replace it with the function which ends the game.I hope this is what you are looking for.

 var up = 20; var side = 20; function moveup(){ up -=20; document.getElementById("character").style.top = up + "px"; isCollision(document.getElementById('character'),document.getElementById('target')) } function movedown(){ up +=20; document.getElementById("character").style.top = up + "px"; isCollision(document.getElementById('character'),document.getElementById('target')) } function moveleft(){ side -=20; document.getElementById("character").style.left = side + "px"; isCollision(document.getElementById('character'),document.getElementById('target')) } function moveright(){ side +=20; document.getElementById("character").style.left = side + "px"; isCollision(document.getElementById('character'),document.getElementById('target')) } function isCollision(box1, box2) { var al = box1.offsetLeft; var ar = box1.offsetLeft + box1.offsetWidth; var bl = box2.offsetLeft; var br = box2.offsetLeft + box2.offsetWidth; var at = box1.offsetTop; var ab = box1.offsetTop + box1.offsetHeight; var bt = box2.offsetTop; var bb = box2.offsetTop + box2.offsetHeight; if (bl > ar || br < al) { return false; } if (bt > ab || bb < at) { return false; } if (bl > al && bl < ar) { changecolor(); return true; } if (br > al && br < ar) { changecolor(); return true; } if (bt > at && bt < ab) { changecolor(); return true; } if (bb > at && bb < ab) { changecolor(); return true; } return false; } function changecolor() { document.querySelector("#target").style.backgroundColor = 'green'; }

 #container { width: 800px; height: 600px; position: relative; background-color: black; opacity: 0.9; margin-left: auto; margin-right: auto; } #character { width: 80px; height: 80px; left:50px; top:50px; position: absolute; background-color: red;} #target { width: 70px; height: 60px; position: absolute; right: 100px; bottom: 200px; background-color: aqua;} #buttons { text-align: center; width: 480px; margin-left: auto; margin-right: auto; margin-top: 20px; display: block; } .control-button { background-color: #CDA40F; height: 2em; width: 70px; color: #1D1D1D; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: bold; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id ="container"> <div id ="character"></div> <div id="target"></div> </div> <div id="buttons"> <button class="control-button" onClick="moveup()">UP</button><br><br> <button class="control-button" onClick="moveleft()">LEFT</button> <button class="control-button" onClick="moveright()">RIGHT</button><br><br> <button class="control-button" onClick="movedown()">DOWN</button> </div>

Objects Colliding in Javascript Game

Question

1 answers

solution1
0 2018-11-09 10:09:13

Objects Colliding in Javascript Game

Question

1 answers

solution1 0 2018-11-09 10:09:13

solution1
0 2018-11-09 10:09:13