Merge 6e2388abb4 into 120204995f
Ishita
3 years ago
committed by
GitHub
commit
4b93db549d
@ -0,0 +1,2 @@
|
|||||||
|
|
||||||
|
The first look of game !
|
||||||
@ -0,0 +1 @@
|
|||||||
|
https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout
|
||||||
|
After Width: | Height: | Size: 151 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Snake Mania</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="body">
|
||||||
|
<div id="gameName">
|
||||||
|
<u>SNAKE <br> MANIA </u>
|
||||||
|
<br>
|
||||||
|
<div id="rules">
|
||||||
|
<br>
|
||||||
|
(1.)Use Arrow keys to direct <br> the snake.
|
||||||
|
<br>
|
||||||
|
(2.)Eat the food to increase snake <br> length and make high score.
|
||||||
|
<br>
|
||||||
|
(3.)Try not to bump in walls or <br>into yourself.
|
||||||
|
<br>
|
||||||
|
Have Fun !!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="board">
|
||||||
|
</div>
|
||||||
|
<div id="scoreBoard">Score: 0</div>
|
||||||
|
<div id="highScoreBoard">High-Score: 0</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,143 @@
|
|||||||
|
// Game Constants and variables
|
||||||
|
let inputDir = {x: 0, y: 0};
|
||||||
|
const foodSound = new Audio('food.mp3');
|
||||||
|
const gameOverSound = new Audio('gameover.mp3');
|
||||||
|
const moveSound = new Audio('move.mp3');
|
||||||
|
const musicSound = new Audio('music.mp3');
|
||||||
|
let speed = 6;
|
||||||
|
let score = 0;
|
||||||
|
let lastPaintTime = 0;
|
||||||
|
let snakeArr = [ // array
|
||||||
|
{x: 13, y: 15}
|
||||||
|
]
|
||||||
|
let food = {x: 6, y:7}; // object
|
||||||
|
|
||||||
|
// Game Functions
|
||||||
|
function main(ctime){
|
||||||
|
window.requestAnimationFrame(main);
|
||||||
|
// console.log(ctime);
|
||||||
|
if((ctime - lastPaintTime)/1000 < 1/speed){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
lastPaintTime = ctime;
|
||||||
|
|
||||||
|
gameEngine();
|
||||||
|
}
|
||||||
|
|
||||||
|
function isCollide(sarr){
|
||||||
|
// if snake bump into himself
|
||||||
|
for (let i = 1; i < snakeArr.length; i++) {
|
||||||
|
if(sarr[i].x === sarr[0].x && sarr[i].y === sarr[0].y){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// if snake bump into wall
|
||||||
|
if(sarr[0].x >= 18 || sarr[0].x <= 0 || sarr[0].y >= 18 || sarr[0].y <= 0){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function gameEngine(){
|
||||||
|
// Part 1: Updating the snake array and food
|
||||||
|
if(isCollide(snakeArr)){
|
||||||
|
gameOverSound.play();
|
||||||
|
musicSound.pause();
|
||||||
|
inputDir = {x:0, y:0};
|
||||||
|
alert("Game Over!! Press any key to play again");
|
||||||
|
snakeArr = [{x:13, y:15}];
|
||||||
|
musicSound.play();
|
||||||
|
score = 0;
|
||||||
|
scoreBoard.innerHTML = "Score: " + score;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If you have eaten the food , increment the score and regenrate the food
|
||||||
|
if(snakeArr[0].y === food.y && snakeArr[0].x === food.x){
|
||||||
|
foodSound.play();
|
||||||
|
score += 1;
|
||||||
|
if(score > hiscore){
|
||||||
|
hiscoreval = score;
|
||||||
|
localStorage.setItem('hiscore', JSON.stringify(hiscoreval));
|
||||||
|
highScoreBoard.innerHTML = "HighScore: "+ hiscoreval;
|
||||||
|
}
|
||||||
|
scoreBoard.innerHTML = "Score: " + score;
|
||||||
|
snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y});
|
||||||
|
// generating random number between a and b
|
||||||
|
// Math.round(a + (b - a)*Math.random())
|
||||||
|
let a = 2;
|
||||||
|
let b = 16;
|
||||||
|
food = {x: Math.round(a + (b - a)*Math.random()), y: Math.round(a + (b - a)*Math.random())};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Moving the snake
|
||||||
|
for (let i = snakeArr.length - 2; i >= 0; i--) {
|
||||||
|
snakeArr[i + 1] = {...snakeArr[i]};
|
||||||
|
}
|
||||||
|
|
||||||
|
snakeArr[0].x += inputDir.x;
|
||||||
|
snakeArr[0].y += inputDir.y;
|
||||||
|
|
||||||
|
// Part 2: Display the snake and food
|
||||||
|
// Display Snake
|
||||||
|
board.innerHTML = "";
|
||||||
|
snakeArr.forEach((e,index)=>{
|
||||||
|
snakeElement = document.createElement('div');
|
||||||
|
snakeElement.style.gridRowStart = e.y;
|
||||||
|
snakeElement.style.gridColumnStart = e.x;
|
||||||
|
if(index === 0){
|
||||||
|
snakeElement.classList.add('head');
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
snakeElement.classList.add('snake');
|
||||||
|
}
|
||||||
|
board.appendChild(snakeElement);
|
||||||
|
})
|
||||||
|
|
||||||
|
// Display Food
|
||||||
|
foodElement = document.createElement('div');
|
||||||
|
foodElement.style.gridRowStart = food.y;
|
||||||
|
foodElement.style.gridColumnStart = food.x;
|
||||||
|
foodElement.classList.add('food');
|
||||||
|
board.appendChild(foodElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Main logic starts here
|
||||||
|
let hiscore = localStorage.getItem('hiscore');
|
||||||
|
// localStorage.clear() -> to clear local storage / high score
|
||||||
|
if(hiscore == null){
|
||||||
|
hiscoreval = 0;
|
||||||
|
localStorage.setItem('hiscore', JSON.stringify(hiscoreval));
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
highscoreval = JSON.parse(localStorage.getItem(hiscore));
|
||||||
|
highScoreBoard.innerHTML = "HighScore: "+ hiscore;
|
||||||
|
}
|
||||||
|
window.requestAnimationFrame(main);
|
||||||
|
window.addEventListener('keydown', e=>{
|
||||||
|
inputDir = {x: 0, y: 1}; // start the game
|
||||||
|
moveSound.play();
|
||||||
|
switch (e.key) {
|
||||||
|
case "ArrowUp":
|
||||||
|
inputDir.x = 0;
|
||||||
|
inputDir.y = -1;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "ArrowDown":
|
||||||
|
inputDir.x = 0;
|
||||||
|
inputDir.y = 1;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "ArrowRight":
|
||||||
|
inputDir.x = 1;
|
||||||
|
inputDir.y = 0;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "ArrowLeft":
|
||||||
|
inputDir.x = -1;
|
||||||
|
inputDir.y = 0;
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&family=Varela+Round&display=swap');
|
||||||
|
|
||||||
|
*{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body{
|
||||||
|
background-image: url("bg.jpg");
|
||||||
|
min-height: 100vh;
|
||||||
|
background-size: 100vw 100vh;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#board{
|
||||||
|
background: linear-gradient(rgb(170, 236, 170), rgb(236, 236, 167));
|
||||||
|
width: 90vmin;
|
||||||
|
height: 92vmin;
|
||||||
|
border: 2px solid black;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: repeat(18, 1fr);
|
||||||
|
grid-template-columns: repeat(18, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
#scoreBoard{
|
||||||
|
position: absolute;
|
||||||
|
top: 65px;
|
||||||
|
font-size: 40px;
|
||||||
|
right: 100px;
|
||||||
|
font-weight: bolder;
|
||||||
|
border: 4px dotted rgb(1, 48, 1);
|
||||||
|
padding: 10px;
|
||||||
|
font-family: 'New Tegomin', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#highScoreBoard{
|
||||||
|
position: absolute;
|
||||||
|
top: 160px;
|
||||||
|
font-size: 40px;
|
||||||
|
right: 100px;
|
||||||
|
font-weight: bolder;
|
||||||
|
border: 4px dotted rgb(1, 48, 1);
|
||||||
|
padding: 10px;
|
||||||
|
font-family: 'New Tegomin', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gameName{
|
||||||
|
position: absolute;
|
||||||
|
top: 65px;
|
||||||
|
font-size: 70px;
|
||||||
|
left: 25px;
|
||||||
|
font-weight: bolder;
|
||||||
|
padding: 10px;
|
||||||
|
font-family: 'New Tegomin', serif;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rules{
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 200%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head{
|
||||||
|
background: radial-gradient(circle, green, pink, lightgreen, red);
|
||||||
|
border: .25vmin solid rgb(48, 68, 48);
|
||||||
|
border-radius: 12px;
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.snake{
|
||||||
|
background-color: purple;
|
||||||
|
border: .25vmin solid white;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.food{
|
||||||
|
background: linear-gradient(green, blue);
|
||||||
|
border-radius: 50%;
|
||||||
|
border: .25vmin dotted purple;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,28 @@
|
|||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.Arrays;
|
||||||
|
|
||||||
|
public class ImplimentChain {
|
||||||
|
/**
|
||||||
|
Hash = digital signature
|
||||||
|
Each Block will have :-
|
||||||
|
List of transactions
|
||||||
|
Previous Hash
|
||||||
|
Hash
|
||||||
|
*/
|
||||||
|
|
||||||
|
ArrayList<MyInfo> blockchain = new ArrayList<>();
|
||||||
|
|
||||||
|
public static void main(String[] args) {
|
||||||
|
String[] genesisTransactions = {"Ishita sent nini 20 bitcoin","Rajat sent fin 50 bitcoin"};
|
||||||
|
MyInfo genesisInfo = new MyInfo(0, genesisTransactions);
|
||||||
|
|
||||||
|
String[] block2Transaction = {"A sent 10 bitcoin to B", "B sent 5 bitcoin to C"};
|
||||||
|
MyInfo block2 = new MyInfo(genesisInfo.getBlockHash(), block2Transaction);
|
||||||
|
|
||||||
|
System.out.println("Hash of genesis Block :");
|
||||||
|
System.out.println(genesisInfo.getBlockHash());
|
||||||
|
System.out.println("Hash of Block 2:");
|
||||||
|
System.out.print(block2.getBlockHash());
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import java.util.Arrays;
|
||||||
|
|
||||||
|
public class MyInfo {
|
||||||
|
|
||||||
|
private int previousHash;
|
||||||
|
private String[] transactions;
|
||||||
|
|
||||||
|
private int BlockHash;
|
||||||
|
|
||||||
|
public MyInfo(int previousHash, String[] transactions) {
|
||||||
|
this.previousHash = previousHash;
|
||||||
|
this.transactions = transactions;
|
||||||
|
|
||||||
|
Object[] contents = {Arrays.hashCode(transactions), previousHash };
|
||||||
|
this.BlockHash = Arrays.hashCode(contents);
|
||||||
|
}
|
||||||
|
|
||||||
|
public int getPreviousHash() {
|
||||||
|
return previousHash;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String[] getTransactions() {
|
||||||
|
return transactions;
|
||||||
|
}
|
||||||
|
|
||||||
|
public int getBlockHash() {
|
||||||
|
return BlockHash;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Tic Tac Toe</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>MyTicTacToe.com</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="gameContainer">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="line"></div>
|
||||||
|
|
||||||
|
<div class="box bt-0 bl-0">
|
||||||
|
<span class="boxText"></span>
|
||||||
|
</div>
|
||||||
|
<div class="box bt-0">
|
||||||
|
<span class="boxText"></span>
|
||||||
|
</div>
|
||||||
|
<div class="box bt-0 br-0">
|
||||||
|
<span class="boxText"></span>
|
||||||
|
</div>
|
||||||
|
<div class="box bl-0">
|
||||||
|
<span class="boxText"></span>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<span class="boxText"></span>
|
||||||
|
</div>
|
||||||
|
<div class="box br-0">
|
||||||
|
<span class="boxText"></span>
|
||||||
|
</div>
|
||||||
|
<div class="box bl-0 bb-0">
|
||||||
|
<span class="boxText"></span>
|
||||||
|
</div>
|
||||||
|
<div class="box bb-0">
|
||||||
|
<span class="boxText"></span>
|
||||||
|
</div>
|
||||||
|
<div class="box bb-0 br-0">
|
||||||
|
<span class="boxText"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gameInfo">
|
||||||
|
<h1>Welcome to Tic Tac Toe </h1>
|
||||||
|
<div>
|
||||||
|
<span class="info">Turn for X</span>
|
||||||
|
<button id="reset">Reset</button>
|
||||||
|
</div>
|
||||||
|
<div class="imageBox">
|
||||||
|
<img src="excited.gif" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
@ -0,0 +1,69 @@
|
|||||||
|
console.log("Welcome to Tic Tac Toe");
|
||||||
|
let music = new Audio("music.mp3");
|
||||||
|
let audioturn = new Audio("ting.mp3");
|
||||||
|
let gameoveraudio = new Audio("gameover.mp3");
|
||||||
|
let turn = "X";
|
||||||
|
let gameover = false;
|
||||||
|
|
||||||
|
// Function to change turn
|
||||||
|
const changeTurn = ()=>{
|
||||||
|
return turn === "X"?"0":"X";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to check for a Win
|
||||||
|
const checkWin = ()=>{
|
||||||
|
let boxtexts = document.getElementsByClassName("boxText");
|
||||||
|
let wins = [
|
||||||
|
[0, 1, 2, 5, 5, 0],
|
||||||
|
[3, 4, 5, 5, 15, 0],
|
||||||
|
[6, 7, 8, 5, 25, 0],
|
||||||
|
[0, 3, 6, -5, 15, 90],
|
||||||
|
[1, 4, 7, 5, 15, 90],
|
||||||
|
[2, 5, 8, 15, 15, 90],
|
||||||
|
[0, 4, 8, 5, 15, 45],
|
||||||
|
[2, 4, 6, 5, 15, 135]
|
||||||
|
]
|
||||||
|
|
||||||
|
wins.forEach(e =>{
|
||||||
|
if((boxtexts[e[0]].innerText === boxtexts[e[1]].innerText) &&
|
||||||
|
(boxtexts[e[1]].innerText === boxtexts[e[2]].innerText) &&
|
||||||
|
(boxtexts[e[0]].innerText !== '')){
|
||||||
|
document.querySelector('.info').innerText = boxtexts[e[0]].innerText + " Won";
|
||||||
|
gameover = true;
|
||||||
|
document.querySelector('.imageBox').getElementsByTagName('img')[0].style.width = "200px";
|
||||||
|
document.querySelector(".line").style.width = "20vw";
|
||||||
|
document.querySelector(".line").style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Game Logic
|
||||||
|
let boxes = document.getElementsByClassName("box");
|
||||||
|
Array.from(boxes).forEach(element =>{
|
||||||
|
let boxtext = element.querySelector(".boxText");
|
||||||
|
element.addEventListener('click',()=>{
|
||||||
|
if(boxtext.innerText === ''){
|
||||||
|
boxtext.innerText = turn;
|
||||||
|
turn = changeTurn();
|
||||||
|
audioturn.play();
|
||||||
|
checkWin();
|
||||||
|
if(!gameover){
|
||||||
|
document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// Add onClick Listener to RESET button
|
||||||
|
reset.addEventListener('click', ()=>{
|
||||||
|
let boxtexts = document.querySelectorAll('.boxText');
|
||||||
|
Array.from(boxtexts).forEach(element => {
|
||||||
|
element.innerText = "";
|
||||||
|
});
|
||||||
|
turn = "X";
|
||||||
|
gameOver = false;
|
||||||
|
document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
|
||||||
|
document.querySelector('.imageBox').getElementsByTagName('img')[0].style.width = "0px";
|
||||||
|
document.querySelector(".line").style.width = "0";
|
||||||
|
|
||||||
|
})
|
||||||
@ -0,0 +1,131 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&family=Libre+Baskerville:ital@1&family=New+Tegomin&family=Roboto:wght@300&family=Varela+Round&display=swap');
|
||||||
|
|
||||||
|
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav{
|
||||||
|
background-color: rgb(68, 4, 68);
|
||||||
|
color: white;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 27px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 15px;
|
||||||
|
font-family: 'New Tegomin', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul{
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gameContainer{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 10vw);
|
||||||
|
grid-template-rows: repeat(3, 10vw);
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box{
|
||||||
|
border: 2px solid black;
|
||||||
|
font-size: 8vw;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box:hover{
|
||||||
|
background-color: rgb(233, 223, 241);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gameInfo{
|
||||||
|
padding: 0 34px;
|
||||||
|
font-family: 'Baloo Bhaina 2', cursive;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gameInfo h1{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imageBox img{
|
||||||
|
width: 0;
|
||||||
|
transition: width 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.br-0{
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bl-0{
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bt-0{
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bb-0{
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#reset{
|
||||||
|
margin: 0 24px;
|
||||||
|
padding: 1px 18px;
|
||||||
|
background-color: rgb(248, 209, 248);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: 'Baloo Bhaina 2';
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info{
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: 'New Tegomin', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line{
|
||||||
|
background-color: black;
|
||||||
|
width: 0;
|
||||||
|
height: 3px;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #911d91;
|
||||||
|
transition: width 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 950px)
|
||||||
|
{
|
||||||
|
.gameContainer{
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gameInfo{
|
||||||
|
margin-top: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gameInfo h1{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 20vw);
|
||||||
|
grid-template-rows: repeat(3, 20vw);
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
Loading…
Reference in new issue