Kanvas/Public/test/index.html

229 lines
9.7 KiB
HTML
Raw Normal View History

<!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>