Permalink
Browse files

Refactored into single file, gameplay working

  • Loading branch information...
dakotahducharme committed Jan 10, 2019
1 parent ff9f1ff commit 0bf758756c7614c9890d34300f079a9e62682723
View
BIN .DS_Store
Binary file not shown.
View
Binary file not shown.
Binary file not shown.
View
Binary file not shown.
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
@@ -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;
}
View
@@ -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>
View
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();
});
View

This file was deleted.

Oops, something went wrong.
View

This file was deleted.

Oops, something went wrong.
View

This file was deleted.

Oops, something went wrong.
View

This file was deleted.

Oops, something went wrong.
View

This file was deleted.

Oops, something went wrong.
View
Binary file not shown.
View

This file was deleted.

Oops, something went wrong.
View
BIN link.png
Binary file not shown.
View
Binary file not shown.
View

This file was deleted.

Oops, something went wrong.
View

This file was deleted.

Oops, something went wrong.
View
Binary file not shown.
Oops, something went wrong.

0 comments on commit 0bf7587

Please sign in to comment.