调教chatgpt 半小时基于matterjs做一款桌球的demo


完整代码
index.ts
import * as Matter from “matter-js”;
import { createBall, createMainBall, createWall } from “./tool”;
// 创建引擎和渲染器
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;

var engine = Engine.create({
gravity: { x: 0, y: 0 }, // 关闭重力效果
});
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: 800,
height: 400,
wireframes: false,
},
});
var mainball = createMainBall(engine);
createBall(engine);
createWall(engine);
// createWall(engine);
// createWall(engine);
export function hitBall() {
let ball = mainball;
// 施加一个向右的力
var forceMagnitude = 0.1;
var force = { x: forceMagnitude, y: 0 };
Matter.Body.applyForce(ball, ball.position, force);
}
//@ts-ignore
window[“hitBall”] = hitBall;
// 启动引擎
Engine.run(engine);

// 启动渲染器
Render.run(render);

tools.ts
import * as Matter from “matter-js”;

// 创建引擎和渲染器
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;

export function createMainBall(engine: Matter.Engine) {
// 创建母球
var cueBall = Bodies.circle(100, 200, 20, {
restitution: 0.8, // 调整回弹系数以控制球的弹跳
});
World.add(engine.world, cueBall);
return cueBall;
}
export function createBall(engine: Matter.Engine) {
// 创建被打击的球
var ballRadius = 15;
var objectBalls: Matter.Body[] = [];
var numRows = 6;
var startX = 500;
var startY = 200;

for (var row = 0; row < numRows; row++) {
    var ballsInRow = row + 1;
    var rowStartX = startX;
    var rowStartY = startY - row * ballRadius;
    for (var i = 0; i < ballsInRow; i++) {
        var x = rowStartX + (row - numRows / 2) * ballRadius * 2;
        var y = rowStartY + i * ballRadius * 2;

        var ball = Bodies.circle(x, y, ballRadius, {
            restitution: 0.8, // 调整回弹系数以控制球的弹跳
        });

        objectBalls.push(ball);
    }
}

// 将所有物体添加到世界中
World.add(engine.world, [...objectBalls]);

}
/**
*

  • @param engine
    */
    export function createWall(engine: Matter.Engine) {
    // 创建一个静态矩形刚体
    var staticRect = Bodies.rectangle(-10000, -450, 30000, 1000, {
    isStatic: true,
    restitution: 1, // 调整回弹系数以控制球的弹跳
    });

    var staticRectBanner = Bodies.rectangle(0, 850, 30000, 1000, {
    isStatic: true,
    restitution: 1, // 调整回弹系数以控制球的弹跳
    });

    var leftWall = Bodies.rectangle(-4950, 0, 10000, 1000000, {
    isStatic: true,
    restitution: 1, // 调整回弹系数以控制球的弹跳
    });
    var rightWall = Bodies.rectangle(800, 0, 100, 1000000, {
    isStatic: true,
    restitution: 1, // 调整回弹系数以控制球的弹跳
    });
    World.add(engine.world, staticRect);
    World.add(engine.world, staticRectBanner);
    World.add(engine.world, leftWall);
    World.add(engine.world, rightWall);
    }

2赞

https://github.com/cutedCha?tab=repositories
开源了

1赞