Browse Source

眼睛鼻子不显示

林旭祥 1 month ago
parent
commit
463ac4e7d6
4 changed files with 49 additions and 37 deletions
  1. 13 10
      src/views/game/basketball.vue
  2. 14 11
      src/views/game/football.vue
  3. 11 8
      src/views/game/fruit.vue
  4. 11 8
      src/views/game/humanBody.vue

+ 13 - 10
src/views/game/basketball.vue

@@ -255,7 +255,7 @@ const getCanvas = () => {
   // console.log("原始坐标:", originalPoints);
   // console.log("缩放后坐标:", postData);
 
-  direction.value = postData[0][0] - offset.x - (94/2);//鼻子X
+  direction.value = postData[0][0] - offset.x - (94 / 2);//鼻子X
   //绘制头部
   const point1 = { x: postData[4][0], y: postData[4][1] };
   const point2 = { x: postData[3][0], y: postData[3][1] };
@@ -278,14 +278,17 @@ const getCanvas = () => {
   ctx.lineWidth = 5;
   ctx.stroke();
   // 绘制每个点
-  postData.forEach((point: any) => {
-    const [x, y] = point;
-    ctx.beginPath();
-    ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
-    ctx.fillStyle = 'red';
-    ctx.fill();
-    ctx.lineWidth = 1;
-    ctx.stroke();
+  postData.forEach((point: any, index: number) => {
+    //眼睛鼻子不显示
+    if (![0, 1, 2].includes(index)) {
+      const [x, y] = point;
+      ctx.beginPath();
+      ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
+      ctx.fillStyle = 'red';
+      ctx.fill();
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    }
   });
   // 根据点关系连线
   const arr = [[10, 8], [8, 6], [6, 5], [5, 7], [7, 9], [6, 12], [5, 11], [12, 11], [12, 14], [14, 16], [11, 13], [13, 15]]
@@ -771,7 +774,7 @@ const update = (delta) => {
 
     // 更新篮球角度
     gameState.ballAngle += 100 * delta;
-    
+
   }
 
   // 游戏结束状态处理

+ 14 - 11
src/views/game/football.vue

@@ -363,7 +363,7 @@ class GameScene extends Phaser.Scene {
   createPlayer() {
     // 创建玩家
     //this.player = this.physics.add.sprite(GAME_WIDTH / 2, GAME_HEIGHT - 100, 'playerAnim');
-    this.player = this.physics.add.sprite(direction.value+46, GAME_HEIGHT - 100, 'playerAnim');
+    this.player = this.physics.add.sprite(direction.value + 46, GAME_HEIGHT - 100, 'playerAnim');
     this.player.setCollideWorldBounds(true);
     this.player.setScale(0.8);
     this.player.lives = this.lives;
@@ -940,13 +940,13 @@ class GameScene extends Phaser.Scene {
     if (this.player && this.player.active) {
       if (this.cursors.left.isDown) {
         //this.player.setVelocityX(-200);
-        this.player.setX(direction.value+46);
+        this.player.setX(direction.value + 46);
         if (this.player.anims.currentAnim?.key !== 'playerLeft' && !this.player.anims.paused) {
           this.player.anims.play('playerLeft', true);
         }
       } else if (this.cursors.right.isDown) {
         //this.player.setVelocityX(200);
-        this.player.setX(direction.value+46);
+        this.player.setX(direction.value + 46);
         if (this.player.anims.currentAnim?.key !== 'playerRight' && !this.player.anims.paused) {
           this.player.anims.play('playerRight', true);
         }
@@ -1361,14 +1361,17 @@ const getCanvas = () => {
   ctx.lineWidth = 5;
   ctx.stroke();
   // 绘制每个点
-  postData.forEach((point: any) => {
-    const [x, y] = point;
-    ctx.beginPath();
-    ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
-    ctx.fillStyle = 'red';
-    ctx.fill();
-    ctx.lineWidth = 1;
-    ctx.stroke();
+  postData.forEach((point: any, index: number) => {
+    //眼睛鼻子不显示
+    if (![0, 1, 2].includes(index)) {
+      const [x, y] = point;
+      ctx.beginPath();
+      ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
+      ctx.fillStyle = 'red';
+      ctx.fill();
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    }
   });
   // 根据点关系连线
   const arr = [[10, 8], [8, 6], [6, 5], [5, 7], [7, 9], [6, 12], [5, 11], [12, 11], [12, 14], [14, 16], [11, 13], [13, 15]]

+ 11 - 8
src/views/game/fruit.vue

@@ -225,14 +225,17 @@ const getCanvas = () => {
   ctx.lineWidth = 5;
   ctx.stroke();
   // 绘制每个点
-  postData.forEach((point: any) => {
-    const [x, y] = point;
-    ctx.beginPath();
-    ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
-    ctx.fillStyle = 'red';
-    ctx.fill();
-    ctx.lineWidth = 1;
-    ctx.stroke();
+  postData.forEach((point: any, index: number) => {
+    //眼睛鼻子不显示
+    if (![0, 1, 2].includes(index)) {
+      const [x, y] = point;
+      ctx.beginPath();
+      ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
+      ctx.fillStyle = 'red';
+      ctx.fill();
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    }
   });
   // 根据点关系连线
   const arr = [[10, 8], [8, 6], [6, 5], [5, 7], [7, 9], [6, 12], [5, 11], [12, 11], [12, 14], [14, 16], [11, 13], [13, 15]]

+ 11 - 8
src/views/game/humanBody.vue

@@ -220,14 +220,17 @@ const getCanvas = () => {
   ctx.lineWidth = 5;
   ctx.stroke();
   // 绘制每个点
-  postData.forEach((point: any) => {
-    const [x, y] = point;
-    ctx.beginPath();
-    ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
-    ctx.fillStyle = 'red';
-    ctx.fill();
-    ctx.lineWidth = 1;
-    ctx.stroke();
+  postData.forEach((point: any, index:number) => {
+    //眼睛鼻子不显示
+    if (![0, 1, 2].includes(index)) {
+      const [x, y] = point;
+      ctx.beginPath();
+      ctx.arc(x, y, 5, 0, Math.PI * 2); // 绘制半径为5的圆点
+      ctx.fillStyle = 'red';
+      ctx.fill();
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    }
   });
   // 根据点关系连线
   const arr = [[10, 8], [8, 6], [6, 5], [5, 7], [7, 9], [6, 12], [5, 11], [12, 11], [12, 14], [14, 16], [11, 13], [13, 15]]