mcmillen/snej
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

set up assets for Super Tea Witch

Browse Source
This commit is contained in:
Colin McMillen 2019-10-29 17:26:46 -04:00
parent f9b11e5833
commit adbf13f06a
2 changed files with 48 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>snej</title> <title>Super Tea Witch</title>
<style> <style>
* { padding: 0; margin: 0; } * { padding: 0; margin: 0; }
body { background: black; color: white; font-family: monospace; } body { background: black; color: white; font-family: monospace; }
@ -35,7 +35,8 @@
<button id="6x">6x</button> <button id="6x">6x</button>
<button id="7x">7x</button> <button id="7x">7x</button>
<button id="8x">8x</button> <button id="8x">8x</button>
<img src="bundle/tf_atlantis_tiles.png" id="atlantis" style="display: none"> <img src="bundle/terrain.png" id="terrain" style="display: none">
<img src="bundle/witchtiles_1.png" id="witch" style="display: none">
<img src="bundle/spritesheet.png" id="spritesheet" style="display: none"> <img src="bundle/spritesheet.png" id="spritesheet" style="display: none">
<script src="bundle/spritesheet.js"></script> <script src="bundle/spritesheet.js"></script>
<script src="main.js"></script> <script src="main.js"></script>

100
main.js
View File

@ -337,25 +337,20 @@ class CharacterSprite {
class Resources { class Resources {
constructor() { constructor() {
const atlantis = document.getElementById('atlantis'); const terrain = document.getElementById('terrain');
const witch = document.getElementById('witch');
const spritesheet = document.getElementById('spritesheet'); const spritesheet = document.getElementById('spritesheet');
const ts = 16; const ts = 16;
this.sprites = { this.sprites = {
'ground0': new Sprite(atlantis, 2 * ts, 1 * ts, 16, 16), 'ground0': new Sprite(terrain, 2 * ts, 1 * ts, 16, 16),
'ground1': new Sprite(atlantis, 3 * ts, 1 * ts, 16, 16), 'ground1': new Sprite(terrain, 3 * ts, 1 * ts, 16, 16),
'ground2': new Sprite(atlantis, 4 * ts, 1 * ts, 16, 16), 'ground2': new Sprite(terrain, 4 * ts, 1 * ts, 16, 16),
'ground3': new Sprite(atlantis, 5 * ts, 1 * ts, 16, 16), 'ground3': new Sprite(terrain, 5 * ts, 1 * ts, 16, 16),
'ground4': new Sprite(atlantis, 6 * ts, 1 * ts, 16, 16), 'ground4': new Sprite(terrain, 6 * ts, 1 * ts, 16, 16),
'ground5': new Sprite(atlantis, 7 * ts, 1 * ts, 16, 16), 'ground5': new Sprite(terrain, 2 * ts, 2 * ts, 16, 16),
'ground6': new Sprite(atlantis, 8 * ts, 1 * ts, 16, 16), 'ground6': new Sprite(terrain, 6 * ts, 2 * ts, 16, 16),
'rock0': new Sprite(atlantis, 1 * ts, 2 * ts, 16, 16), 'cauldron_blue': new Sprite(witch, 0, 0, 32, 32),
'rock1': new Sprite(atlantis, 2 * ts, 2 * ts, 16, 16), 'cauldron_green': new Sprite(witch, 32, 0, 32, 32),
'rock2': new Sprite(atlantis, 3 * ts, 2 * ts, 16, 16),
'anchor0': new Sprite(atlantis, 21 * ts, 1 * ts, 16, 16),
'seaweed0': new Sprite(atlantis, 20 * ts, 2 * ts, 16, 32),
'seaweed1': new Sprite(atlantis, 16 * ts, 2 * ts, 16, 32),
'coral0': new Sprite(atlantis, 15 * ts, 9 * ts, 32, 16),
'rockpile0': new Sprite(atlantis, 17 * ts, 10 * ts, 32, 32),
} }
for (const key in spritesheet_json) { for (const key in spritesheet_json) {
@ -372,7 +367,7 @@ class Player {
// TODO: stop hard-coding player bounding box. // TODO: stop hard-coding player bounding box.
constructor() { constructor() {
this.x = (SNES_WIDTH - 26) / 2; this.x = (SNES_WIDTH - 26) / 2;
this.y = (SNES_HEIGHT - 36) / 2; this.y = (SNES_HEIGHT - 36) / 2 - 28;
this.orientation = Orientation.DOWN; this.orientation = Orientation.DOWN;
this.spriteNames_ = []; this.spriteNames_ = [];
for (const name in spritesheet_json) { for (const name in spritesheet_json) {
@ -442,38 +437,39 @@ class PlayerRenderer {
class TileRenderer { class TileRenderer {
draw(gfx, sprites) { draw(gfx, sprites) {
const tileSize = 16; const tileSize = 16;
// The screen is 14 x 16 tiles by default.
const rows = gfx.height / tileSize; const rows = gfx.height / tileSize;
const columns = gfx.width / tileSize; const columns = gfx.width / tileSize;
const layer1 = ["-,*-...*'.,-_'`o", const layer1 = [
"_..'-_**,',_.'oo", ".'...__,._..*..`",
"-*-''_-'o,0O_```", "*'..,_.--.,.*..`",
"o`0_._,*O'`--'-'", "_._.*._.,.--,._.",
"`0O-_'',`o*o*`-,", "._``_.,_..._..``",
"*,`'---o'O'_*''-", "_,.`.....'...._`",
"'-.**.'_'`.,'-.'", "..`_'*...._.._..",
".O'``*``'`*,,_o`", ".,'.'_-'...__.`.",
"_*_''*O'`_OO-_'o", ".....,'...*,'..`",
"0`0,*-,`_*'`O'*.", "__..'_......_...",
".o'-*.*_',`,,`.'", "'*..``.,.,..,.,.",
"`o`O',.`OO,*-'**", "...'._'*'..___..",
"-..*'-''',*'.'.O", "'._'.-....,.`.._",
"*-_'-0.--__O`O`_", "_*_.*_,'-...`-..",
"*-_,O_'*'`*'_._.", ".-...*._`,`'`.,."];
"-.*,`OO'_`'*-0-O"]; const layer2 = [
const layer2 = [" ", " ",
" ", " ",
" iil ", " ",
" ", " ",
" A ", " ",
" ", " ",
" ", " O ",
" ", " ",
" ", " ",
" i ", " ",
" l ", " ",
" ", " ",
" c R ", " ",
" c "]; " "];
const spriteLookup = { const spriteLookup = {
'.': sprites.ground0, '.': sprites.ground0,
',': sprites.ground1, ',': sprites.ground1,
@ -482,14 +478,8 @@ class TileRenderer {
'-': sprites.ground4, '-': sprites.ground4,
'*': sprites.ground5, '*': sprites.ground5,
"'": sprites.ground6, "'": sprites.ground6,
'o': sprites.rock0, 'O': sprites.cauldron_blue,
'O': sprites.rock1, 'o': sprites.cauldron_green,
'0': sprites.rock2,
'A': sprites.anchor0,
'i': sprites.seaweed0,
'l': sprites.seaweed1,
'c': sprites.coral0,
'R': sprites.rockpile0,
}; };
for (let j = 0; j < columns; j++) { for (let j = 0; j < columns; j++) {
for (let i = 0; i < rows; i++) { for (let i = 0; i < rows; i++) {