jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 10:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

first mapeditor test

Browse source
This commit is contained in:
Josef Konrad 2012-06-03 13:41:46 +02:00
parent 8d0ff1a929
commit 8da2299c08
13 changed files with 605 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
Editor/img/sh.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
Editor/img/tile_shape_rotation_map.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
Editor/img/tile_shape_rotation_map_view.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

32
Editor/index.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ChuckEdit v0.0.0.1a</title>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="script/Game.js"></script>
<script type="text/javascript" src="script/Tile.js"></script>
<script type="text/javascript" src="script/Button.js"></script>
<script type="text/javascript" src="script/Start.js"></script>
<script type="text/javascript" src="script/Debug.js"></script>
<script type="text/javascript" src="script/main.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<canvas id="editor" width="640" height="480"></canvas>
<img id="helpimage" src="img/tile_shape_rotation_map_view.jpg" />
<div id="helpdiv">
+ = zoom in
<br/>
- = zoom out
<br/>
1 - 8 = tiles
<br/>
mousewheel = rotate
</div>
</body>
</html>

14
Editor/script/Button.js Normal file
View file

@ -0,0 +1,14 @@
// Button Class
function Button(x, y, width, height, callback)
{
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.callback = callback;
this.Press = function()
{
this.callback.call();
};
}

7
Editor/script/Debug.js Normal file
View file

@ -0,0 +1,7 @@
function Debug(iwas)
{
if(debug)
{
console.log(iwas);
}
}

167
Editor/script/Game.js Normal file
View file

@ -0,0 +1,167 @@
function Game()
{
this.Images = new Object();
this.Buttons = new Object();
this.images2Load = 0;
this.imagesLoaded = 0;
this.timer = null;
this.self = this;
this.mouseX = 0;
this.mouseY = 0;
this.click = false;
this.wheel = 0;
this.Init = function()
{
Debug('Init Game');
ctx.strokeStyle = 'rgb(0, 0, 0)';
ctx.strokeRect(0, 460, 640, 20);
LoadImages();
};
this.StartGame = function()
{
window.clearInterval(this.aktiv);
this.ClearScreen();
this.ClearButtons();
InitGame();
Debug('Starting Game');
function timerRelay()
{
RunningGame();
}
this.aktiv = window.setInterval(timerRelay, 1000 / gameFps);
};
this.StartMenu = function()
{
window.clearInterval(this.aktiv);
this.ClearScreen();
this.ClearButtons();
InitMenu();
Debug('Load menu');
function timerRelay()
{
MainMenu();
}
this.aktiv = window.setInterval(timerRelay, 1000 / menuFps);
};
this.InitButton = function(name, x, y, width, height, callback)
{
Debug('Init Button ' + name);
if(this.Buttons[name] != undefined)
{
console.error('Button ' + name + ' wurde doppelt belegt!');
return false;
}
this.Buttons[name] = new Button(x, y, width, height, callback);
};
this.InitImage = function(name, url)
{
Debug('LoadImage: ' + name + ' - ' + url);
if(this.Images[name] != undefined)
{
console.error('Image ' + name + ' wurde doppelt belegt!');
return false;
}
this.images2Load++;
this.Images[name] = new Image();
this.Images[name].onload = function(){game.ImageLoaded();};
this.Images[name].src = url;
};
this.MouseClick = function(mouseX, mouseY)
{
this.click = true;
Debug('check buttons');
for(i in this.Buttons)
{
if(mouseX > this.Buttons[i].x && mouseY > this.Buttons[i].y
&& mouseX <= (this.Buttons[i].x + this.Buttons[i].width) && mouseY <= (this.Buttons[i].y + this.Buttons[i].height))
{
Debug('button ' + i + ' pressed');
this.Buttons[i].Press();
this.click = false;
return;
}
}
if(selection == create)
{
CreateLemming(mouseX - 13, mouseY - 3);
this.click = false;
return;
}
};
this.MouseWheel = function(speed)
{
this.wheel = speed;
};
this.MouseMove = function(mouseX, mouseY)
{
this.mouseX = mouseX;
this.mouseY = mouseY;
var mouseOver = false;
for(i in this.Buttons)
{
if(mouseX > this.Buttons[i].x && mouseY > this.Buttons[i].y
&& mouseX <= (this.Buttons[i].x + this.Buttons[i].width) && mouseY <= (this.Buttons[i].y + this.Buttons[i].height))
{
mouseOver = true;
}
}
if(mouseOver)
{
$('#game').css({cursor: 'pointer'});
}
else
{
$('#game').css({cursor: 'default'});
}
};
this.ImageLoaded = function()
{
this.imagesLoaded++;
Debug(this.imagesLoaded + ' von ' + this.images2Load + ' geladen');
ctx.fillStyle = 'rgb(0, 150, 0)';
ctx.fillRect(1, 461, 638 / this.images2Load * this.imagesLoaded, 18);
if(this.images2Load == this.imagesLoaded)
{
game.ClearScreen();
game.StartMenu();
}
};
this.ClearButtons = function()
{
Debug('all Buttons cleared');
this.Buttons = new Object();
};
this.ClearScreen = function()
{
ctx.clearRect(0, 0, 640, 480);
};
}

109
Editor/script/Start.js Normal file
View file

@ -0,0 +1,109 @@
// Start and Init of all
var right = 1;
var left = -1;
var game = null;
var canvas = null;
var ctx = null;
var Map = new Object();
var walk = 1;
var fall = 2;
var smash = 3;
var fly = 4;
var delve = 5;
var stair = 6;
var create = 99;
var selection = 0;
var gameFrame = 0;
$(document).ready(function()
{
canvas = document.getElementById('editor');
ctx = canvas.getContext('2d');
$('body').live('keypress', function(e)
{
Debug('Key: ' + e.which);
switch (e.which)
{
case 45: // +
if(zoomSize > 10)
{
zoomSize -= 5;
}
break;
case 43: // -
if(zoomSize < 50)
{
zoomSize += 5;
}
break;
case 49: // 1
case 50: // 2
case 51: // 3
case 52: // 4
case 53: // 5
case 54: // 6
case 55: // 7
case 56: // 8
tileType = (e.which - 49);
break;
default:
break;
}
});
// event für mausrad
$('#editor').bind('mousewheel', function(event, delta, deltaX, deltaY)
{
if(delta > 0)
{
game.MouseWheel(+1);
}
if(delta < 0)
{
game.MouseWheel(-1);
}
return false;
});
// event für mausposition
$('#editor').bind('click', function(event)
{
var offset = $('#editor').offset();
var mouseX = event.clientX - offset.left;
var mouseY = event.clientY - offset.top;
game.MouseClick(mouseX, mouseY);
});
// event für mausposition
$('#editor').mousemove(function(event)
{
var offset = $('#editor').offset();
var mouseX = event.clientX - offset.left;
var mouseY = event.clientY - offset.top;
game.MouseMove(mouseX, mouseY);
});
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, 640, 480);
// Ab hier kommt das preload aller images und sound files
var img = new Image();
img.onload = function()
{
// ctx.drawImage(img, 31, 0);
game = new Game();
game.Init();
};
img.src = bootLoaderImg;
});

20
Editor/script/Tile.js Normal file
View file

@ -0,0 +1,20 @@
// Tile Class
function Tile(x, y, tile, rotation)
{
this.x = x;
this.y = y;
this.tile = tile;
this.rotation = rotation;
this.toString = function()
{
if(this.rotation == 0)
{
return '<tile shape="' + this.tile + '" x="' + this.x + '" y="' + this.y + '" />';
}
else
{
return '<tile shape="' + this.tile + '" x="' + this.x + '" y="' + this.y + '" rotation="' + this.rotation + '" />';
}
};
}

18
Editor/script/jquery.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

84
Editor/script/jquery.mousewheel.js Normal file
View file

@ -0,0 +1,84 @@
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.6
*
* Requires: 1.2.2+
*/
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
if ($.event.fixHooks) {
for ( var i=types.length; i; ) {
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
})(jQuery);

119
Editor/script/main.js Normal file
View file

@ -0,0 +1,119 @@
// Settings
var menuFps = 30;
var gameFps = 30;
var bootLoaderImg = "img/sh.png";
var debug = true;
var zoomSize = 40;
var tileType = 1;
var tileRotation = 0;
// The Game routine is called 35 times in a second
function RunningGame()
{
game.ClearScreen();
if(game.wheel)
{
tileRotation += game.wheel;
if(tileRotation > 3)
{
tileRotation = 0;
}
if(tileRotation < 0)
{
tileRotation = 3;
}
}
// male alle tiles die schonmal gesetzt wurden
// das Maustile
ctx.drawImage(
game.Images.tileshape,
tileRotation * 40,
tileType * 40,
40,
40,
Math.round(game.mouseX / zoomSize) * zoomSize,
Math.round(game.mouseY / zoomSize) * zoomSize,
zoomSize,
zoomSize
);
// rahmen um Maus
ctx.strokeStyle = 'rgb(0, 255, 0)';
ctx.strokeRect(Math.round(game.mouseX / zoomSize) * zoomSize,
Math.round(game.mouseY / zoomSize) * zoomSize,
zoomSize,
zoomSize
);
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillText(Math.round(game.mouseX / zoomSize) + ', ' + Math.round(game.mouseY / zoomSize) + ' zoom: ' + zoomSize, 0, 10);
game.click = false;
game.wheel = 0;
}
// The MainMenu routine is called 35 times in a second
function MainMenu()
{
// ctx.drawImage(game.Images.menu, 0, 0);
//
// ctx.font = '30px "arial", arial';
// ctx.fillStyle = '#99ff99';
//
// ctx.fillRect(150, 200, 100, 40);
//
// ctx.fillStyle = 'rgb(0, 0, 0)';
// ctx.fillText('Start', 167, 230);
}
//Button Callbacks
//function ButtonTestPressed()
//{
// game.StartGame();
//}
//
//function SelectDelve()
//{
// selection = delve;
//}
//
//function SelectStair()
//{
// selection = stair;
//}
//
//function SelectCreate()
//{
// selection = create;
//}
// Init methods
function LoadImages()
{
game.InitImage('tileshape', 'img/tile_shape_rotation_map.jpg');
// game.InitImage('menu', 'img/menu.jpg');
// game.InitImage('lemming', 'img/lemming_anim.png');
// game.InitImage('map', 'img/map.png');
// game.InitImage('button', 'img/button.png');
}
function InitMenu()
{
game.StartGame();
// Hier werden dann mal Buttons definiert
// evtl wirds auch ausgelagert
// game.InitButton('Start', 150, 200, 100, 40, ButtonTestPressed);
}
function InitGame()
{
// game.InitButton('SelectCreate', 10, 450, 25, 25, SelectCreate);
// game.InitButton('SelectDelve', 40, 450, 25, 25, SelectDelve);
// game.InitButton('SelectStair', 70, 450, 25, 25, SelectStair);
}

35
Editor/style/style.css Normal file
View file

@ -0,0 +1,35 @@
@CHARSET "UTF-8";
*
{
padding: 0px;
margin: 0px;
}
body
{
width: 100%;
/* text-align: center; */
background: #111111;
}
canvas
{
margin: 10px;
background: #666666;
cursor: none;
}
#helpimage
{
float: left;
margin: 10px 0 0 10px;
}
#helpdiv
{
float: left;
color: #fff;
font-size: 0.9em;
margin: 10px 0 0 10px;
}