added build clicking

This commit is contained in:
lilgreenland
2019-12-02 15:26:30 -08:00
parent 349a6cf211
commit b8f032f8db
5 changed files with 29 additions and 22 deletions

View File

@@ -86,9 +86,7 @@
</div> </div>
</details> </details>
</div> --> </div> -->
<div id="build-grid"> <div id="build-grid"></div>
</div>
<button type="button" id="build-button">builds</button> <button type="button" id="build-button">builds</button>

View File

@@ -116,36 +116,45 @@ map: 0x000001 0x111111
*/ */
//build build grid display //build build grid display
let isShowingBuilds = false const build = {
isShowingBuilds: false,
list: [],
choosePowerUp(index, type) {
build.list[build.list.length] = {
index: index,
type: type
}
console.log(build.list)
},
}
document.getElementById("build-button").addEventListener("click", () => { document.getElementById("build-button").addEventListener("click", () => {
const el = document.getElementById("build-grid") const el = document.getElementById("build-grid")
if (isShowingBuilds) { if (build.isShowingBuilds) {
el.style.display = "none" el.style.display = "none"
isShowingBuilds = false build.isShowingBuilds = false
document.body.style.overflow = "hidden" document.body.style.overflow = "hidden"
document.getElementById("controls").style.display = 'inline' document.getElementById("controls").style.display = 'inline'
} else { } else {
let text = "" let text = '<p>click on 5 powers, then click begin <button type="button" id="build-begin-button">Begin</button></p>'
for (let i = 0, len = mech.fieldUpgrades.length; i < len; i++) { for (let i = 1, len = mech.fieldUpgrades.length; i < len; i++) {
text += `<div class="build-grid-module "><div class="circle-grid field"></div> &nbsp; <strong style='font-size:1.3em;'>${mech.fieldUpgrades[i].name}</strong><br> ${mech.fieldUpgrades[i].description}</div>` text += `<div class="build-grid-module" onclick="build.choosePowerUp(${i},'field')" ><div class="circle-grid field"></div> &nbsp; <strong style='font-size:1.3em;'>${mech.fieldUpgrades[i].name}</strong><br> ${mech.fieldUpgrades[i].description}</div>`
} }
for (let i = 0, len = b.guns.length; i < len; i++) { for (let i = 0, len = b.guns.length; i < len; i++) {
text += `<div class="build-grid-module "><div class="circle-grid gun"></div> &nbsp; <strong style='font-size:1.3em;'>${b.guns[i].name}</strong><br> ${b.guns[i].description}</div>` text += `<div class="build-grid-module" onclick="build.choosePowerUp(${i},'gun')"><div class="circle-grid gun"></div> &nbsp; <strong style='font-size:1.3em;'>${b.guns[i].name}</strong><br> ${b.guns[i].description}</div>`
} }
for (let i = 0, len = b.mods.length; i < len; i++) { for (let i = 0, len = b.mods.length; i < len; i++) {
text += `<div class="build-grid-module "><div class="circle-grid mod"></div> &nbsp; <strong style='font-size:1.3em;'>${b.mods[i].name}</strong><br> ${b.mods[i].description}</div>` text += `<div class="build-grid-module" onclick="build.choosePowerUp(${i},'mod')"><div class="circle-grid mod"></div> &nbsp; <strong style='font-size:1.3em;'>${b.mods[i].name}</strong><br> ${b.mods[i].description}</div>`
} }
el.innerHTML = text el.innerHTML = text
el.style.display = "grid" el.style.display = "grid"
isShowingBuilds = true build.isShowingBuilds = true
document.body.style.overflowY = "scroll"; document.body.style.overflowY = "scroll";
document.body.style.overflowX = "hidden"; document.body.style.overflowX = "hidden";
document.getElementById("controls").style.display = 'none' document.getElementById("controls").style.display = 'none'
} }
}); });
//set up canvas //set up canvas
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
//using "const" causes problems in safari when an ID shares the same name. //using "const" causes problems in safari when an ID shares the same name.

View File

@@ -14,14 +14,14 @@ const level = {
start() { start() {
if (level.levelsCleared === 0) { if (level.levelsCleared === 0) {
// game.difficulty = 6; //for testing to simulate possible mobs spawns // game.difficulty = 6; //for testing to simulate possible mobs spawns
// level.startBuildRun(2) // level.startBuildRun(5)
// b.giveGuns(11) // b.giveGuns(11)
// mech.fieldUpgrades[2].effect(); // mech.fieldUpgrades[2].effect();
// b.giveMod(13) // b.giveMod(13)
// spawn.pickList = ["ghoster", "ghoster"] // spawn.pickList = ["ghoster", "ghoster"]
this.intro(); //starting level // this.intro(); //starting level
// this.testingMap(); this.testingMap();
// this.bosses(); // this.bosses();
// this.aerie(); // this.aerie();
// this.rooftops(); // this.rooftops();
@@ -217,7 +217,7 @@ const level = {
powerUps.spawn(450, -400, "mod", false, 6); powerUps.spawn(450, -400, "mod", false, 6);
// powerUps.spawn(450, -400, "mod", false); // powerUps.spawn(450, -400, "mod", false);
// spawn.bodyRect(-45, -100, 40, 50); // spawn.bodyRect(-45, -100, 40, 50);
// spawn.focuser(800, -1150); spawn.spawner(800, -1150);
spawn.groupBoss(-600, -550); spawn.groupBoss(-600, -550);
// spawn.hopper(800, -150); // spawn.hopper(800, -150);
// spawn.beamer(800, -150); // spawn.beamer(800, -150);

View File

@@ -952,10 +952,10 @@ const spawn = {
// me.dropPowerUp = false; // me.dropPowerUp = false;
me.onDeath = function () { //run this function on death me.onDeath = function () { //run this function on death
for (let i = 0; i < Math.ceil(this.mass * 0.2 + Math.random() * 3); ++i) { for (let i = 0; i < Math.ceil(this.mass * 0.2 + Math.random() * 3); ++i) {
spawn.spawns(this.position.x + (Math.random() - 0.5) * radius * 2, this.position.y + (Math.random() - 0.5) * radius * 2); spawn.spawns(this.position.x + (Math.random() - 0.5) * radius * 2.5, this.position.y + (Math.random() - 0.5) * radius * 2.5);
Matter.Body.setVelocity(mob[mob.length - 1], { Matter.Body.setVelocity(mob[mob.length - 1], {
x: (Math.random() - 0.5) * 25, x: this.velocity.x + (Math.random() - 0.5) * 15,
y: (Math.random() - 0.5) * 25 y: this.velocity.x + (Math.random() - 0.5) * 15
}); });
} }
}; };

View File

@@ -44,7 +44,7 @@ summary {
} }
#build-button { #build-button {
position: absolute; position: sticky;
bottom: 0px; bottom: 0px;
right: 1px; right: 1px;
z-index: 12; z-index: 12;