Letters randomly appear and disappear on the screens in dots, you have to do the alphabet in order without selecting the wrong letter, if wrong letter is selected start over, if alphabet is completed start again dots appear and disappear faster everytime alphabet is completed you go up a level's game

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

No:533

219

←

Prev Next

→

Letters randomly appear and disappear on the scree..ALL
Developer User3011｜Date and time 23/6/15 11:49:47
Build time 69.125 sec｜Game capacity 6.14KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Alphabet Dots</title>
    <style>
      body {
        font-size: 2em;
        text-align: center;
        margin-top: 40px;
      }
      #canvas {
        border: solid 1px #000000;
        width: 90%;
        height: 50vh;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <p id="alphabet"></p>

// Initialize game
      function init() {
        // Set canvas dimensions
        canvas.width = window.innerWidth * 0.9;
        canvas.height = window.innerHeight * 0.5;

// Add event listener to canvas
        canvas.addEventListener('click', handleClick);

// Set initial alphabet
        setAlphabet();

// Start game loop
        interval = setInterval(gameLoop, time);
      }

// Game loop
      function gameLoop() {
        // Clear canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw dots
        dots.forEach((dot) => {
          dot.update();
          dot.draw();
        });

// Remove dots that are off screen
        dots = dots.filter((dot) => {
          return dot.y <= canvas.height;
        });

// Add new dot if necessary
        if (dots.length < level) {
          addDot();
        }

// Increase level if alphabet is completed
        if (alphabet.length === 0) {
          level++;
          time -= 100;
          clearInterval(interval);
          interval = setInterval(gameLoop, time);
          setAlphabet();
        }

// Draw current level and score
        context.fillStyle = colors[level - 1];
        context.font = 'bold 2em Arial';
        context.fillText(`Level: ${level} Score: ${score}`, canvas.width / 2, canvas.height - 20);
      }

// Add new dot to dots array
      function addDot() {
        const x = Math.floor(Math.random() * (canvas.width - 50)) + 25;
        const y = 0;
        const letter = alphabet[Math.floor(Math.random() * alphabet.length)];
        const color = colors[Math.floor(Math.random() * colors.length)];
        const dot = new Dot(x, y, letter, color);
        dots.push(dot);
      }

// Handle canvas click
      function handleClick(e) {
        const x = e.clientX - canvas.offsetLeft;
        const y = e.clientY - canvas.offsetTop;
        for (let i = 0; i < dots.length; i++) {
          if (dots[i].contains(x, y)) {
            if (dots[i].letter === alphabet[0]) {
              alphabet.shift();
              score++;
            } else {
              score = 0;
              level = 1;
              time = 1000;
              setAlphabet();
              clearInterval(interval);
              interval = setInterval(gameLoop, time);
            }
            dots.splice(i, 1);
            break;
          }
        }
      }

// Set alphabet
      function setAlphabet() {
        alphabet.length = level;
        for (let i = 0; i < alphabet.length; i++) {
          const letter = alphabet[i];
          const emoji = getEmoji(letter);
          alphabet[i] = `${letter}${emoji}`;
        }
        document.getElementById('alphabet').textContent = alphabet.join(' ');
      }

// Get emoji for letter
      function getEmoji(letter) {
        switch(letter) {
          case 'a':
            return '🅰️';
          case 'b':
            return '🅱️';
          case 'c':
            return '🧀';
          case 'd':
            return '🐬';
          case 'e':
            return '🦄';
          case 'f':
            return '🍟';
          case 'g':
            return '🦍';
          case 'h':
            return '🌺';
          case 'i':
            return '👁️';
          case 'j':
            return '🤹';
          case 'k':
            return '🔪';
          case 'l':
            return '🕰️';
          case 'm':
            return '🦢';
          case 'n':
            return '🎶';
          case 'o':
            return '🍩';
          case 'p':
            return '🏀';
          case 'q':
            return '🆔';
          case 'r':
            return '🤖';
          case 's':
            return '💲';
          case 't':
            return '✝️';
          case 'u':
            return '⛑️';
          case 'v':
            return '✌️';
          case 'w':
            return '🌊';
          case 'x':
            return '❌';
          case 'y':
            return '🤔';
          case 'z':
            return '🦓';
        }
      }

// Dot constructor
      class Dot {
        constructor(x, y, letter, color) {
          this.x = x;
          this.y = y;
          this.radius = 25;
          this.letter = letter;
          this.color = color;
          this.xSpeed = Math.random() * 6 - 3;
          this.ySpeed = Math.random() + 1;
        }

// Update dot position
        update() {
          this.x += this.xSpeed;
          this.y += this.ySpeed;
        }

// Draw dot
        draw() {
          context.beginPath();
          context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
          context.fillStyle = this.color;
          context.fill();
          context.fillStyle = '#000000';
          context.font = 'bold 2em Arial';
          context.fillText(this.letter, this.x - 15, this.y + 10);
        }

// Check if dot contains given point
        contains(x, y) {
          const dx = x - this.x;
          const dy = y - this.y;
          return dx * dx + dy * dy <= this.radius * this.radius;
        }
      }

// Start game
      init();
    </script>
  </body>
</html>