Tue Mar 18 16:05:00 CST 2025 inscode

src/components/HelloWorld.vue

-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
 <template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
+  <div class="game-container">
+    <canvas ref="canvas" width="500" height="400"></canvas>
+    <p>Score: {{ score }}</p>
   </div>
 </template>
 
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
+<script>
+import { ref, onMounted } from 'vue';
 
-h3 {
-  font-size: 1.2rem;
+export default {
+name:"SnakeGnme",
+setup(){
+  const canvas=ref(null);
+  let ctx=null;
+  let snake=[];
+  let food={};
+  let dx=20;
+  let dy=0;
+  let score=0;
+  let gameInterval=null;
+  const initGname=()=>{
+    ctx=canvas.value.getContext()
+  }
 }
 
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
+    const generateFood = () => {
+      food = {
+        x: Math.round(Math.random() * (canvas.value.width - 20) / 20) * 20,
+        y: Math.round(Math.random() * (canvas.value.height - 20) / 20) * 20,
+      };
+    };
+
+    const draw = () => {
+      ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
+
+    
+      snake.forEach(({ x, y }) => {
+        ctx.fillStyle = 'green';
+        ctx.fillRect(x, y, 20, 20);
+      });
+
+
+      ctx.fillStyle = 'red';
+      ctx.fillRect(food.x, food.y, 20, 20);
+
+ 
+      document.querySelector('.game-container p').textContent = `Score: ${score}`;
+    };
+
+    const moveSnake = () => {
+      const head = { x: snake[0].x + dx, y: snake[0].y + dy };
+      snake.unshift(head);
+
+      if (head.x === food.x && head.y === food.y) {
+        score += 10;
+        generateFood();
+      } else {
+        snake.pop();
+      }
+    };
+
+    const checkCollision = () => {
+      const head = snake[0];
+      if (
+        head.x < 0 ||
+        head.y < 0 ||
+        head.x >= canvas.value.width ||
+        head.y >= canvas.value.height
+      ) {
+        clearInterval(gameInterval);
+
+        initGame();
+        return true;
+      }
+
+      for (let i = 1; i < snake.length; i++) {
+        if (head.x === snake[i].x && head.y === snake[i].y) {
+          clearInterval(gameInterval);
+      
+          initGame();
+          return true;
+        }
+      }
+      return false;
+    };
 
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
+    const startGame = () => {
+      if (gameInterval) clearInterval(gameInterval);
+      gameInterval = setInterval(() => {
+        moveSnake();
+        draw();
+        checkCollision();
+      }, 100);
+    };
+
+    const changeDirection = (event) => {
+      const LEFT_KEY = 37;
+      const RIGHT_KEY = 39;
+      const UP_KEY = 38;
+      const DOWN_KEY = 40;
+
+      const keyPressed = event.keyCode;
+
+      const goingUp = dy === -20;
+      const goingDown = dy === 20;
+      const goingRight = dx === 20;
+      const goingLeft = dx === -20;
+
+      if (keyPressed === LEFT_KEY && !goingRight) {
+        dx = -20;
+        dy = 0;
+      }
+      if (keyPressed === UP_KEY && !goingDown) {
+        dx = 0;
+        dy = -20;
       }
+      if (keyPressed === RIGHT_KEY && !goingLeft) {
+        dx = 20;
+        dy = 0;
+      }
+      if (keyPressed === DOWN_KEY && !goingUp) {
+        dx = 0;
+        dy = 20;
+      }
+    };
+
+    onMounted(() => {
+      initGame();
+      window.addEventListener('keydown', changeDirection);
+    });
+
+    return { canvas, score };
+  },
+};
+</script>
+
+<style scoped>
+.game-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+canvas {
+  border: 1px solid black;
 }
 </style>