myxelium/Blocks-Game
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
SocksOnHead
2020-03-04 10:01:48 +01:00
commit a190ac0ea5
7 changed files with 376 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/style.css Normal file
View 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
View 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
View 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
View File

@@ -0,0 +1,4 @@
$("<h1>Include this using jquery</h1>").appendTo("body");
console.log($("body").html());

131
scripts/gameboard.js Normal file
View 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
View 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
View 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;
}