made boxes better
This commit is contained in:
parent
0c40c66c00
commit
682f176fc4
|
|
@ -10,13 +10,12 @@ body {
|
|||
background-image: url("../images/wool.jpg");
|
||||
}
|
||||
|
||||
#build {
|
||||
#itemcount {
|
||||
position: fixed;
|
||||
border: 1px, solid , black;
|
||||
border: solid;
|
||||
border-color: white;
|
||||
background-image: url(../images/fliesen.png);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#info {
|
||||
|
|
@ -25,5 +24,4 @@ body {
|
|||
border: solid;
|
||||
border-color: white;
|
||||
background-image: url(../images/fliesen.png);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
|||
16
index.html
16
index.html
|
|
@ -18,18 +18,10 @@
|
|||
<body>
|
||||
<canvas id="screen">
|
||||
</canvas>
|
||||
<div id="build">
|
||||
<img src="images/tiles/conveyorbelt00.png"></img>
|
||||
<img src="images/tiles/conveyorbelt00.png"></img>
|
||||
<img src="images/tiles/conveyorbelt00.png"></img>
|
||||
<img src="images/tiles/conveyorbelt00.png"></img>
|
||||
<img src="images/tiles/conveyorbelt00.png"></img>
|
||||
<img src="images/tiles/conveyorbelt00.png"></img>
|
||||
<img src="images/tiles/conveyorbelt00.png"></img>
|
||||
</div>
|
||||
<div id="info">
|
||||
|
||||
</div>
|
||||
<canvas id="itemcount">
|
||||
</canvas>
|
||||
<canvas id="info">
|
||||
</canvas>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
14
js/game.js
14
js/game.js
|
|
@ -114,6 +114,12 @@ function render() {
|
|||
drawRotatedImage(img, tile.x * 48 + 24, tile.y * 48 + 24, directions[tile.direction].degree)
|
||||
}
|
||||
}
|
||||
//DRAW CURSOR BOX
|
||||
if(isCursorInScreen){
|
||||
ctx.globalAlpha = 0.4
|
||||
ctx.fillRect(cursorScreenX*48,cursorScreenY*48,48,48)
|
||||
ctx.globalAlpha = 1
|
||||
}
|
||||
}
|
||||
|
||||
function getItemFormId(id) {
|
||||
|
|
@ -125,8 +131,14 @@ function getItemFormId(id) {
|
|||
}
|
||||
|
||||
function prepairRender() {
|
||||
var canvas = $('canvas')[0];
|
||||
var canvas = $('#screen')[0];
|
||||
ctx = canvas.getContext('2d')
|
||||
canvas.width = 1200
|
||||
canvas.height = 576
|
||||
canvas = $('#itemcount')[0];
|
||||
canvas.width = 720
|
||||
canvas.height = 240
|
||||
canvas = $('#info')[0];
|
||||
canvas.width = 432
|
||||
canvas.height = 240
|
||||
}
|
||||
|
|
|
|||
53
js/resize.js
53
js/resize.js
|
|
@ -4,20 +4,51 @@ $(window).resize(function() {
|
|||
|
||||
$(document).ready(function() {
|
||||
style();
|
||||
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
||||
})
|
||||
|
||||
var screenleftpos = 0
|
||||
var screentoppos = 0
|
||||
|
||||
var cursorScreenX = -1
|
||||
var cursorScreenY = -1
|
||||
|
||||
var isCursorInScreen = true
|
||||
|
||||
function style() {
|
||||
$('#screen').css("margin-left", (window.innerWidth - 1200) / 2);
|
||||
$('#screen').css("margin-top", (window.innerHeight - 576) / 3);
|
||||
$('#build').css("width", (1200/2)-8)
|
||||
var topp = $('#screen').css("margin-top").substring(0,$('#screen').css("margin-top").length-2)
|
||||
$('#build').css("height", window.innerHeight-topp-576-32)
|
||||
$('#build').css("margin-left", $('#screen').css("margin-left"));
|
||||
$('#build').css("margin-top", (parseInt(topp)+576+16));
|
||||
$('#info').copyCSS('#build', ['height','margin-top','width'])
|
||||
$('#info').css("margin-left", pxToInt($('#screen').css("margin-left"))+16+(1200/2)-8)
|
||||
var screenMarginTop = window.innerHeight - 912
|
||||
var screenMarginLeft = (window.innerWidth - 1200) / 2
|
||||
var itemCountMarginTop = screenMarginTop+624
|
||||
var infoMarginLeft = screenMarginLeft+768
|
||||
|
||||
$('#screen').css('margin-top', screenMarginTop)
|
||||
$('#screen').css('margin-left', screenMarginLeft)
|
||||
$('#info').css('margin-top', itemCountMarginTop)
|
||||
$('#info').css('margin-left', infoMarginLeft)
|
||||
$('#itemcount').css('margin-top', itemCountMarginTop)
|
||||
$('#itemcount').css('margin-left', screenMarginLeft)
|
||||
screenleftpos = pxToInt($('#screen').css("margin-left"))
|
||||
screentoppos = pxToInt($('#screen').css("margin-top"))
|
||||
}
|
||||
|
||||
function pxToInt(px){
|
||||
return parseInt(px.substring(0,px.length-2))
|
||||
function pxToInt(px) {
|
||||
return parseInt(px.substring(0, px.length - 2))
|
||||
}
|
||||
|
||||
function onDocumentMouseMove(event) {
|
||||
|
||||
var mX = event.clientX - screenleftpos;
|
||||
var mY = event.clientY - screentoppos;
|
||||
if (mX < 0 || mX > 1200 || mY < 0 || mY > 576) {
|
||||
cursorScreenX = -1
|
||||
cursorScreenY = -1
|
||||
} else {
|
||||
cursorScreenX = Math.floor(mX / 48);
|
||||
cursorScreenY = Math.floor(mY / 48);
|
||||
}
|
||||
if (cursorScreenX != -1 && cursorScreenY != -1) {
|
||||
isCursorInScreen = true
|
||||
} else {
|
||||
isCursorInScreen = false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"more": "show more..."
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue