create game over

src/pages/play/PlayPage.vue

@@ -1,23 +1,27 @@
 <template>
  <div class="absolute z-10">
- <span>score: {{score}}</span>
- <div class="bg-amber-300">Next</div>
+ <div class="text-4xl ml-4 my-4">score: {{score}}</div>
+ <next-block :next-index="1"/>
  </div>
  <div ref="canvas" class=""></div>
 </template>
 <script setup lang="ts">
 import {Engine, Render, Bodies, Composite, World, Runner, Events} from 'matter-js'
 import {onMounted, ref} from "vue";
-import {blocks} from "./setting.ts";
+import {createBlock} from "../../utils";
+import NextBlock from "./_components/NextBlock.vue";
 
 const score = ref(0)
+const isDropping = ref(false)
 
 const canvas = ref<HTMLElement>()
 const engine = Engine.create({gravity: {x:0, y:1}})
+const runner = Runner.create();
 
 onMounted(()=>{
  const width = window.innerWidth
  const height = window.innerHeight
+ //todo 화면 너비에 다른 블럭 사이즈 조절
  const render = Render.create({
  element: canvas.value,
  engine,
@@ -30,7 +34,7 @@ onMounted(()=>{
  }
  });
 
- const ground = Bodies.rectangle(width/2, height-60, width, 120, { isStatic: true, render: {fillStyle: '#FFBF36'}});
+ const ground = Bodies.rectangle(width/2, height-60, width, 120, { isStatic: true, render: {fillStyle: '#FCBF31', lineWidth:4, strokeStyle:'#000000'}});
  const left = Bodies.rectangle(0, height/2, 1, height, {
  isStatic: true,
  render: {fillStyle: '#FFFFFF'}
@@ -39,47 +43,38 @@ onMounted(()=>{
  isStatic: true,
  render: {fillStyle: '#FFFFFF'}
  })
- const line = Bodies.rectangle(width/2, 150, width, 2, {
+ const line = Bodies.rectangle(width/2, 150, width, 2,  {
  isStatic: true,
  isSensor: true,
- render: {fillStyle: '#FFBF36'}
+ label: 'line',
+ render: {fillStyle: '#000000'}
  })
  Composite.add(engine.world, [line, ground, left, right]);
 
- // run the renderer
  Render.run(render);
-
- // create runner
- const runner = Runner.create();
  Runner.run(runner, engine);
 
  Events.on(engine, 'collisionStart', (event) => {
  event.pairs.forEach((collision) => {
+ if (collision.bodyA.label === 'line' || collision.bodyB.label === 'line'){
+ if(isDropping.value){
+ return
+ }
+ alert('gameover')
+ }
  if (collision.bodyA.label !== collision.bodyB.label) {
  return
  }
  const index = Number(collision.bodyA.label)
- const nextIndex = String(index + 1)
-
- score.value = score.value + (index * 10)
+ score.value = score.value + (index * 2)
 
  // todo 최고 단계일 경우 처리
  if (index === 10) {
  return
  }
-
+ const newBlock = createBlock(index+1, collision.collision.supports[0].x, collision.collision.supports[0].y)
  World.remove(engine.world, [collision.bodyA, collision.bodyB])
-
- const newCircle = Bodies.circle(
- collision.collision.supports[0].x,
- collision.collision.supports[0].y,
- (index + 1) * 20,
- {
- label: nextIndex,
- }
- )
-
- World.add(engine.world, newCircle)
+ World.add(engine.world, newBlock)
  }
  )
  })
@@ -90,18 +85,22 @@ const addBlock = (x: number) => {
  if(!index){
  return
  }
- const block = blocks[index]
- console.log(index)
- const circle = Bodies.circle(x, 10, block.size/2, {
- label: String(index),
- })
- World.add(engine.world, circle)
+ isDropping.value = true
+ const block = createBlock(index, x, 10)
+ setTimeout(()=>{isDropping.value=false}, 1000)
+ World.add(engine.world, block)
 }
 
 window.addEventListener('click', (event)=>{
+ if(isDropping.value){
+ return
+ }
  addBlock(event.clientX)
 })
 window.addEventListener('touchstart', (event)=>{
+ if(isDropping.value){
+ return
+ }
  addBlock(event.touches[0].clientX)
 })
 

src/pages/play/_components/NextBlock.vue

@@ -9,7 +9,10 @@ import {computed} from "vue";
 import {blocks} from "../setting.ts";
 
 const props = defineProps({
- nextIndex: Number
+ nextIndex: {
+ type: Number,
+ default: 0
+ }
 })
 
 const block = computed(() => blocks[props.nextIndex])

src/pages/play/setting.ts

@@ -1,18 +1,16 @@
 type Block = {
  size: number;
+ color: string;
 };
-
-// const score = [3, 5, 7, 10, 15, 20, 25, 30, 40, 50, 100]
-
 export const blocks: { [key: number]: Block } = {
- 1: { size: 75 },
- 2: { size: 98 },
- 3: { size: 137 },
- 4: { size: 180 },
- 5: { size: 200 },
- 6: { size: 240 },
- 7: { size: 280 },
- 8: { size: 320 },
- 9: { size: 320 },
- 10: { size: 400 },
+ 1: { size: 26, color: '#E573D2' },
+ 2: { size: 40, color: '#F69B30' },
+ 3: { size: 54, color: '#41B5BD' },
+ 4: { size: 90, color: '#6079FF' },
+ 5: { size: 100, color: '#FEDC2D' },
+ 6: { size: 120, color: '#FD9D0E' },
+ 7: { size: 140, color: '#CCF576' },
+ 8: { size: 160, color: '#FC6B6B' },
+ 9: { size: 160, color: '#BB4BFF' },
+ 10: { size: 200, color: '#3BE42D' },
 };

src/style.css

@@ -2,8 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+ font-family: 'GangwonEduHyeonokT_OTFMediumA';
+ src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GangwonEduHyeonokT_OTFMediumA.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+
 :root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ font-family: GangwonEduHyeonokT_OTFMediumA, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;