Rakuten Cardman Games's game

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

No:3133

2102

←

Prev Next

→

Rakuten Cardman Games
Developer User3660｜Date and time 23/6/23 23:11:09
Build time 38.229 sec｜Game capacity 3.648KB｜

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>楽天カードマンのゲーム</title>
  <style>
    canvas {
      display: block;
      margin: auto;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

// 画面サイズ設定
    const canvasWidth = window.innerWidth * 0.9;
    const canvasHeight = window.innerHeight * 0.9;
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

// カード（絵文字）の定義
    const cardList = [
      '🎂', '🎉', '🐕', '🐱', '🐻', '🌸', '🍎', '🚀', '🎸', '💻'
    ];

const deck = [];

// カードをランダムにシャッフル
    function shuffle(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }

// カードを作成し、画面に描画もする
    function createDeck() {
      for (let i = 0; i < cardList.length; i++) {
        for (let j = 0; j < 2; j++) {
          const card = {
            text: cardList[i],
            isFlipped: false
          };
          deck.push(card);
          // カードを描画
          const x = 100 + (i % 5) * 100;
          const y = 100 + Math.floor(i / 5) * 100;
          if (j === 1) {
            ctx.fillStyle = 'lightgray';
            ctx.fillRect(x, y, 80, 80);
          } else {
            ctx.font = '50px serif';
            ctx.fillText(card.text, x + 20, y + 60);
          }
        }
      }
      shuffle(deck);
    }

// ゲームの状態
    let state = {
      isClickable: true, // クリック可能かどうか
      selectedCard: null // 選択中のカード
    };

// カードをクリックした時の処理
    function onClick(e) {
      if (!state.isClickable) return;
      const rect = e.target.getBoundingClientRect();
      const mouseX = e.clientX - rect.left;
      const mouseY = e.clientY - rect.top;
      const selectedIndex = Math.floor(mouseX / 100) + Math.floor(mouseY / 100) * 5;
      const selectedCard = deck[selectedIndex];
      if (selectedCard.isFlipped) return;
      selectedCard.isFlipped = true;
      drawCards();
      if (state.selectedCard === null) {
        state.selectedCard = selectedCard;
      } else {
        state.isClickable = false;
        setTimeout(() => {
          if (state.selectedCard.text === selectedCard.text) {
            state.selectedCard = null;
            state.isClickable = true;
            if (deck.every(card => card.isFlipped)) {
              alert('クリア！');
            }
          } else {
            state.selectedCard.isFlipped = false;
            selectedCard.isFlipped = false;
            state.selectedCard = null;
            state.isClickable = true;
          }
          drawCards();
        }, 1000);
      }
    }

// カードを描画
    function drawCards() {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      for (let i = 0; i < deck.length; i++) {
        const card = deck[i];
        ctx.fillStyle = card.isFlipped ? 'white' : 'lightgray';
        const x = 100 + (i % 5) * 100;
        const y = 100 + Math.floor(i / 5) * 100;
        ctx.fillRect(x, y, 80, 80);
        if (card.isFlipped) {
          ctx.font = '50px serif';
          ctx.fillText(card.text, x + 20, y + 60);
        }
      }
    }

createDeck();
    drawCards();
    canvas.addEventListener('click', onClick);
  </script>
</body>
</html>