使用FamousJS实现的拼图游戏

Famous.js是一款封装DOM和WebGL接口的Javascript高性能动画开发库。

js

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/**  FamousJS Puzzle Game (Work In Progress)
 *   Author: Farias Maiquita http://farias.gotolab.co
 *   Last Nodified: March 1st 2016
 */

'use strict';

// Famous dependencies

var FamousEngine = famous.core.FamousEngine,
    Node = famous.core.Node,
    Rotation = famous.components.Rotation,
    Scale = famous.components.Scale,
    DOMElement = famous.domRenderables.DOMElement;

// Puzzle App Module

PuzzleApp.prototype = Object.create(Node.prototype);

PuzzleApp.prototype.resizeChildren = function() {
    var boardWidth = window.innerWidth > window.innerHeight ?
        window.innerHeight : window.innerWidth;
    boardWidth = boardWidth > this.boardMaxWidth ?
        this.boardMaxWidth : boardWidth;
    this.board.resizeChildren(boardWidth);
}

PuzzleApp.prototype.onReceive = function(e, payload) {
    if ((e === 'click') && (payload.node.constructor === Piece)) {
        payload.node.rotate();
    }
}.bind(this);

// Board Module

function Board(piecesPerRow) {
    Node.call(this);
    this.setSizeMode(1, 1);
    this.setAlign(0.5, 0.5);
    this.setMountPoint(0.5, 0.5)
    this.setOrigin(0.5, 0.5);
    this.piecesPerRow = piecesPerRow;
    this.el = new DOMElement(this, {
        tagName: 'board'
    });
    this.pieces = [];
    this.setupRound(piecesPerRow);
}

Board.prototype = Object.create(Node.prototype);

Board.prototype.resizeChildren = function(boardWidth) {
    this.setAbsoluteSize(boardWidth, boardWidth);
    var totalPieces = this.piecesPerRow * this.piecesPerRow;
    for (var i = 0; i < totalPieces; i++) {
        this.pieces[i].repositionNode(boardWidth);
    }
}

Board.prototype.setupRound = function(piecesPerRow) {
    this.piecesPerRow = piecesPerRow;
    this.pieces = [];
    var imageUrl = 'https://igcdn-photos-a-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/e35/12346234_1511000375894968_230810864_n.jpg';
    for (var y = 0; y < piecesPerRow; y++) {
        for (var x = 0; x < piecesPerRow; x++) {
            this.pieces.push(this.addChild(new Piece(imageUrl, {
                xIndex: x,
                yIndex: y,
                maxXYIndex: piecesPerRow - 1,
                angleIndex: _randomIntBetween(0, 3) / 2
            })));
        }
    }
}

// Piece Module

Piece.prototype = Object.create(Node.prototype);
Piece.prototype.constructor = Piece;

Piece.prototype.setImagePosition = function(indexData) {
    var positionX = 100 * indexData.xIndex / indexData.maxXYIndex + '%',
        positionY = 100 * indexData.yIndex / indexData.maxXYIndex + '%';
    this.el.setProperty('backgroundPosition', positionX + ' ' + positionY);
}

Piece.prototype.repositionNode = function(boardWidth) {
    var xPosition = boardWidth * this.proportion * this.indexData.xIndex,
        yPosition = boardWidth * this.proportion * this.indexData.yIndex;
    this.setPosition(xPosition, yPosition);
}

Piece.prototype.rotate = function() {
    if (!this.inMotion) {
        this.inMotion = true;
        this.el.addClass('in-motion');
        this.indexData.angleIndex = this.indexData.angleIndex > 1 ?
            0 : this.indexData.angleIndex + 1 / 2;
        var rotation = new Rotation(this),
            scale = new Scale(this),
            node = this;
        rotation.set(0, 0, Math.PI * this.indexData.angleIndex, {
            duration: 200,
            curve: 'easeInOut'
        }, function() {
            node.inMotion = false;
            node.el.removeClass('in-motion');
        });
        scale.set(1.2, 1.2, 1, {
            duration: 100,
            curve: 'easeIn'
        }, function() {
            scale.set(1, 1, 1, {
                duration: 100,
                curve: 'easeOut'
            });
        });
    }
}

// Helper Module

function _randomIntBetween(minInt, maxInt) {
    return Math.floor((Math.random() * (maxInt - minInt + 1)) + minInt);
}

// Main Module

function initApp() {
    FamousEngine.init();
    var puzzleApp = FamousEngine.createScene().addChild(new PuzzleApp());
    window.onresize = function() {
        puzzleApp.resizeChildren();
    }
}

initApp();

编译

CSS

HTML

Famous.js是一款封装DOM和WebGL接口的Javascript高性能动画开发库。

js

编辑器支持Emmet

快捷键

Famous.js是一款封装DOM和WebGL接口的Javascript高性能动画开发库。

js

使用jQuery和WavesJS实现的一款原质化风格“回到顶部”按钮

使用VueJS和ThreeJS构建的SomaFM电台音乐播放器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：