94 lines
3.0 KiB
HTML
94 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Title</title>
|
||
|
|
<script src="js/vendors/vue.min.js"></script>
|
||
|
|
<script src="js/main.js" defer></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body{
|
||
|
|
background-color: #14bdac;
|
||
|
|
background-size: cover;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Arial;
|
||
|
|
|
||
|
|
}
|
||
|
|
.grid{
|
||
|
|
display: grid;
|
||
|
|
grid-template: 1fr 1fr 1fr/1fr;
|
||
|
|
background-color: #0da192;
|
||
|
|
grid-gap: 1rem;
|
||
|
|
height: 20rem;
|
||
|
|
width: 20rem;
|
||
|
|
}
|
||
|
|
.grid__casilla{
|
||
|
|
display: grid;
|
||
|
|
grid-template: 1fr /1fr 1fr 1fr;
|
||
|
|
grid-gap: 1rem;
|
||
|
|
}
|
||
|
|
.equis{
|
||
|
|
background-image: url("https://cdn.pixabay.com/photo/2016/10/10/01/49/x-1727490_960_720.png");
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-size: 3rem;
|
||
|
|
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
.circulo{
|
||
|
|
background-image: url("https://cdn.pixabay.com/photo/2015/08/27/10/30/ban-909970_960_720.png");
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-size: 3rem;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
button{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #14bdac;
|
||
|
|
border: none;
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main id="app">
|
||
|
|
<h1 style="color: white; ">Tres en Raya</h1>
|
||
|
|
<hr style="margin-bottom: 3rem">
|
||
|
|
<!--Jugadores-->
|
||
|
|
<select v-model="jugador">
|
||
|
|
<option value="1">Jugador1</option>
|
||
|
|
<option value="2">Jugador2</option>
|
||
|
|
</select>
|
||
|
|
<!--Tablero-->
|
||
|
|
<div class="grid">
|
||
|
|
<div v-for="(x,indiceX) in casillas" class="grid__casilla">
|
||
|
|
<button @click="marcar(indiceX,indiceY)" v-for="(y,indiceY) in x">
|
||
|
|
<span v-if=" y === 0"></span>
|
||
|
|
<span v-if=" y === 1" class="equis"></span>
|
||
|
|
<span v-if="y === 2" class="circulo"> </span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|