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

No:25665

←

Prev Next

→

Tattoo simulator
Developer User12468｜Date and time 23/11/23 16:27:07
Build time 137.558 sec｜Game capacity 2.394KB｜

Script

Tattoo Simulator

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<html>
<head>
  <title>Tattoo Simulator</title>
  <style>
    body {
      font-size: 36px;
      text-align: center;
    }
    
    #canvas {
      border: 1px solid #000;
      background-color: #fff;
      width: 300px;
      height: 300px;
      margin: 0 auto;
    }
    
    #toolbar {
      margin-top: 20px;
    }
    
    .tool {
      display: inline-block;
      margin-right: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Tattoo Simulator</h1>
  <div id="canvas"></div>
  <div id="toolbar">
    <img class="tool" src="https://www.example.com/tattoo1.png" onclick="selectTattoo(1)">
    <img class="tool" src="https://www.example.com/tattoo2.png" onclick="selectTattoo(2)">
    <img class="tool" src="https://www.example.com/tattoo3.png" onclick="selectTattoo(3)">
  </div>

function selectTattoo(tattooIndex) {
      selectedTattoo = tattooIndex;
    }

document.addEventListener("DOMContentLoaded", function() {
      var canvas = document.getElementById("canvas");
      var isDrawing = false;

canvas.addEventListener("mousedown", function(e) {
        if (selectedTattoo) {
          isDrawing = true;
          var tattoo = document.createElement("img");
          tattoo.src = getTattooUrl(selectedTattoo);
          tattoo.style.position = "absolute";
          tattoo.style.left = e.clientX - 30 + "px";
          tattoo.style.top = e.clientY - 30 + "px";
          canvas.appendChild(tattoo);
        }
      });

canvas.addEventListener("mousemove", function(e) {
        if (isDrawing && selectedTattoo) {
          var tattoo = document.createElement("img");
          tattoo.src = getTattooUrl(selectedTattoo);
          tattoo.style.position = "absolute";
          tattoo.style.left = e.clientX - 30 + "px";
          tattoo.style.top = e.clientY - 30 + "px";
          canvas.appendChild(tattoo);
        }
      });

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