Initial commit
This commit is contained in:
Aaron Yarborough
commit
4b4e124c57
21 changed files with 1144 additions and 0 deletions
BIN
content/background-sunset.png
Normal file
BIN
content/background-sunset.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
51
game.html
Normal file
51
game.html
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
|
||||||
|
<title>Tile Game</title>
|
||||||
|
|
||||||
|
<!--Scripts-->
|
||||||
|
<script src="code/external/jquery.js"></script>
|
||||||
|
<script src="code/helpers.js"></script>
|
||||||
|
<script src="code/files.js"></script>
|
||||||
|
<script src="code/tileset.js"></script>
|
||||||
|
<script src="code/tile.js"></script>
|
||||||
|
<script src="code/tileengine.js"></script>
|
||||||
|
<script src="code/level.js"></script>
|
||||||
|
<script src="code/animation.js"></script>
|
||||||
|
<script src="code/player.js"></script>
|
||||||
|
<script src="code/main.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function() {
|
||||||
|
onDOMReady();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!--Scripts End-->
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
#container {
|
||||||
|
position: absolute;
|
||||||
|
width: 512px;
|
||||||
|
height: 512px;
|
||||||
|
border: 1px solid black;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -256px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
90
index.html
Normal file
90
index.html
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
<! DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
#GameContainer {
|
||||||
|
width: 1001px;
|
||||||
|
height: 600px;
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#GameCanvas {
|
||||||
|
width: 800px;
|
||||||
|
height: 600px;
|
||||||
|
background-color: green;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#InfoContainer {
|
||||||
|
width: 200px;
|
||||||
|
height: 600px;
|
||||||
|
border-left: 1px solid black;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
background: lightgray;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Arial;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: none;
|
||||||
|
list-style-position: inside;
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li span {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
|
||||||
|
<script src="js/external/jquery.js"></script>
|
||||||
|
<script src="js/helpers.js"></script>
|
||||||
|
<script src="js/files.js"></script>
|
||||||
|
<script src="js/tileset.js"></script>
|
||||||
|
<script src="js/tile.js"></script>
|
||||||
|
<script src="js/tileengine.js"></script>
|
||||||
|
<script src="js/level.js"></script>
|
||||||
|
<script src="js/animation.js"></script>
|
||||||
|
<script src="js/player.js"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="GameContainer">
|
||||||
|
<canvas width="800" height="600" id="GameCanvas"></canvas>
|
||||||
|
<div id="InfoContainer">
|
||||||
|
<h1>General</h1>
|
||||||
|
<ul>
|
||||||
|
<li>Bg src: <span id="InfoBgSrc">#</span></li>
|
||||||
|
</ul>
|
||||||
|
<h1>Tileset</h1>
|
||||||
|
<ul>
|
||||||
|
<li>Tileset loaded: <span id="InfoTilesetLoaded">#</span></li>
|
||||||
|
<li>Tileset src: <span id="InfoTilesetSrc">#</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
43
js/animation.js
Normal file
43
js/animation.js
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
function Animation() {
|
||||||
|
this.name = "";
|
||||||
|
this.steps = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
Animation.prototype.setAni = function(animation) {
|
||||||
|
// Set animation name
|
||||||
|
this.name = animation;
|
||||||
|
|
||||||
|
// Load content from animation file
|
||||||
|
var content = getFileContent("assets/animations/" + animation);
|
||||||
|
var lines = content.split("\n");
|
||||||
|
// Parse content and store frames
|
||||||
|
for (var i = 0; i < lines.length; i++) {
|
||||||
|
// Ignore blank lines
|
||||||
|
if (lines[i] == "") continue;
|
||||||
|
if (end == true) continue;
|
||||||
|
|
||||||
|
// If it hasn't found the ANI line yet
|
||||||
|
if (inside == false && lines[i] == "ANI") {
|
||||||
|
// Tell the script it's found the ani line
|
||||||
|
console.debug("found inside!");
|
||||||
|
|
||||||
|
inside = true;
|
||||||
|
continue;
|
||||||
|
|
||||||
|
// If it has already found the ANI line
|
||||||
|
} else if (inside == true) {
|
||||||
|
// Check if it's the end of the ani
|
||||||
|
if (lines[i] == "ANIEND") {
|
||||||
|
// Tell the script it's the end of the ani
|
||||||
|
end = true;
|
||||||
|
continue;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// Add the line to the steps list
|
||||||
|
this.steps.push(lines[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.debug(this.steps);
|
||||||
|
}
|
||||||
42
js/dialogue.js
Normal file
42
js/dialogue.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
function Dialogue(data) {
|
||||||
|
// Define the parent element
|
||||||
|
this.parent = data.parent;
|
||||||
|
|
||||||
|
// Define default values
|
||||||
|
var def = {
|
||||||
|
width: 400,
|
||||||
|
height: 300,
|
||||||
|
canclose: true
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create the dialogue element
|
||||||
|
this.ctrl = document.createElement("div");
|
||||||
|
with (this.ctrl) {
|
||||||
|
style.position = "absolute";
|
||||||
|
style.width = data.width != null ? data.width : def.width;
|
||||||
|
style.height = data.height != null ? data.height : def.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Create the close button element
|
||||||
|
this.ctrl_close = document.createElement("button");
|
||||||
|
with (this.ctrl_close) {
|
||||||
|
style.width = 25;
|
||||||
|
style.height = 25;
|
||||||
|
style.display = data.canclose == true ? "none" : "initial";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add event listeners to the parent
|
||||||
|
this.parent.addEventListener("open", function() {
|
||||||
|
this.parent.onOpen();
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
this.parent.addEventListener("close", function() {
|
||||||
|
this.parent.onClose();
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
Dialogue.prototype.open = function() {
|
||||||
|
this.ctrl.show();
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
8
js/entity.js
Normal file
8
js/entity.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
function Entity() {
|
||||||
|
this.x;
|
||||||
|
this.y;
|
||||||
|
this.health;
|
||||||
|
this.maxhealth;
|
||||||
|
this.speed;
|
||||||
|
this.type;
|
||||||
|
}
|
||||||
30
js/filebrowser.js
Normal file
30
js/filebrowser.js
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
function FileBrowser() {
|
||||||
|
// Assign a dialog instance to a variable
|
||||||
|
// in the object so it can be reference
|
||||||
|
//
|
||||||
|
// Add a parent property to the data
|
||||||
|
// object being passed to the dialog control
|
||||||
|
// can communicate with the file browser
|
||||||
|
// control
|
||||||
|
this.dialog = new Dialog({
|
||||||
|
width: 400,
|
||||||
|
height: 300,
|
||||||
|
canclose: true,
|
||||||
|
parent: this
|
||||||
|
});
|
||||||
|
|
||||||
|
this.filter = [];
|
||||||
|
this.selectedFile;
|
||||||
|
}
|
||||||
|
|
||||||
|
FileBrowser.prototype.open = function(data) {
|
||||||
|
this.filter = data.filter;
|
||||||
|
this.directory = data.directory;
|
||||||
|
|
||||||
|
this.dialog.open();
|
||||||
|
}
|
||||||
|
|
||||||
|
FileBrowser.prototype.close = function() {
|
||||||
|
this.dialog.close();
|
||||||
|
}
|
||||||
|
|
||||||
83
js/files.js
Normal file
83
js/files.js
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
/*
|
||||||
|
* Checks if a file exists
|
||||||
|
**/
|
||||||
|
function fileExists(file) {
|
||||||
|
var result;
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: "./" + file,
|
||||||
|
type: "GET",
|
||||||
|
timeout: 3000,
|
||||||
|
async: false,
|
||||||
|
success: function() {
|
||||||
|
result = true;
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
result = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFileContent(file) {
|
||||||
|
var content;
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: "./" + file,
|
||||||
|
type: "GET",
|
||||||
|
timeout: 3000,
|
||||||
|
async: false,
|
||||||
|
success: function(data) {
|
||||||
|
content = data;
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createFile(data) {
|
||||||
|
var data = data;
|
||||||
|
data.command = "file_create";
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: "./code/php/serverside.php",
|
||||||
|
timeout: 3000,
|
||||||
|
type: "POST",
|
||||||
|
data: data,
|
||||||
|
success: function(reply) {
|
||||||
|
console.debug("AJAX REPLY: " + reply);
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFolderFiles(data) {
|
||||||
|
var data = data;
|
||||||
|
data.command = "directory_list";
|
||||||
|
|
||||||
|
var content;
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: "./code/php/serverside.php",
|
||||||
|
timeout: 3000,
|
||||||
|
type: "POST",
|
||||||
|
data: data,
|
||||||
|
async: false,
|
||||||
|
dataType: "json",
|
||||||
|
success: function(reply) {
|
||||||
|
content = reply;
|
||||||
|
},
|
||||||
|
error: function(reply) {
|
||||||
|
console.debug(reply.responseText);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return content;
|
||||||
|
}
|
||||||
76
js/game.js
Normal file
76
js/game.js
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
$(document).ready(function() {
|
||||||
|
onPageLoaded();
|
||||||
|
});
|
||||||
|
|
||||||
|
var _running = false;
|
||||||
|
var _canvas;
|
||||||
|
var _ctx;
|
||||||
|
|
||||||
|
var player;
|
||||||
|
var backgroundImage;
|
||||||
|
var tileset;
|
||||||
|
|
||||||
|
function onPageLoaded() {
|
||||||
|
setInterval(run, 1000 / 50);
|
||||||
|
|
||||||
|
_canvas = document.getElementById("GameCanvas");
|
||||||
|
_ctx = _canvas.getContext("2d");
|
||||||
|
|
||||||
|
backgroundImage = new Image();
|
||||||
|
backgroundImage.src = "content/background-sunset.png";
|
||||||
|
backgroundImage.onload = function() {
|
||||||
|
_running = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
tileset = new Tileset();
|
||||||
|
}
|
||||||
|
|
||||||
|
function run() {
|
||||||
|
if (_running) {
|
||||||
|
update();
|
||||||
|
draw();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
$("#InfoBgSrc")[0].innerHTML = backgroundImage.src.substring(backgroundImage.src.lastIndexOf("/") + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
// draw background
|
||||||
|
_ctx.drawImage(backgroundImage, 0, 0);
|
||||||
|
|
||||||
|
// Draw level tiles
|
||||||
|
if (tileset.Loaded) {
|
||||||
|
var rowIndex = 0;
|
||||||
|
for (var i = 0; i < level.Tiles.length; i++) {
|
||||||
|
for (var j = 0; j < level.tiles[i].length; j++) {
|
||||||
|
var levelTileID = cellPosToTilePos([rowIndex, j]);
|
||||||
|
var tilesetPos = tileset.tileIDToTilesetPos(level.tiles[i][j].getID());
|
||||||
|
var tilePos = [rowIndex * tileEngine.tileSize, j * tileEngine.tileSize];
|
||||||
|
|
||||||
|
canvasCtx.drawImage(
|
||||||
|
tileset.image,
|
||||||
|
tilesetPos[0],
|
||||||
|
tilesetPos[1],
|
||||||
|
tileEngine.tileSize,
|
||||||
|
tileEngine.tileSize,
|
||||||
|
Math.ceil((levelTileID % level.width) * tileEngine.tileSize),
|
||||||
|
Math.floor((levelTileID / level.height)) * tileEngine.tileSize,
|
||||||
|
tileEngine.tileSize, tileEngine.tileSize
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
rowIndex ++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/******
|
||||||
|
OBJECTS
|
||||||
|
******/
|
||||||
|
var FileManager = {
|
||||||
|
getFileContent : function () {
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
3
js/guicontrol.js
Normal file
3
js/guicontrol.js
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
function GUIControl(type) {
|
||||||
|
this.type = type;
|
||||||
|
}
|
||||||
10
js/helpers.js
Normal file
10
js/helpers.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
function isKeyDown(keycode) {
|
||||||
|
if (keysdown[keycode] == true) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function echo(msg) {
|
||||||
|
console.debug(msg);
|
||||||
|
}
|
||||||
26
js/image.js
Normal file
26
js/image.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
function LevelImage(img) {
|
||||||
|
this.drawover = true;
|
||||||
|
this.image = new Image();
|
||||||
|
this.loaded = false;
|
||||||
|
this.image.addEventListener("load", function() {
|
||||||
|
this.loaded = true;
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Changes the object's image
|
||||||
|
@ 0:img (string) Path to image
|
||||||
|
# (void)
|
||||||
|
*/
|
||||||
|
LevelImage.prototype.setImage(img) {
|
||||||
|
this.loaded = false;
|
||||||
|
this.image.src = "./assets/images/" + img;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the image object's src
|
||||||
|
# (string) image object's src
|
||||||
|
*/
|
||||||
|
LevelImage.prototype.getImage() {
|
||||||
|
return this.image.src;
|
||||||
|
}
|
||||||
4
js/jquery-1.11.2.min.js
vendored
Normal file
4
js/jquery-1.11.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
131
js/level.js
Normal file
131
js/level.js
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
function Level() {
|
||||||
|
this.name;
|
||||||
|
this.tiles;
|
||||||
|
this.width = 16;
|
||||||
|
this.height = 16;
|
||||||
|
this.images = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function levelExists(level) {
|
||||||
|
return fileExists("assets/levels/" + level);
|
||||||
|
}
|
||||||
|
|
||||||
|
Level.prototype.loadLevel = function(level) {
|
||||||
|
// Check if the level exists before attempting
|
||||||
|
// to load the file's content
|
||||||
|
if (levelExists(level) != true) {
|
||||||
|
return echo("(Load Level - Fail): " + level);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the level's content
|
||||||
|
var feedback = getFileContent("assets/levels/" + level);
|
||||||
|
|
||||||
|
// Parse text lines into array
|
||||||
|
var lines = feedback.split("\n");
|
||||||
|
var lineTilesNew = [];
|
||||||
|
var tileIDArray = [];
|
||||||
|
var tileID;
|
||||||
|
var tiles = [];
|
||||||
|
var ignoreLineChars = ["#", "@"];
|
||||||
|
for (var i = 0; i < lines.length; i++) {
|
||||||
|
// Work with given properties
|
||||||
|
if (lines[i].substring(0, 1) == "@") {
|
||||||
|
var args = lines[i].substring(1).split(":");
|
||||||
|
switch (args[0]) {
|
||||||
|
case "tileset": {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Skip properties and comments
|
||||||
|
if (ignoreLineChars.indexOf(lines[i].substring(0, 1)) > -1) continue;
|
||||||
|
|
||||||
|
// Split line text into tile ID array
|
||||||
|
var lineTiles = lines[i].split(",");
|
||||||
|
// Create empty array ready to store
|
||||||
|
// tile objects
|
||||||
|
var lineTilesNew = [];
|
||||||
|
|
||||||
|
//Loop through tile ID's
|
||||||
|
for (var j = 0; j < lineTiles.length; j++) {
|
||||||
|
// Create new tile object with looped
|
||||||
|
// tile ID
|
||||||
|
var tile = new Tile(parseInt(lineTiles[j]));
|
||||||
|
// Add the tile ID to the new tile
|
||||||
|
// array
|
||||||
|
lineTilesNew.push(tile);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the new tile array to the final
|
||||||
|
// tiles array
|
||||||
|
tiles.push(lineTilesNew);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store the tile data in the level's
|
||||||
|
// tile property
|
||||||
|
this.tiles = tiles;
|
||||||
|
|
||||||
|
// Automatically adjust the width and height
|
||||||
|
// of the level to match the width and height
|
||||||
|
// of the level file passed in
|
||||||
|
this.width = this.tiles[0].length;
|
||||||
|
this.height = this.tiles.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets a tile object at a given x and y in
|
||||||
|
* the level
|
||||||
|
@ 0:x (number) X position in level
|
||||||
|
@ 1:y (number) Y position in level
|
||||||
|
# (object(Tile)) Tile object
|
||||||
|
*/
|
||||||
|
Level.prototype.getTileAtPoint = function(x, y) {
|
||||||
|
var iX = tileEngine.tileSize * Math.floor(x / tileEngine.tileSize) / tileEngine.tileSize;
|
||||||
|
var iY = tileEngine.tileSize * Math.floor(y / tileEngine.tileSize) / tileEngine.tileSize;
|
||||||
|
|
||||||
|
return this.tiles[iY][iX];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets every level tile's ID back to 0
|
||||||
|
* effectively clearing the level
|
||||||
|
# (void)
|
||||||
|
*/
|
||||||
|
Level.prototype.clearAll = function() {
|
||||||
|
// Loop through level's tile objects
|
||||||
|
for (var i = 0; i < this.tiles.length; i++) {
|
||||||
|
for (var j = 0; j < this.tiles[i].length; j++) {
|
||||||
|
// Set the tile ID back to 0
|
||||||
|
this.tiles[i][j].setID(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gathers tile data and other level data
|
||||||
|
* and constructs a string that can then be
|
||||||
|
* saved into a level file
|
||||||
|
# (string) Constructed level string
|
||||||
|
*/
|
||||||
|
Level.prototype.getLevelDataAsText = function() {
|
||||||
|
// Create content string
|
||||||
|
var content = "";
|
||||||
|
// Loop through level tile rows
|
||||||
|
for (var i = 0; i < this.tiles.length; i++) {
|
||||||
|
// Loop through level tile columns
|
||||||
|
for (var j = 0; j < this.tiles[i].length; j++) {
|
||||||
|
// Add tile IDs to the content string
|
||||||
|
content += this.tiles[i][j].getID();
|
||||||
|
|
||||||
|
// Add a comma separator if needed
|
||||||
|
if (j < (this.tiles[i].length - 1)) content += ",";
|
||||||
|
}
|
||||||
|
|
||||||
|
// If finishing a row, add a new line character
|
||||||
|
if (i < (this.tiles.length - 1)) content += "\n";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return the string
|
||||||
|
return content;
|
||||||
|
}
|
||||||
136
js/main.js
Normal file
136
js/main.js
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
var keysdown = {};
|
||||||
|
|
||||||
|
var canvas;
|
||||||
|
var canvasCtx;
|
||||||
|
var level;
|
||||||
|
var player;
|
||||||
|
var tileEngine;
|
||||||
|
var tileset;
|
||||||
|
|
||||||
|
function onDOMReady() {
|
||||||
|
// Initialize main game objects
|
||||||
|
initCanvas();
|
||||||
|
initTileEngine();
|
||||||
|
initTileset();
|
||||||
|
initPlayer();
|
||||||
|
initLevel();
|
||||||
|
|
||||||
|
// Define event listeners
|
||||||
|
defineListeners();
|
||||||
|
|
||||||
|
// Start the game loop
|
||||||
|
setInterval(run, 1000 / 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
function run() {
|
||||||
|
update();
|
||||||
|
draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
// Move player and update player state
|
||||||
|
if (isKeyDown(37) || isKeyDown(38) || isKeyDown(39) || isKeyDown(40)) {
|
||||||
|
if (isKeyDown(37)) player.move(1);
|
||||||
|
if (isKeyDown(39)) player.move(3);
|
||||||
|
if (isKeyDown(38)) player.move(0);
|
||||||
|
if (isKeyDown(40)) player.move(2);
|
||||||
|
|
||||||
|
player.setState("moving");
|
||||||
|
} else if (player.getState() == "moving") {
|
||||||
|
player.setState("idle");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
draw_level();
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw_level() {
|
||||||
|
if (tileset.loaded == false) return;
|
||||||
|
|
||||||
|
var rowIndex = 0;
|
||||||
|
for (var i = 0; i < level.tiles.length; i++) {
|
||||||
|
for (var j = 0; j < level.tiles[i].length; j++) {
|
||||||
|
var levelTileID = cellPosToTilePos([rowIndex, j]);
|
||||||
|
var tilesetPos = tileset.tileIDToTilesetPos(level.tiles[i][j].getID());
|
||||||
|
// var tilePos = [rowIndex * tileEngine.tileSize, j * tileEngine.tileSize];
|
||||||
|
|
||||||
|
canvasCtx.drawImage(
|
||||||
|
tileset.image,
|
||||||
|
tilesetPos[0],
|
||||||
|
tilesetPos[1],
|
||||||
|
tileEngine.tileSize,
|
||||||
|
tileEngine.tileSize,
|
||||||
|
Math.ceil((levelTileID % level.width) * tileEngine.tileSize),
|
||||||
|
Math.floor((levelTileID / level.height)) * tileEngine.tileSize,
|
||||||
|
tileEngine.tileSize, tileEngine.tileSize
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
rowIndex ++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initCanvas() {
|
||||||
|
// Store references to canvas and context
|
||||||
|
// in global variables for easy access
|
||||||
|
canvas = $("#canvas")[0];
|
||||||
|
canvasCtx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
// Resize canvas accordingly
|
||||||
|
canvas.width = $("#container").width();
|
||||||
|
canvas.height = $("#container").height();
|
||||||
|
|
||||||
|
// Fill canvas
|
||||||
|
canvasCtx.fillStyle = "lightgray";
|
||||||
|
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initTileEngine() {
|
||||||
|
// Create a new tile engine object
|
||||||
|
tileEngine = new TileEngine();
|
||||||
|
}
|
||||||
|
|
||||||
|
function initTileset() {
|
||||||
|
// Create a new tileset object
|
||||||
|
tileset = new Tileset();
|
||||||
|
// Set the tileset
|
||||||
|
tileset.setTileset("DefaultTileset.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
function initPlayer() {
|
||||||
|
// Create the player object
|
||||||
|
player = new Player();
|
||||||
|
}
|
||||||
|
|
||||||
|
function initLevel() {
|
||||||
|
// Create the level object
|
||||||
|
level = new Level();
|
||||||
|
level.loadLevel("start.tglvl");
|
||||||
|
}
|
||||||
|
|
||||||
|
function defineListeners() {
|
||||||
|
addEventListener("keydown", function (e) {
|
||||||
|
onKeyDown(e);
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
addEventListener("keyup", function (e) {
|
||||||
|
onKeyUp(e);
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Listeners
|
||||||
|
**/
|
||||||
|
|
||||||
|
function onKeyDown(e) {
|
||||||
|
keysdown[e.keyCode] = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeyUp(e) {
|
||||||
|
keysdown[e.keyCode] = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Prototypes
|
||||||
|
**/
|
||||||
52
js/player.js
Normal file
52
js/player.js
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
function Player() {
|
||||||
|
this.speed = 1; // double
|
||||||
|
this.x = 0; // int
|
||||||
|
this.y = 0; // int
|
||||||
|
this.state = "idle"; // string
|
||||||
|
this.animation = ""; // object:animation
|
||||||
|
this.level; // object:level
|
||||||
|
this.alias = ""; // string
|
||||||
|
this.dir = 0; // int
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Makes the player move in the specified
|
||||||
|
* direction according to the player's
|
||||||
|
* speed property
|
||||||
|
**/
|
||||||
|
Player.prototype.move = function(dir) {
|
||||||
|
// Do not allow the player to move
|
||||||
|
// if it has an illegal state
|
||||||
|
if (this.canMove() == false) return;
|
||||||
|
|
||||||
|
switch (dir) {
|
||||||
|
case 0: this.y -= 1 * this.speed; break;
|
||||||
|
case 1: this.x -= 1 * this.speed; break;
|
||||||
|
case 2: this.y += 1 * this.speed; break;
|
||||||
|
case 3: this.x += 1 * this.speed; break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Player.prototype.canMove = function() {
|
||||||
|
var illegalStates = [
|
||||||
|
"dead"
|
||||||
|
];
|
||||||
|
|
||||||
|
if (illegalStates.indexOf(this.getState()) > -1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
Player.prototype.getState = function() {
|
||||||
|
return this.state;
|
||||||
|
}
|
||||||
|
|
||||||
|
Player.prototype.setState = function(state) {
|
||||||
|
this.state = state;
|
||||||
|
}
|
||||||
|
|
||||||
|
Player.prototype.setLevel = function(level) {
|
||||||
|
level.loadLevel(level);
|
||||||
|
this.levelName = level;
|
||||||
|
}
|
||||||
25
js/tile.js
Normal file
25
js/tile.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
function Tile(id) {
|
||||||
|
this.id = id;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Gets the tile ID
|
||||||
|
**/
|
||||||
|
Tile.prototype.setID = function(id) {
|
||||||
|
this.id = id;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Sets the tile ID
|
||||||
|
**/
|
||||||
|
Tile.prototype.getID = function() {
|
||||||
|
return this.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Helper method for determining
|
||||||
|
* if the tile is blocking
|
||||||
|
**/
|
||||||
|
Tile.prototype.isBlocking = function() {
|
||||||
|
return tileEngine.isBlocking(this.id);
|
||||||
|
}
|
||||||
27
js/tileengine.js
Normal file
27
js/tileengine.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
function TileEngine() {
|
||||||
|
this.tileSize = 32;
|
||||||
|
|
||||||
|
this.tileGroups = {
|
||||||
|
blocking: [
|
||||||
|
2, 3, 4
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Checks to see if a tile ID is
|
||||||
|
* blocking (can't be walked through)
|
||||||
|
**/
|
||||||
|
TileEngine.prototype.isBlocking = function(tileID) {
|
||||||
|
if (this.tileGroups.blocking.indexOf(tileID) > -1) {
|
||||||
|
return true;
|
||||||
|
} else return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function tilePosToCellPos(tilePos) {
|
||||||
|
return [Math.floor(tilePos / level.height), tilePos % level.width];
|
||||||
|
}
|
||||||
|
|
||||||
|
function cellPosToTilePos(cellPos) {
|
||||||
|
return (cellPos[0] * level.width) + cellPos[1];
|
||||||
|
}
|
||||||
30
js/tileset.js
Normal file
30
js/tileset.js
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
function Tileset() {
|
||||||
|
this.image = new Image();
|
||||||
|
this.image.parent = this;
|
||||||
|
|
||||||
|
this.loaded = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
Tileset.prototype.setTileset = function(tileset) {
|
||||||
|
this.tileset = tileset;
|
||||||
|
this.loaded = false;
|
||||||
|
|
||||||
|
this.image.src = "assets/tilesets/" + tileset;
|
||||||
|
this.image.addEventListener("load", function() {
|
||||||
|
this.parent.loaded = true;
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
Tileset.prototype.getTileset = function() {
|
||||||
|
return this.tileset;
|
||||||
|
}
|
||||||
|
|
||||||
|
Tileset.prototype.tileIDToTilesetPos = function(tileID) {
|
||||||
|
var px = tileID % Math.floor(this.image.width / tileEngine.tileSize) * tileEngine.tileSize;
|
||||||
|
var py = Math.floor(tileID / Math.floor(this.image.width / tileEngine.tileSize)) * tileEngine.tileSize;
|
||||||
|
return [px, py];
|
||||||
|
}
|
||||||
|
|
||||||
|
Tileset.prototype.tilesetPosToTileID = function(x, y) {
|
||||||
|
return (Math.floor(x / tileEngine.tileSize)) + (Math.floor(y / tileEngine.tileSize) * (this.image.width / tileEngine.tileSize));
|
||||||
|
}
|
||||||
277
leveleditor.html
Normal file
277
leveleditor.html
Normal file
|
|
@ -0,0 +1,277 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
|
||||||
|
<title>Level Editor - Tile Game</title>
|
||||||
|
|
||||||
|
<!--Scripts-->
|
||||||
|
<script src="code/external/jquery.js"></script>
|
||||||
|
<script src="code/files.js"></script>
|
||||||
|
<script src="code/tileengine.js"></script>
|
||||||
|
<script src="code/level.js"></script>
|
||||||
|
<script src="code/tileset.js"></script>
|
||||||
|
<script src="code/tile.js"></script>
|
||||||
|
<script src="code/leveleditor/main.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function() {
|
||||||
|
onDOMLoaded();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!--Scripts End-->
|
||||||
|
|
||||||
|
<!--Styles-->
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
background: rgb(80, 80, 80);
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
position: absolute;
|
||||||
|
width: 800px;
|
||||||
|
height: 512px;
|
||||||
|
border: 1px solid black;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tiles {
|
||||||
|
position: absolute;
|
||||||
|
width: 512px;
|
||||||
|
height: 512px;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#panel {
|
||||||
|
position: absolute;
|
||||||
|
border-left: 1px solid black;
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
width: calc(800px - 512px);
|
||||||
|
height: 300px;
|
||||||
|
left: 512px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tileset {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(800px - 513px);
|
||||||
|
height: 211px;
|
||||||
|
top: 300px;
|
||||||
|
border-left: 1px solid black;
|
||||||
|
border: 1px solid black;
|
||||||
|
left: 512px;
|
||||||
|
overflow-x: scroll;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(255, 255, 0, 0.5);
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#highlight_tiles {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#highlight_tileset {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#infocontainer {
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
width: 274px;
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#infocontainer h3 {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 10000;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog {
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid black;
|
||||||
|
background: white;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
font-family: Arial;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dialog_save {
|
||||||
|
width: 250px;
|
||||||
|
height: 150px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dialog_save p {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 150px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 15px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dialog_save_levelname {
|
||||||
|
position: absolute;
|
||||||
|
width: 150px;
|
||||||
|
border: 1px solid black;
|
||||||
|
background: rgb(240, 240, 240);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dialog_save_savelevel {
|
||||||
|
width: 100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 50px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Arial;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dialog_tilesets {
|
||||||
|
width: 225px;
|
||||||
|
height: 250px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dialog_tilesets h3 {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 15px;
|
||||||
|
text-align: center;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dialog_tilesets_list {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 200px;
|
||||||
|
height: 190px;
|
||||||
|
margin-top: 10px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dialog_levels {
|
||||||
|
width: 225px;
|
||||||
|
height: 250px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dialog_levels h3 {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 15px;
|
||||||
|
text-align: center;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dialog_levels_list {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 200px;
|
||||||
|
height: 190px;
|
||||||
|
margin-top: 10px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<!--Styles End-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="overlay">
|
||||||
|
<div id="dialog_save" class="dialog">
|
||||||
|
<p>
|
||||||
|
Please provide a name for your level file so
|
||||||
|
it can be saved.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<input type="text" id="dialog_save_levelname" />
|
||||||
|
<button id="dialog_save_savelevel" onclick="saveLevel(); return;">Save Level</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="dialog_tilesets" class="dialog">
|
||||||
|
<h3>Tilesets</h3>
|
||||||
|
|
||||||
|
<div id="dialog_tilesets_list"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="dialog_levels" class="dialog">
|
||||||
|
<h3>levels</h3>
|
||||||
|
|
||||||
|
<div id="dialog_levels_list"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="container">
|
||||||
|
<div id="tiles">
|
||||||
|
<div id="highlight_tiles" class="highlight"></div>
|
||||||
|
<canvas id="tiles_canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
<div id="panel">
|
||||||
|
<div id="infocontainer">
|
||||||
|
<h3>Level</h3>
|
||||||
|
<b>Tile ID:</b> <span id="info_tileid"></span><br>
|
||||||
|
<b>Grid Pos:</b> <span id="info_gridpos"></span><br>
|
||||||
|
<b>Mouse Pos:</b> <span id="info_mousepos"></span><br>
|
||||||
|
<br>
|
||||||
|
<h3>Tileset</h3>
|
||||||
|
<b>Tile ID:</b> <span id="info_ts_tileid"></span><br>
|
||||||
|
<b>Grid Pos:</b> <span id="info_ts_gridpos"></span></br>
|
||||||
|
<b>Mouse Pos: </b> <span id="info_ts_mousepos"></span>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<h3>Actions</h3>
|
||||||
|
<a href="#" onclick="openSaveDialog(); return;">Save Level</a><br>
|
||||||
|
<a href="#" onclick="loadLevelDialog(); return;">Load Level</a><br>
|
||||||
|
<a href="#" onclick="clearTiles(); return;">Clear Tiles</a><br>
|
||||||
|
<a href="#" onclick="openTilesetDialog(); return;">Load Tileset</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="tileset">
|
||||||
|
<div id="highlight_tileset" class="highlight"></div>
|
||||||
|
<img id="tileset_image"></img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
workingfiles/background-sunset.pdn
Normal file
BIN
workingfiles/background-sunset.pdn
Normal file
Binary file not shown.
Loading…
Add table
Reference in a new issue