current version
This commit is contained in:
parent
68fb2900f8
commit
869bb121cd
|
|
@ -0,0 +1,412 @@
|
|||
/// CONFIG
|
||||
var FPS=30; //How often tick() is called each second
|
||||
|
||||
//Width and height of the canvas. -1 = maximum possible (whole window)
|
||||
var WIDTH=-1;
|
||||
var HEIGHT=-1;
|
||||
|
||||
var HIDDEN = false;
|
||||
|
||||
var LEFT=0.5;
|
||||
var TOP=0.5;
|
||||
|
||||
var BORDER=0;
|
||||
var BORDER_COLOR="black";
|
||||
var FULLSCREEN=false;
|
||||
|
||||
var PAGE_TITLE="Empty.js";
|
||||
|
||||
var PAUSED=false; //set to true to pause calling tick().
|
||||
|
||||
var CURSOR = "default" //set cursor on canvas
|
||||
|
||||
//EMPTYJS
|
||||
var cv, c;
|
||||
var empty_keys = [];
|
||||
var empty_mouse_x = -1;
|
||||
var empty_mouse_y = -1;
|
||||
var empty_mouse_keys= [false, false, false];
|
||||
|
||||
var empty_new_mouse_x = -1;
|
||||
var empty_new_mouse_y = -1;
|
||||
|
||||
document.addEventListener("DOMContentLoaded",function() { //ONLOAD
|
||||
cv = document.getElementById("cv");
|
||||
if (cv == null) {
|
||||
cv = document.createElement("canvas");
|
||||
cv.id = "cv";
|
||||
document.body.appendChild(cv);
|
||||
}
|
||||
c = cv.getContext("2d");
|
||||
|
||||
document.body.style.margin="0";
|
||||
|
||||
window.addEventListener("resize",empty_resize);
|
||||
|
||||
document.addEventListener("fullscreenchange",function() {
|
||||
cv.focus();
|
||||
empty_fullscreen();
|
||||
});
|
||||
|
||||
document.addEventListener("mousemove",function(e) { //MOUSE MOVEMENT
|
||||
var box = cv.getBoundingClientRect();
|
||||
var boxX = box.top;
|
||||
var boxY = box.left;
|
||||
var x = e.clientX - boxX;
|
||||
var y = e.clientY - boxY;
|
||||
empty_new_mouse_x = e.clientX;
|
||||
empty_new_mouse_y = e.clientY;
|
||||
if (typeof onmousemove == "function") {
|
||||
onmousemove(x,y);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", function(e) { //KEY DOWN
|
||||
if (e.isComposing || e.keyCode === 229) { return; }
|
||||
empty_setKey(e.key, e.keyCode, true);
|
||||
if (typeof onKeyDown == "function") {
|
||||
onKeyDown(e);
|
||||
}
|
||||
empty_fullscreen();
|
||||
});
|
||||
|
||||
document.addEventListener("keyup", function(e) { //KEY UP
|
||||
if (e.isComposing || e.keyCode === 229) {return;}
|
||||
empty_setKey(e.key, e.keyCode, false);
|
||||
if (typeof onKeyUp == "function") {
|
||||
onKeyUp(e);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("click", function(e) { //CLICK
|
||||
empty_fullscreen();
|
||||
if (!HIDDEN && !PAUSED) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("mousedown", function(e) { //MOUSEDOWN
|
||||
if (e.button==0) {
|
||||
empty_fullscreen();
|
||||
}
|
||||
if (!HIDDEN && !PAUSED) {
|
||||
e.preventDefault();
|
||||
}
|
||||
empty_new_mouse_x = e.clientX;
|
||||
empty_new_mouse_y = e.clientY;
|
||||
empty_mouse_keys[e.button]=true;
|
||||
if (typeof onMouseDown == "function") {
|
||||
onMouseDown(getMousePos().x, getMousePos().y, e.button);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("mouseup",function(e) { //MOUSEUP
|
||||
if (e.button==0) {
|
||||
empty_fullscreen();
|
||||
}
|
||||
empty_new_mouse_x = e.clientX;
|
||||
empty_new_mouse_y = e.clientY;
|
||||
empty_mouse_keys[e.button]=false;
|
||||
if (typeof onMouseUp == "function") {
|
||||
onMouseUp(getMousePos().x, getMousePos().y, e.button);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("contextmenu",function(e) { //CONTEXTMENU
|
||||
if (!HIDDEN && !PAUSED) {
|
||||
e.preventDefault();
|
||||
}
|
||||
cv.focus();
|
||||
});
|
||||
|
||||
document.addEventListener("touchmove",function(e) {
|
||||
empty_new_mouse_x = e.touches[0].clientX;
|
||||
empty_new_mouse_y = e.touches[0].clientY;
|
||||
var box = cv.getBoundingClientRect();
|
||||
var boxX = box.top;
|
||||
var boxY = box.left;
|
||||
var x = empty_new_mouse_x - boxX;
|
||||
var y = empty_new_mouse_y - boxY;
|
||||
if (typeof onmousemove == "function") {
|
||||
onmousemove(x,y);
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener("touchstart",function(e) {
|
||||
empty_new_mouse_x = e.touches[0].clientX;
|
||||
empty_new_mouse_y = e.touches[0].clientY;
|
||||
var box = cv.getBoundingClientRect();
|
||||
var boxX = box.top;
|
||||
var boxY = box.left;
|
||||
var x = empty_new_mouse_x - boxX;
|
||||
var y = empty_new_mouse_y - boxY;
|
||||
if (typeof onmousemove == "function") {
|
||||
onMouseDown(x,y,0);
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener("touchstart",function(e) {
|
||||
empty_new_mouse_x = e.touches[0].clientX;
|
||||
empty_new_mouse_y = e.touches[0].clientY;
|
||||
var box = cv.getBoundingClientRect();
|
||||
var boxX = box.top;
|
||||
var boxY = box.left;
|
||||
var x = empty_new_mouse_x - boxX;
|
||||
var y = empty_new_mouse_y - boxY;
|
||||
empty_mouse_keys[0] = true;
|
||||
if (typeof onMouseDown == "function") {
|
||||
onMouseDown(x,y,0);
|
||||
|
||||
}
|
||||
})
|
||||
document.addEventListener("touchend",function(e) {
|
||||
var box = cv.getBoundingClientRect();
|
||||
var boxX = box.top;
|
||||
var boxY = box.left;
|
||||
var x = empty_new_mouse_x - boxX;
|
||||
var y = empty_new_mouse_y - boxY;
|
||||
empty_mouse_keys[0] = false;
|
||||
if (typeof onMouseUp == "function") {
|
||||
onMouseUp(x,y,0);
|
||||
}
|
||||
})
|
||||
|
||||
empty_resize();
|
||||
if (typeof init == "function") {
|
||||
init();
|
||||
}
|
||||
setTimeout(empty_tick,1000/FPS);
|
||||
});
|
||||
|
||||
function empty_tick() { //TICK
|
||||
window.document.title=PAGE_TITLE;
|
||||
|
||||
if (HIDDEN && cv.style.display!="hidden") {
|
||||
cv.style.display="none";
|
||||
}
|
||||
if (!HIDDEN && cv.style.display!="inline-block") {
|
||||
cv.style.display="inline-block";
|
||||
}
|
||||
|
||||
if (BORDER>0) {
|
||||
cv.style.borderStyle="solid";
|
||||
} else {
|
||||
cv.style.borderStyle="none";
|
||||
}
|
||||
cv.style.borderWidth=BORDER;
|
||||
cv.style.borderColor=BORDER_COLOR;
|
||||
if (typeof tick == "function" && !PAUSED) {
|
||||
tick();
|
||||
}
|
||||
document.body.style.cursor = CURSOR;
|
||||
empty_mouse_x = empty_new_mouse_x;
|
||||
empty_mouse_y = empty_new_mouse_y;
|
||||
setTimeout(empty_tick,1000/FPS);
|
||||
}
|
||||
|
||||
function distance(x1,y1,x2,y2) { //DISTANCE
|
||||
return Math.sqrt(Math.pow(x1-x2,2) + Math.pow(y1-y2,2));
|
||||
}
|
||||
|
||||
function getMouseKey(key) { //GET MOUSE KEY
|
||||
return empty_mouse_keys[key];
|
||||
}
|
||||
|
||||
function keystateByCode(code) { //GET KEYSTATE
|
||||
for (var i in empty_keys) {
|
||||
if (empty_keys[i].code==code) {
|
||||
return empty_keys[i].state;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function keystateByName(name) {
|
||||
for (var i in empty_keys) {
|
||||
if (empty_keys[i].name==name) {
|
||||
return empty_keys[i].state;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function getMousePosGobal() { //MOUSE POSITION
|
||||
return {x: empty_mouse_x, y: empty_mouse_y};
|
||||
}
|
||||
|
||||
function getMousePos() {
|
||||
var box = cv.getBoundingClientRect();
|
||||
var boxX = box.top;
|
||||
var boxY = box.left;
|
||||
var x = empty_new_mouse_x - box.top;
|
||||
var y = empty_new_mouse_y - box.left;
|
||||
return {x: x, y: y};
|
||||
}
|
||||
|
||||
function getLastMousePos() {
|
||||
var box = cv.getBoundingClientRect();
|
||||
var boxX = box.top;
|
||||
var boxY = box.left;
|
||||
var x = empty_mouse_x - box.top;
|
||||
var y = empty_mouse_y - box.left;
|
||||
return {x: x, y: y};
|
||||
}
|
||||
|
||||
function getRelativeMouseMovement() {
|
||||
var m1=getMousePos();
|
||||
var m2=getLastMousePos();
|
||||
var ret={x: m1.x - m2.x, y: m1.y - m2.y};
|
||||
return ret;
|
||||
}
|
||||
|
||||
function empty_setKey(key, keycode, value) { //SET KEYSTATE
|
||||
for (var i in empty_keys) {
|
||||
if (empty_keys[i].code==keycode || empty_keys[i].name==key) {
|
||||
empty_keys[i].state=value;
|
||||
return;
|
||||
}
|
||||
}
|
||||
empty_keys.push({code: keycode, name: key, state: value});
|
||||
}
|
||||
|
||||
function fillBackground() {
|
||||
c.fillRect(0,0,cv.width,cv.height);
|
||||
}
|
||||
|
||||
function fillCircle(x,y,r) {
|
||||
c.beginPath();
|
||||
c.moveTo(x,y);
|
||||
c.arc(x,y,r,0,Math.PI*2);
|
||||
c.fill();
|
||||
}
|
||||
|
||||
function strokeCircle(x,y,r) {
|
||||
c.beginPath();
|
||||
c.moveTo(x+r,y);
|
||||
c.arc(x,y,r,0,Math.PI*2);
|
||||
c.stroke();
|
||||
}
|
||||
|
||||
function line(x1,y1,x2,y2) {
|
||||
c.beginPath();
|
||||
c.moveTo(x1,y1);
|
||||
c.lineTo(x2,y2);
|
||||
c.stroke();
|
||||
}
|
||||
|
||||
function randomRange(min,max) { //RANDOM RANGE
|
||||
return Math.floor(Math.random() * (max-min+1) + min);
|
||||
}
|
||||
|
||||
function range(j) {
|
||||
var arr=[];
|
||||
for (var i=0; i<j; i++) {
|
||||
arr.push(i);
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
function minmax(num, min, max) {
|
||||
if (num>max) return max;
|
||||
if (num<min) return min;
|
||||
return num;
|
||||
}
|
||||
|
||||
function rgb(r,g,b) { //COLOR FUNCTIONS
|
||||
return "rgb(" + r + "," + g + "," + b +")";
|
||||
}
|
||||
|
||||
function rgba(r,g,b,a) {
|
||||
return "rgba(" + r + "," + g + "," + b +"," + a + ")";
|
||||
}
|
||||
|
||||
function hsl(h,s,l) {
|
||||
return "hsl(" + h + "," + s + "%," + l +"%)";
|
||||
}
|
||||
|
||||
function hsla(h,s,l,a) {
|
||||
return "hsla(" + h + "," + s + "%," + l +"%," + a +")";
|
||||
}
|
||||
|
||||
function closestPointOnLine(l1x, l1y, l2x, l2y, px, py) {
|
||||
var bb = Math.atan2(py - l1y, px - l1x);
|
||||
var ll = Math.atan2(l2y - l1y, l2x - l1x);
|
||||
var ab=ll-bb;
|
||||
var d=Math.cos(ab)*distance(l1x, l1y, px, py);
|
||||
d = minmax(d, 0, distance(l1x, l1y, l2x, l2y));
|
||||
var x=Math.cos(ll)*d + l1x;
|
||||
var y=Math.sin(ll)*d + l1y;
|
||||
return {x:x, y:y};
|
||||
}
|
||||
|
||||
function lineCircleIntersect(l1x, l1y, l2x, l2y, cx, cy, cr) {
|
||||
var p =closestPointOnLine(l1x, l1y, l2x, l2y, cx, cy)
|
||||
return pointInCircle(p.x,p.y,cx,cy,cr);
|
||||
}
|
||||
|
||||
function pointInRect(px,py,rx,ry,rw,rh) {
|
||||
return px>=rx && py>=ry && px<=rx+rw && py<=ry+rh;
|
||||
}
|
||||
|
||||
function pointInCircle(px,py,cx,cy,cr) {
|
||||
return distance(px,py,cx,cy)<=cr;
|
||||
}
|
||||
|
||||
function rectsCollide(x1,y1,dx1,dy1,x2,y2,dx2,dy2) {
|
||||
return (empty_2dcollide(x1,dx1,x2,dx2) && empty_2dcollide(y1,dy1,y2,dy2))
|
||||
}
|
||||
|
||||
function empty_2dcollide(x1,dx1,x2,dx2) {
|
||||
if (x2 >= x1 && x2 <= x1+dx1) {
|
||||
return true;
|
||||
}
|
||||
if (x1 >= x2 && x1 <= x2+dx2) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function empty_fullscreen() {
|
||||
if (FULLSCREEN) {
|
||||
FULLSCREEN=false;
|
||||
if(document.body.requestFullscreen) {
|
||||
document.body.requestFullscreen();
|
||||
} else if(document.body.mozRequestFullScreen) {
|
||||
document.body.mozRequestFullScreen();
|
||||
} else if(document.body.msRequestFullscreen) {
|
||||
document.body.msRequestFullscreen();
|
||||
} else if(document.body.webkitRequestFullscreen) {
|
||||
document.body.webkitRequestFullscreen();
|
||||
} else {
|
||||
FULLSCREEN=true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function empty_resize() { //WINDOW RESIZE
|
||||
if (WIDTH==-1) {
|
||||
cv.width=window.innerWidth-BORDER*2;
|
||||
cv.style.marginLeft=0;
|
||||
} else {
|
||||
cv.width=WIDTH - BORDER*2;
|
||||
cv.style.marginLeft=(window.innerWidth - WIDTH)*LEFT;
|
||||
}
|
||||
if (HEIGHT==-1) {
|
||||
cv.height=window.innerHeight-BORDER*2;
|
||||
cv.style.marginTop=0;
|
||||
} else {
|
||||
cv.height=HEIGHT - BORDER*2;
|
||||
cv.style.marginTop=(window.innerHeight - HEIGHT)*TOP;
|
||||
}
|
||||
if (typeof onresize=="function") {
|
||||
onresize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
}
|
||||
|
||||
function drawRotatedImage(image,x,y,angle,width,height) {
|
||||
var origin = {x: width/2, y: height/2};
|
||||
c.save();
|
||||
c.translate(x,y);
|
||||
c.rotate(angle);
|
||||
c.drawImage(image,-origin.x,-origin.y,width,height);
|
||||
c.restore();
|
||||
}
|
||||
Reference in New Issue