diff --git a/src/hooks/use-player.ts b/src/hooks/use-player.ts index 7e38790..f43a57b 100644 --- a/src/hooks/use-player.ts +++ b/src/hooks/use-player.ts @@ -146,7 +146,7 @@ export const usePlayer = ( const addBlock = () => { // currentBlock = createBlock(9, width / 2, 60, ratio, true) - currentBlock = createBlock(nextBlockRef.value, width / 2, 60, ratio, true) + currentBlock = createBlock(nextBlockRef.value, width / 2, 60 * ratio, ratio, true) isSetBlock = false World.add(engine.world, currentBlock) setNextBlock() @@ -178,7 +178,7 @@ export const usePlayer = ( if (!currentBlock || isSetBlock) { return } - Body.setPosition(currentBlock, { x, y: 60 }) + Body.setPosition(currentBlock, { x, y: 60 * ratio }) } const endGame = () => { diff --git a/src/utils/set-field.ts b/src/utils/set-field.ts index ea0c7b0..e507b4f 100644 --- a/src/utils/set-field.ts +++ b/src/utils/set-field.ts @@ -1,24 +1,25 @@ -import {Bodies, Composite, World} from 'matter-js' +import { Bodies, Composite, World } from 'matter-js' export const setField = (world: World, width: number, height: number) => { const bottom = Bodies.rectangle(width / 2, height, width, 30, { isStatic: true, restitution: 1, - render: {fillStyle: '#81685A'} + render: { fillStyle: '#81685A' }, }) const left = Bodies.rectangle(0, height / 2, 1, height, { isStatic: true, - render: {fillStyle: '#FFFFFF'} + render: { fillStyle: '#FFFFFF' }, }) const right = Bodies.rectangle(width, height / 2, 1, height, { isStatic: true, - render: {fillStyle: '#FFFFFF'} + render: { fillStyle: '#FFFFFF' }, }) - const line = Bodies.rectangle(width / 2, 120, width, 2, { + const ratio = height / 560 + const line = Bodies.rectangle(width / 2, 110 * ratio, width, 2, { isStatic: true, isSensor: true, label: 'line', - render: {fillStyle: '#FF6C6C'} + render: { fillStyle: '#FF6C6C' }, }) Composite.add(world, [line, bottom, left, right]) }