материя. js пустой экран, ничего не загружается - PullRequest
Новая
       82

материя. js пустой экран, ничего не загружается

0 голосов
/ 01 февраля 2020

Я получил пустой экран со следующим кодом. Я не знаю почему. Я тоже пытался использовать document.addEventListener(), но ничего не загружается.

Я проверил дело. js работает правильно. Я пытаюсь сделать холст внутри раздела страницы. 

<script>
window.addEventListener('load', function() {

//Fetch our canvas
    var canvas = document.getElementById('world');
// module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies;

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

// create a renderer
var render = Render.create({
        canvas: canvas,
        engine: engine,
        options: {
            width: 500,
            height: 500,
            background: '#000',
            wireframes: false,
            showAngleIndicator: false
});

// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

// add all of the bodies to the world
World.add(engine.world, [boxA, boxB, ground]);

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

// run the renderer
Render.run(render);
  });
</script>


<canvas id="world"></canvas>

enter image description here

1 Ответ

0 голосов
/ 01 февраля 2020

Выглядит как простая проблема отсутствующего закрытия } для вашего объекта опций.

Это: 

// create a renderer
var render = Render.create({
        canvas: canvas,
        engine: engine,
        options: {
            width: 500,
            height: 500,
            background: '#000',
            wireframes: false,
            showAngleIndicator: false
});

Должно быть: 

// create a renderer
var render = Render.create({
        canvas: canvas,
        engine: engine,
        options: {
            width: 500,
            height: 500,
            background: '#000',
            wireframes: false,
            showAngleIndicator: false}
});

Для ссылка здесь - моя полностью рабочая копия вашего кода .

...