lucywoodman · April 16, 2022 06:53
diff --git a/codeswing.json b/codeswing.json
 {
  "scripts": [],
  "styles": []
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jest Simon Game</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
 </head>

 <body>
    <div class="container">
        <h1>simon</h1>
        <h2>memory game</h2>
    </div>
    <div class="container">
        <div data-listener="false" class="circle circle1" id="button1"></div>
        <div data-listener="false" class="circle circle2" id="button2"></div>
        <div data-listener="false" class="circle circle3" id="button3"></div>
        <div data-listener="false" class="circle circle4" id="button4"></div>
        <div class="scorebox" id="score">0</div>
        <button class="button" onclick="newGame()">new game</button>
    </div>
    <script src="scripts/game.js"></script>
 </body>

 </html>
diff --git a/script.js b/script.js
 let game = {
    score: 0,
    currentGame: [],
    playerMoves: [],
    turnNumber: 0,
    lastButton: "",
    turnInProgress: false,
    choices: ["button1", "button2", "button3", "button4"],
 }

 function newGame() {
    game.score = 0;
    game.playerMoves = [];
    game.currentGame = [];
    for (let circle of document.getElementsByClassName("circle")) {
        if (circle.getAttribute("data-listener") !== "true") {
            circle.addEventListener("click", (e) => {
                if (game.currentGame.length > 0 && !game.turnInProgress) {
                    let move = e.target.getAttribute("id");
                    game.lastButton = move;
                    lightsOn(move);
                    game.playerMoves.push(move);
                    playerTurn();
                }
            });
            circle.setAttribute("data-listener", "true");
        }
    }
    showScore();
    addTurn();
 }

 function showScore() {
    document.getElementById("score").innerText = game.score;
 }

 function addTurn() {
    game.playerMoves = [];
    game.currentGame.push(game.choices[Math.floor(Math.random() * 4)]);
    showTurns();
 }

 function lightsOn(circ) {
    document.getElementById(circ).classList.add("light");
    setTimeout(() => {
        document.getElementById(circ).classList.remove("light");
    }, 400);
 }

 function showTurns() {
    game.turnInProgress = true;
    game.turnNumber = 0;
    let turns = setInterval(() => {
        lightsOn(game.currentGame[game.turnNumber]);
        game.turnNumber++;
        if (game.turnNumber >= game.currentGame.length) {
            clearInterval(turns);
            game.turnInProgress = false;
        }
    }, 800);
 }

 function playerTurn() {
    let i = game.playerMoves.length - 1;
    if (game.currentGame[i] === game.playerMoves[i]) {
        if (game.currentGame.length == game.playerMoves.length) {
            game.score++
            showScore();
            addTurn();
        }
    } else {
        alert("Wrong move!");
        newGame();
    }
 }

 module.exports = { game, newGame, showScore, addTurn, lightsOn, showTurns, playerTurn };
diff --git a/style.css b/style.css
 body {
    font-family: Montserrat, sans-serif;
 }

 h1 {
    font-weight: 300;
    margin-bottom: 10px;
 }

 h2 {
    font-weight: 200;
    margin-top: 10px;
 }

 .container {
    position: relative;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 35px;
    text-align: center;
 }

 .circle {
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
 }

 .circle1 {
    height: 500px;
    width: 500px;
    background-color: #009FE3;
 }

 .circle2 {
    height: 400px;
    width: 400px;
    background-color: #445261;
    top: 50px;
    left: 50px;
 }

 .circle3 {
    height: 300px;
    width: 300px;
    background-color: #EFB920;
    top: 100px;
    left: 100px;
 }

 .circle4 {
    height: 200px;
    width: 200px;
    background-color: #23BBBB;
    top: 150px;
    left: 150px;
 }

 .scorebox {
    border-radius: 25%;
    box-sizing: border-box;
    position: absolute;
    background-color: #E6ECF0;
    height: 80px;
    width: 80px;
    top: 210px;
    left: 210px;
    text-align: center;
    color: #445261;
    font-size: 3em;
    padding-top: 10px;
 }

 .button {
    background-color: #FF5A60;
    color: #FFF;
    border: 0;
    height: 40px;
    width: 160px;
    border-radius: 5px;
    margin: 0 auto;
    display: block;
    top: 550px;
    position: relative;
    font-weight: 600;
 }

 .light {
    opacity: 0.4;
 }
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Jest Simon Game</title>
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="css/style.css">
	</head>

	<body>
	<div class="container">
	<h1>simon</h1>
	<h2>memory game</h2>
	</div>
	<div class="container">
	<div data-listener="false" class="circle circle1" id="button1"></div>
	<div data-listener="false" class="circle circle2" id="button2"></div>
	<div data-listener="false" class="circle circle3" id="button3"></div>
	<div data-listener="false" class="circle circle4" id="button4"></div>
	<div class="scorebox" id="score">0</div>
	<button class="button" onclick="newGame()">new game</button>
	</div>
	<script src="scripts/game.js"></script>
	</body>

	</html>
	let game = {
	score: 0,
	currentGame: [],
	playerMoves: [],
	turnNumber: 0,
	lastButton: "",
	turnInProgress: false,
	choices: ["button1", "button2", "button3", "button4"],
	}

	function newGame() {
	game.score = 0;
	game.playerMoves = [];
	game.currentGame = [];
	for (let circle of document.getElementsByClassName("circle")) {
	if (circle.getAttribute("data-listener") !== "true") {
	circle.addEventListener("click", (e) => {
	if (game.currentGame.length > 0 && !game.turnInProgress) {
	let move = e.target.getAttribute("id");
	game.lastButton = move;
	lightsOn(move);
	game.playerMoves.push(move);
	playerTurn();
	}
	});
	circle.setAttribute("data-listener", "true");
	}
	}
	showScore();
	addTurn();
	}

	function showScore() {
	document.getElementById("score").innerText = game.score;
	}

	function addTurn() {
	game.playerMoves = [];
	game.currentGame.push(game.choices[Math.floor(Math.random() * 4)]);
	showTurns();
	}

	function lightsOn(circ) {
	document.getElementById(circ).classList.add("light");
	setTimeout(() => {
	document.getElementById(circ).classList.remove("light");
	}, 400);
	}

	function showTurns() {
	game.turnInProgress = true;
	game.turnNumber = 0;
	let turns = setInterval(() => {
	lightsOn(game.currentGame[game.turnNumber]);
	game.turnNumber++;
	if (game.turnNumber >= game.currentGame.length) {
	clearInterval(turns);
	game.turnInProgress = false;
	}
	}, 800);
	}

	function playerTurn() {
	let i = game.playerMoves.length - 1;
	if (game.currentGame[i] === game.playerMoves[i]) {
	if (game.currentGame.length == game.playerMoves.length) {
	game.score++
	showScore();
	addTurn();
	}
	} else {
	alert("Wrong move!");
	newGame();
	}
	}

	module.exports = { game, newGame, showScore, addTurn, lightsOn, showTurns, playerTurn };
	body {
	font-family: Montserrat, sans-serif;
	}

	h1 {
	font-weight: 300;
	margin-bottom: 10px;
	}

	h2 {
	font-weight: 200;
	margin-top: 10px;
	}

	.container {
	position: relative;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 35px;
	text-align: center;
	}

	.circle {
	border-radius: 50%;
	position: absolute;
	cursor: pointer;
	}

	.circle1 {
	height: 500px;
	width: 500px;
	background-color: #009FE3;
	}

	.circle2 {
	height: 400px;
	width: 400px;
	background-color: #445261;
	top: 50px;
	left: 50px;
	}

	.circle3 {
	height: 300px;
	width: 300px;
	background-color: #EFB920;
	top: 100px;
	left: 100px;
	}

	.circle4 {
	height: 200px;
	width: 200px;
	background-color: #23BBBB;
	top: 150px;
	left: 150px;
	}

	.scorebox {
	border-radius: 25%;
	box-sizing: border-box;
	position: absolute;
	background-color: #E6ECF0;
	height: 80px;
	width: 80px;
	top: 210px;
	left: 210px;
	text-align: center;
	color: #445261;
	font-size: 3em;
	padding-top: 10px;
	}

	.button {
	background-color: #FF5A60;
	color: #FFF;
	border: 0;
	height: 40px;
	width: 160px;
	border-radius: 5px;
	margin: 0 auto;
	display: block;
	top: 550px;
	position: relative;
	font-weight: 600;
	}

	.light {
	opacity: 0.4;
	}