移动方块小游戏

使用方向键移动方块，不要出界不要掉入空洞（黑色格子）中，否则呈现类似街机的插入游戏币的弹窗浮层提示。

cube, game

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1862
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function init() {
    // Put trail on first item
    var item = document.getElementById('item' + line + '-' + col);
    item.classList.add('trail');

for (x = 1; x <= 3; x++) {
        var randLine = Math.floor(Math.random() * 9) + 2,
            randCol = Math.floor(Math.random() * 9) + 2,
            randomItem = document.getElementById('item' + randLine + '-' + randCol);
        randomItem.classList.add('hole');
    }
}

function key(e) {
    var key = e.keyCode;

if (key == 37) var direction = 'left';
    if (key == 38) var direction = 'top';
    if (key == 39) var direction = 'right';
    if (key == 40) var direction = 'bottom';

if (direction) moveBlob(direction);
}

function moveBlob(direction) {
    var items = document.querySelectorAll('.item'),
        trails = document.querySelectorAll('.trail'),
        holes = document.querySelectorAll('.hole');
    var offset = 36, // Square size same as in CSS
        offsetMax = offset * 9; // number of items
    var posX = pos[0],
        posY = pos[1];

// Calculate new position
    if (direction == 'left') {
        if (col == 1) posX = 0
        else {
            posX = posX - offset
            col--
        }
    }
    if (direction == 'right') {
        if (col == 10) posX = offsetMax
        else {
            posX = posX + offset
            col++
        }
    }
    if (direction == 'top') {
        if (line == 1) posY = 0
        else {
            posY = posY - offset
            line--
        }
    }
    if (direction == 'bottom') {
        if (line == 10) posY = offsetMax
        else {
            posY = posY + offset
            line++
        }
    }

// Get latest calculated trail
    var item = document.getElementById('item' + line + '-' + col);

// Popup messages fail
    if (item.classList.contains('trail') || item.classList.contains('hole')) {
        fail.classList.add('on');
    }

// Popup message winner
    var available = items.length - holes.length;
    if (trails.length == (available - 1)) succeed.classList.add('on');

// Moving Blob & create trail
    pos = [posX, posY];
    blob.style.transform = 'translate(' + posX + 'px, ' + posY + 'px)';
    item.classList.add('trail');
}

function resetBlob() {
    var trails = document.querySelectorAll('.trail'),
        holes = document.querySelectorAll('.hole');

// Reset all trails
    for (i = 0; i < trails.length; i++) {
        trails[i].classList.remove('trail');
    }

// Reset all holes
    for (i = 0; i < holes.length; i++) {
        holes[i].classList.remove('hole');
    }

// Reset positions
    pos = [0, 0];
    line = 1;
    col = 1;
    blob.style.transform = 'translate(' + pos[0] + 'px, ' + pos[1] + 'px)';

// Remove fail screen
    fail.classList.remove('on');
    init();
}

var blob = document.querySelector('.blob'),
    pos = [0, 0],
    line = 1,
    col = 1;

var succeed = document.querySelector('.succeed'),
    fail = document.querySelector('.fail'),
    retry = document.querySelector('.retry');

window.load = init();
document.addEventListener("keydown", key, false);
retry.addEventListener("click", resetBlob, false);

编译

CSS

* {
    box-sizing: border-box;
}
body {
    background: #262626;
    font-family: sans-serif;
    perspective: 600px;
}
h1,
h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
}
h1 {
    top: 24px;
    font-size: 12px;
}
h2 {
    display: table;
    top: 44px;
    font-size: 10px;
    opacity: 0.7;
}
div.floor {
    position: absolute;
    width: 360px;
    height: 360px;
    top: 110px;
    left: 50%;
    transform-style: preserve-3d;
    transform: translateX(-50%) rotateX(90deg) rotate(-30deg);
}
div.floor div.item {
    float: left;
    width: 36px;
    height: 36px;
    background: #33cc33;
    border: 2px solid #262626;
    border-radius: 3px;
}
div.floor div.item.trail {
    background: rgba(140, 60, 221, 0.7);
}
div.floor div.item.hole {
    background: #262626;
}
div.blob {
    position: absolute;
    width: 36px;
    height: 36px;
    top: 0;
    left: 0;
    background: rgba(140, 60, 221, 0.7);
    transform-style: preserve-3d;
    animation: blob 0.5s ease-out 0.3s;
    animation-fill-mode: backwards;
}
div.blob div {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    transform-style: preserve-3d;
}
div.blob div.back {
    transform-origin: 50% 0%;
    transform: rotateX(90deg);
    background: rgba(89, 27, 152, 0.7);
}
div.blob div.front {
    transform-origin: 50% 100%;
    transform: rotateX(-90deg);
    background: rgba(140, 60, 221, 0.7);
}
div.blob div.front div.top {
    transform-origin: 50% 0%;
    transform: rotateX(-90deg);
    background: rgba(128, 38, 217, 0.7);
}
div.blob div.left {
    transform-origin: 0% 50%;
    transform: rotateY(-90deg);
    background: rgba(115, 34, 195, 0.7);
}
div.blob div.right {
    transform-origin: 100% 50%;
    transform: rotateY(90deg);
    background: rgba(115, 34, 195, 0.7);
}
div.msg {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-out;
}
div.msg p {
    position: absolute;
    display: table;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
div.msg button {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 8px 20px;
    background: white;
    border: none;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: translate(-50%, 100%);
}
div.msg.on {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease-in;
}
@keyframes blob {
    from {
        opacity: 0;
        transform: translateZ(150px);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

HTML

使用方向键移动方块，不要出界不要掉入空洞（黑色格子）中，否则呈现类似街机的插入游戏币的弹窗浮层提示。

cube, game

编辑器支持Emmet

快捷键

使用方向键移动方块，不要出界不要掉入空洞（黑色格子）中，否则呈现类似街机的插入游戏币的弹窗浮层提示。

cube, game

JS版本的俄罗斯方块经典游戏（支持移动触摸）

three.js打砖块小游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：