Question

我在这里问问题还比较陌生，所以请多多包涵。我正在尝试使用Matter.js作为主要的物理引擎来创建自上而下的驾驶游戏。我希望红色汽车与绿色广场相撞。但是，我仍然坚持不知道如何在我的游戏上实现Matter.js。任何形式的回应将不胜感激！

<html>
<canvas width=1000 height=500 style='border:1px solid black'>
</canvas>
<body onload='start()'>
<script src='matter.js'>
</script>
<script>
function start() {
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');

var x=100;
var y=100;
var s=0;
var rot=0;
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 39) {
    rightPressed = true;
}
else if(e.keyCode == 37) {
    leftPressed = true;
}
else if(e.keyCode == 38) {
    upPressed = true;
}
else if(e.keyCode == 40) {
    downPressed = true;
}
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
    rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
    else if(e.keyCode == 38) {
        upPressed = false;
    }
    else if(e.keyCode == 40) {
    downPressed = false;
    }
}

function car() {
ctx.fillStyle='red';
ctx.fillRect(-20,-20,40,40);
ctx.beginPath();
ctx.moveTo(-20,-19);
ctx.lineTo(-20,-20);
ctx.lineTo(0,-30);
ctx.lineTo(20,-20);
ctx.lineTo(20,-19);
ctx.fill();
ctx.closePath();
ctx.fillStyle='black';
ctx.fillRect(-25,-20,5,10);
ctx.fillRect(-25,10,5,10);
ctx.fillRect(20,-20,5,10);
ctx.fillRect(20,10,5,10);
ctx.fillRect(-15,-5,30,20);
}

function block() {
ctx.fillStyle='green';
ctx.fillRect(200,100,50,50);
}

function draw() {
requestAnimationFrame(draw);
ctx.clearRect(0,0,1000,500);
if(s>15) {
s=15;
}
if(s<-15) {
s=-15;
}
if(upPressed) {
s++;
}
if(downPressed) {
s*=.9;
}
if(!upPressed) {
s*=.99;
}
if(leftPressed) {
rot-=s/3;
}
if(rightPressed) {
rot+=s/3;
}
ctx.fillText(upPressed,10,10);
x+=s*Math.cos(rot*Math.PI/180);
y+=s*Math.sin(rot*Math.PI/180);
ctx.save();
ctx.translate(x,y);
ctx.rotate((rot+90)*Math.PI/180);
car();
ctx.restore();
block();
}
draw();
}
</script>
</body>
</html>

Answer 1

您将不得不重做大部分代码，但是可以很容易地移动运动代码。

首先，您需要制造一个新引擎并运行它：

//Create engine - All the game stuff
var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Composites = Matter.Composites,
    Common = Matter.Common,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Body = Matter.Body;

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

// create a renderer
var render = Render.create({
    canvas: document.getElementById("canv"),
    engine: engine,
    options: {
        width: 500,
        height: 500,
        wireframes: false,
        background: '#6DDA4A'
    }
});
engine.world.gravity.y = 0;
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);

接下来，您应该制作一个新的汽车对象并将其添加到世界中。您可以将这些值编辑为所需的任何值。注意：rot不是您需要的实际参数，我只是在稍后使用它来设置汽车的旋转。

var car = Bodies.rectangle(100, 100, 50, 80, {
    friction: 1,
    frictionAir: 0.1,
    rot: 0,
    restitution: 0,//Makes it so the car won't bounce off of objects
    render: {
        fillStyle: "#FF0000",
        /*sprite: {
            //You can use this to apply a background image to the car
            texture: "Path/To/Image.png",
            xScale: number,
            yScale: number
        }/**/
    }
});
var block = Bodies.rectangle(350, 100, 100, 400, {
    isStatic: true,//Makes block unmovable
    friction: 1,
    frictionAir: 0.1,
    rot: 0,
    restitution: 0,
    render: {
        fillStyle: "#0000FF",
        /*sprite: {
            texture: "Path/To/Image.png",
            xScale: number,
            yScale: number
        }/**/
    }
});
World.add(world, [car, block]);

要更新汽车，可以使用body.setPosition或body.applyForce。由于它是汽车，因此我将使用body.applyForce，以便在您停止按下按钮后汽车保持滚动。也可以使用body.setAngle或body.rotate进行旋转。这次，我将使用body.setAngle，因此转弯感觉会更好。

function updateCar() {
    //Declare variables for velocity

    var speed = 5;
    var carRot = car.rot*180/Math.PI;
    var velY = speed * Math.cos(carRot * Math.PI / 180);
    var velX = speed * Math.sin(carRot * Math.PI / 180)*-1; 
    var pushRot = 0;
    //Update variables

    if (upPressed==false&&downPressed==false) {
        velY = 0;
        velX = 0;
    }
    else {
        //alert(carX+", "+carY);
    }
    if (downPressed == true) {
        velY *= -1;
        velX *= -1;
    }
    if (leftPressed) {
        pushRot = -0.1;
    }
    if (rightPressed) {
        pushRot = 0.1;
    }
    car.rot += pushRot;


    //Set position of car
    carX += velX;
    carY += velY;
    Body.applyForce(car, {x:carX,y:carY}, {x:velX/200,y:velY/200});
    Body.setAngle(car, car.rot);
    requestAnimationFrame(updateCar);
}
window.requestAnimationFrame(updateCar);

查看演示here

Matter.js用于碰撞检测

1 个答案: