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

No:27389

141

←

Prev Next

→

Animator Simulator
Developer User13363｜Date and time 23/12/6 20:32:22
Build time 70.99 sec｜Game capacity 3.457KB｜

Script

Animator Simulator

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Animator Simulator</title>
<style>
  body {
    text-align: center;
    font-family: Arial, sans-serif;
  }
  
  #canvas {
    border: 2px solid black;
    width: 400px;
    height: 400px;
    margin: 20px auto;
  }
  
  #startBtn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 20px;
    background-color: #333;
    color: white;
    cursor: pointer;
    border: none;
    outline: none;
  }
</style>
</head>
<body>
  <h1>Animator Simulator</h1>
  <canvas id="canvas" width="400" height="400"></canvas>
  <button id="startBtn">Mulai</button>
  
  <script>
    // Get the canvas element and its context
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
  
    // Create an array to hold the pictograms
    var pictograms = [];
  
    // Create a Pictogram class
    class Pictogram {
      constructor(x, y, size, color, symbol) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.color = color;
        this.symbol = symbol;
        this.dx = Math.random() * 6 - 3; // Random horizontal speed between -3 and 3
        this.dy = Math.random() * 6 - 3; // Random vertical speed between -3 and 3
      }
  
      // Method to draw the pictogram on the canvas
      draw() {
        ctx.font = this.size + "px Arial";
        ctx.fillStyle = this.color;
        ctx.fillText(this.symbol, this.x, this.y);
      }
  
      // Method to update the position of the pictogram
      update() {
        this.x += this.dx;
        this.y += this.dy;
  
        // Check if the pictogram hits the canvas boundaries
        if (this.x - this.size < 0 || this.x + this.size > canvas.width) {
          this.dx *= -1; // Reverse the horizontal speed
        }
        if (this.y - this.size < 0 || this.y + this.size > canvas.height) {
          this.dy *= -1; // Reverse the vertical speed
        }
      }
    }
  
    // Function to initialize the game
    function init() {
      // Generate random pictograms
      for (var i = 0; i < 10; i++) {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        var size = Math.random() * 30 + 20;
        var color = "#" + Math.floor(Math.random() * 16777215).toString(16);
        var symbol = getRandomSymbol();
        pictograms.push(new Pictogram(x, y, size, color, symbol));
      }
    }
  
    // Function to start the game
    function startGame() {
      document.getElementById("startBtn").disabled = true; // Disable the start button
      init(); // Initialize the game
  
      // Update and draw the pictograms at regular intervals
      setInterval(function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
  
        for (var i = 0; i < pictograms.length; i++) {
          pictograms[i].update(); // Update the position of the pictogram
          pictograms[i].draw(); // Draw the pictogram on the canvas
        }
      }, 30);
    }
  
    // Function to get a random pictogram symbol
    function getRandomSymbol() {
      var symbols = ["🐶", "🐱", "🐭", "🐰", "🐼", "🐻", "🐯", "🐸", "🐙", "🐠", "🐘", "🐦"];
      var randomIndex = Math.floor(Math.random() * symbols.length);
      return symbols[randomIndex];
    }
  
    // Add event listener to the start button
    document.getElementById("startBtn").addEventListener("click", startGame);
  </script>
</body>
</html>