Positioning a triangle using Javascript, CSS and HTML (other techniques are appreciated)
I am trying to imagine a card game with 20 triangles that can be placed in different ways. Each triangle has 3 sides, each side has one analog in the remaining 19 triangles. Only if the sides match can they be brought together.
the code that randomly generates possibilities is the following: (I am also happy with the improvement of the code, which I am sure is a lot
JAVSCRIPT
function Game() {
this.cardsUnused = [];
this.cardsUsed = [];
this.possibleCards = [];
this.insert = function (obj) {
this.cardsUnused.push(obj);
};
this.useCard = function (obj) { // adds a triangle to the usedCards Array and removes it from the UnusedCards Array
this.cardsUsed.push(obj);
this.cardsUnused.remove(obj);
this.possibleCards.remove(obj);// t (array.prototype.remove)
};
this.unuseCard = function (obj) {
this.cardsUnused.push(obj);
this.cardsUsed.remove(obj);
};
}
// remove function
Array.prototype.remove = function () {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};
var game = new Game();
// Triangle wird erstellt
function Triangle(name, sideA, sideB, sideC, Direction, position) {
this.partName = name;
this.sides = [sideA, sideB, sideC];
this.sidesStatus = [0, 0, 0];
this.sideDirection = Direction;
this.stepUsed = 0;
this.angle = 0;
this.cardPosition = position;
this.turn = function (winkel) {
this.angle = this.angle + winkel;
};
this.useSide = function (side) {
this.sidesStatus[side] = 1;
};
}
var a = new Triangle("A", 1, 2, 21, 0, [0, 0]);
var b = new Triangle("B", 2, 3, 22, 0, [0, 0]);
var c = new Triangle("C", 3, 4, 23, 0, [0, 0]);
var d = new Triangle("D", 4, 5, 24, 0, [0, 0]);
var e = new Triangle("E", 5, 1, 25, 0, [0, 0]);
var f = new Triangle("F", 6, 21, 7, 180, [0, 0]);
var g = new Triangle("G", 7, 8, 26, 0, [0, 0]);
var h = new Triangle("H", 8, 22, 9, 180, [0, 0]);
var i = new Triangle("I", 9, 10, 27, 0, [0, 0]);
var j = new Triangle("J", 10, 23, 11, 180, [0, 0]);
var k = new Triangle("K", 11, 12, 28, 0, [0, 0]);
var l = new Triangle("L", 12, 24, 13, 180, [0, 0]);
var m = new Triangle("M", 13, 14, 29, 0, [0, 0]);
var n = new Triangle("N", 14, 25, 15, 180, [0, 0]);
var o = new Triangle("O", 15, 6, 30, 0, [0, 0]);
var p = new Triangle("P", 16, 26, 17, 180, [0, 0]);
var q = new Triangle("Q", 17, 27, 18, 180, [0, 0]);
var r = new Triangle("R", 18, 28, 19, 180, [0, 0]);
var s = new Triangle("S", 19, 29, 20, 180, [0, 0]);
var t = new Triangle("T", 20, 30, 16, 180, [0, 0]);
// an array with 20 triangles
var triangles = [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t];
// function to add triangles to the game
function addTriangles(arr) {
var x;
for (x = 0; x < arr.length; x += 1) {
game.insert(triangles[x]);
}
}
addTriangles(triangles);
game.useCard(a);
function toRadians (angle) {
return angle * (Math.PI / 180);
}
function findRandomCardPossibleToUsedCards() {
var isTrue = 0, randomIndexUsedCard, randomIndexUsedSide, randomIndexUnusedCard, randomIndexUnusedSide, position;
while (isTrue === 0) {
randomIndexUsedCard = Math.floor(Math.random() * game.cardsUsed.length);
randomIndexUsedSide = Math.floor(Math.random() * 3);
randomIndexUnusedCard = Math.floor(Math.random() * game.cardsUnused.length);
randomIndexUnusedSide = Math.floor(Math.random() * 3);
if (typeof game.cardsUnused[randomIndexUnusedCard] === 'undefined') {
document.getElementById("button").innerHTML = "stopped";
}
// position = game.cardsUsed[randomIndexUsedCard].cardPosition;
if (game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] !== 1 && game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] !== 1) {
if (game.cardsUsed[randomIndexUsedCard].sides[randomIndexUsedSide] === game.cardsUnused[randomIndexUnusedCard].sides[randomIndexUnusedSide]) {
isTrue = 1;
// the main problem I am having lies withing the next three " if -parts" and the translation into the css/html to depict the triangles in the correct way
if (randomIndexUsedSide === 0) {
game.cardsUnused[randomIndexUnusedCard].sideDirection = game.cardsUsed[randomIndexUsedCard].sideDirection + 60;
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 100 * Math.sin(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection + 90));
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] + 86 * Math.cos(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection - 90));
}
if (randomIndexUsedSide === 1) {
game.cardsUnused[randomIndexUnusedCard].sideDirection = game.cardsUsed[randomIndexUsedCard].sideDirection - 60;
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 100 * Math.sin(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection -90));
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] + 86 * Math.cos(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection + 90));
}
if (randomIndexUsedSide === 2) {
game.cardsUnused[randomIndexUnusedCard].sideDirection = game.cardsUsed[randomIndexUsedCard].sideDirection + 180;
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] + 100 * Math.sin(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection - 180));
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] - 86 * Math.cos(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection - 180));
}
game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] = 1;
game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] = 1;
var elem = document.getElementById(game.cardsUnused[randomIndexUnusedCard].partName);// STYLE
var elemInner = elem.getElementsByTagName('div');
for (i = 0; i < elemInner.length; i++) {
elemInner = elemInner[i];
}
elem.className = elem.className + " used"; // STYLE
//elemInner.style.transform = "rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)" ;
elem.style.transform =
"translate(" + game.cardsUnused[randomIndexUnusedCard].cardPosition[0] +
"px," + game.cardsUnused[randomIndexUnusedCard].cardPosition[1] +
"px)" +" rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)" ;
var elemA = document.getElementById(a.partName);// STYLE
elemA.className = elemA.className + " used"; // STYLE
game.useCard(game.cardsUnused[randomIndexUnusedCard]);
}
}
}
}
CSS
#game {
width: 1000px;
margin:auto;
margin-top: 300px;
}
.triangle {
display: none;
position: absolute;
width: 100px;
height:100px;
line-height: 100px;
text-align: center;
visibility: hidden;
}
.up {
background-image: url(imgs/tri_up_red.png);
}
.down {
background-image: url(imgs/tri_up_red.png);
}
.used {
display: inline-block;
visibility:visible;
}
.hidden {
visibility: hidden;
}
.inner {
width: 100px;
height: 87px;
margin-top: 6.5px;
margin-bottom: 6.5px;
}
Html
<html>
<head>
<link href="design.css" type="text/css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="game.js"></script>
</head>
<body><div id="button">
<button onclick="findRandomCardPossibleToUsedCards()">add Triangle</button>
</div>
<div id="game" class="game">
<div id="A" class="triangle">
<div class="inner up"><span>A</span></div>
</div>
<div id="B" class="triangle">
<div class="inner up"><span>B</span></div>
</div>
<div id="C" class="triangle">
<div class="inner up"><span>C</span></div>
</div>
<div id="D" class="triangle">
<div class="inner up"><span>D</span></div>
</div>
<div id="E" class="triangle">
<div class="inner up"><span>E</span></div>
</div>
<div id="F" class="triangle">
<div class="inner down"><span>F</span></div>
</div>
<div id="G" class="triangle">
<div class="inner up"><span>G</span></div>
</div>
<div id="H" class="triangle">
<div class="inner down"><span>H</span></div>
</div>
<div id="I" class="triangle">
<div class="inner up"><span>I</span></div>
</div>
<div id="J" class="triangle">
<div class="inner down"><span>J</span></div>
</div>
<div id="K" class="triangle">
<div class="inner up"><span>K</span></div>
</div>
<div id="L" class="triangle">
<div class="inner down"><span>L</span></div>
</div>
<div id="M" class="triangle">
<div class="inner up"><span>M</span></div>
</div>
<div id="N" class="triangle">
<div class="inner down"><span>N</span></div>
</div>
<div id="O" class="triangle">
<div class="inner up"><span>O</span></div>
</div>
<div id="P" class="triangle">
<div class="inner down"><span>P</span></div>
</div>
<div id="Q" class="triangle">
<div class="inner down"><span>Q</span></div>
</div>
<div id="R" class="triangle">
<div class="inner down"><span>R</span></div>
</div>
<div id="S" class="triangle">
<div class="inner down"><span>S</span></div>
</div>
<div id="T" class="triangle">
<div class="inner down"><span>T</span></div>
</div>
</div>
</body>
</html>
The code for getting the possible combinations works fine for me. As I said, suggestions for improvement are welcome. My real problem is visualization. In html all divs are squares and, and rotating and translating theses of squares / triangles is giving me headaches. Correct rotations work, and I think I am going the right way using the sine and cosine function to determine the translation on the x and y axis. But somehow I got stuck. I am not asking anyone to resolve this for me, but maybe someone can show me a different approach or point out where I was wrong.
+3
source to share
2 answers
I create triangles for you with content inside:
I inspired: https://css-tricks.com/snippets/css/css-triangle/
EDITED
I am creating a triangle that you can move because the outer div is the point in the center of the triangle. And it's easy for you to calculate the coordinates.
I am creating a new example:
http://codepen.io/luarmr/pen/GJmjZg
And this with the code http://codepen.io/luarmr/pen/MwmjqX you can click on the triangles.
Html
<div class="card">
<span class="value">test</span>
</div>
CSS
.card{
height:0;
width:0;
position:absolute;
top:50px;
left:150px;
transition: all 2s;
}
.card:after{
content:'';
display:block;
width: 0;
height: 0;
position:absolute;
left:-50px;
top:-45px;
z-index:1;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 90px solid #ebebeb;
transition: all 2s;
}
.card.turn:after{
transform: rotate(180deg);
}
.card.turn{
left:200px;
}
.card .value{
position:absolute;
z-index:2;
top:-10px;
width:90px;
left:-45px;
text-align:center;
}
0
source to share
found a solution that works for me:
positioning hard triangles, which I solved by using a different square pattern of turned triangles instead of rotating triangles and making it harder to work with x and y coordinates and div centers. from there on it was a piece of cake.
JAVASCRIPT
function Game() {
this.cardsUnused = [];
this.cardsUsed = [];
this.insert = function (obj) {
this.cardsUnused.push(obj);
};
this.useCard = function (obj) { // fügt ein Triangle dem Benutzen Stapel hinzu und entfernt sie vom unbenutzen Stapel
this.cardsUsed.push(obj);
this.cardsUnused.remove(obj);
};
this.unuseCard = function (obj) { // fügt ein Triangle dem unbenutzebn Stapel hinzu und entfernt sie vom benutzen Stapel
this.cardsUnused.push(obj);
this.cardsUsed.remove(obj); // remove Funktion weiter unten definiert (array.prototype.remove)
};
}
Array.prototype.remove = function () {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};
var game = new Game();
// Triangle wird erstellt
function Triangle(name, sideA, sideB, sideC, directionSide, position) {
this.partName = name;
this.sides = [sideA, sideB, sideC];
this.sidesStatus = [0, 0, 0];
this.sideDirection = directionSide;
this.stepUsed = 0;
this.angle = 0;
this.cardPosition = position;
this.useSide = function (side) {
this.sidesStatus[side] = 1;
};
}
// creating 20 triangles
var a = new Triangle("A", 1, 21, 2, [60, 180, 300], [0, 0]);
var b = new Triangle("B", 2, 22, 3, [0, 0, 0], [0, 0]);
var c = new Triangle("C", 3, 23, 4, [0, 0, 0], [0, 0]);
var d = new Triangle("D", 4, 24, 5, [0, 0, 0], [0, 0]);
var e = new Triangle("E", 5, 25, 1, [0, 0, 0], [0, 0]);
var f = new Triangle("F", 6, 7, 21, [0, 0, 0], [0, 0]);
var g = new Triangle("G", 7, 26, 8, [0, 0, 0], [0, 0]);
var h = new Triangle("H", 8, 9, 22, [0, 0, 0], [0, 0]);
var i = new Triangle("I", 9, 27, 10, [0, 0, 0], [0, 0]);
var j = new Triangle("J", 10, 11, 23, [0, 0, 0], [0, 0]);
var k = new Triangle("K", 11, 28, 12, [0, 0, 0], [0, 0]);
var l = new Triangle("L", 12, 13, 24, [0, 0, 0], [0, 0]);
var m = new Triangle("M", 13, 29, 14, [0, 0, 0], [0, 0]);
var n = new Triangle("N", 14, 15, 25, [0, 0, 0], [0, 0]);
var o = new Triangle("O", 15, 30, 6, [0, 0, 0], [0, 0]);
var p = new Triangle("P", 16, 17, 26, [0, 0, 0], [0, 0]);
var q = new Triangle("Q", 17, 18, 27, [0, 0, 0], [0, 0]);
var r = new Triangle("R", 18, 19, 28, [0, 0, 0], [0, 0]);
var s = new Triangle("S", 19, 20, 29, [0, 0, 0], [0, 0]);
var t = new Triangle("T", 20, 16, 30, [0, 0, 0], [0, 0]);
// creates an array with all triangles
var triangles = [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t];
// function to add triangles to game
function addTriangles(arr) {
var x;
for (x = 0; x < arr.length; x += 1) {
game.insert(triangles[x]);
}
}
// adding the triangles
addTriangles(triangles);
///// Game built up
var v = 0;
var randomIndexUsedCard, randomIndexUsedSide, randomIndexUnusedCard, randomIndexUnusedSide;
// Helper function
function toRadians(angle) {
return angle * (Math.PI / 180);
}
game.useCard(a); // lay down first triangle
// main function that runs on click on button / max 19 times
function findRandomCardPossibleToUsedCards2() {
for (v = 0; v < 19; v = v + 1) {
var isTrue = 0;
while (isTrue === 0) { // runs as long as no random possible card is found
randomIndexUsedCard = Math.floor(Math.random() * game.cardsUsed.length); // chooses a random triangle from triangles already used ( first time only a)
randomIndexUsedSide = Math.floor(Math.random() * 3); // chooses a random side of the randomly chosen triangle
randomIndexUnusedCard = Math.floor(Math.random() * game.cardsUnused.length); // chooses a random triangle from the unused triangles
randomIndexUnusedSide = Math.floor(Math.random() * 3); // and also a random side from the chosen unused triangle
if (typeof game.cardsUnused[randomIndexUnusedCard] === 'undefined') { // hides button to choose triangle when all cards have been used
document.getElementById("button").innerHTML = "fertig";
}
if (game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] !== 1 && game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] !== 1) {
if (game.cardsUsed[randomIndexUsedCard].sides[randomIndexUsedSide] === game.cardsUnused[randomIndexUnusedCard].sides[randomIndexUnusedSide]) {
isTrue = 1;
for ( var x = 0; x < 3; x = x +1) {
if (randomIndexUsedSide === x) {
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 0) {
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0];
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] - 87;
}
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 60) {
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 50;
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
}
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 120) {
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 50;
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
}
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 180) {
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0];
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] + 87;
}
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 240) {
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] + 50;
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
}
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 300) {
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] + 50;
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
}
if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 360) {
game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0];
game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] - 87;
}
}
}
for (u = 0; u < game.cardsUnused[randomIndexUnusedCard].sideDirection.length; u = u + 1) {
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[u] >= 360) {
game.cardsUnused[randomIndexUnusedCard].sideDirection[u] = game.cardsUnused[randomIndexUnusedCard].sideDirection[u] - 360;
}
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[u] < 0) {
game.cardsUnused[randomIndexUnusedCard].sideDirection[u] = game.cardsUnused[randomIndexUnusedCard].sideDirection[u] + 360;
}
}
game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide] = game.cardsUsed[randomIndexUsedCard].sideDirection[randomIndexUsedSide] + 180;
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[0] === game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide]) {
game.cardsUnused[randomIndexUnusedCard].sideDirection[1] = game.cardsUnused[randomIndexUnusedCard].sideDirection[0] + 120;
game.cardsUnused[randomIndexUnusedCard].sideDirection[2] = game.cardsUnused[randomIndexUnusedCard].sideDirection[0] - 120;
}
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[1] === game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide]) {
game.cardsUnused[randomIndexUnusedCard].sideDirection[2] = game.cardsUnused[randomIndexUnusedCard].sideDirection[1] + 120;
game.cardsUnused[randomIndexUnusedCard].sideDirection[0] = game.cardsUnused[randomIndexUnusedCard].sideDirection[1] - 120;
}
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[2] === game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide]) {
game.cardsUnused[randomIndexUnusedCard].sideDirection[0] = game.cardsUnused[randomIndexUnusedCard].sideDirection[2] + 120;
game.cardsUnused[randomIndexUnusedCard].sideDirection[1] = game.cardsUnused[randomIndexUnusedCard].sideDirection[2] - 120;
}
for (w = 0; w < 3; w = w + 1) {
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[w] >= 360) {
game.cardsUnused[randomIndexUnusedCard].sideDirection[w] = game.cardsUnused[randomIndexUnusedCard].sideDirection[w] - 360;
}
if (game.cardsUnused[randomIndexUnusedCard].sideDirection[w] < 0) {
game.cardsUnused[randomIndexUnusedCard].sideDirection[w] = game.cardsUnused[randomIndexUnusedCard].sideDirection[w] + 360;
}
}
game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] = 1;
game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] = 1;
// STYLE STYLE
var elem = document.getElementById(game.cardsUnused[randomIndexUnusedCard].partName);
var elemUsed = document.getElementById(game.cardsUsed[randomIndexUsedCard].partName);
var elemInner = elem.getElementsByTagName('div');
for (y = 0; y < elemInner.length; y = y + 1) {
elemInner = elemInner[y];
}
elem.className = elem.className + " used"; // STYLE
elemInner.style.backgroundImage = "url(imgs/tri" + game.cardsUnused[randomIndexUnusedCard].partName + (game.cardsUnused[randomIndexUnusedCard].sideDirection[0]) + ".png)";
console.log(game.cardsUnused[randomIndexUnusedCard].partName + (game.cardsUnused[randomIndexUnusedCard].sideDirection));
// elemInner.style.transform = "rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)" ;
elem.style.transform =
"translate(" + Math.floor(game.cardsUnused[randomIndexUnusedCard].cardPosition[0]) +
"px," + Math.floor(game.cardsUnused[randomIndexUnusedCard].cardPosition[1]) +
"px)"; // + " rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)" ;
var elemA = document.getElementById(a.partName);
elemA.className = elemA.className + " used";
game.useCard(game.cardsUnused[randomIndexUnusedCard]);
}
}
}
}
}
Html
<html>
<head>
<link href="design.css" type="text/css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="game.js"></script>
</head>
<body><div id="button">
<button onclick="findRandomCardPossibleToUsedCards2()">add Triangle</button>
</div>
<div id="game" class="game">
<div id="A" class="triangle">
<div class="inner up"></div>
</div>
<div id="B" class="triangle">
<div class="inner up"></div>
</div>
<div id="C" class="triangle">
<div class="inner up"></div>
</div>
<div id="D" class="triangle">
<div class="inner up"></div>
</div>
<div id="E" class="triangle">
<div class="inner up"></div>
</div>
<div id="F" class="triangle">
<div class="inner down"></div>
</div>
<div id="G" class="triangle">
<div class="inner up"></div>
</div>
<div id="H" class="triangle">
<div class="inner down"></div>
</div>
<div id="I" class="triangle">
<div class="inner up"></div>
</div>
<div id="J" class="triangle">
<div class="inner down"></div>
</div>
<div id="K" class="triangle">
<div class="inner up"></div>
</div>
<div id="L" class="triangle">
<div class="inner down"></div>
</div>
<div id="M" class="triangle">
<div class="inner up"></div>
</div>
<div id="N" class="triangle">
<div class="inner down"></div>
</div>
<div id="O" class="triangle">
<div class="inner up"></div>
</div>
<div id="P" class="triangle">
<div class="inner down"></div>
</div>
<div id="Q" class="triangle">
<div class="inner down"></div>
</div>
<div id="R" class="triangle">
<div class="inner down"></div>
</div>
<div id="S" class="triangle">
<div class="inner down"></div>
</div>
<div id="T" class="triangle">
<div class="inner down"></div>
</div>
</div>
</body>
</html>
CSS
#game {
postion: relative;
width: 1000px;
margin-left:auto;
margin-right:auto;
margin-top: 300px;
}
.triangle {
display: none;
position: absolute;
width: 100px;
height:87px;
overflow: hidden;
visibility: hidden;
}
.used {
display: inline-block;
visibility:visible;
}
.hidden {
visibility: hidden;
}
.inner {
position: relative;
overflow:hidden;
width: 100px !important;
height:87px !important;
background-repeat: no-repeat;
background-origin:padding-box;
background-position: top;
margin: auto;
background-size: contain;
transform-origin: center;
opacity: 0,7;
/*border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid #ebebeb; */
}
#A .inner {
background-image: url(imgs/triA.png);
0
source to share