javascript - 使用 Javascript、CSS 和 HTML 进行三 Angular 形定位(欢迎使用其他方法)

标签 javascript html css combinations

我正在尝试想象一个由 20 个三 Angular 形组成的纸牌游戏，这些三 Angular 形可以以各种方式放置。每个三 Angular 形有 3 条边，其余 19 个三 Angular 形中的每条边都有对应的一条边。只有当双方匹配时，它们才能放在一起。

enter image description here

随机生成可能性的代码如下。(我也很高兴对代码进行改进，我相信这些改进很多

脚本

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>

获取可能组合的代码对我来说效果很好。正如我所说，欢迎提出改进建议。我真正的问题是可视化。在 html 中，所有 div 都是正方形，旋转和平移这些正方形/三 Angular 形让我头疼。正确的旋转是有效的，我认为使用正弦和余弦函数来确定 x 轴和 y 轴上的平移是正确的。但不知何故我被困住了。我并不是要任何人为我解决问题，但也许有人可以向我展示不同的方法或指出我错在哪里。

最佳答案

我为你创建了一个三 Angular 形，里面有内容:

我的灵感来自:https://css-tricks.com/snippets/css/css-triangle/

已编辑

我创建了一个可以移动的三 Angular 形，因为外部 div 是三 Angular 形中心的一个点。并且您可以轻松计算坐标。

我创建一个新示例:

http://codepen.io/luarmr/pen/GJmjZg

这使用代码 http://codepen.io/luarmr/pen/MwmjqX您可以单击三 Angular 形。

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;
}

关于javascript - 使用 Javascript、CSS 和 HTML 进行三 Angular 形定位(欢迎使用其他方法)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30681205/

上一篇：javascript - 带有 id 的 html 元素是否已经在 J​​avaScript 中定义？

下一篇：javascript - 如何从同一目录中的 javascript 文件将 javascript 文件 append 到正文。 Java 服务器面向 2 JSF2

相关文章：

javascript - 解释在使用之前检查 CSS.supports() 的代码

html - 如何使粘性导航栏对齐其文本中心？

html - 网站导航栏中的 anchor 标记无法正常工作。 [HTML5、CSS3、 Bootstrap 4)

html - 如何使用 HTML-Sheets-of-Paper 在每个页面中动态插入页脚？

html - 自动调整网格布局

javascript - 从 DOM 中删除添加的突出显示

javascript - 将元素动态添加到 SVG，元素添加到 HTML DOM 但未呈现

javascript - Angular2导出/下载json文件

php - 动态调整 div 大小/重新定位以进行多列查看

css - HTML 元素向右对齐以将左侧空间填充到另一个动态元素

©2024 IT工具网  联系我们