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