Add initial implementation of Parchis game with draggable pieces and dice throwing functionality
This commit is contained in:
339
assets/css/style.css
Normal file
339
assets/css/style.css
Normal file
@@ -0,0 +1,339 @@
|
||||
html, body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0%;
|
||||
background-color: black;
|
||||
color: white;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
table{
|
||||
width: 55rem;
|
||||
height: 45rem;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
table tr td{
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.content table{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.table-border{
|
||||
border: none !important;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-border tr td{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.rounded{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
box-shadow: 1px 1px 5px black;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.border-top{
|
||||
border-top: 1px solid black !important;
|
||||
}
|
||||
|
||||
.border-bottom{
|
||||
border-bottom: 1px solid black !important;
|
||||
}
|
||||
|
||||
.border-left{
|
||||
border-left: 1px solid black !important;
|
||||
}
|
||||
|
||||
.border-right{
|
||||
border-right: 1px solid black !important;
|
||||
}
|
||||
|
||||
.padding{
|
||||
padding: 5px 30px;
|
||||
}
|
||||
|
||||
.center{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bg-blue{
|
||||
background-color: #149DC9;
|
||||
}
|
||||
|
||||
.bg-red{
|
||||
background-color: #D43B1F;
|
||||
}
|
||||
|
||||
.bg-yellow{
|
||||
background-color: #C7C415;
|
||||
}
|
||||
|
||||
.bg-green{
|
||||
background-color: #15C720;
|
||||
}
|
||||
|
||||
.bg-gray{
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.bg-degrade-blue{
|
||||
background-color: #149cc998;
|
||||
}
|
||||
|
||||
.bg-degrade-red{
|
||||
background-color: #d43a1f98;
|
||||
}
|
||||
|
||||
.bg-degrade-yellow{
|
||||
background-color: #c7c4159d;
|
||||
}
|
||||
|
||||
.bg-degrade-green{
|
||||
background-color: #15c7219a;
|
||||
}
|
||||
|
||||
.central{
|
||||
position: absolute;
|
||||
|
||||
border-top: 15rem solid #C7C415 !important;
|
||||
border-bottom: 15rem solid #D43B1F !important;
|
||||
border-left: 15rem solid #149DC9 !important;
|
||||
border-right: 15rem solid #15C720 !important;
|
||||
border-radius: 15rem;
|
||||
}
|
||||
|
||||
.center{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container-central{
|
||||
position: absolute;
|
||||
top: 18.7rem;
|
||||
width: 11.5rem;
|
||||
height: 10rem;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.records{
|
||||
width: 7.5rem;
|
||||
height: 6rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.boxes{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.boxes .container-boxes{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.g-n-43{
|
||||
transform: rotate(-43grad);
|
||||
margin-top: -40%;
|
||||
margin-left: -38%;
|
||||
}
|
||||
|
||||
.g-n-43-mirror{
|
||||
transform: rotate(-43grad);
|
||||
margin-top: -80%;
|
||||
margin-left: -6%;
|
||||
}
|
||||
|
||||
.g-43{
|
||||
transform: rotate(43grad);
|
||||
margin-left: 40%;
|
||||
margin-top: -40%;
|
||||
}
|
||||
|
||||
.g-43-mirror{
|
||||
transform: rotate(43grad);
|
||||
margin-left: 2%;
|
||||
margin-top: -85%;
|
||||
}
|
||||
|
||||
.boxes .container-boxes div{
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.boxes .container-boxes:first-child{
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.mouse-move-normal table tr td:hover{
|
||||
background-color: rgba(238, 230, 230, 0.671);
|
||||
}
|
||||
|
||||
.mouse-move-yellow:hover{
|
||||
background-color: #c7c4159d !important;
|
||||
}
|
||||
|
||||
.mouse-move-col-yellow table tr td:hover{
|
||||
background-color: #c7c4159d !important;
|
||||
}
|
||||
|
||||
.mouse-move-gray:hover{
|
||||
background-color: rgb(155, 151, 151) !important;
|
||||
}
|
||||
|
||||
.mouse-move-col-blue table tr td:hover{
|
||||
background-color: #149cc998 !important;
|
||||
}
|
||||
|
||||
.mouse-move-blue:hover{
|
||||
background-color: #149cc998 !important;
|
||||
}
|
||||
|
||||
.mouse-move-green:hover{
|
||||
background-color: #15c7219a !important;
|
||||
}
|
||||
|
||||
.mouse-move-col-green table tr td:hover{
|
||||
background-color: #15c7219a !important;
|
||||
}
|
||||
|
||||
.mouse-move-red:hover{
|
||||
background-color: #d43a1f98 !important;
|
||||
}
|
||||
|
||||
.mouse-move-col-red table tr td:hover{
|
||||
background-color: #d43a1f98 !important;
|
||||
}
|
||||
|
||||
.rounded:hover{
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.boxes .container-boxes div:hover{
|
||||
background-color: rgba(238, 230, 230, 0.671) !important;
|
||||
}
|
||||
|
||||
.record-yellow-1, .record-yellow-2, .record-yellow-3, .record-yellow-4,
|
||||
.record-blue-1, .record-blue-2, .record-blue-3, .record-blue-4,
|
||||
.record-green-1, .record-green-2, .record-green-3, .record-green-4,
|
||||
.record-red-1, .record-red-2, .record-red-3, .record-red-4{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 5px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid white;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.record-yellow-1, .record-yellow-2, .record-yellow-3, .record-yellow-4{
|
||||
background-color: #C7C415;
|
||||
}
|
||||
|
||||
.record-blue-1, .record-blue-2, .record-blue-3, .record-blue-4{
|
||||
background-color: #149DC9;
|
||||
}
|
||||
|
||||
.record-green-1, .record-green-2, .record-green-3, .record-green-4{
|
||||
background-color: #15C720;
|
||||
}
|
||||
|
||||
.record-red-1, .record-red-2, .record-red-3, .record-red-4{
|
||||
background-color: #D43B1F;
|
||||
}
|
||||
|
||||
.board{
|
||||
width: 15%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
left: 84%;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.board .board-header{
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.board .board-body{
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background-color: rgb(221, 215, 215);
|
||||
overflow: scroll;
|
||||
font-size: 13px;
|
||||
}
|
||||
.board .board-body div{
|
||||
width: 100%;
|
||||
height: 5%;
|
||||
}
|
||||
|
||||
.board .board-footer{
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.board .board-footer button{
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
font-size: 25px;
|
||||
transition: .2s;
|
||||
|
||||
}
|
||||
|
||||
.board .board-header .dice{
|
||||
width: 5rem;
|
||||
height: 90%;
|
||||
border: 1px solid black;
|
||||
color: white;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.dice .dice-title{
|
||||
font-size: 12px !important;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
td{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.dice .dice-text{
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
BIN
assets/image/parchis.png
Normal file
BIN
assets/image/parchis.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
100
assets/js/script.js
Normal file
100
assets/js/script.js
Normal file
@@ -0,0 +1,100 @@
|
||||
var scord = null;
|
||||
var moveElement = null;
|
||||
var nextElement = null;
|
||||
var border = null;
|
||||
var position = {};// alamcenando la posición de cada ficha.
|
||||
|
||||
function onMouseDown(e, element) {
|
||||
moveElement = element;
|
||||
if (border == null) {
|
||||
border = moveElement.style.border;
|
||||
moveElement.style.border = "1px solid gray";
|
||||
}
|
||||
|
||||
if (position[element.id] == undefined) {
|
||||
position[element.id] = { x: e.clientX, y: e.clientY };
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseEnter(e, element) {
|
||||
nextElement = element;
|
||||
console.log(element)
|
||||
}
|
||||
|
||||
function addPosition(X, Y, element) {
|
||||
|
||||
element.style.transform = 'translate3d(' + X + 'px,' + Y + 'px, 0px)';
|
||||
}
|
||||
|
||||
function getRandom(min, max){
|
||||
return Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
|
||||
let turn = 0;
|
||||
let cont = 0;
|
||||
var classess = ['bg-green mouse-move-green', 'bg-yellow mouse-move-yellow', 'bg-blue mouse-move-blue', 'bg-red mouse-move-red'];
|
||||
var bgClass = ['bg-green', 'bg-yellow', 'bg-blue', 'bg-red'];
|
||||
function trhowDice(){
|
||||
let dice1 = getRandom(1, 7);
|
||||
let dice2 = getRandom(1, 7);
|
||||
document.getElementById('dice-one').innerHTML = dice1;
|
||||
document.getElementById('dice-two').innerHTML = dice2;
|
||||
var element = document.getElementsByClassName('dice');
|
||||
for(var index in element){
|
||||
element[index].className = 'dice ' + bgClass[(turn == -1 ? 3 : turn)];
|
||||
}
|
||||
|
||||
// Agregando jugadas al tablero
|
||||
element = document.getElementsByClassName('board-body')[0];
|
||||
var div = document.createElement('div');
|
||||
var text = document.createTextNode(`- Jugada #${++cont}: Dado #1: ${dice1}, Dado #2: ${dice2}`);
|
||||
div.className = bgClass[(turn == -1 ? 3 : turn)];
|
||||
div.appendChild(text);
|
||||
element.appendChild(div);
|
||||
element.scrollTop = element.scrollHeight;// mantiene el scroll abajo
|
||||
// fin de agregar jugadas
|
||||
if(dice1 == dice2){
|
||||
if(dice2 != 6){
|
||||
document.getElementById('btn-trhow-dice').className = classess[++turn];
|
||||
}
|
||||
}else{
|
||||
document.getElementById('btn-trhow-dice').className = classess[++turn];
|
||||
}
|
||||
turn = turn == 3 ? -1 : turn;
|
||||
}
|
||||
|
||||
window.addEventListener('mouseup', (e) => {
|
||||
if (moveElement != null) {
|
||||
moveElement.style.border = border;
|
||||
border = null;
|
||||
// alert(moveElement.id + ' - x:' + e.clientX + ' - y:' + e.clientY);
|
||||
moveElement = null;
|
||||
nextElement = null;
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (moveElement != null) {
|
||||
let posY = e.clientY - moveElement.offsetHeight/2;
|
||||
let posX = e.clientX - moveElement.offsetWidth/2;
|
||||
moveElement.style.transform = 'translate3d(' + posX + 'px,' + posY + 'px, 0px)';
|
||||
// console.log(moveElement.id, 'x', e.clientX, 'y', e.clientY)
|
||||
}
|
||||
})
|
||||
|
||||
window.onload = ()=>{
|
||||
[
|
||||
{id: 'y1', x: 430, y: 70}, {id: 'y2', x: 550, y: 70}, {id: 'y3', x: 430, y: 160}, {id: 'y4', x: 550, y: 160},
|
||||
{id: 'b1', x: 430, y: 570}, {id: 'b2', x: 550, y: 570}, {id: 'b3', x: 430, y: 660}, {id: 'b4', x: 550, y: 660},
|
||||
{id: 'g1', x: 1010, y: 70}, {id: 'g2', x: 1130, y: 70}, {id: 'g3', x: 1010, y: 160}, {id: 'g4', x: 1130, y: 160},
|
||||
{id: 'r1', x: 1010, y: 570}, {id: 'r2', x: 1130, y: 570}, {id: 'r3', x: 1010, y: 660}, {id: 'r4', x: 1130, y: 660}
|
||||
].forEach((element)=>{
|
||||
addPosition(
|
||||
element.x,
|
||||
element.y,
|
||||
document.getElementById(element.id)
|
||||
);
|
||||
position[element.id] = {x: 0, y: 0};
|
||||
|
||||
})
|
||||
}
|
||||
402
index.html
Normal file
402
index.html
Normal file
@@ -0,0 +1,402 @@
|
||||
<!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">
|
||||
<meta name="description" content="Juego de parchis. @R.M.B.">
|
||||
<meta name="theme-color" content="#B84810">
|
||||
<link rel="shortcut icon" href="./assets/image/parchis.png" type="image/x-icon">
|
||||
<title>Parchis</title>
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="padding bg-degrade-yellow">
|
||||
<div class="rounded bg-yellow"></div>
|
||||
</td>
|
||||
|
||||
<td class="content">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="content mouse-move-normal">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="border-bottom"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom mouse-move-yellow bg-yellow"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mouse-move-normal"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td class="border-left border-right mouse-move-col-yellow">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="border-bottom bg-yellow"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom bg-yellow"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom bg-yellow"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom bg-yellow"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom bg-yellow"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom bg-yellow"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bg-yellow"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td class="content mouse-move-normal">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="border-bottom"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom mouse-move-gray bg-gray"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
<td class="padding bg-degrade-green">
|
||||
<div class="rounded bg-green center"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Fila Central -->
|
||||
<tr>
|
||||
<td class="content mouse-move-normal">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="content">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="border-right"></td>
|
||||
<td class="border-right"></td>
|
||||
<td class="border-right"></td>
|
||||
<td class="border-right"></td>
|
||||
<td class="border-right mouse-move-gray bg-gray"></td>
|
||||
<td class="border-right"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top border-bottom content mouse-move-col-blue">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="border-right bg-blue"></td>
|
||||
<td class="border-right bg-blue"></td>
|
||||
<td class="border-right bg-blue"></td>
|
||||
<td class="border-right bg-blue"></td>
|
||||
<td class="border-right bg-blue"></td>
|
||||
<td class="border-right bg-blue"></td>
|
||||
<td class="bg-blue"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="content">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="border-right"></td>
|
||||
<td class="border-right"></td>
|
||||
<td class="border-right"></td>
|
||||
<td class="border-right"></td>
|
||||
<td class="border-right bg-blue mouse-move-blue"></td>
|
||||
<td class="border-right"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<!-- Centro del parchis -->
|
||||
<td class="content" style="height: 15rem;color: red;">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="border-right boxes">
|
||||
<div class="container-boxes g-43-mirror">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border-right mouse-move-yellow bg-yellow"></td>
|
||||
<td class="boxes">
|
||||
<div class="container-boxes g-n-43-mirror">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-top">
|
||||
<td class="border-right mouse-move-blue bg-blue"></td>
|
||||
<td class="border-right"></td>
|
||||
<td class="mouse-move-green bg-green"></td>
|
||||
</tr>
|
||||
<tr class="border-top">
|
||||
<td class="border-right boxes">
|
||||
<div class="container-boxes g-n-43">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border-right mouse-move-red bg-red"></td>
|
||||
<td class="boxes">
|
||||
<div class="container-boxes g-43">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- Centro de juego -->
|
||||
<div class="center">
|
||||
<div class="container-central center">
|
||||
<div class="central">
|
||||
<div class="records center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- fin -->
|
||||
</td>
|
||||
<!-- Fin del centro del parchis -->
|
||||
<td class="content">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="content mouse-move-normal">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="border-left"></td>
|
||||
<td class="border-left mouse-move-green bg-green"></td>
|
||||
<td class="border-left"></td>
|
||||
<td class="border-left"></td>
|
||||
<td class="border-left"></td>
|
||||
<td class="border-left"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="border-top border-bottom content mouse-move-col-green">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="bg-green"></td>
|
||||
<td class="border-left bg-green"></td>
|
||||
<td class="border-left bg-green"></td>
|
||||
<td class="border-left bg-green"></td>
|
||||
<td class="border-left bg-green"></td>
|
||||
<td class="border-left bg-green"></td>
|
||||
<td class="border-left bg-green"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="content mouse-move-normal">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="border-left"></td>
|
||||
<td class="border-left mouse-move-gray bg-gray"></td>
|
||||
<td class="border-left"></td>
|
||||
<td class="border-left"></td>
|
||||
<td class="border-left"></td>
|
||||
<td class="border-left"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Fin de Fila Central -->
|
||||
|
||||
<tr>
|
||||
<td class="padding bg-degrade-blue">
|
||||
<div class="rounded bg-blue"></div>
|
||||
</td>
|
||||
|
||||
<td class="content mouse-move-normal">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td>
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top mouse-move-gray bg-gray"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td class="border-left border-right mouse-move-col-red">
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td class="bg-red"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top bg-red"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top bg-red"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top bg-red"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top bg-red"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top bg-red"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top bg-red"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<table class="table-border">
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top mouse-move-red bg-red"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-top"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
<td class="padding bg-degrade-red">
|
||||
<div class="rounded bg-red"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="record">
|
||||
<!-- fichas amarillas -->
|
||||
<div class="record-yellow-1" onmousedown="onMouseDown(event, this)" id="y1"></div>
|
||||
<div class="record-yellow-2" onmousedown="onMouseDown(event, this)" id="y2"></div>
|
||||
<div class="record-yellow-3" onmousedown="onMouseDown(event, this)" id="y3"></div>
|
||||
<div class="record-yellow-4" onmousedown="onMouseDown(event, this)" id="y4"></div>
|
||||
<!-- Fichas rojas -->
|
||||
<div class="record-red-1" onmousedown="onMouseDown(event, this)" id="r1"></div>
|
||||
<div class="record-red-2" onmousedown="onMouseDown(event, this)" id="r2"></div>
|
||||
<div class="record-red-3" onmousedown="onMouseDown(event, this)" id="r3"></div>
|
||||
<div class="record-red-4" onmousedown="onMouseDown(event, this)" id="r4"></div>
|
||||
<!-- Fichas azules -->
|
||||
<div class="record-blue-1" onmousedown="onMouseDown(event, this)" id="b1"></div>
|
||||
<div class="record-blue-2" onmousedown="onMouseDown(event, this)" id="b2"></div>
|
||||
<div class="record-blue-3" onmousedown="onMouseDown(event, this)" id="b3"></div>
|
||||
<div class="record-blue-4" onmousedown="onMouseDown(event, this)" id="b4"></div>
|
||||
<!-- Fichas verdes -->
|
||||
<div class="record-green-1" onmousedown="onMouseDown(event, this)" id="g1"></div>
|
||||
<div class="record-green-2" onmousedown="onMouseDown(event, this)" id="g2"></div>
|
||||
<div class="record-green-3" onmousedown="onMouseDown(event, this)" id="g3"></div>
|
||||
<div class="record-green-4" onmousedown="onMouseDown(event, this)" id="g4"></div>
|
||||
</div>
|
||||
<div class="board">
|
||||
<div class="board-header center">
|
||||
<div class="dice">
|
||||
<div class="dice-title center">Dado 1</div>
|
||||
<div class="dice-text center" id="dice-one"></div>
|
||||
</div>
|
||||
<div class="dice">
|
||||
<div class="dice-title center">Dado 2</div>
|
||||
<div class="dice-text center" id="dice-two">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="board-body"></div>
|
||||
|
||||
<div class="board-footer">
|
||||
<button onclick="trhowDice()" class="bg-green mouse-move-green" id="btn-trhow-dice">Arrojar Dados</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./assets/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user