testcase1

JavaScript performance comparison

Test case created by Dan

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
test- 1
// async test
var x = $("#canvas").width() / 2 - 40;
var y = $("#canvas").height() - 35;
var dx = 1.8;
var dy = 1.8;

var oldX;
var oldY;


var position;


var canvasWidth;
var canvasHeight;
var canvasElement;

var playerPoints = 0;

var paddleX;
var paddleHeight;
var paddleWidth;

var brickPoints = 100;

rightDown = false;
leftDown = false;

var canvasMinX;
var canvasMaxX;

var bricks;
var brickRows;
var brickCols;
var brickWidth;
var brickHeight;
var brickAmount;
var brickPadding;

var ballRadius = 20;
var rowColors = ["#FF1C0A", "#FFFD0A", "#00A308", "#0008DB", "#EB0093"];
var paddleColor = "#000000";
var ballColor = "#000000";
var backgroundColor = "#000000";
var textColor = "#FFFF00";
var intervalId = 0;
var gameFinished = 0;

var buttons = false;
var startButton = true;
var statusPause = false;

/*
 * Init Functions
 */

//Init game

function init() {
  canvasElement = $('#canvas')[0].getContext("2d");
  canvasWidth = $("#canvas").width();
  canvasHeight = $("#canvas").height();
  paddleX = canvasWidth / 2;
  canvasMinX = $("#canvas").offset().left;
  canvasMaxX = canvasMinX + canvasWidth;
  intervalId = setInterval(draw, 40);
  return intervalId;
}

//Init paddle on bottom

function init_paddle() {
  paddleHeight = 63;
  paddleWidth = 53;
  paddleX = (canvasWidth / 2) - (paddleWidth / 2);
}

//Init bricks

function init_bricks() {
  brickRows = 4;
  brickCols = 7;
  brickWidth = 40 - 1;
  brickHeight = 46;
  brickPadding = 1;

  bricks = new Array(brickRows);
  for (i = 0; i < brickRows; i++) {
    bricks[i] = new Array(brickCols);
    for (j = 0; j < brickCols; j++) {
      bricks[i][j] = 1;
    }
  }

  brickAmount = (brickCols * brickRows);
}

function circle(x, y, r) {
  canvasElement.beginPath();
  canvasElement.arc(x, y, r, 0, Math.PI * 2, true);
  canvasElement.closePath();
  canvasElement.fill();
}

function rect(x, y, w, h) {
  canvasElement.beginPath();
  canvasElement.rect(x, y, w, h);
  canvasElement.closePath();
  canvasElement.fill();
}

function clear() {
  canvasElement.clearRect(0, 0, 1000, 1000);
  canvasElement.width = canvasElement.width;
}

function draw() {


  //    canvasElement.fillStyle = ballColor;
  //    circle(x, y, ballRadius);
  if (!statusPause) {
    clear();
    canvasElement.drawImage(images.ball, ((x - ballRadius) + 2), ((y - ballRadius) + 2));


    if (brickAmount == 0) {
      finishGame();
    }

    //keyboard paddle move
    if (rightDown) {
      if (paddleX != (canvasWidth - paddleWidth)) {
        paddleX += 5;
      }
    } else if (leftDown) {
      if (paddleX != 0) {
        paddleX -= 5;
      }
    }

    //          canvasElement.fillStyle = paddleColor;
    //          rect(paddleX, canvasHeight - paddleHeight, paddleWidth, paddleHeight);
    canvasElement.drawImage(images.player, paddleX, canvasHeight - paddleHeight - 53);

    drawbricks();

    rowheight = brickHeight + brickPadding;
    colwidth = brickWidth - brickPadding;
    row = Math.floor(y / rowheight);
    col = Math.floor(x / colwidth);

    if (y < (brickRows * rowheight) && row >= 0 && col >= 0 && bricks[row][col] == 1) {
      dy = -dy;
      bricks[row][col] = 0;
      brickAmount--;
      playerPoints = playerPoints + brickPoints;
      drawScore();
    }



    //seiten
    if (x + dx + ballRadius > canvasWidth - 15 || x + dx - ballRadius < 15) {
      dx = -dx;
    }


    //paddle + aus
    if (y + dy - ballRadius < 0) {
      dy = -dy;
    } else if (y + dy + ballRadius > canvasHeight - paddleHeight - 40) {
      if (x > paddleX && x < paddleX + paddleWidth) {
        dx = 8 * ((x - (paddleX + paddleWidth / 2)) / paddleWidth);
        dy = -dy;
      } else if (y + dy + ballRadius > canvasHeight - 60) {
        killGame();
      }
    }

    x += dx;
    y += dy;
  }

}

function drawbricks() {
  for (i = 0; i < brickRows; i++) {
    canvasElement.fillStyle = rowColors[i];
    for (j = 0; j < brickCols; j++) {
      if (bricks[i][j] == 1) {
        canvasElement.drawImage(images.enemy, (j * (brickWidth + brickPadding)) + brickPadding + 20, (i * (brickHeight + brickPadding)) + brickPadding);

      }
    }
  }
}

function killGame() {
  clearInterval(intervalId);
  clear();

  writeText(canvasElement, "Das Spiel wurde beendet", 27, 100, 18);
  writeText(canvasElement, "Sie haben " + playerPoints + " Punkte.", 30, 130, 18);
  drawButtons(false);
  $('#game #gameheader #gamepause').addClass('hidden');
  gameFinished = 1;
  if (statusPause) track('Game: play :: not resumed');
  else track('Game: play :: lost');
  statusPause = false;
}

function writeWhiteText(context, text, x, y, size) {
  var oldColor = textColor;
  textColor = "#FFFFFF";
  writeText(context, text, x, y, size);
  textColor = oldColor;
}

function writeText(context, text, x, y, size) {
  context.font = size + "pt Arial";
  context.fillStyle = textColor;
  shadowOn();
  context.fillText(text, x, y);
  shadowOff();
}

function drawScore() {
  $("#gameheader #score").html(playerPoints);
}

function shadowOn() {
  canvasElement.shadowColor = "black";
  canvasElement.shadowOffsetX = 3;
  canvasElement.shadowOffsetY = 3;
  canvasElement.shadowBlur = 10;
}

function shadowOff() {
  canvasElement.shadowOffsetX = 0;
  canvasElement.shadowOffsetY = 0;
  canvasElement.shadowBlur = 0;
}

function finishGame() {
  clearInterval(intervalId);
  clear();

  writeText(canvasElement, "Gratulation.", 85, 100, "bold 20");
  writeText(canvasElement, "Sie haben die Straße", 40, 130, "bold 18");
  writeText(canvasElement, "von allen Eismonstern", 30, 158, "bold 18");
  writeText(canvasElement, "befreit.", 115, 182, "bold 18");
  drawButtons(false);

  gameFinished = 1;
  track('Game: play :: finished');
}

function drawButtons(boolClear) {
  buttons = true;
  if (true == boolClear) {
    clear();
  }
  canvasElement.drawImage(images.btn, 75, 230);
  writeText(canvasElement, "Neues Spiel", 107, 257, 14);
  canvasElement.drawImage(images.btn, 75, 300);
  writeText(canvasElement, "Zur Startseite", 104, 327, 14);
}

function onKeyDown(evt) {
  if (evt.keyCode == 39) rightDown = true;
  else if (evt.keyCode == 37) leftDown = true;
}

function onKeyUp(evt) {
  if (evt.keyCode == 39) rightDown = false;
  else if (evt.keyCode == 37) leftDown = false;
}

$(function() {
  var canvasTouchElement = document.getElementById('canvas');
  canvasTouchElement.addEventListener("touchmove", function(event) {
    if (event.targetTouches.length == 1) {
      var touch = event.targetTouches[0];
      paddleX = (touch.pageX - (paddleWidth / 2) - 10) - position.left;
    }
    event.preventDefault();
    return false;

  }, false);


  //    document.body.addEventListener('touchmove', function(event) {
  //        event.preventDefault();
  //    }, false);
  $(document).keydown(onKeyDown);
  $(document).keyup(onKeyUp);

})



function loadImages(sources) {
  images = {};
  var numImages = 0;
  for (var src in sources) {
    numImages++;
  }
  for (var src in sources) {
    images[src] = new Image();
    images[src].src = sources[src];
  }
}

$(function() {
  canvasElement = $('#canvas')[0].getContext("2d");

  var sources = {
    btn: "images/spiel/spiel_btn.png",
    player: "images/spiel/spiel_figur_neu.png",
    enemy: "images/spiel/spiel_monster.png",
    ball: "images/spiel/spiel_reifen.png"
  };

  loadImages(sources);

  $("canvas").click(function(click) {
    if (true === buttons) {
      if (75 + position.left < click.clientX && click.clientX < 75 + 170 + position.left) {
        //new game button
        if (270 < click.clientY && click.clientY < 270 + 51) {
          startGame();
          buttons = false;
        }
        //back to home button
        if (345 < click.clientY && click.clientY < 345 + 35) {
          location.href = "#home";
          track('Game: exit');
          buttons = false; /*initGame();*/
        }
      }
    }
    if (statusPause) {

      if (75 + position.left < click.clientX && click.clientX < 75 + 170 + position.left) {
        //new game button
        if (270 < click.clientY && click.clientY < 270 + 51) {
          unpauseGame();
          buttons = false;
        }
        //back to home button
        if (345 < click.clientY && click.clientY < 345 + 35) {
          killGame()
        }
      }
    }
  });
});

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds) {
      break;
    }
  }
}

function initGame() {
  sleep(100);
  drawButtons(true);
  writeText(canvasElement, "Schneeball-", 70, 100, "bold 24");
  writeText(canvasElement, "Schlacht", 90, 132, "bold 24");
  writeWhiteText(canvasElement, "Kämpfen Sie gegen", 72, 165, 16);
  writeWhiteText(canvasElement, "die Eismonster", 95, 191, 16);
}

function pauseGame() {
  if (!statusPause) {
    oldX = dx;
    oldY = dy;
    dx = 0;
    dy = 0;
    statusPause = true;

    setTimeout(function() {

      canvasElement.globalAlpha = 0.3;
      canvasElement.fillStyle = "rgb(255,255,255)";
      canvasElement.fillRect(20, 0, canvasWidth - 40, canvasHeight);

      canvasElement.globalAlpha = 1;

      writeText(canvasElement, "PAUSE", 106, 100, "bold 24");


      canvasElement.drawImage(images.btn, 75, 230);
      writeText(canvasElement, "Fortsetzen", 114, 257, 14);
      canvasElement.drawImage(images.btn, 75, 300);
      writeText(canvasElement, "Beenden", 122, 327, 14);


    }, 100);
    track('Game: play :: pause');
    $('#game #gameheader #gamepause').addClass('hidden');
  }
}

function unpauseGame() {
  if (statusPause) {
    dx = oldX;
    dy = oldY;
    statusPause = false;
    track('Game: play :: resume');
    $('#game #gameheader #gamepause').removeClass('hidden');
  }
}


function startGame() {
  clearInterval(intervalId);
  x = $("#canvas").width() / 2 - 20;
  y = $("#canvas").height() - 130;
  gameFinished = 0;
  playerPoints = 0;
  drawScore();
  dx = (Math.round(Math.random() * 1) + "." + Math.round(Math.random() * 10)) * 1;
  if (0.5 >= Math.round(Math.random())) {
    dx = dx * -1;
  }
  dy = -2;

  dx = dx * 2.2;
  dy = dy * 2.2;
  init();
  init_paddle();
  init_bricks();

  statusPause = false;
  track('Game: play :: start');

  $('#game #gameheader #gamepause').removeClass('hidden');
  $('#game #gameheader #gamepause').bind('click', function() {
    pauseGame();
  });
}
pending…
test- 2
var x = $("#canvas").width() / 2 - 40;
var y = $("#canvas").height() - 35;
var dx = 1.8;
var dy = 1.8;

var oldX;
var oldY;


var position;


var canvasWidth;
var canvasHeight;
var canvasElement;

var playerPoints = 0;

var paddleX;
var paddleHeight;
var paddleWidth;

var brickPoints = 100;

rightDown = false;
leftDown = false;

var canvasMinX;
var canvasMaxX;

var bricks;
var brickRows;
var brickCols;
var brickWidth;
var brickHeight;
var brickAmount;
var brickPadding;

var ballRadius = 20;
var rowColors = ["#FF1C0A", "#FFFD0A", "#00A308", "#0008DB", "#EB0093"];
var paddleColor = "#000000";
var ballColor = "#000000";
var backgroundColor = "#000000";
var textColor = "#FFFF00";
var intervalId = 0;
var gameFinished = 0;

var buttons = false;
var startButton = true;
var statusPause = false;

/*
 * Init Functions
 */

//Init game


function init() {
  canvasElement = $('#canvas')[0].getContext("2d");
  canvasWidth = $("#canvas").width();
  canvasHeight = $("#canvas").height();
  paddleX = canvasWidth / 2;
  canvasMinX = $("#canvas").offset().left;
  canvasMaxX = canvasMinX + canvasWidth;
  intervalId = setInterval(draw, 100);
  return intervalId;
}

//Init paddle on bottom


function init_paddle() {
  paddleHeight = 63;
  paddleWidth = 53;
  paddleX = (canvasWidth / 2) - (paddleWidth / 2);
}

//Init bricks


function init_bricks() {
  brickRows = 4;
  brickCols = 7;
  brickWidth = 40 - 1;
  brickHeight = 46;
  brickPadding = 1;

  bricks = new Array(brickRows);
  for (i = 0; i < brickRows; i++) {
    bricks[i] = new Array(brickCols);
    for (j = 0; j < brickCols; j++) {
      bricks[i][j] = 1;
    }
  }

  brickAmount = (brickCols * brickRows);
}

function circle(x, y, r) {
  canvasElement.beginPath();
  canvasElement.arc(x, y, r, 0, Math.PI * 2, true);
  canvasElement.closePath();
  canvasElement.fill();
}

function rect(x, y, w, h) {
  canvasElement.beginPath();
  canvasElement.rect(x, y, w, h);
  canvasElement.closePath();
  canvasElement.fill();
}

function clear() {
  canvasElement.clearRect(0, 0, 1000, 1000);
  canvasElement.width = canvasElement.width;
}

function draw() {


  //    canvasElement.fillStyle = ballColor;
  //    circle(x, y, ballRadius);
  if (!statusPause) {
    clear();
    canvasElement.drawImage(images.ball, ((x - ballRadius) + 2), ((y - ballRadius) + 2));


    if (brickAmount == 0) {
      finishGame();
    }

    //keyboard paddle move
    if (rightDown) {
      if (paddleX != (canvasWidth - paddleWidth)) {
        paddleX += 5;
      }
    } else if (leftDown) {
      if (paddleX != 0) {
        paddleX -= 5;
      }
    }

    //          canvasElement.fillStyle = paddleColor;
    //          rect(paddleX, canvasHeight - paddleHeight, paddleWidth, paddleHeight);
    canvasElement.drawImage(images.player, paddleX, canvasHeight - paddleHeight - 53);

    drawbricks();

    rowheight = brickHeight + brickPadding;
    colwidth = brickWidth - brickPadding;
    row = Math.floor(y / rowheight);
    col = Math.floor(x / colwidth);

    if (y < (brickRows * rowheight) && row >= 0 && col >= 0 && bricks[row][col] == 1) {
      dy = -dy;
      bricks[row][col] = 0;
      brickAmount--;
      playerPoints = playerPoints + brickPoints;
      drawScore();
    }



    //seiten
    if (x + dx + ballRadius > canvasWidth - 15 || x + dx - ballRadius < 15) {
      dx = -dx;
    }


    //paddle + aus
    if (y + dy - ballRadius < 0) {
      dy = -dy;
    } else if (y + dy + ballRadius > canvasHeight - paddleHeight - 40) {
      if (x > paddleX && x < paddleX + paddleWidth) {
        dx = 8 * ((x - (paddleX + paddleWidth / 2)) / paddleWidth);
        dy = -dy;
      } else if (y + dy + ballRadius > canvasHeight - 60) {
        killGame();
      }
    }

    x += dx;
    y += dy;
  }

}

function drawbricks() {
  for (i = 0; i < brickRows; i++) {
    canvasElement.fillStyle = rowColors[i];
    for (j = 0; j < brickCols; j++) {
      if (bricks[i][j] == 1) {
        canvasElement.drawImage(images.enemy, (j * (brickWidth + brickPadding)) + brickPadding + 20, (i * (brickHeight + brickPadding)) + brickPadding);

      }
    }
  }
}

function killGame() {
  clearInterval(intervalId);
  clear();

  writeText(canvasElement, "Das Spiel wurde beendet", 27, 100, 18);
  writeText(canvasElement, "Sie haben " + playerPoints + " Punkte.", 30, 130, 18);
  drawButtons(false);
  $('#game #gameheader #gamepause').addClass('hidden');
  gameFinished = 1;
  if (statusPause) track('Game: play :: not resumed');
  else track('Game: play :: lost');
  statusPause = false;
}

function writeWhiteText(context, text, x, y, size) {
  var oldColor = textColor;
  textColor = "#FFFFFF";
  writeText(context, text, x, y, size);
  textColor = oldColor;
}

function writeText(context, text, x, y, size) {
  context.font = size + "pt Arial";
  context.fillStyle = textColor;
  shadowOn();
  context.fillText(text, x, y);
  shadowOff();
}

function drawScore() {
  $("#gameheader #score").html(playerPoints);
}

function shadowOn() {
  canvasElement.shadowColor = "black";
  canvasElement.shadowOffsetX = 3;
  canvasElement.shadowOffsetY = 3;
  canvasElement.shadowBlur = 10;
}

function shadowOff() {
  canvasElement.shadowOffsetX = 0;
  canvasElement.shadowOffsetY = 0;
  canvasElement.shadowBlur = 0;
}

function finishGame() {
  clearInterval(intervalId);
  clear();

  writeText(canvasElement, "Gratulation.", 85, 100, "bold 20");
  writeText(canvasElement, "Sie haben die Straße", 40, 130, "bold 18");
  writeText(canvasElement, "von allen Eismonstern", 30, 158, "bold 18");
  writeText(canvasElement, "befreit.", 115, 182, "bold 18");
  drawButtons(false);

  gameFinished = 1;
  track('Game: play :: finished');
}

function drawButtons(boolClear) {
  buttons = true;
  if (true == boolClear) {
    clear();
  }
  canvasElement.drawImage(images.btn, 75, 230);
  writeText(canvasElement, "Neues Spiel", 107, 257, 14);
  canvasElement.drawImage(images.btn, 75, 300);
  writeText(canvasElement, "Zur Startseite", 104, 327, 14);
}

function onKeyDown(evt) {
  if (evt.keyCode == 39) rightDown = true;
  else if (evt.keyCode == 37) leftDown = true;
}

function onKeyUp(evt) {
  if (evt.keyCode == 39) rightDown = false;
  else if (evt.keyCode == 37) leftDown = false;
}

$(function() {
  var canvasTouchElement = document.getElementById('canvas');
  canvasTouchElement.addEventListener("touchmove", function(event) {
    if (event.targetTouches.length == 1) {
      var touch = event.targetTouches[0];
      paddleX = (touch.pageX - (paddleWidth / 2) - 10) - position.left;
    }
    event.preventDefault();
    return false;

  }, false);


  //    document.body.addEventListener('touchmove', function(event) {
  //        event.preventDefault();
  //    }, false);
  $(document).keydown(onKeyDown);
  $(document).keyup(onKeyUp);

})



function loadImages(sources) {
  images = {};
  var numImages = 0;
  for (var src in sources) {
    numImages++;
  }
  for (var src in sources) {
    images[src] = new Image();
    images[src].src = sources[src];
  }
}

$(function() {
  canvasElement = $('#canvas')[0].getContext("2d");

  var sources = {
    btn: "images/spiel/spiel_btn.png",
    player: "images/spiel/spiel_figur_neu.png",
    enemy: "images/spiel/spiel_monster.png",
    ball: "images/spiel/spiel_reifen.png"
  };

  loadImages(sources);

  $("canvas").click(function(click) {
    if (true === buttons) {
      if (75 + position.left < click.clientX && click.clientX < 75 + 170 + position.left) {
        //new game button
        if (270 < click.clientY && click.clientY < 270 + 51) {
          startGame();
          buttons = false;
        }
        //back to home button
        if (345 < click.clientY && click.clientY < 345 + 35) {
          location.href = "#home";
          track('Game: exit');
          buttons = false; /*initGame();*/
        }
      }
    }
    if (statusPause) {

      if (75 + position.left < click.clientX && click.clientX < 75 + 170 + position.left) {
        //new game button
        if (270 < click.clientY && click.clientY < 270 + 51) {
          unpauseGame();
          buttons = false;
        }
        //back to home button
        if (345 < click.clientY && click.clientY < 345 + 35) {
          killGame()
        }
      }
    }
  });
});

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds) {
      break;
    }
  }
}

function initGame() {
  sleep(100);
  drawButtons(true);
  writeText(canvasElement, "Schneeball-", 70, 100, "bold 24");
  writeText(canvasElement, "Schlacht", 90, 132, "bold 24");
  writeWhiteText(canvasElement, "Kämpfen Sie gegen", 72, 165, 16);
  writeWhiteText(canvasElement, "die Eismonster", 95, 191, 16);
}

function pauseGame() {
  if (!statusPause) {
    oldX = dx;
    oldY = dy;
    dx = 0;
    dy = 0;
    statusPause = true;

    setTimeout(function() {

      canvasElement.globalAlpha = 0.3;
      canvasElement.fillStyle = "rgb(255,255,255)";
      canvasElement.fillRect(20, 0, canvasWidth - 40, canvasHeight);

      canvasElement.globalAlpha = 1;

      writeText(canvasElement, "PAUSE", 106, 100, "bold 24");


      canvasElement.drawImage(images.btn, 75, 230);
      writeText(canvasElement, "Fortsetzen", 114, 257, 14);
      canvasElement.drawImage(images.btn, 75, 300);
      writeText(canvasElement, "Beenden", 122, 327, 14);


    }, 100);
    track('Game: play :: pause');
    $('#game #gameheader #gamepause').addClass('hidden');
  }
}

function unpauseGame() {
  if (statusPause) {
    dx = oldX;
    dy = oldY;
    statusPause = false;
    track('Game: play :: resume');
    $('#game #gameheader #gamepause').removeClass('hidden');
  }
}


function startGame() {
  clearInterval(intervalId);
  x = $("#canvas").width() / 2 - 20;
  y = $("#canvas").height() - 130;
  gameFinished = 0;
  playerPoints = 0;
  drawScore();
  dx = (Math.round(Math.random() * 1) + "." + Math.round(Math.random() * 10)) * 1;
  if (0.5 >= Math.round(Math.random())) {
    dx = dx * -1;
  }
  dy = -2;

  dx = dx * 2.2;
  dy = dy * 2.2;
  init();
  init_paddle();
  init_bricks();

  statusPause = false;
  track('Game: play :: start');

  $('#game #gameheader #gamepause').removeClass('hidden');
  $('#game #gameheader #gamepause').bind('click', function() {
    pauseGame();
  });
}
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment