Html 球形滚动,HTML5/Canvas Matter.js 圆球掉落和滚动-CSDN博客

这篇博客展示了如何使用HTML5的Canvas和Matter.js库创建一个圆球滚动和掉落的交互场景。通过JavaScript代码创建了一个包含地面、圆球和静态障碍物的物理世界，实现了球形物体的动态行为。用户可以通过鼠标与场景进行交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var canvas = {

width: 700,

height: 500

}

var Engine = Matter.Engine,

World = Matter.World,

Body = Matter.Body,

Bodies = Matter.Bodies,

Constraint = Matter.Constraint,

Composites = Matter.Composites,

MouseConstraint = Matter.MouseConstraint;

var engine = Engine.create(document.body, {

render: {

options: {

showAngleIndicator: false,

wireframes: false,

width: canvas.width,

height: canvas.height

}

});

/* Mouse interaction with all objects */

var mouseConstraint = MouseConstraint.create(engine);

World.add(engine.world, mouseConstraint);

function createObject(options) {

if (options.type == 'rect') {

return Bodies.rectangle(options.x, options.y, options.width, options.height, {

isStatic: options.static,

angle: options.angle,

render: {

fillStyle: options.fillColor,

strokeStyle: options.strokeColor

}

});

} else if (type = 'circle') {

return Bodies.circle(options.x, options.y, options.size, {

density: options.density,

frictionAir: options.frictionAir,

isStatic: options.static,

render: {

fillStyle: options.fillColor,

strokeStyle: options.strokeColor

}

});

}

// Ground

var ground = createObject({

type: 'rect',

x: (canvas.width / 2),

y: 400,

angle: 0,

width: 500,

height: 10,

static: true,

fillColor: 'lightgrey',

strokeColor: 'black'

});

// Ball

var ball = createObject({

type: 'circle',

x: 100,

y: 100,

size: 20,

static: null,

density: 10,

frictionAir: 0.001,

fillColor: 'lightgrey',

strokeColor: 'black'

});

// Piece 01

var piece1 = createObject({

type: 'rect',

x: 100,

y: 300,

angle: 10,

width: 100,

height: 10,

static: true,

fillColor: 'lightgrey',

strokeColor: 'black'

});

// Piece 02

var piece2 = createObject({

type: 'rect',

x: 650,

y: 370,

angle: -10,

width: 100,

height: 10,

static: true,

fillColor: 'lightgrey',

strokeColor: 'black'

});

// Piece 03

var piece3 = createObject({

type: 'rect',

x: 50,

y: 370,

angle: 10,

width: 100,

height: 10,

static: true,

fillColor: 'lightgrey',

strokeColor: 'black'

});

// Add everything

World.add(engine.world, [ball, piece1, piece2, piece3, ground]);

Engine.run(engine);