Commit 0bd84373 authored by Arian Stolwijk's avatar Arian Stolwijk
Browse files

Initial setup

parents
Pipeline #23596 failed with stages
in 2 minutes and 28 seconds
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "file://${file}",
"webRoot": "${workspaceFolder}"
}
]
}
\ No newline at end of file
# Tic Tac Toe
This is a little assignment where you implement the tic tac toe game. At
symbaloo everything evolves around tiles, just like the tiles in tic tac toe!
## Goal
The goal is that you create a little bit of code so we can talk about it. It
doesn't have to be perfect, don't spend too much time!
## Setup
There are three files:
- `tictactoe.html`: The HTML file with the HTML structure
- `tictactoe.js`: The interactive JavaScript part
- `tictactoe.css`: Some styling to layout the HTML elements and add some color
Each file has a little bit of code so you have somethign to start with. Your job
is to implement the rest :)
body {
background: #c2cad0;
color: #7e685a;
font-family: Arial, Helvetica, sans-serif;
margin: 30px;
}
body.winner {
background: url("https://media1.tenor.com/images/d01416b14f0392b752fa6d93cb62a0e8/tenor.gif");
}
#message {
font-size: 20px;
text-align: center;
padding: 50px;
}
#grid {
padding: 30px;
border: 3px solid #afd275;
background: #afd275;
margin-bottom: 20px;
}
button {
background: #e7717d;
border: 1px solid #c2b9b0;
border-radius: 10px;
padding: 10px;
}
button.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link href="tictactoe.css" rel="stylesheet" />
<title>Tic Tac Toe</title>
</head>
<body>
<div id="message">Press start</div>
<div id="grid">
Build some HTML to render a 3x3 grid
</div>
<div>
<button id="start-game">Start Game</button>
</div>
<script src="tictactoe.js"></script>
</body>
</html>
let currentPlayer = "X";
const messageElement = document.getElementById("message");
const startButton = document.getElementById("start-game");
startButton.addEventListener("click", startGame);
/**
* Function that initiates the game
*/
function startGame() {
startButton.classList.add("hidden");
messageElement.innerHTML = `Player '${currentPlayer}' can click a tile`;
// assign event listeners to the grid (tiles)
}
/**
* Event handler (that still should be assigned to the elements) to handle when
* the user clicks an tile in the grid
*/
function clickTile() {
// change the elements in the HTML
// detect if X or O has won
// if not, change `currentPlayer`
}
/**
* Call this function if one of the players has won
*/
function winner(player) {
if (player == "X") {
messageElement.innerHTML = "Well done X!!";
} else if (player == "O") {
messageElement.innerHTML = "Great job O!!";
}
document.body.classList.add("winner");
}
function reset() {
// optional feature if you have time
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment