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};
|
||||
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user