implement_previous_code

src/pages/drag/index.astro

@@ -1,68 +1,381 @@
 ---
 import Layout from '../../layouts/Layout.astro';
-
+// import Phaser from "phaser";
+import background from "./assets/background.jpg";
+import yam from "./assets/yam.png";
+import hay from "./assets/hay.png";
+import mat from "./assets/mat.png";
+import star from "./assets/star.png";
+import chat from "./assets/chat.png";
+import jar from "./assets/jar.png";
+import jam from "./assets/jam.png";
+import day from "./assets/day.png";
+import tick from "./assets/tick.png";
+import wrong from "./assets/day.png";
+import border from "./assets/squar.png";
 ---
-
 <Layout title="Drag Game">
 	<main>
 		<div>
-
+      <div>
+        <img style="width: 100%; height: 150px;" src="./assets/topbar1.jpg" alt="">
+      </div>
+      <div id="overlap">
+        <div id="result"></div>
+        <div id="win" class="displayNone "> 
+          <p>Congratulations!</p>
+          <p>You win the Game!</p>
+          <img class="" src="./assets/party-feestje.gif" alt=""  style="width: 200px; height: 200px;" />
+          <div class="">
+            <a href="" >
+              <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+            </a>
+            <a href="" >
+              <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            </a>
+          </div>
+          <div>
+          </div>
+        </div>
+        <div id="lost" class="displayNone">
+          <p>Oops!</p>
+          <p>You Lost the Game!</p>
+          <img class="" src="./assets/output-onlinegiftools.gif" alt=""  style="width: 200px; height: 200px;" />
+          <a href="" >
+            <svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
+          </a>
+        </div>
+      </div>
 		</div>
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-
 	</main>
 </Layout>
-
 <script is:inline>
-   var config = {
-        type: Phaser.AUTO,
-        width: 800,
-        height: 600,
-        physics: {
-            default: 'arcade',
-            arcade: {
-                gravity: { y: 200 }
+   const targetZones = [
+  {
+    x: 1430,
+    y: 160,
+    name: "target1",
+    block: null,
+  },
+  {
+    x: 1430,
+    y: 340,
+    name: "target2",
+    block: null,
+  },
+  {
+    x: 1430,
+    y: 540,
+    name: "target3",
+    block: null,
+  },
+  {
+    x: 1430,
+    y: 730,
+    name: "target4",
+    block: null,
+  },
+];
+const blockMatches = [
+  {
+    blockName: "blocks1",
+    targetName: "target1",
+  },
+  {
+    blockName: "blocks2",
+    targetName: "target2",
+  },
+  {
+    blockName: "blocks3",
+    targetName: "target3",
+  },
+  {
+    blockName: "blocks4",
+    targetName: "target4",
+  },
+];
+
+//let counter = 0; // Counter variable
+class MyGame extends Phaser.Scene {
+  constructor() {
+    super();
+  }
+  preload() {
+    this.load.image("wrong", "./assets/yam.png");
+    this.load.image("tick", './assets/tick.png');
+    this.load.image("bg", './assets/background.jpg');
+    this.load.image("target1", './assets/yam.png');
+    this.load.image("target2", './assets/hay.png');
+    this.load.image("target3", './assets/mat.png');
+    this.load.image("target4", './assets/star.png');
+    this.load.image("border", './assets/squar.png');
+    this.load.spritesheet("blocks1", './assets/chat.png', {
+      frameWidth: 100,
+      frameHeight: 100,
+    });
+    this.load.spritesheet("blocks2", './assets/jar.png', {
+      frameWidth: 100,
+      frameHeight: 100,
+    });
+    this.load.spritesheet("blocks3", './assets/jam.png', {
+      frameWidth: 100,
+      frameHeight: 100,
+    });
+    this.load.spritesheet("blocks4", './assets/day.png', {
+      frameWidth: 100,
+      frameHeight: 100,
+    });
+  }
+  create() {
+    const bgWidthX = window.innerWidth / 2;
+    const bgWidthY = window.innerHeight / 2;
+    this.add.image(bgWidthX, bgWidthY, "bg").setScale(2.4);
+    this.add.image(1570, 140, "target1");
+    this.add.image(1569, 160, "border").setAlpha(0.4).setScale(0.7);
+    this.add.image(1570, 320, "target2");
+    this.add.image(1569, 340, "border").setAlpha(0.4).setScale(0.7);
+    this.add.image(1570, 530, "target3");
+    this.add.image(1569, 540, "border").setAlpha(0.4).setScale(0.7);
+    this.add.image(1570, 720, "target4");
+    this.add.image(1569, 730, "border").setAlpha(0.4).setScale(0.7);
+    const blocks = [
+      {
+        x: 300,
+        y: 90,
+        textureKey: "blocks1",
+        id: "block1",
+      },
+      {
+        x: 300,
+        y: 270,
+        textureKey: "blocks2",
+        id: "block2",
+      },
+      {
+        x: 300,
+        y: 470,
+        textureKey: "blocks3",
+        id: "block3",
+      },
+      {
+        x: 300,
+        y: 660,
+        textureKey: "blocks4",
+        id: "block4",
+      },
+    ];
+
+    const droppedBlocks = [];
+    const targetZoneBorders = [];
+
+    targetZones.forEach((targetZone) => {
+      const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+      const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.7);
+      targetZoneBorders.push(targetBorder);
+      targetZone.block = null;
+    });
+
+    blocks.forEach((block, index) => {
+      const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
+      this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
+
+      newBlock.on("drag", (pointer, dragX, dragY) => {
+        newBlock.setScale(1.1);
+        newBlock.x = dragX;
+        newBlock.y = dragY;
+      });
+
+      newBlock.on("dragend", () => {
+        newBlock.setScale(1.0);
+        let droppedOnTargetZone = false;
+
+        targetZones.forEach((targetZone, targetIndex) => {
+          if (
+            Phaser.Geom.Intersects.RectangleToRectangle(
+              newBlock.getBounds(),
+              new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+            )
+          ) {
+            if (targetZone.block === null) {
+              newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
+              newBlock.disableInteractive();
+              targetZone.block = newBlock;
+              droppedBlocks.push(newBlock);
+
+              if (isMatch(newBlock.texture.key, targetZone.name)) {
+                //counter++; // Increment the counter when a match is found
+              }
+            } else {
+              newBlock.setPosition(block.x, block.y);
             }
-        },
-        scene: {
-            preload: preload,
-            create: create
-        }
-    };
 
-    var game = new Phaser.Game(config);
-
-    function preload ()
-    {
-        this.load.setBaseURL('http://labs.phaser.io');
-
-        this.load.image('sky', 'assets/skies/space3.png');
-        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
-        this.load.image('red', 'assets/particles/red.png');
-    }
-
-    function create ()
-    {
-        this.add.image(400, 300, 'sky');
-
-        var particles = this.add.particles('red');
-
-        var emitter = particles.createEmitter({
-            speed: 100,
-            scale: { start: 1, end: 0 },
-            blendMode: 'ADD'
+            droppedOnTargetZone = true;
+            targetZoneBorders[targetIndex].setVisible(true);
+            targetZoneBorders[targetIndex].setAlpha(1);
+            return;
+          }
         });
 
-        var logo = this.physics.add.image(400, 100, 'logo');
+        if (!droppedOnTargetZone) {
+          newBlock.setPosition(block.x, block.y);
+        }
 
-        logo.setVelocity(100, 200);
-        logo.setBounce(1, 1);
-        logo.setCollideWorldBounds(true);
+        if (droppedBlocks.length === targetZones.length) {
+          displayResult(droppedBlocks);
+        }
+      });
+    });
+  }
+}
 
-        emitter.startFollow(logo);
+const displayResult = (droppedBlocks) => {
+  const overlap = document.getElementById("overlap");
+  overlap.style.display = "block";
+  let finalDom;
+  let points = 0;
+  droppedBlocks.forEach((block) => {
+    const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
+    if (targetZone) {
+      if (targetZone.block === block) {
+        points++;
+      }
     }
+  });
+  if (points >= droppedBlocks.length / 2) {
+    finalDom = document.getElementById("win");
+    finalDom.classList.add("win");
+  } else {
+    finalDom = document.getElementById("lost");
+    finalDom.classList.add("lost");
+  }
+  document.getElementById("result").innerHTML = "Points: " + points;
+  finalDom.classList.add("result");
+  // console.log(displayResult)
+};
+// const blockMatches = [
+//   { blockName: "block1", targetName: "target1" },
+//   { blockName: "block2", targetName: "target2" },
+//   { blockName: "block3", targetName: "target3" },
+//   { blockName: "block4", targetName: "target4" }
+// ];
+let score = 0;
+const isMatch = (blockName, targetName) => {
+  const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+  // console.log(match)
+  score++;
+console.log(score)
+
+  return match !== undefined;
+};
+
+// Example usage
+
+
+// Calculate the sum total points
+// for (const match of blockMatches) {
+//   isMatch(match.blockName, match.targetName);
+// }
+
+// console.log("Sum Total Points:", counter);
+
+
+// let counter = 0;
+
+// const isMatch = (blockName, targetName) => {
+//   const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+
+//   if (match) {
+//     counter++;
+//   }
+//   if (counter <= 4) {
+//     console.log("Points:", counter);
+//   } else {
+//     console.log("Matchggg:", counter);
+//   }
+//   return match !== undefined;
+// };
+
+const config = {
+  type: Phaser.AUTO,
+  width: window.innerWidth,
+  height: window.innerHeight,
+  parent: "phaser-example",
+  scale: {
+    mode: Phaser.Scale.FIT,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+  },
+  scene: MyGame,
+};
+
+const game = new Phaser.Game(config);
 </script>
-
 <style>
-
-</style>
+  * {
+margin: 0;
+padding: 0;
+cursor: -webkit-grab; cursor: grab;
+/* background-color: #7c4c23; */
+/* border: 2px solid #7c4c23;
+width: fit-content; */
+}
+/* body {
+margin: 0;
+background: #020202;
+cursor: crosshair;
+} */
+/* canvas{display:block} */
+/* h1 {
+position: absolute;
+top: 20%;
+left: 50%;
+transform: translate(-50%, -50%);
+color: #fff;
+font-family: "Source Sans Pro";
+font-size: 5em;
+font-weight: 900;
+-webkit-user-select: none;
+user-select: none;
+} */
+  #overlap {       
+    display: none;
+    /* width: 800px;
+    height: 600px; */
+    
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #7c4c23;
+    text-align: center;
+    margin-top: 7%;
+  }
+  #overlap .win{
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+    height: fit-content;
+  }
+  #overlap .lost{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    place-items: center;
+    font-size: 40px;
+    font-weight: bolder;
+  }
+  .displayNone {
+    display: none;
+  }
+  #result {
+    font-size: 30px;
+    font-weight: bold;
+  }
+  /* .try{
+    font-size: 20px;
+    color: white;
+  } */
+</style>