229 lines
9.7 KiB
HTML
Executable File
229 lines
9.7 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="es" dir="ltr">
|
|
<head>
|
|
<title>Kanvas - Test</title>
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
<meta charset="utf-8" />
|
|
|
|
<style data-type="text/css" data-language="CSS3" data-rel="stylesheet" charset="utf-8">
|
|
|
|
html,body{
|
|
height : 100%;
|
|
margin : 0px;
|
|
}
|
|
|
|
body{overflow : hidden;}
|
|
|
|
.kanvas{
|
|
display : inline-block;
|
|
position : relative;
|
|
top : 0px;
|
|
left : 0px;
|
|
width : 100%;
|
|
height : 100%;
|
|
}
|
|
.kanvas>.cache,
|
|
.kanvas>.cache>canvas,
|
|
.kanvas>canvas{
|
|
position : absolute;
|
|
top : 0px;
|
|
left : 0px;
|
|
}
|
|
.kanvas>.cache,
|
|
.kanvas>canvas{
|
|
width : 100%;
|
|
height : 100%;
|
|
}
|
|
.kanvas>.cache{
|
|
display : block;
|
|
/* visibility : hidden; */
|
|
z-index : 10;
|
|
}
|
|
.kanvas>.cache>canvas{
|
|
background-color: #FEE;
|
|
}
|
|
.kanvas>canvas{
|
|
z-index : 20;
|
|
/* visibility : hidden; */
|
|
}
|
|
|
|
</style>
|
|
|
|
<script type="module" data-type="text/javascript" data-language="ECMAScript 2015" charset="utf-8">
|
|
|
|
import {Kanvas} from "/ecma/Kanvas.ecma.js";
|
|
|
|
/** @type {number} */
|
|
const v = 5;
|
|
|
|
/** @type {Kanvas} */
|
|
const kanvas = new Kanvas({
|
|
position : "body",
|
|
quality : 1,
|
|
frames_per_second : 0,
|
|
// threads_mode : Kanvas.THREADS_MODE_TIMEOUT,
|
|
// context : "webgl",
|
|
on_ready : () => {
|
|
|
|
[
|
|
{
|
|
type : "Rectangle",
|
|
x : -19,
|
|
y : -19,
|
|
width : 4,
|
|
height : 4,
|
|
background : "#F00",
|
|
on_full_done : (...parameters) => console.log(parameters),
|
|
// shadows : [
|
|
// [.5, .5, 1, "#F00"],
|
|
// [-.5, -.5, 1, "#00F"],
|
|
// [0, 0, 1, "#0F0"]
|
|
// ],
|
|
childs : [
|
|
{
|
|
type : "Rectangle",
|
|
x : 3,
|
|
y : 3,
|
|
width : 2,
|
|
height : 2,
|
|
color : "#007",
|
|
on_click : (...parameters) => console.log(parameters)
|
|
}
|
|
],
|
|
on_click : (...parameters) => console.log(["PASA", parameters])
|
|
},
|
|
{
|
|
type : "Text",
|
|
y : -15,
|
|
text : "Hola",
|
|
size : 4,
|
|
weight : 900,
|
|
color : "#060",
|
|
rotate : 45,
|
|
alpha : .5,
|
|
on_mouse_move : () => console.log("PASA")
|
|
},
|
|
["Position", 0, 0, [
|
|
{
|
|
type : "Rectangle",
|
|
x : -19,
|
|
y : -10,
|
|
width : 4,
|
|
height : 4,
|
|
radius : [1, 2],
|
|
// use_modern_mode : false,
|
|
color : "#700"
|
|
},
|
|
{
|
|
type : "Rectangle",
|
|
x : -14,
|
|
y : -10,
|
|
width : 4,
|
|
height : 4,
|
|
radius : [1, 2],
|
|
use_modern_mode : false,
|
|
color : "#700"
|
|
}
|
|
]],
|
|
// ["Image", "https://cdn.k3y.pw/data/space_art_publish/red_giant.png", -10, -10, 20, 20],
|
|
{
|
|
type : "Image",
|
|
source : "https://cdn.k3y.pw/data/space_art_publish/red_giant.png",
|
|
x : -10,
|
|
y : -10,
|
|
width : 20,
|
|
height : 20,
|
|
// on_mouse_move : () => console.log("IMAGE")
|
|
},
|
|
{
|
|
type : "Text",
|
|
y : -20,
|
|
x : 20,
|
|
size : 2,
|
|
weight : 900,
|
|
color : "#000",
|
|
border_color : "#FFF",
|
|
border_size : .1,
|
|
text : "",
|
|
align : "right",
|
|
baseline : "top"
|
|
},
|
|
["Image", "https://cdn.k3y.pw/data/space_art_publish/cold_nebula.png", -20, -20, 40, 40],
|
|
{
|
|
type : "Position",
|
|
x : -25,
|
|
y : -20,
|
|
childs : [{
|
|
type : "Cache",
|
|
x : 10,
|
|
y : 0,
|
|
width : 10,
|
|
height : 10,
|
|
childs : [
|
|
["Rectangle", 3, 3, 2, 2, "#008"],
|
|
["Rectangle", 2, 5, 4, 4, "#700"]
|
|
],
|
|
on_load : (i, cache) => {
|
|
kanvas.thread_add(() => cache.rotation += kanvas.delta * v);
|
|
cache.childs[0].background = "#F00";
|
|
}
|
|
}]
|
|
},
|
|
// // ["Sprite", "https://upload.wikimedia.org/wikipedia/commons/e/e0/Baraja_espa%C3%B1ola_completa.png", -20, 20, {
|
|
// // cards : ["https://upload.wikimedia.org/wikipedia/commons/e/e0/Baraja_espa%C3%B1ola_completa.png", "pattern", 100, 200, 12, 4]
|
|
// // }],
|
|
{
|
|
type : "Sprite",
|
|
x : -20,
|
|
i : 47,
|
|
map : {
|
|
cards : [
|
|
// ["https://upload.wikimedia.org/wikipedia/commons/e/e0/Baraja_espa%C3%B1ola_completa.png", "pattern", 208, 319, 4, 12, 8, 12.5, 0, -12.5]
|
|
["https://upload.wikimedia.org/wikipedia/commons/e/e0/Baraja_espa%C3%B1ola_completa.png", "pattern", 208, 319, 4, 12, 8, 12.5, 0, 0]
|
|
]
|
|
},
|
|
group : "cards",
|
|
fps : 1,
|
|
on_click : (i, sprite) => {
|
|
sprite.rotation += 10;
|
|
console.log(sprite.i);
|
|
}
|
|
}
|
|
].forEach(item => {
|
|
kanvas.map.push(item);
|
|
});
|
|
|
|
// setTimeout(() => {
|
|
// console.log(kanvas.map[0].childs[0]);
|
|
// }, 2000);
|
|
|
|
kanvas.thread_add(() => {
|
|
if(kanvas.map[0].status & Kanvas.LOADED){
|
|
kanvas.map[0].rotation += kanvas.delta * v;
|
|
kanvas.map[0].childs[0].status == Kanvas.LOADED && (kanvas.map[0].childs[0].rotation += kanvas.delta * v);
|
|
};
|
|
kanvas.map[3].status & Kanvas.LOADED && (kanvas.map[3].rotation += kanvas.delta * v);
|
|
kanvas.map[4].status & Kanvas.LOADED && (kanvas.map[4].text = kanvas.real_frames_per_second.toFixed(2) + " FPS");
|
|
kanvas.map[6].childs[0].status & Kanvas.LOADED && (kanvas.map[6].childs[0].rotation += kanvas.delta * v);
|
|
// kanvas.map[4].status & Kanvas.LOADED && (kanvas.map[4].text = kanvas.difference);
|
|
}, {
|
|
bucle : true
|
|
});
|
|
|
|
// setInterval(() => {
|
|
// console.log([kanvas.difference, kanvas.delta]);
|
|
// kanvas.frames_per_second = kanvas.frames_per_second ? 0 : 60;
|
|
// }, 5000);
|
|
|
|
// kanvas.on_key_down.add((...parameters) => console.log(parameters));
|
|
// kanvas.on_mouse_move.add((...parameters) => console.log(parameters), 0, 0, 3);
|
|
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body></body>
|
|
</html>
|