Bullets 子弹飞行小游戏

Bullets 2016

游戏, 益智

《使用js把svg图形转成png图像》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//inspired by js1k.com/2014-dragons/demo/1777
//for configurable version, check out zb3.strefa.pl/projects/bullets2016.html

//settings

var x = 50,
    y = 50;
var initBlocks = 44;
var stepTime = 25;

var size = 10; //px
var bgcolor = '#000000';
var bordercolor = '#333333';
var blockcolor = '#00dddd';
var bulletcolor = '#dddddd';

//
//WARNING: horrible code below, read at your own risk!
//

function generateDirections(n) {
    var ret = [],
        base = [],
        tmp;

for (var d = 0; d < n; d++) base[d] = 0;
    for (var d = 0; d < n; d++) {
        tmp = base.slice();
        tmp[d] = -1;
        ret.push(tmp);

tmp = base.slice();
        tmp[d] = 1;
        ret.push(tmp);
    }

return ret;
}

function fillArray(a, n) {
    for (var t = 0; t < n; t++)
        a[t] = 0;
}

function addArray(n, d, od, s, os) {
    for (var t = 0; t < n; t++)
        d[od + t] += s[os + t];
}

function coordToArray(g, coord) {
    var ret = [];

for (var d = 0; d < g.n; d++) {
        ret.push(coord % g.size[d]);
        coord = coord / g.size[d] | 0;
    }

return ret;
}

function coord(g, carr) {
    var ret = 0;
    for (var d = g.n - 1; d >= 0; d--) {
        ret *= g.size[d];
        ret += carr[d];
    }
    return ret;
}

var n = 2; //can be 4 too
var directions = generateDirections(n);
var game = {
    n: n,
    board: [],
    bullets: [],
    blocks: 0
}; //{n, board: ....

//bullets = [[position] [velocity]]
//board = [[dirty] [velocity]] or null

function initGame(g, size) {
    g.size = size.slice();

//g.totalsize = g.size.reduce((a,b) => a*b); //surprise? :D
    g.totalsize = g.size.reduce(function(a, b) {
        return a * b
    });

g.bullets.length = 0;
    g.board.length = 0;
    g.blocks = 0;

fillArray(g.board, g.totalsize);
}

function legalPosition(g, carr) {
    //we can't just convert to coord and check!

for (var d = 0; d < g.n; d++)
        if (carr[d] < 0 || carr[d] >= g.size[d])
            return false;

return true;
}

function fillBoard(g, items) {
    while (items) {
        var coord = Math.floor(Math.random() * (g.totalsize));
        if (g.board[coord]) continue;

putBlock(g, coord);
        items--;
    }
}

function fireBullet(g, carr, destroy) {
    if (!legalPosition(g, carr)) return false;

var c = coord(g, carr);
    if (!destroy && g.board[c]) return false;

for (var t = 0, tmp; t < directions.length; t++) {
        tmp = [];
        fillArray(tmp, 2 * g.n);
        addArray(g.n, tmp, 0, carr, 0); //bullet position
        addArray(g.n, tmp, g.n, directions[t], 0); //bullet velocity
        g.bullets.push(tmp);
    }

return true;
}

function stepBullets(g) {
    for (var t = 0; t < g.bullets.length; t++) {
        addArray(g.n, g.bullets[t], 0, g.bullets[t], g.n); //move bullets, position += velocity

if (!legalPosition(g, g.bullets[t])) {
            g.bullets.splice(t--, 1);
            continue;
        }

var c = coord(g, g.bullets[t]);
        if (g.board[c]) {
            //add bullet velocity to block velocity
            g.board[c][0] = 1;
            addArray(g.n, g.board[c], 1, g.bullets[t], g.n);

g.bullets.splice(t--, 1);
            continue;
        }
    }
}

function stepBoard(g, destroy) {
    for (var c = 0; c < g.totalsize; c++) {
        if (g.board[c] && g.board[c][0]) {
            g.board[c][0] = 0;

var pos = coordToArray(g, c);

if (destroy) {
                putBlock(g, c, true);
                fireBullet(g, pos, true);
            } else {
                var bullet_pos = pos.slice();
                var block_pos = pos.slice();
                addArray(g.n, block_pos, 0, g.board[c], 1);
                var block_coord = coord(g, block_pos);

if (!legalPosition(g, block_pos)) {
                    putBlock(g, c, true);
                    continue;
                } else if (!g.board[block_coord]) {
                    putBlock(g, c, true);
                    putBlock(g, block_coord);
                    bullet_pos = block_pos;
                } else putBlock(g, c); //clear velocity

for (var t = 0; t < directions.length; t++) {
                    var tmp = [];
                    fillArray(tmp, 2 * g.n);
                    addArray(g.n, tmp, 0, bullet_pos, 0);
                    addArray(g.n, tmp, 0, directions[t], 0);
                    addArray(g.n, tmp, g.n, directions[t], 0);

if (!legalPosition(g, tmp) || g.board[coord(g, tmp)]) continue;

g.bullets.push(tmp);
                }
            }
        }
    }
}

var t16Table = document.getElementById('t16-inputmap');
var bgctx = document.getElementById('t16-bgcanvas').getContext('2d'),
    ctx = document.getElementById('t16-canvas').getContext('2d'),
    ctxwidth, ctxheight;
var t16Style = document.createElement('style');
document.body.appendChild(t16Style);

var inProgress = false,
    stepTimeout;
var shotsFired = 0;
var destroy = false,
    borderSize = 1;

function initTable(x, y) {
    t16Table.innerHTML = Array(y + 1).join('<tr>' + Array(x + 1).join('<td></td>') + '</tr>');
}

function initRenderer() {
    bgctx.canvas.width = ctx.canvas.width = ctxwidth = x * size + (x + 1) * borderSize;
    bgctx.canvas.height = ctx.canvas.height = ctxheight = y * size + (y + 1) * borderSize;

document.getElementById('t16-render').style.width = ctxwidth + 'px';
    document.getElementById('t16-render').style.height = ctxheight + 'px';
    document.getElementById('t16-inputmap').style.width = ctxwidth + 'px';
    document.getElementById('t16-inputmap').style.height = ctxheight + 'px';

bgctx.fillStyle = bordercolor;
    bgctx.fillRect(0, 0, ctxwidth, ctxheight);

bgctx.fillStyle = bgcolor;
    for (var t = 0; t < x * y; t++) {
        fillCanvasRect(bgctx, t / y | 0, t % x);
    }
}

function fillCanvasRect(ctx, x, y) {
    ctx.fillRect(x * size + (x + 1) * borderSize, y * size + (y + 1) * borderSize, size, size);
}

function printStats() {
    document.getElementById('t16-shotsfired').textContent = shotsFired;
    document.getElementById('t16-blocksonboard').textContent = game.blocks;
}

function paint() {
    paintCanvas(game);
    printStats();
}

function shoot(e) {
    var cell = e.target;
    var x = cell.cellIndex,
        y = cell.parentNode.rowIndex;

if (fireBullet(game, [x, y], destroy)) {
        shotsFired++;
    }

if (!inProgress)
        gameStep();
}

function paintblocks(e) {
    var cell = e.target;
    var x = cell.cellIndex,
        y = cell.parentNode.rowIndex;

putBlock(game, coord(game, [x, y]), true);

if (!inProgress)
        gameStep();
}

t16Table.oncontextmenu = function(e) {
    e.preventDefault();
};

t16Table.onmousedown = function(e) {
    e.preventDefault();

if (e.button)
        paintblocks(e);
};

t16Table.onmouseup = function(e) {
    e.preventDefault();

if (!e.button)
        shoot(e);
};

var lastCell = null;
t16Table.onmousemove = function(e) {
    e.preventDefault();
    if (e.buttons == 2 && lastCell != e.target)
        paintblocks(e);

lastCell = e.target;
}

function gameStep() {
    inProgress = true;
    stepBullets(game);
    stepBoard(game, destroy);
    paint();

if (game.bullets.length)
        stepTimeout = setTimeout(gameStep, stepTime);
    else
        inProgress = false;
}

function stopGame() {
    if (inProgress) {
        clearTimeout(stepTimeout);
        inProgress = false;
    }
}

function readSettings() {
    destroy = document.getElementById('t16-destroy').checked;
    t16Style.innerHTML = '#t16-inputmap td:hover{ background-color: ' + bordercolor + ';}';
}

readSettings();

function newGame(fill) {
    if (fill === undefined)
        fill = true;

shotsFired = 0;
    initGame(game, [x, y]);
    initRenderer();
    initTable(x, y);

if (fill)
        fillBoard(game, initBlocks);

paint();
}

newGame();

//shoot @ startup, albeit in a way that will move at least some blocks!
//yes, this is N-dimensional too!
//NOTE: this isn't really correct, we can hit 2 blocks in a row and fail, we could step game and count blocks
function getStarted(g) {
    var c, ca;
    while (true) {
        c = Math.floor(Math.random() * (g.totalsize));
        if (g.board[c]) continue;
        ca = coordToArray(g, c);

//now we need at least one block that differs by one coordinate only
        var found = false,
            tca, tc;
        scan: for (var d = 0; d < g.n; d++) {
            tca = ca.slice();
            for (var t = 0; t < g.size[d]; t++) {
                tca[d] = t;
                if (g.board[coord(g, tca)]) {
                    found = true;
                    break scan;
                }
            }
        }

if (found) {
            fireBullet(game, ca);
            if (!inProgress) gameStep();
            break;
        }

}
}
getStarted(game);
getStarted(game);

编译

CSS

HTML

Bullets 2016

游戏, 益智

编辑器支持Emmet

快捷键

Bullets 2016

游戏, 益智

Interact.js SVG 路径记忆跟踪小游戏

React.js 数字记忆游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：