Permalink
Browse files

Refactored into single file, gameplay working

  • Loading branch information...
dakotahducharme committed Jan 10, 2019
1 parent ff9f1ff commit 0bf758756c7614c9890d34300f079a9e62682723
BIN +0 Bytes (100%) .DS_Store
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN -59.9 KB DDLCFonts/Halogen.ttf
Binary file not shown.
Binary file not shown.
BIN -64.4 KB DDLCFonts/Vera.ttf
Binary file not shown.
BIN -128 KB DDLCFonts/m1.TTF
Binary file not shown.
BIN -45.6 KB DDLCFonts/n1.ttf
Binary file not shown.
BIN -257 KB DDLCFonts/s1.ttf
Binary file not shown.
BIN -82.6 KB DDLCFonts/y1.ttf
Binary file not shown.
BIN -22.6 KB DDLCFonts/y2.ttf
Binary file not shown.
BIN -671 KB DDLCFonts/y3.ttf
Binary file not shown.
@@ -24,7 +24,7 @@ ul {
font-family: 'Fredoka One', cursive;
}

li {
li, button {
display: inline;
padding-right: 75px;
color: black;
@@ -93,27 +93,40 @@ button, a, #yes, #no {
border: none;
font-size: 20px;
text-align: center;
cursor: pointer;
}

#basic-map, #pink-map {
position: relative;
top: 50%;
left: 50%;
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

#game {
width: 700px;
height: 700px;
margin-top: 100px; /* Half the height */
margin-left: -350px; /* Half the width */
margin-bottom: 250px;
background-size: 700px 700px;
}

.character {
#character {
position: relative;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin-top: 100px; /* Half the height */
margin-left: -350px; /* Half the width */
margin-bottom: 250px;
width: 50px;
top: 0;
left: 0;
}

#character-select {
display: flex;
flex-direction: column;
justify-content: center;
}

.coin {
height: 15px;
width: 15px;
position: relative;
border-radius: 50%;
border: 3px solid gold;
background: yellow;
}
@@ -24,7 +24,9 @@ <h1><img id="pokawaii-gif" src="pokawaii.gif" alt="Pokawaii!"></h1>
<button id="start" type="button">Start</button>
</div>

<div id="map"></div>
<div class="container">
<div id="game"></div>
</div>

<footer>
<p>Made with love by Dakotah Ducharme</p>
142 js/app.js
@@ -1,13 +1,145 @@
//h1 bounce on page load
$('h1').velocity('callout.bounce', {
duration: 3000
})

//settings
const moveDistance = 25;
const gameSize = {height: 700, width: 700};
const options = {
sakura: {
character: 'sakura-char.png',
map: 'pink-sakura.gif',
},
link: {
character: 'link-char.png',
map: 'map.gif',
},
zelda: {
character: 'zelda-char.png',
map: 'map.gif',
},
naruto: {
character: 'naruto-char.png',
map: 'map.gif',
},
}
const coins = [
{top: 20, left: 200},
{top: 200, left: 40},
{top: 35, left: 665},
{top: 80, left: 400},
{top: 450, left: 30},
{top: 600, left: 350},
{top: 300, left: 300},
]
// controls
const UP = ['Up', 'ArrowUp', 'w']
const DOWN = ['Down', 'ArrowDown', 's']
const LEFT = ['Left', 'ArrowLeft', 'a']
const RIGHT = ['Right', 'ArrowRight', 'd']

$('#start').on('click', function() {
//alert the developer if move distance is too high
if (moveDistance >= gameSize.height || moveDistance >= gameSize.width) {
alert("Hey! I can't move!")
}

// remove start button and build character select buttons
function setupCharacterSelect() {
$('#start').remove()
$('.homepage').append('<p id="ask-name">Oh! I know you! Yer name is uh....um...</p>')
$('.homepage').append('<ul><li class="name-input"><a href="naruto.html" id="naruto">Naruto</a></li></ul>')
$('.homepage').append('<ul><li class="name-input"><a href="sakura.html" id="sakura">Sakura</a></li></ul>')
$('.homepage').append('<ul><li class="name-input"><a href="link.html" id="link">Link</a></li></ul>')
$('.homepage').append('<ul><li class="name-input"><button id="zelda">Zelda</button></li></ul>')
$('.homepage').append('<ul id="character-select"></ul>')
$('#character-select').append('<li class="name-input"><button id="naruto">Naruto</button></li>')
$('#character-select').append('<li class="name-input"><button id="sakura">Sakura</button></li>')
$('#character-select').append('<li class="name-input"><button id="link">Link</button></li>')
$('#character-select').append('<li class="name-input"><button id="zelda">Zelda</button></li>')

$('#character-select button').on('click', (e) => {
loadGame(options[e.target.id])
})
}


//loads map, character and coins, listen for key presses
function loadGame ({character, map}) {
$('.homepage').remove();
$('#game').css("background-image", `url('${map}')`)
$('#game').append(`<img id="character" src="${character}">`)
for (var i = 0; i < coins.length; i++) {
placeCoin({...coins[i], id: i});
}
$(document).on('keydown', (e) => keyPressHandler(e));
}

// places coins on map
function placeCoin({top, left, id}) {
$('#game').append(`<div id='coin-${id}' class="coin"/>`)
$(`#coin-${id}`).css({"top":top, "left":left});
}

//telling the character to "move" on keypress
function keyPressHandler(e) {
const {top, left} = getCharacterPosition();
const {height, width} = getCharacterSize();

if (RIGHT.includes(e.key)) {
if (left + width <= gameSize.width - moveDistance) {
setCharacterPosition({
top,
left: left + moveDistance,
});
}
} else if (LEFT.includes(e.key)) {
if (left >= moveDistance) {
setCharacterPosition({
top,
left: left - moveDistance,
});
}
} else if (UP.includes(e.key)) {
if (top >= moveDistance) {
setCharacterPosition({
top: top - moveDistance,
left,
});
}
} else if (DOWN.includes(e.key)) {
if (top + height <= gameSize.height - moveDistance) {
setCharacterPosition({
top: top + moveDistance,
left,
});
}
}
}

// getter for character
function getCharacter() {
return $('#character');
}

// getter for character position
function getCharacterPosition() {
return {
top: parseInt(getCharacter().css('top')),
left: parseInt(getCharacter().css('left')),
}
}

// setter for character position
function setCharacterPosition({top, left}) {
getCharacter().css({"top":top, "left":left});
}

// getter for character size
function getCharacterSize() {
return {
height: parseInt(getCharacter().css('height')),
width: parseInt(getCharacter().css('width')),
}
}

//attach start button
$('#start').on('click', function() {
setupCharacterSelect();
});

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
BIN +2.32 KB link-char.png
Binary file not shown.

This file was deleted.

Oops, something went wrong.
BIN -4.24 KB link.png
Binary file not shown.
BIN +1.74 KB naruto-char.png
Binary file not shown.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
BIN -2.27 KB (47%) sakura-char.png
Binary file not shown.
Oops, something went wrong.

0 comments on commit 0bf7587

Please sign in to comment.