AI game creator

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

No:35920

138

←

Prev Next

→

Shoes designer
Developer User16698｜Date and time 24/1/16 3:23:03
Build time 11.297 sec｜Game capacity 2.91KB｜

Script

This is a simple Shoes Designer Game implemented as a single HTML file. It allows the user to draw and customize shoes using different colors. The canvas element is used for drawing, and the buttons at the bottom are used to choose colors, erase, or clear the canvas. To play the game, simply open the HTML file in a web browser, preferably on a smartphone for better touch-based interaction. You can tap and drag your finger on the canvas to draw, select different colors using the color buttons, erase with the eraser button, and clear the canvas with the "Clear" button. Note: The pictograms used for colors are Unicode emojis, so make sure your browser supports them.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shoes Designer Game</title>
  <style>
    #canvas {
      width: 100%;
      height: 90vh;
      border: 1px solid black;
    }
    button {
      margin-top: 10px;
      padding: 10px 16px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <div>
    <button id="redButton">🔴</button>
    <button id="blueButton">🔵</button>
    <button id="yellowButton">🟡</button>
    <button id="greenButton">🟢</button>
    <button id="eraserButton">🧽</button>
    <button id="clearButton">Clear</button>
  </div>

let currentColor = "black";
    let isDrawing = false;

canvas.addEventListener("mousedown", function(event) {
      isDrawing = true;
      let x = event.clientX - canvas.offsetLeft;
      let y = event.clientY - canvas.offsetTop;
      context.beginPath();
      context.moveTo(x, y);
    });

canvas.addEventListener("mousemove", function(event) {
      if (isDrawing) {
        let x = event.clientX - canvas.offsetLeft;
        let y = event.clientY - canvas.offsetTop;
        context.lineTo(x, y);
        context.strokeStyle = currentColor;
        context.lineWidth = 5;
        context.stroke();
      }
    });

canvas.addEventListener("mouseup", function() {
      isDrawing = false;
    });

document.getElementById("redButton").addEventListener("click", function() {
      currentColor = "red";
    });

document.getElementById("blueButton").addEventListener("click", function() {
      currentColor = "blue";
    });

document.getElementById("yellowButton").addEventListener("click", function() {
      currentColor = "yellow";
    });

document.getElementById("greenButton").addEventListener("click", function() {
      currentColor = "green";
    });

document.getElementById("eraserButton").addEventListener("click", function() {
      currentColor = "white";
    });

document.getElementById("clearButton").addEventListener("click", function() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    });
  </script>
</body>
</html>
```

To play the game, simply open the HTML file in a web browser, preferably on a smartphone for better touch-based interaction. You can tap and drag your finger on the canvas to draw, select different colors using the color buttons, erase with the eraser button, and clear the canvas with the "Clear" button.

Note: The pictograms used for colors are Unicode emojis, so make sure your browser supports them.