matter实现一个带重力感应的2048游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：matter实现一个带重力感应的2048游戏代码，点击橄榄色区域改变重力方向，当四面都有方块接触，且持续 2 秒后游戏结束。

代码标签：带重力感应的 2048 游戏

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>
    <h2>
        点击橄榄色区域改变重力方向
    </h2>
    <canvas id="box" >
        你的浏览器可能太古老了……
    </canvas>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.0.16.0.js"></script>
<script>
    var box = document.getElementById("box");

    Ma = Matter;

    // module aliases
    var Engine = Ma.Engine,
        Render = Ma.Render,
        World = Ma.World,
        Composite = Ma.Composite,
        Detector = Ma.Detector,
        Events = Ma.Events,
        Body = Ma.Body,
        Bodies = Ma.Bodies;


    // create an engine
    var engine = Engine.create();

    var a = 38;
    // var a=40/(1+Math.sqrt(2))
    var octagon = [
        { x: -a, y: 46 },
        { x: a, y: 46 },
        { x: 46, y: a },
        { x: 46, y: -a },
        { x: a, y: -46 },
        { x: -a, y: -46 },
        { x: -46, y: -a },
        { x: -46, y: a },
    ];
    function new_block(x, y, label, angle = 0) {
        var options = {
            label: label,
            friction: 0.2,
            frictionStatic: 0.25,
            angle: angle,
            density: 0.001 * Math.log(Number(label)),
            restitution: 0.7
        };
        return Bodies.fromVertices(x,y,octagon,options);
    }

    var colors = ["#DEB887", "#FFD700", "#FFA500", "#B8860B", "#CD853F", "#8B4513"];

    var wall_options = { isStatic: true, label: "wall" };
    var floor = Bodies.rectangle(300, 550, 600, 100, wall_options);
    var ceil = Bodies.rectangle(300, 50, 600, 100, wall_options);
    var wall_left = Bodies.rectangle(50, 300, 100, 400, wall_options);
    var wall_right = Bodies.rectangle(550, 300, 100, 400, wall_options);
    var Beg2 = new_block(200, 200, "2");
    var Beg4 = new_block(400, 400, "4");

    // add all of the bodies to the world
    World.add(engine.world, [Beg2, Beg4, floor, ceil, wall_left, wall_right]);

    // run the engine
    Engine.run(engine);

    var canvas = box,
        context = canvas.getContext("2d");

    canvas.width = 800;
    canvas.height = 600;
    var gravity = Math.PI / 2;
    var score = 0, over = false, wei = false, wei_begin;

    var wall_coll = [0, 0, 0, 0, 0];

    Events.on(engine, 'collisionStart', function (event) {
        var pairs = event.pairs;
        var merged = false;
        for (var i = 0; i < pairs.length; i++) {
            var pair = pairs[i];
            var minId = Math.min(pair.bodyA.id, pair.bodyB.id);
            if (minId <= 4) {
                wall_coll[minId]++;
            } else if (!merged) {
                var a = pair.bodyA, b = pair.bodyB;
                if (a.label == b.label) {
                    var blk = new_block(
                        (a.position.x + b.position.x) / 2,
                        (a.position.y + b.position.y) / 2,
                        String(Number(a.label) + Number(b.label)),
                        (a.angle + b.angle) / 2);
                    World.remove(engine.world, a);
                    World.remove(engine.world, b);
                    World.add(engine.world, blk);
                    score += Number(a.label) + Number(b.label);
                    merged = 1; // Or everything will go wrong if several bloks appers in one place
                }
            }
        }
    });

    Events.on(engine, 'collisionEnd', function (event) {
        var pairs = event.pairs;
        for (var i = 0; i < pairs.length; i++) {
            var pair = pairs[i];
            var minId = Math.min(pair.bodyA.id, pair.bodyB.id);
            if (minId <= 4) {
                wall_coll[minId]--;
            }
        }
    });

    (function render() {
        var bodies = Composite.allBodies(engine.world);
        now=new Date();

        window.requestAnimationFrame(render);

        context.fillStyle = "#BDB76B";
        context.fillRect(0, 0, 600, 600);

        // Show the direction of the gravity
        context.fillStyle = "#CEC87C";
        context.moveTo(300, 300);
        context.beginPath();
        context.arc(300, 300, 600, gravity - Math.PI / 30, gravity + Math.PI / 30);
        context.lineTo(300, 300);
        context.fill(); context.save();
        context.strokeStyle = "#CEC87C";
        context.lineWidth = 10;
        context.rotate(gravity);
        for (var i = -1200; i <= 1200; i += 75) {
            context.beginPath();
            // context.moveTo(-1200, i);
            // context.lineTo(1200, i);
            context.moveTo(i, -1200);
            context.lineTo(i, 1200);
            context.stroke();
        }
        context.restore();

        context.fillSty.........完整代码请登录后点击上方下载按钮下载查看