为棋盘游戏响应式映射自定义形状 HTML 元素的好方法

Question

我的问题是我还没有弄清楚如何响应地对齐 space。我试过使用 vw/vh's 和 %s，但两者都破坏了不同视图大小的一致性。谁能推荐一种直接锁定该板的方法？

我不想使用多个 canvas bc of the cpu drain of 50+ spaces 并且不想使用图像映射，因为它没有响应.

大家好，

我正在尝试通过 angular 1.x 将棋盘游戏移植到 HTML。我在每个板 space 上都有一个对象，并通过绝对定位（顶部，左侧）为每个 space 指定了一个位置原点，并制作了一个快速函数，该函数采用变换属性中的所有属性] 和 returns 用于 css ng 样式转换的字符串。

这是前几个 space 的示例：

1: {color: colors.blue, origin:{top:'65%', left:'13%'}, tForm: {rotate:'-21deg'}},
2: {color: colors.yellow, origin:{top:'66.5%', left:'8.5%'}, tForm: {rotate:'-35deg'}},
3: {color: colors.black, origin:{top:'70%', left:'6%'}, tForm: {rotate:'-72deg'}},
4: {color: colors.red, origin:{top:'75%', left:'5.5%'}, tForm: {rotate:'0deg'}},
5: {color: 'cool?', origin:{top:'80%', left:'6%'}, tForm: {rotate:'-21deg'}}

这是处理这些属性的代码（主要是 ng 样式）：

<span id="space-{{space}}" ng-repeat="space in section" ng-init="bgColor = cool.di.models.spaces[space].color === 'trap' ? '#900020' : cool.di.models.spaces[space].color === 'cool?' ? 'rgba(230,232,234, 1)': cool.di.models.spaces[space].color === 'pass' ? 'green' : cool.di.models.spaces[space].color" 
ng-style="{padding:'.1em', color:'mintcream', background:bgColor, border:'1px solid rgba(0,0,0,.2)', position:'absolute', top: cool.di.models.spaces[space].origin.top, left: cool.di.models.spaces[space].origin.left, transform: cool.di.api.tForm(cool.di.models.spaces[space].tForm), height:'2em', width:'2em'}">

这是我目前在 "C" https://irthos.github.io/cool/#/board

上的进度

感谢任何建议！

Answer 1

制作复杂形状集合的相当简单的方法是具有多边形子元素的重复 SVG 元素。

html:

<svg ng-style="{position:'absolute', background:'none', overflow: 'visible'}">
    <polygon points="{{points || '0,0 0,10 10,10 10,0 0,0'}}" stroke="black" fill="{{bgColor}}"></polygon>
 </svg>

其中 points 是从辅助函数生成的字符串，用于规范化视图尺寸：

function(points){
    var pointsStr = '';
    points ?
    angular.forEach(points.split(' '), function (point) {
        var x = point.split(',')[0],
            y = point.split(',')[1];
        var hPx = Math.floor(($window.innerWidth / 100) * x),
            vPx = Math.floor(($window.innerHeight / 100) * y);
                pointsStr += hPx +','+vPx+' ';
            }) : null;
        return pointsStr.length > 0 ? pointsStr : null;
}

解析工厂对象中的 'poly' 属性字符串：

1: {color: colors.blue, poly:'13,5 8,5 10,11 12,11 13,5'},
2: {color: colors.yellow, poly:'8,5 4,8 7,13 10,11 8,5'},
3: {color: colors.black, poly:'4,8 1.8,13 5.5,16 7,13 4,8'},
4: {color: colors.red, poly:'1.8,13 0,19 5,19 5.5,16 1.8,13'},
5: {color: 'cool?', poly:'0,19 1,26 5.3,22.5 5,19 0,19'},
6: {color: colors.blue, poly: '1,26 3.5,31, 7,25 5.3,22.5 1,26'},
7: {color: colors.yellow, poly: '3.5,31 9,33 10,26 7,25 3.5,31'},
8: {color: colors.black, poly: '9,33 13,32 12,25.5 10,26 9,33'},
9: {color: 'cool?', poly:'13,32 18,28 15,24 12,25.5 13,32'}

全板渲染：https://irthos.github.io/cool/#/board

为棋盘游戏响应式映射自定义形状 HTML 元素的好方法

Good way to map custom-shaped HTML elements responsively for a board game

html

javascript

css-transforms

2d-games

angularjs