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