0 Replies - 471 Views - Last Post: 18 December 2013 - 06:50 PM

#1 dag25  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 68
  • Joined: 24-September 13

HTML5 animation Performance

Posted 18 December 2013 - 06:50 PM

This question might be off topic but i am wondering why would the following code run much solver on macbook pro 2013 retina display then my old hp laptop. i use chrome browser on both devices. the reason i am asking this is because i developed a game using html5 and javascript and the game runs much solver on the Mac

any advice?

window.onload=function(){
var demo = document.getElementById('demo');
var ctx = demo.getContext('2d');


var animObjects = [];
animObjects.push(new anim(ctx, 0, 90, 80,80, 'yellow', 3, 3));
animObjects.push(new anim(ctx, 20, 90, 80,80, 'red', 4, 0));


loop();

var e = new MouseEvent(ctx);
demo.addEventListener('mousemove', e.clickReporter, false);
function MouseEvent(ctx){
 this.clickReporter = function(evt){
        var mousePos = getMousePos(demo, evt);
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        console.log(message);
        writeMessage(demo, message);
}
function getMousePos(demo, evt) {
        var rect = demo.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
}
function writeMessage(demo, message) {
        ctx.clearRect(0, 0, demo.width, demo.height);
        ctx.font = '18pt Italic';
        ctx.fillStyle = 'black';
        ctx.fillText(message, 10, 25);
}
}

function loop() {   
//ctx.clearRect(0, 0, demo.width, demo.height);
for(var i = 0, ao; ao = animObjects[i]; i++) {

    ao.update();
}
requestAnimationFrame(loop);
}


function anim(ctx, x, y, XSize,YSize, color, dx, dy) {
var me = this;

this.x = x;
this.y = y;
this.XSize = XSize;
this.XSize = XSize;
this.color = color;
this.dx = dx;
this.dy = dy;

var bool = 0;

this.update = function() {
    ctx.clearRect(me.x, me.y, me.XSize, me.XSize);
    if (me.x < 0 || me.x > ctx.canvas.width-80){
        me.dx = -me.dx;
    }
    if (me.y < 0 || me.y > ctx.canvas.height-80){
        me.dy = -me.dy;
    }

    me.x += me.dx;
    me.y += me.dy;        
    render();
}
function render() {
    ctx.beginPath();
    ctx.rect(me.x, me.y, me.XSize, me.XSize);
    ctx.closePath();
    ctx.fillStyle = me.color;
    ctx.fill();
}
return this;
}
}


Is This A Good Question/Topic? 0
  • +

Page 1 of 1