onclick to move back and forth

Discussion in 'JavaScript' started by kadi, Apr 7, 2014.

  1. #1
    so how can i assign a button to move red ball back and forth to avoid collision from blue ball. if collided then the blue ball should stop rotating.




    
    <div class="circle">
      <div class="ball_blue"></div>
      <div class="ball_red"></div>
    </div>
    
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    
    @keyframes rot {
      from {
        transform: rotate(0deg)
          translate(-150px)
          rotate(0deg);
      }
      to {
        transform: rotate(360deg)
          translate(-150px) 
          rotate(-360deg);
      }
    }
    
    .circle {
      border:1px solid grey;
      position: relative;
      width:300px;
      height:300px;
      margin:25px auto;
      border-radius:50%;
    }
    
    .ball_blue {
      width: 40px;
      height: 40px;
      position: absolute;
      top:50%;
      left:50%;
      margin-top: -20px;
      margin-left: -20px;
      background:blue;
      border-radius:50%;
      font-size: 100px;
      animation: rot 3s infinite linear;
    }
    
    .ball_red {
      width: 20px;
      height: 20px;
      position: absolute;
      background:red;
      border-radius:50%;
      /* INITIALLY CENTERED */
      top:50%;
      left:50%;
      margin-top: -10px;
      margin-left: -10px;
      /* PUSH TO CIRCLE */
      transform: translate(-150px);
      /* PUSH OUT OF CIRCLE */
      margin-left: -20px;
    }
    
    
    
    Code (markup):
     
    kadi, Apr 7, 2014 IP
  2. seductiveapps.com

    seductiveapps.com Active Member

    Messages:
    200
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #2
    Depends on how far you want to go really...

    I have box2djs for you, which is pretty cool and can do what you want and much more, for download for free at http://seductiveapps.com/downloads/box2djs-0.2.0-jquery.zip

    It'll be fairly hard, beyond the math that I can remember, to make a routine in javascript that checks for just the collision of a box and a circle (at the edges of the circle i mean).
    I will let you in on the tip that if you want to do this in javascript, you should set the width: and height: of both ball and square in HTML, not in CSS. Or javascript can't "see" it in element.style.top/left..
     
    seductiveapps.com, Nov 16, 2014 IP