Added simple main menu
This commit is contained in:
parent
40129ee818
commit
1f055471d3
49
css/game.css
Normal file
49
css/game.css
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#settings {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
height: 1.5rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
display: grid;
|
||||||
|
right: 5px;
|
||||||
|
top: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#settings > img {
|
||||||
|
height: 1rem;
|
||||||
|
margin: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#menu {
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
color: white;
|
||||||
|
padding-top: 2rem;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
width: 20vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#menu > ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#menu > ul > li {
|
||||||
|
padding-top: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
@ -1,49 +1,33 @@
|
|||||||
html, body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
height: 100vh;
|
||||||
overflow: hidden;
|
width: 100vw;
|
||||||
font-family: sans-serif;
|
background: lightskyblue;
|
||||||
|
font-family: sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#settings {
|
h1 {
|
||||||
position: absolute;
|
text-align: center;
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
height: 1.5rem;
|
|
||||||
width: 1.5rem;
|
|
||||||
display: grid;
|
|
||||||
right: 5px;
|
|
||||||
top: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div#settings > img {
|
ul {
|
||||||
height: 1rem;
|
list-style-type: none;
|
||||||
margin: auto;
|
text-align: center;
|
||||||
cursor: pointer;
|
padding: 0;
|
||||||
|
display: grid;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#menu {
|
li {
|
||||||
background: rgba(0, 0, 0, 0.5);
|
width: 25vw;
|
||||||
color: white;
|
padding: 10px 20px;
|
||||||
padding-top: 2rem;
|
margin: 0 auto;
|
||||||
display: none;
|
margin-top: 20px;
|
||||||
position: absolute;
|
background: #9ea399;
|
||||||
right: 0;
|
border-radius: 5px;
|
||||||
top: 0;
|
border: 2px solid #1c1914;
|
||||||
height: 100vh;
|
cursor: pointer;
|
||||||
width: 20vw;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div#menu > ul {
|
li:hover {
|
||||||
list-style-type: none;
|
box-shadow: 2px 2px #1c1914;
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
div#menu > ul > li {
|
|
||||||
padding-top: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
27
game.html
Normal file
27
game.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="css/game.css">
|
||||||
|
<script type="module" src="src/game.js"></script>
|
||||||
|
<title>Game</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="settings">
|
||||||
|
<img src="res/cog-solid.svg" alt="Settings">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a id="close">Quit game</a></li>
|
||||||
|
<li><a id="save">Save progress</a></li>
|
||||||
|
<li><a id="mainmenu">Return to main menu</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="board">
|
||||||
|
<!-- Renderer will push content here -->
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
index.html
30
index.html
@ -1,26 +1,18 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="css/index.css">
|
<title>Caa-game</title>
|
||||||
<script type="module" src="src/index.js"></script>
|
<link rel="stylesheet" href="css/index.css">
|
||||||
<title>Game</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="settings">
|
<h1>Caa-game</h1>
|
||||||
<img src="res/cog-solid.svg" alt="Settings">
|
<ul>
|
||||||
</div>
|
<li id="resume">Resume game</li>
|
||||||
|
<li id="settings">Settings</li>
|
||||||
<div id="menu">
|
<li id="quit">Quit game</li>
|
||||||
<ul>
|
</ul>
|
||||||
<li><a id="close">Quit game</a></li>
|
<script src="src/index.js"></script>
|
||||||
<li><a id="save">Save progress</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="board">
|
|
||||||
<!-- Renderer will push content here -->
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
52
src/game.js
Normal file
52
src/game.js
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
const { ipcRenderer, remote } = require('electron')
|
||||||
|
|
||||||
|
var asdf = require('asdf-games');
|
||||||
|
const { Game, Container, math, KeyControls, MouseControls, Text, Texture, TileMap, Sprite, TileSprite } = asdf;
|
||||||
|
|
||||||
|
const window = { w: 640, h: 320 };
|
||||||
|
|
||||||
|
const game = new Game(window.w, window.h, true);
|
||||||
|
ipcRenderer.send('resize', window);
|
||||||
|
|
||||||
|
const { scene, w, h } = game;
|
||||||
|
|
||||||
|
var Player = require("./src/entities/player.js")
|
||||||
|
var Level = require("./src/levels/level.js")
|
||||||
|
|
||||||
|
const mouseAim = new MouseControls(document.getElementById('board'));
|
||||||
|
const keys = new KeyControls();
|
||||||
|
|
||||||
|
var player = new Player(keys, window);
|
||||||
|
var level = new Level(window, keys, player);
|
||||||
|
|
||||||
|
scene.add(level);
|
||||||
|
scene.add(player);
|
||||||
|
|
||||||
|
game.run((dt ,t) => {
|
||||||
|
if (mouseAim.isDown) {
|
||||||
|
console.log('cliccccccccccc');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check gamestate
|
||||||
|
// TODO
|
||||||
|
});
|
||||||
|
|
||||||
|
/* *********************************************************
|
||||||
|
Settings behavior
|
||||||
|
********************************************************* */
|
||||||
|
|
||||||
|
// Opening and closing of menu.
|
||||||
|
document.getElementById('settings').addEventListener('click', () => {
|
||||||
|
const menuRef = document.getElementById('menu');
|
||||||
|
menuRef.style.display = menuRef.style.display === "block" ? "none" : "block";
|
||||||
|
});
|
||||||
|
|
||||||
|
// Quit Game handling.
|
||||||
|
document.getElementById('close').addEventListener('click', () => {
|
||||||
|
remote.app.quit();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Return to main menu button
|
||||||
|
document.getElementById('mainmenu').addEventListener('click', () => {
|
||||||
|
remote.getCurrentWindow().loadFile(__dirname + "/index.html");
|
||||||
|
});
|
||||||
53
src/index.js
53
src/index.js
@ -1,47 +1,14 @@
|
|||||||
const { ipcRenderer, remote } = require('electron')
|
const { remote } = require("electron");
|
||||||
|
|
||||||
var asdf = require('asdf-games');
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const { Game, Container, math, KeyControls, MouseControls, Text, Texture, TileMap, Sprite, TileSprite } = asdf;
|
|
||||||
|
|
||||||
const window = { w: 640, h: 320 };
|
// Start game
|
||||||
|
document.getElementById('resume').addEventListener("click", () => {
|
||||||
|
remote.getCurrentWindow().loadFile(__dirname + "/game.html");
|
||||||
|
});
|
||||||
|
|
||||||
const game = new Game(window.w, window.h, true);
|
// Quit game
|
||||||
ipcRenderer.send('resize', window);
|
document.getElementById('quit').addEventListener("click", () => {
|
||||||
|
remote.app.quit();
|
||||||
const { scene, w, h } = game;
|
});
|
||||||
|
|
||||||
var Player = require("./src/entities/player.js")
|
|
||||||
var Level = require("./src/levels/level.js")
|
|
||||||
|
|
||||||
const mouseAim = new MouseControls(document.getElementById('board'));
|
|
||||||
const keys = new KeyControls();
|
|
||||||
|
|
||||||
var player = new Player(keys, window);
|
|
||||||
var level = new Level(window, keys, player);
|
|
||||||
|
|
||||||
scene.add(level);
|
|
||||||
scene.add(player);
|
|
||||||
|
|
||||||
game.run((dt ,t) => {
|
|
||||||
if (mouseAim.isDown) {
|
|
||||||
console.log('cliccccccccccc');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check gamestate
|
|
||||||
// TODO
|
|
||||||
});
|
|
||||||
|
|
||||||
/* *********************************************************
|
|
||||||
Settings behavior
|
|
||||||
********************************************************* */
|
|
||||||
|
|
||||||
// Opening and closing of menu.
|
|
||||||
document.getElementById('settings').addEventListener('click', () => {
|
|
||||||
const menuRef = document.getElementById('menu');
|
|
||||||
menuRef.style.display = menuRef.style.display === "block" ? "none" : "block";
|
|
||||||
});
|
|
||||||
|
|
||||||
// Quit Game handling.
|
|
||||||
document.getElementById('close').addEventListener('click', () => {
|
|
||||||
remote.app.quit();
|
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue
Block a user