How would a cheat/auto moving paddle in this hidden html game look like?

There is a

<div id="breakout-ball"><span>●</span></div>

and a

<div id="breakout-paddle"></div>

when moving the mouse the paddle is moved horizontally. How can I connect the movement of the ball with the paddle?

This question will bee "munity wiki" as soon as possible.

How would a cheat/auto moving paddle in this hidden html game look like?

There is a

<div id="breakout-ball"><span>●</span></div>

and a

<div id="breakout-paddle"></div>

when moving the mouse the paddle is moved horizontally. How can I connect the movement of the ball with the paddle?

This question will bee "munity wiki" as soon as possible.

• javascript
• html
• firebug

• 2 This is a cool problem to solve, reverse engineering the minimised javascript now... I may be back. – Matt Commented May 13, 2013 at 23:29
• 1 @Yoda Just use the Force. – Shaz Commented Jun 11, 2013 at 12:43

4 Answers 4

function cheat() {
    var ball   = document.getElementById('breakout-ball');
    var paddle = document.getElementById('breakout-paddle');

    paddle.style.left = ball.style.left;

    setTimeout(cheat, 20);
}

cheat();

// Add this via the FireBug console. 

I modified your solution slightly to account for the scenario of the ball going off screen and breaking the hack and also the ball getting jammed into the corner.

function cheat() {
  var ball   = document.getElementById('breakout-ball');
  var paddle = document.getElementById('breakout-paddle');

  var buffer = Math.floor((Math.random()*100)+1);
  var leftVal = parseInt(ball.style.left, 10);

  if (ball.style.left) {
    paddle.style.left = (leftVal - buffer) + 'px';
  }


  setTimeout(cheat, 100);
}

cheat();

To be honest though, if you are going down that road why not do this?

function cheat() {
  var paddle = document.getElementById('breakout-paddle');

  paddle.style.width = '100%';
}

cheat();

Anyway I'm going to continue to dig into the code and do some deeper manipulation

in chrome, search the game, ctrl+J, paste the following in, and press enter.

This is a simple goal:

//get the ball's X position from its CSS
function ballx(){
    return parseFloat(document.querySelector("#breakout-ball").style.left.split("px")[0]);
}
function update(e){
    //throws an exception when the game isn't up. Can be really annoying.
    try{document.querySelector("#breakout-paddle").style.left = (ballx() - 75)+"px";}
    catch(ex){}
}
var intervalTimer = setInterval(update, 125);//let it have a single weakness in case someone else tries it while I am around.

The lower the interval rate, the faster the paddle will move relative to the ball, but the slower the game goes. The maximum rate can be given with a simple requestAnimationFrame cycle, but that slows the browser down a lot(at least on my laptop).

I tried changing the paddle's size. It doesn't really work. I'm sure it would be simpler with jQuery, but why make cheating easy when doing it hard core is already so easy?

I have e up with a new way to solve this problem. Whenever the screen size or window size changes, the paddle changes size based on the screen size. To bat this, I simply just added another section that splits the size of the paddle in half then uses that value to find the centre of the paddle. Very simple and very effective.

function autoMove() {
var ball   = document.getElementById('breakout-ball')
var paddle = document.getElementById('breakout-paddle')

var leftVal = parseInt(ball.style.left, 10)
var paddleWidth = parseFloat(paddle.style.width, 10) / 2

paddle.style.left = (leftVal - paddleWidth) + 'px'

setTimeout(autoMove, 20)
}

autoMove();

Also, didn't like the function name. It looks way too suspicious so changed it. Hope this helps.