Permalink
Browse files

Added randomized coins and winning condition, and collisions

  • Loading branch information...
dakotahducharme committed Jan 11, 2019
1 parent 0bf7587 commit 7eebcd8ab790d4ab4b99f5aab4965dbc6d4d433a
Showing with 142 additions and 31 deletions.
  1. +19 −7 css/style.css
  2. BIN eevee.png
  3. +123 −24 js/app.js
  4. BIN mew.gif
  5. BIN ramen.gif
  6. BIN rupee.gif
  7. BIN zelda-char.gif
View
@@ -11,6 +11,8 @@ h1 {
body {
font-family: helvetica;
margin: 0 auto;
background: url('https://i.pinimg.com/750x/ef/9f/bb/ef9fbbd9dd0d6ec09e356a49a5250b02.jpg');
background-size: cover;
}
a {
@@ -49,10 +51,11 @@ footer {
top: 50%;
left: 45%;
margin-top: 150px;
background: none;
}
#start:hover, #no:hover, a:hover {
color: #219d7e;
color: white;
}
@@ -68,11 +71,13 @@ footer {
#zelda {
color: #FFFFFF;
opacity: 0;
}
#zelda:hover {
color: black;
font-weight: bold;
opacity: 100%;
}
#ask-name, #map-color, .welcome {
@@ -94,6 +99,7 @@ button, a, #yes, #no {
font-size: 20px;
text-align: center;
cursor: pointer;
background: none;
}
.container {
@@ -107,6 +113,7 @@ button, a, #yes, #no {
width: 700px;
height: 700px;
background-size: 700px 700px;
position: relative;
}
#character {
@@ -123,10 +130,15 @@ button, a, #yes, #no {
}
.coin {
height: 15px;
width: 15px;
position: relative;
border-radius: 50%;
border: 3px solid gold;
background: yellow;
width: 25px;
position: absolute;
display: block;
}
#prize {
display: none;
position: absolute;
width: 250px;
top: 225px;
left: 225px;
}
View
BIN eevee.png
Binary file not shown.
View
147 js/app.js
@@ -10,29 +10,47 @@ const options = {
sakura: {
character: 'sakura-char.png',
map: 'pink-sakura.gif',
coin: 'ramen.gif',
prize: 'eevee.png',
},
link: {
character: 'link-char.png',
map: 'map.gif',
coin: 'rupee.gif',
prize: 'eevee.png',
},
zelda: {
character: 'zelda-char.png',
character: 'zelda-char.gif',
map: 'map.gif',
coin: 'rupee.gif',
prize: 'mew.gif',
},
naruto: {
character: 'naruto-char.png',
map: 'map.gif',
coin: 'ramen.gif',
prize: 'eevee.png',
},
}
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},
]
const coinCount = 10;
const coinSize = {
x: 25,
y: 35,
}
let coins = []
function generateCoinCoordinates(coinCount) {
for (var i = 0; i < coinCount; i++) {
const {x, y} = generateRandomCoordinates({x: gameSize.width - coinSize.x, y: gameSize.height - coinSize.y});
coins.push({top: y, left: x});
}
}
generateCoinCoordinates(coinCount);
console.log(coins)
// controls
const UP = ['Up', 'ArrowUp', 'w']
const DOWN = ['Down', 'ArrowDown', 's']
@@ -61,26 +79,27 @@ function setupCharacterSelect() {
//loads map, character and coins, listen for key presses
function loadGame ({character, map}) {
function loadGame ({character, map, coin, prize}) {
$('.homepage').remove();
$('#game').css("background-image", `url('${map}')`)
$('#game').append(`<img id="character" src="${character}">`)
$('#game').css("background-image", `url('${map}')`);
$('#game').append(`<img id="character" src="${character}"/>`);
$('#game').append(`<img id="prize" src="${prize}"/>`);
for (var i = 0; i < coins.length; i++) {
placeCoin({...coins[i], id: i});
placeCoin({...coins[i], id: i, coin});
}
$(document).on('keydown', (e) => keyPressHandler(e));
}
// places coins on map
function placeCoin({top, left, id}) {
$('#game').append(`<div id='coin-${id}' class="coin"/>`)
function placeCoin({top, left, id, coin}) {
$('#game').append(`<img id='coin-${id}' src="${coin}" 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();
const {top, left} = getGameObjectPosition(getCharacter());
const {height, width} = getGameObjectSize(getCharacter());
if (RIGHT.includes(e.key)) {
if (left + width <= gameSize.width - moveDistance) {
@@ -111,18 +130,26 @@ function keyPressHandler(e) {
});
}
}
checkForCoinCollisions();
if (checkForWin()) {
$('#prize').css("display", "block")
}
}
// getter for character
function getCharacter() {
return $('#character');
}
function getCoin(i) {
return $(`#coin-${i}`);
}
// getter for character position
function getCharacterPosition() {
function getGameObjectPosition(gameObject) {
return {
top: parseInt(getCharacter().css('top')),
left: parseInt(getCharacter().css('left')),
top: parseInt(gameObject.css('top')),
left: parseInt(gameObject.css('left')),
}
}
@@ -132,14 +159,86 @@ function setCharacterPosition({top, left}) {
}
// getter for character size
function getCharacterSize() {
function getGameObjectSize(gameObject) {
return {
height: parseInt(getCharacter().css('height')),
width: parseInt(getCharacter().css('width')),
height: parseInt(gameObject.css('height')),
width: parseInt(gameObject.css('width')),
}
}
//attach start button
$('#start').on('click', function() {
setupCharacterSelect();
});
function getGameObjectBox(gameObject) {
const {top, left} = getGameObjectPosition(gameObject);
const {height, width} = getGameObjectSize(gameObject);
return {
x: {
start: left,
end: left + width
},
y: {
start: top,
end: top + height,
},
}
}
function checkForCollision(object1, object2) {
const object1Box = getGameObjectBox(object1);
const object2Box = getGameObjectBox(object2);
if (axisOverlap(object1Box.x, object2Box.x) && axisOverlap(object1Box.y, object2Box.y) ) {
return true;
} else {
return false;
}
}
function checkForCoinCollisions() {
for (var i = 0; i < coins.length; i++) {
let collide = checkForCollision(
getCharacter(),
getCoin(i)
);
if (collide) {
getCoin(i).remove();
}
}
}
function checkForWin() {
if ($(`.coin`).length === 0) {
return true;
}
}
function axisOverlap(range1, range2) {
if (
// range2.start inside range1
(range1.start <= range2.start && range2.start <= range1.end)
// range2.end inside range1
|| (range1.start <= range2.end && range2.end <= range1.end)
// range1.start inside range2
|| (range2.start <= range1.start && range1.start <= range2.end)
// range1.end inside range2
|| (range2.start <= range1.end && range1.end <= range2.end)
) {
return true
} else {
return false
}
}
function generateRandomCoordinates({x, y}) {
return {
x: getRandomInt(x),
y: getRandomInt(y),
}
}
//helper for random numbers
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
View
BIN mew.gif
Binary file not shown.
View
BIN ramen.gif
Binary file not shown.
View
BIN rupee.gif
Binary file not shown.
View
Binary file not shown.

0 comments on commit 7eebcd8

Please sign in to comment.