Dress design game where you create a dress's game

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

No:52237

105

←

Prev Next

→

Dress design game where you create a dress
Developer User20712｜Date and time 24/3/19 16:55:16
Build time 7.821 sec｜Game capacity 1.273KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Dress Design Game</title>
  <style>
    #canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    let currentColor = 'blue';
    
    canvas.addEventListener('click', function(event) {
      const x = event.clientX - canvas.offsetLeft;
      const y = event.clientY - canvas.offsetTop;
      
      if(x < 200 && y < 200) {
        ctx.fillStyle = currentColor;
        ctx.fillRect(0, 0, 200, 200);
      } else if(x >= 200 && y <= 200) {
        ctx.fillStyle = currentColor;
        ctx.fillRect(200, 0, 200, 200);
      } else if(x < 200 && y >= 200) {
        ctx.fillStyle = currentColor;
        ctx.fillRect(0, 200, 200, 200);
      } else {
        ctx.fillStyle = currentColor;
        ctx.fillRect(200, 200, 200, 200);
      }
    });
    
    const colors = ['blue', 'red', 'green', 'yellow'];
    
    let colorIndex = 0;
    
    setInterval(function() {
      currentColor = colors[colorIndex];
      colorIndex++;
      if(colorIndex === colors.length) {
        colorIndex = 0;
      }
    }, 1000);
  </script>
</body>
</html>