time shaft
calculate fram count every seconds
var fps = 60,
interval = 1000 / fps,
now = Date.now(),
lastSecond = Math.floor(now / 1000),
frameCount = Math.ceil((now % 1000) / fps) ;
window.setInterval(function(){
var now = Date.now(),
second = Math.floor(now / 1000),
milliSecond = now % 1000;
if(second != lastSecond){
frameCount = 0;
lastSecond = second;
}
if(frameCount < fps && milliSecond >= frameCount * interval){
frameCount ++;
//do render
}
},1);
keyboard press status
var specialKeys = {},
keyboardHandler = function (e){
var isDown = e.type === 'keyDown';
e.stopPropagation();
e.preventDefault();
if(!specialKeys[e.keyCode]){
keyStates[e.keyCode] = isDown;
}
},
blurHandler = function (){
keyStates = {};
};
specialKeys[16] = specialKeys[17] = specialkeys[18] = true;
canvas.addEventListener('keydown',keyboardHandler,false);
canvas.addEventListener('keyup',keyboardHandler,false);
canvas.addEventListener('blur',blurHandler,false);
mouse event
cache every mouse event , deal cache every render . and clear dealed event in the cache.
var MAX = 30,head=0,tail=0,
history = [],
mousemoveHandler = function (e){
var last = history[head];
if(e.screenX == last.screenX && e.screenY == last.screenY){
//ignore duplication
return;
}
head = (head + 1) % MAX;
history[head] = {
//store attr in event..
};
if(tail == head){
tail = (tail + 1) % MAX;
}
},
traverseHistory = function (cb){
var len = (head - tail + MAX) % MAX ,i;
for(i = 0,i<len;i++){
cb(history[(i + tail) % MAX]);
}
};
canvas.addEventListener('mousemove',mousemoveHandler,false);
touch device support
same to up
var MAX = 30,head = 0,tail = 0,
history = [],
touchHandler = function (){
var last = history[head],
touch = e.touches[0];
e.preventDefault();
if(touch.screenX == last.screenX && touch.screenY == last.screenY){
//ignore duplication
return;
}
head = (head + 1) % MAX;
history[head] = {
//store attr in event..
};
if(tail == head){
tail = (tail + 1) % MAX;
}
};
canvas.addEventListener('touchstart',touchHandler,false);
canvas.addEventListener('touchmove',touchHandler,false);