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

No:52236

110

←

Prev Next

→

Dress design game where you create a dress
Developer User20712｜Date and time 24/3/19 16:53:11
Build time 6.694 sec｜Game capacity 1.478KB｜

Script

Welcome to the Dress Design Game!

Choose a color:

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
   <title>Dress Design Game</title>
</head>
<body>
   <h1>Welcome to the Dress Design Game!</h1>
   <canvas id="canvas" width="400" height="400"></canvas>
   
   <script>
       const canvas = document.getElementById('canvas');
       const ctx = canvas.getContext('2d');
       
       let currentColor = 'red';
       let isDrawing = false;
       
       canvas.addEventListener('mousedown', function(event) {
           isDrawing = true;
           ctx.beginPath();
           ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
       });
       
       canvas.addEventListener('mousemove', function(event) {
           if (isDrawing) {
               ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
               ctx.strokeStyle = currentColor;
               ctx.stroke();
           }
       });
       
       canvas.addEventListener('mouseup', function() {
           isDrawing = false;
       });
       
       function changeColor(color) {
           currentColor = color;
       }
   </script>
   
   <h2>Choose a color:</h2>
   <button onclick="changeColor('red')" style="background-color: red; width: 30px; height: 30px;"></button>
   <button onclick="changeColor('blue')" style="background-color: blue; width: 30px; height: 30px;"></button>
   <button onclick="changeColor('green')" style="background-color: green; width: 30px; height: 30px;"></button>
</body>
</html>