My Dollie 3: Rainy Day Scene, Your Doll Is Very Cold Click & Drag To Wear Jacket! Yes! Your Doll Is Not Cold! Your Doll Died From A Cold! Try Again?'s game

Click here for free DL of the app version that can save data.

No:33525

←

Prev Next

→

My Dollie 3: Rainy Day Scene, Your Doll Is Very Co..ALL
Developer User13970｜Date and time 24/1/4 19:23:36
Build time 33.112 sec｜Game capacity 3.62KB｜

Script

Click & Drag To Wear Jacket!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>My Dollie 3: Rainy Day Scene</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #74c3ff;
    }
    
    canvas {
      display: block;
      margin: 0 auto;
    }
    
    #doll {
      position: absolute;
      top: 180px;
      left: 220px;
      width: 120px;
    }
    
    #jacket {
      position: absolute;
      top: 180px;
      left: 220px;
      width: 120px;
      pointer-events: none;
    }
    
    #message {
      position: absolute;
      top: 20px;
      left: 20px;
      color: #ffffff;
      font-family: Arial, sans-serif;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="600" height="400"></canvas>
  <img id="doll" src="doll.png">
  <img id="jacket" src="jacket.png">
  <div id="message">Click & Drag To Wear Jacket!</div>
  
  <script>
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");
  
    var jacket = document.getElementById("jacket");
    var doll = document.getElementById("doll");
    
    var dollX = 220;
    var dollY = 180;
    var wearingJacket = false;
    
    canvas.addEventListener("mousedown", mouseDownHandler);
    canvas.addEventListener("mousemove", mouseMoveHandler);
    canvas.addEventListener("mouseup", mouseUpHandler);
  
    function drawScene() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(doll, dollX, dollY);
      if (wearingJacket) {
        ctx.drawImage(jacket, dollX, dollY);
      }
    }
    
    function mouseDownHandler(e) {
      if (e.button === 0) {
        var rect = canvas.getBoundingClientRect();
        var mouseX = e.clientX - rect.left;
        var mouseY = e.clientY - rect.top;
        
        if (mouseX > dollX && mouseX < dollX + doll.width &&
            mouseY > dollY && mouseY < dollY + doll.height) {
          wearingJacket = true;
          canvas.addEventListener("mousemove", mouseMoveHandler);
        }
      }
    }
    
    function mouseMoveHandler(e) {
      var rect = canvas.getBoundingClientRect();
      var mouseX = e.clientX - rect.left;
      var mouseY = e.clientY - rect.top;
      
      dollX = mouseX - (doll.width / 2);
      dollY = mouseY - (doll.height / 2);
      
      drawScene();
    }
    
    function mouseUpHandler(e) {
      if (e.button === 0) {
        wearingJacket = false;
        canvas.removeEventListener("mousemove", mouseMoveHandler);
        checkTemperature();
      }
    }
    
    function checkTemperature() {
      if (dollY < canvas.height - doll.height - 10) {
        showGameOver();
      } else {
        showSuccess();
      }
    }
    
    function showGameOver() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.font = "bold 25px Arial";
      ctx.fillStyle = "white";
      ctx.fillText("Your Doll Died From A Cold!", 150, canvas.height / 2);
      ctx.fillText("Try Again?", 250, (canvas.height / 2) + 30);
      canvas.addEventListener("click", restartGame);
    }
    
    function showSuccess() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.font = "bold 25px Arial";
      ctx.fillStyle = "white";
      ctx.fillText("Yes! Your Doll Is Not Cold!", 170, canvas.height / 2);
      ctx.fillText("Try Again?", 250, (canvas.height / 2) + 30);
      canvas.addEventListener("click", restartGame);
    }
    
    function restartGame() {
      canvas.removeEventListener("click", restartGame);
      dollX = 220;
      dollY = 180;
      wearingJacket = false;
      drawScene();
    }
    
    drawScene();
  </script>
</body>
</html>