hotfix device ratio

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 = () => {

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])
 }