使用Matter.js实现的H5雪球掉落小游戏

Game with Matter.js

h5, game

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// https://github.com/liabru/matter-js/wiki/Tutorials
// https://www.youtube.com/watch?v=jN-sW-SxNzk

let Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;
var engine = Engine.create();
let world = engine.world;

class Particle {
    constructor(x, y, r, option) {
        this.defaults = {
            isStatic: true,
            restitution: 0,
            friction: 1,
            density: .1
        };
        this.options = Object.assign({}, this.defaults, option);
        this.body = Bodies.circle(x, y, r, this.options);
        this.r = r;
        World.add(world, this.body);
    }

show() {
        let pos = this.body.position;
        ctx.save();
        ctx.fillStyle = this.options.fill || "#456";
        ctx.translate(pos.x, pos.y);
        ctx.beginPath();
        ctx.arc(0, 0, this.r, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    }
}
class Boundary {
    constructor(x, y, w, h) {
        this.options = {
            isStatic: true,
        };
        this.body = Bodies.rectangle(x, y, w, h, this.options);
        this.w = w;
        this.h = h;
        World.add(world, this.body);
    }

show() {
        let pos = this.body.position;
        ctx.save();
        ctx.fillStyle = this.options.fill || "#111";
        ctx.translate(pos.x, pos.y);
        ctx.beginPath();
        ctx.fillRect(-this.w / 2, -this.h / 2, this.w, this.h);
        ctx.restore();
    }
}

let canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = (canvas.width = window.innerWidth),
    height = (canvas.height = window.innerHeight),
    cX = width / 2,
    cY = height / 2;

let currentFrame = 0;

let particles = [];
let plinkos = [];
let bounds = [];
let spacing = 14;
//let cols = width/spacing;
let cols = 0.7 * height / spacing;
let rows = 0.7 * height / spacing;
let center = (width - height * .7) / 2;
let offset = 0;
if ((~~rows) % 2 === 1) {
    offset = .4 * spacing;
}
for (let i = 0; i < cols + 1; i++) {
    for (let j = 0; j < rows; j++) {
        let x = center + (.4 * spacing * (j % 2)) + i * spacing;
        let y = 0.1 * height + j * spacing;
        let p = new Particle(x, y, 2);
        plinkos.push(p);

}
    bounds.push(new Boundary(center + offset + i * spacing, height - 0.1 * height, 4, 0.2 * height));
}

let b = new Boundary(width / 2, height + 10, width, 20);
bounds.push(b);

Engine.run(engine);

function loop() {
    update();
    draw();
    window.requestAnimationFrame(loop);
}
loop();

编译

CSS

HTML

Game with Matter.js

h5, game

编辑器支持Emmet

快捷键

Game with Matter.js

h5, game

使用h5和matter.js实现的简化版台球小游戏

使用vue.js p5.js和matter.js实现的降雨灭火小游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：