quadtree2
Version:
JavaScript implementation of quadtree datastructure for collision detection.
176 lines (158 loc) • 4.73 kB
HTML
<html>
<head>
<title>Quadtree2.js Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="quadtree2.js" defer></script>
<script src="index/jquery.min.js" defer></script>
<script src="index/vec2.js" defer></script>
<script src="index/pixi.min.js" defer></script>
<script src="index/main.js" defer></script>
<style>
div#container {
display : inline-block;
left : 50%;
width : 930px;
min-height : 600px;
padding : 40px;
position : absolute;
margin-left : -500px;
border : 1px solid black;
background-color: #5A6856;
-moz-box-shadow: inset 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 10px #fff;
box-shadow: inset 0 0 10px #fff;
}
div#app {
display : block;
height : 500px;
}
div#log {
margin-top : 20px;
color : white;
padding : 15px;
background-color : #212121;
-moz-box-shadow : 6px 6px 5px 2px #000;
-webkit-box-shadow : 6px 6px 5px 2px #000;
box-shadow : 6px 6px 5px 2px #000;
}
.hidden {
display: none ;
}
ul {
margin : 0;
display : inline-block;
width : 390px;
}
li {
margin-top : 10px;
padding : 10px 10px 0 10px;
height : 30px;
border : 1px solid black;
list-style-type : none;
background-color: #d9d9d9;
-moz-box-shadow : 6px 6px 5px 2px #000;
-webkit-box-shadow : 6px 6px 5px 2px #000;
box-shadow : 6px 6px 5px 2px #000;
}
li.place {
margin-top : 40px;
}
li.button {
cursor : pointer;
background-color: #51b12f;
}
li.info {
background-color : white;
color : #888;
height : 55px;
margin-bottom : 25px;
}
li.button:hover {
background-color: #f1b12f;
border-color: white;
-moz-box-shadow : 6px 6px 5px 2px #222;
-webkit-box-shadow : 6px 6px 5px 2px #222;
box-shadow : 6px 6px 5px 2px #222;
}
li span {
display : inline-block;
}
li span:first-child {
width: 210px;
}
li span.small {
font-size: 12px;
}
li span[id] {
color : green;
float : right;
width : 150px;
text-align : right;
overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap;
}
li.button span[id] {
color : white;
}
li.info span:first-child {
width: 100%;
}
div#graphics {
display : inline-block;
height : 500px;
float : left;
-moz-box-shadow : 6px 6px 5px 2px #000;
-webkit-box-shadow : 6px 6px 5px 2px #000;
box-shadow : 6px 6px 5px 2px #000;
}
</style>
</head>
<body>
<div id="container">
<div id="app">
<div id="graphics" class="hidden"></div>
<ul>
<li class="info">
Welcome to the Quadtree2.js demo page!
<span class="small">
Experiment around by using the green action buttons and by clicking on the square to trigger the current action.
</span>
</li>
<!--
<li>
<span>Selected id:</span>
<span id=closest-object-id"></span>
</li>
<li>
<span>Selected quadrant-ids: </span>
<span id="closest-quadrant-id"></span>
</li>
<li>
<span>Quadrant count: </span>
<span id="quadrant-count"></span>
</li>
<li>
<span>Object count: </span>
<span id="object-count"></span>
</li>
<li id="auto-add" class="button place">
<span>Auto add:</span>
<span id="auto-add-content"></span>
</li>
-->
<li id="action" class="button">
<span>Click action:</span>
<span id="action-content"></span>
</li>
<li id="log-info" class="button">
<span>Show reproduction logs</span>
<span id="log-info-content"></span>
</li>
</div>
<div id="log" class="hidden">
<span id="log-content"></span>
</div>
</div>
</body>
</html>