first commit
This commit is contained in:
8
css/style.css
Normal file
8
css/style.css
Normal file
@@ -0,0 +1,8 @@
|
||||
.title{
|
||||
background-color: rgb(88, 0, 0);
|
||||
padding:10px;
|
||||
}
|
||||
.content{
|
||||
background-color: rgb(88, 0, 0);
|
||||
padding: 10px;
|
||||
}
|
||||
40
gameboard.html
Normal file
40
gameboard.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<style>
|
||||
body {
|
||||
background-color: #1d1e22;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 30px auto;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-auto-rows: 100px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
grid-gap: 1em;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
color: rgb(255, 255, 255);
|
||||
background-color:rgb(0, 94, 165);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 0 10px purple;
|
||||
}
|
||||
/*
|
||||
.card:nth-child(odd) {
|
||||
background-color: #55BBE9;
|
||||
}
|
||||
|
||||
.card:nth-child(even) {
|
||||
background-color: #afbe29;
|
||||
}*/
|
||||
</style>
|
||||
<script src="../scripts/jquery-3.4.1.min.js"></script>
|
||||
<div id="wrapper"></div>
|
||||
<button type="button" style="position:fixed" onclick="initiate()">initiate</button>
|
||||
<button type="button" style="position:fixed; right: 300px;" onclick="clear_playground()">Clear</button>
|
||||
<div id="alerted"></div>
|
||||
32
index.php
Normal file
32
index.php
Normal file
@@ -0,0 +1,32 @@
|
||||
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>My Electron Frameless Window</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<div id="title-bar">
|
||||
<div id="title">
|
||||
Blocks
|
||||
</div>
|
||||
<div id="title-bar-btns">
|
||||
<button class="nav-btn-xe" id="min-btn"></button>
|
||||
<button class="nav-btn-xe" id="max-btn"></button>
|
||||
<button class="nav-btn-xe" id="close-btn"></button>
|
||||
</div>
|
||||
</div>
|
||||
<!--- <div loaded="template/window_settings.html"></div> --->
|
||||
<div class="flexwrap">
|
||||
<div id="wrapper"></div>
|
||||
</div>
|
||||
<button type="button" style="position:fixed" onclick="initiate()">Start</button>
|
||||
<button type="button" style="position:fixed; right: 300px;" onclick="clear_playground()">Clear</button>
|
||||
<div id="alerted"></div>
|
||||
|
||||
<script src="scripts/gameboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
4
scripts/blockamount.js
Normal file
4
scripts/blockamount.js
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
|
||||
$("<h1>Include this using jquery</h1>").appendTo("body");
|
||||
console.log($("body").html());
|
||||
131
scripts/gameboard.js
Normal file
131
scripts/gameboard.js
Normal file
@@ -0,0 +1,131 @@
|
||||
// Game settings
|
||||
var viewspeed = 500; // time the player can see the answers MS
|
||||
var timeout = 1000; // Time after all cards showed
|
||||
var health = 5;
|
||||
var level = 9;
|
||||
var difficulty = 3;
|
||||
var showcontent = false; // show numbers inside the cards
|
||||
// Game settings end
|
||||
|
||||
var play_array = [];
|
||||
var anim = 0;
|
||||
var y = 1;
|
||||
var correct_answers = 0;
|
||||
|
||||
|
||||
function initiate(){ // Call all the functions
|
||||
calc_difficulty();
|
||||
console.log(level);
|
||||
make_playground();
|
||||
randomized();
|
||||
animation();
|
||||
console.log(difficulty);
|
||||
}
|
||||
// function animation(){
|
||||
// for(anim = 0; play_array.length > anim; anim++){
|
||||
// // document.getElementById(play_array[anim]).style.border = "3px solid green";
|
||||
// console.log(anim);
|
||||
// // $("#"+play_array[anim]).addClass('animations');
|
||||
|
||||
// // setTimeout(function () {
|
||||
// // $("#"+play_array[anim]).removeClass('animations');
|
||||
// // }, 2000);
|
||||
|
||||
|
||||
// }
|
||||
// }
|
||||
function animation () {
|
||||
setTimeout(function () {
|
||||
$("#"+play_array[anim]).addClass('animations')
|
||||
anim++;
|
||||
if (play_array.length > anim) {
|
||||
animation();
|
||||
}else{
|
||||
basic_timeout();
|
||||
}
|
||||
}, viewspeed)
|
||||
}
|
||||
function basic_timeout () {
|
||||
setTimeout(function () {
|
||||
$(".card").removeClass('animations');
|
||||
}, timeout)
|
||||
}
|
||||
function clear_values(){
|
||||
play_array = [];
|
||||
randoms = null;
|
||||
}
|
||||
function calc_difficulty(){
|
||||
if (level < 9){ // The level value cannot be lower than 9.
|
||||
level = 9;
|
||||
} else{
|
||||
level = level + 1;
|
||||
}
|
||||
difficulty = (35/100) * level + difficulty; //calc the difficulty to scale with the level
|
||||
difficulty = Math.round(difficulty) // Makes the difficulty value a integer
|
||||
}
|
||||
function make_playground(){
|
||||
//Loop out cards on the playground
|
||||
var i;
|
||||
for (i = 1; i < level; i++) { //Creates a new div for each loop wth the attributes and content set below.
|
||||
var div = document.createElement('div');
|
||||
if(showcontent == true){
|
||||
div.textContent = i;
|
||||
}
|
||||
div.setAttribute('class', 'card');
|
||||
div.setAttribute('id', i);
|
||||
div.setAttribute('onClick', 'reply_click(this.id)'); // add an onClick event to the div that sends the id of it to the funcition reply_click()
|
||||
document.getElementById("wrapper").appendChild(div);
|
||||
}
|
||||
}
|
||||
function clear_playground(){ //When called, makes the playground empty
|
||||
document.getElementById("wrapper").innerHTML = "";
|
||||
clear_values();
|
||||
} //hello
|
||||
|
||||
function randomized(){ // Fills the array with random numbers. Max number determines by level
|
||||
while(play_array.length < difficulty){
|
||||
var randoms = Math.floor(Math.random() * level) + 1;
|
||||
if(play_array.indexOf(randoms) === -1){
|
||||
play_array.push(randoms);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reply_click(clicked_id){ // Grabs the value from the id on the div/card when it's clicked on.
|
||||
clicked_id = Number(clicked_id);
|
||||
console.log("level="+level+"\n difficulty="+difficulty+"\n array="+play_array+"\n clicked_id="+clicked_id); // Console info
|
||||
|
||||
if(play_array.includes(clicked_id)){ // Takes the id from the div and searches in the array for it. Returns either true or false.
|
||||
document.getElementById(clicked_id).style.border = "3px solid green"; // Makes the div/cards border green
|
||||
document.getElementById(clicked_id).style.backgroundColor = "green";
|
||||
correct_answers++;
|
||||
if(play_array.length == correct_answers)
|
||||
{
|
||||
alert("You survived this round!");
|
||||
}
|
||||
}else{
|
||||
document.getElementById(clicked_id).style.border = "3px solid red"; // Makes the div/cards border red
|
||||
document.getElementById(clicked_id).style.backgroundColor = "red";
|
||||
health--;
|
||||
console.log("Liv: " + health);
|
||||
if(health == 0)
|
||||
{
|
||||
alert("Game over!");
|
||||
}
|
||||
}
|
||||
document.getElementById("alerted").innerHTML = clicked_id; // Just prints it out on the screen for testing
|
||||
}
|
||||
/*
|
||||
pseudocode:'
|
||||
/
|
||||
if (exists) clicked_id= randomized[x] = true
|
||||
if (value already added skip(Done with array, if exists/contains)) = false
|
||||
variable add 1
|
||||
if variable(int) == all answers(int) = true
|
||||
next round
|
||||
add score
|
||||
else
|
||||
health - 1
|
||||
if health < 5
|
||||
gameover
|
||||
*/
|
||||
55
scripts/main.js
Normal file
55
scripts/main.js
Normal file
@@ -0,0 +1,55 @@
|
||||
// Modules to control application life and create native browser window
|
||||
const {app, BrowserWindow} = require('electron')
|
||||
const path = require('path')
|
||||
|
||||
// Keep a global reference of the window object, if you don't, the window will
|
||||
// be closed automatically when the JavaScript object is garbage collected.
|
||||
let mainWindow
|
||||
|
||||
function createWindow () {
|
||||
// Create the browser window.
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
frame: false,
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
nodeIntegration: true
|
||||
}
|
||||
})
|
||||
|
||||
// and load the index.html of the app.
|
||||
mainWindow.loadFile('index.html')
|
||||
|
||||
// Open the DevTools.
|
||||
// mainWindow.webContents.openDevTools()
|
||||
|
||||
// Emitted when the window is closed.
|
||||
mainWindow.on('closed', function () {
|
||||
// Dereference the window object, usually you would store windows
|
||||
// in an array if your app supports multi windows, this is the time
|
||||
// when you should delete the corresponding element.
|
||||
mainWindow = null
|
||||
})
|
||||
}
|
||||
|
||||
// This method will be called when Electron has finished
|
||||
// initialization and is ready to create browser windows.
|
||||
// Some APIs can only be used after this event occurs.
|
||||
app.on('ready', createWindow)
|
||||
|
||||
// Quit when all windows are closed.
|
||||
app.on('window-all-closed', function () {
|
||||
// On macOS it is common for applications and their menu bar
|
||||
// to stay active until the user quits explicitly with Cmd + Q
|
||||
if (process.platform !== 'darwin') app.quit()
|
||||
})
|
||||
|
||||
app.on('activate', function () {
|
||||
// On macOS it's common to re-create a window in the app when the
|
||||
// dock icon is clicked and there are no other windows open.
|
||||
if (mainWindow === null) createWindow()
|
||||
})
|
||||
|
||||
// In this file you can include the rest of your app's specific main process
|
||||
// code. You can also put them in separate files and require them here.
|
||||
106
style.css
Normal file
106
style.css
Normal file
@@ -0,0 +1,106 @@
|
||||
body {
|
||||
background-color: #1d1e22;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
/* max-width: 1200px; */
|
||||
max-width: 741px;
|
||||
margin: 30px auto;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-auto-rows: 100px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
grid-gap: 1em;
|
||||
}
|
||||
.flexwrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card {
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
color: rgb(255, 255, 255);
|
||||
background-color:rgb(0, 94, 165);
|
||||
transition: 0.5s;
|
||||
}
|
||||
.animations{
|
||||
border: 1px solid pink;
|
||||
background-color: pink;
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: 0 0 10px purple;
|
||||
}
|
||||
/*
|
||||
.card:nth-child(odd) {
|
||||
background-color: #55BBE9;
|
||||
}
|
||||
|
||||
.card:nth-child(even) {
|
||||
background-color: #afbe29;
|
||||
}*/
|
||||
body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#title-bar {
|
||||
-webkit-app-region: drag;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
vertical-align: middle;
|
||||
background-color: #494949;
|
||||
padding: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#title {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 6px;
|
||||
color:white;
|
||||
|
||||
}
|
||||
|
||||
#title-bar-btns {
|
||||
-webkit-app-region: no-drag;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 6px;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
background-color: #1d1e22;
|
||||
}
|
||||
.wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 30px auto;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-auto-rows: 100px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
grid-gap: 1em;
|
||||
}
|
||||
|
||||
.diavo {
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.diavo:hover {
|
||||
box-shadow: 0 0 10px purple;
|
||||
}
|
||||
|
||||
.diavo:nth-child(odd) {
|
||||
background-color: #55BBE9;
|
||||
}
|
||||
|
||||
.diavo:nth-child(even) {
|
||||
background-color: #afbe29;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user