九宫格灭火小游戏

Wild fire 红色方块代表森林里的火，绿色方块代表水。游戏规则是，点击红色方块，火势蔓延到相邻方块，而自身则被水浇灭。如此操作，直到所有红色方块都被熄灭。

游戏，益智

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

LIGHT_SELECTOR = '.square button';
    var moves = 0;

var initGame = function() {
        moves = 0;
        $('#movesCount').text(moves);

$(LIGHT_SELECTOR).removeClass('active');

// Setup game
        var totalLights = parseInt($(LIGHT_SELECTOR).last().data('num'));

// Choose 4 random lights to activate
        for (var i = 0; i < 4; ++i) {
            var candidateLightIndex = Math.floor((Math.random() * totalLights) + 1);

var candiateLight = $(LIGHT_SELECTOR + '[data-num=' + candidateLightIndex + ']');
            var isSelected = candiateLight.hasClass('active');

if (!isSelected) {
                candiateLight.addClass('active');
            }
        }
    }

// Toggle surrounding lights on click
    $(LIGHT_SELECTOR).click(function() {

// only allow active lights to be pushed
        if (!$(this).hasClass('active')) {
            return false;
        }

// increment moves
        moves += 1;
        $('#movesCount').text(moves);

// be able to get this light's position on grid
        var getIndexOfLight = function(light) {
            return parseInt(light.data('num'));
        };

// be able to find surrounding lights based on a position on grid
        var getSurroundingLights = function(index) {
            var rowLength = parseInt($('.grid').data('row-length'));

var indexes = [
                index - rowLength,
                /*index - 1,
                index + 1,*/
                index + rowLength
            ];

var positionOnRow = index % rowLength;

// if positionOnRow % rowLength == 0 then we are at the end
            // i need a better name for this var

if (positionOnRow > 1 || positionOnRow == 0) {
                indexes.push(index - 1);
            }

if (positionOnRow != 0) {
                indexes.push(index + 1);
            }

var selector = _.map(indexes, function(index) {
                return LIGHT_SELECTOR + '[data-num=' + index + ']'
            }).join(", ");

return $(selector);
        };

// deactivate all lights
        $(this).removeClass('active');

// reactivate the surrounding lights
        _.each(getSurroundingLights(getIndexOfLight($(this))), function(light) {
            $(light).toggleClass('active');
        });

// potentially end game if there are no active lights now
        if ($(LIGHT_SELECTOR + '.active').length == 0) {

alert('You won with ' + moves + ' moves!');

initGame();

return false;
        }
    });

initGame();

});

编译

CSS

HTML

</div>

<p class="moves">Moves: <span id="movesCount">0</span>
    </p>

<hr />

<h3>Rules</h3>
    <p>红色方块代表森林里的火，绿色方块代表水。游戏规则是，点击红色方块，火势蔓延到相邻方块，而自身则被水浇灭。如此操作，直到所有红色方块都被熄灭。
        <br>
        <br>你需要几步灭掉森林之火？</p>
</div>

Wild fire 红色方块代表森林里的火，绿色方块代表水。游戏规则是，点击红色方块，火势蔓延到相邻方块，而自身则被水浇灭。如此操作，直到所有红色方块都被熄灭。

游戏，益智

编辑器支持Emmet

快捷键

Wild fire 红色方块代表森林里的火，绿色方块代表水。游戏规则是，点击红色方块，火势蔓延到相邻方块，而自身则被水浇灭。如此操作，直到所有红色方块都被熄灭。

游戏，益智

使用React.js实现的经典扫雷游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：