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

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// 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 update() {

Engine.update(engine);

if (currentFrame % 60 === 0) {

let p = new Particle(-3.5 + cX + (Math.random() - .5), 0, 5, {

isStatic: false,

fill: "#fff"

});

particles.push(p);

}

currentFrame++;

}

function draw() {

ctx.clearRect(0, 0, width, height);

for (let i = 0; i < particles.length; i++) {

particles[i].show();

}

for (let i = 0; i < plinkos.length; i++) {

plinkos[i].show();

}

for (let i = 0; i < bounds.length; i++) {

bounds[i].show();

}

}

function loop() {

update();

draw();

window.requestAnimationFrame(loop);

}

loop();