コードクライム — プログラミング体験教材

📖 まなぶこと

🚩 ミッション

💡 ヒントを見る

✅ 答えの例を見る

✍️ エディタ — コードを書きかえてみよう

🖥 プレビュー — 実行結果

<h1>⏱ 10秒チャレンジ！</h1>
<p>10秒ぴったりで止められるかな？</p>
<p id="display" style="font-size: 52px; font-family: monospace; margin: 8px 0;">0.0 秒</p>
<p id="judge" style="font-size: 20px; font-weight: bold;"></p>
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>

document.getElementById("start").addEventListener("click", function() {
  if (timer !== null) return;
  document.getElementById("judge").textContent = "";
  timer = setInterval(function() {
    time = time + 0.1;
    display.textContent = time.toFixed(1) + " 秒";
  }, 100);
});

document.getElementById("stop").addEventListener("click", function() {
  if (timer === null) return;
  clearInterval(timer);
  timer = null;
  const diff = Math.abs(time - 10);
  let comment = "10秒との差： " + diff.toFixed(1) + " 秒";
  if (diff < 0.2) comment = comment + " 🎯 神ワザ！！";
  document.getElementById("judge").textContent = comment;
});

document.getElementById("reset").addEventListener("click", function() {
  clearInterval(timer);
  timer = null;
  time = 0;
  display.textContent = "0.0 秒";
  document.getElementById("judge").textContent = "";
});
</script>

<h1>🕹 ボールキャッチゲーム</h1>
<p>マウスでバーを動かして、ボールを落とさないようにしよう！</p>
<canvas id="game" width="360" height="420" style="background-color: #0f1e33; border-radius: 12px;"></canvas>
<p id="score" style="font-size: 24px;">スコア: 0</p>

const ball = { x: 180, y: 80, dx: 3, dy: 3, r: 10 };
const paddle = { x: 140, y: 396, w: 80, h: 12 };
let score = 0;
let playing = true;

canvas.addEventListener("mousemove", function(e) {
  const rect = canvas.getBoundingClientRect();
  paddle.x = e.clientX - rect.left - paddle.w / 2;
});

function update() {
  ball.x += ball.dx;
  ball.y += ball.dy;

// かべで反射
  if (ball.x < ball.r || ball.x > canvas.width - ball.r) ball.dx = -ball.dx;
  if (ball.y < ball.r) ball.dy = -ball.dy;

// バーでキャッチ
  const hitX = ball.x > paddle.x && ball.x < paddle.x + paddle.w;
  if (ball.dy > 0 && hitX && ball.y > paddle.y - ball.r && ball.y < paddle.y + paddle.h) {
    ball.dy = -ball.dy;
    score++;
    document.getElementById("score").textContent = "スコア: " + score;
  }

// 落としたらゲームオーバー
  if (ball.y > canvas.height + ball.r) playing = false;
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "gold";
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = "deepskyblue";
  ctx.fillRect(paddle.x, paddle.y, paddle.w, paddle.h);

if (!playing) {
    ctx.fillStyle = "white";
    ctx.font = "bold 32px sans-serif";
    ctx.textAlign = "center";
    ctx.fillText("ゲームオーバー", 180, 200);
  }
}

function loop() {
  if (playing) update();
  draw();
  requestAnimationFrame(loop);   // 1秒間に約60回よばれる
}
loop();
</script>

<h1>🕹 ボールキャッチゲーム</h1>
<p>マウスでバーを動かして、ボールを落とさないようにしよう！5点ごとにスピードアップ！</p>
<canvas id="game" width="360" height="420" style="background-color: #0f1e33; border-radius: 12px;"></canvas>
<p id="score" style="font-size: 24px;">スコア: 0</p>

const ball = { x: 180, y: 80, dx: 3, dy: 3, r: 10 };
const paddle = { x: 140, y: 396, w: 80, h: 12 };
let score = 0;
let playing = true;

canvas.addEventListener("mousemove", function(e) {
  const rect = canvas.getBoundingClientRect();
  paddle.x = e.clientX - rect.left - paddle.w / 2;
});

function update() {
  ball.x += ball.dx;
  ball.y += ball.dy;

if (ball.x < ball.r || ball.x > canvas.width - ball.r) ball.dx = -ball.dx;
  if (ball.y < ball.r) ball.dy = -ball.dy;

const hitX = ball.x > paddle.x && ball.x < paddle.x + paddle.w;
  if (ball.dy > 0 && hitX && ball.y > paddle.y - ball.r && ball.y < paddle.y + paddle.h) {
    ball.dy = -ball.dy;
    score++;
    // ミッション：5点ごとにスピードアップ！
    if (score % 5 === 0) {
      ball.dx = ball.dx * 1.2;
      ball.dy = ball.dy * 1.2;
    }
    document.getElementById("score").textContent = "スコア: " + score;
  }

if (ball.y > canvas.height + ball.r) playing = false;
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "gold";
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = "deepskyblue";
  ctx.fillRect(paddle.x, paddle.y, paddle.w, paddle.h);

if (!playing) {
    ctx.fillStyle = "white";
    ctx.font = "bold 32px sans-serif";
    ctx.textAlign = "center";
    ctx.fillText("ゲームオーバー", 180, 200);
    ctx.font = "16px sans-serif";
    ctx.fillText("クリックでリスタート", 180, 236);
  }
}

canvas.addEventListener("click", function() {
  if (playing) return;
  ball.x = 180; ball.y = 80; ball.dx = 3; ball.dy = 3;
  score = 0;
  document.getElementById("score").textContent = "スコア: 0";
  playing = true;
});

function loop() {
  if (playing) update();
  draw();
  requestAnimationFrame(loop);
}
loop();
</script>

<h1>⚔ モンスターバトル</h1>
<div id="log" style="font-family: monospace; line-height: 1.9;"></div>

attack(target) {
    target.hp -= this.attackPower;
    print(this.name + " のこうげき！ " + target.name + " に " + this.attackPower + " ダメージ（残りHP " + Math.max(0, target.hp) + "）");
    this.checkWin(target);
  }

// ミッション：一度だけ使える必殺技
  special(target) {
    if (this.specialUsed) {
      print(this.name + " の必殺技はもう使えない…");
      return;
    }
    this.specialUsed = true;
    const damage = this.attackPower * 3;
    target.hp -= damage;
    print("✨ " + this.name + " の必殺技！！ " + target.name + " に " + damage + " の大ダメージ！（残りHP " + Math.max(0, target.hp) + "）");
    this.checkWin(target);
  }

checkWin(target) {
    if (target.hp <= 0) {
      print("💥 " + target.name + " はたおれた… " + this.name + " の勝ち！🏆");
    }
  }

isAlive() {
    return this.hp > 0;
  }
}

function print(text) {
  const p = document.createElement("p");
  p.textContent = text;
  document.getElementById("log").appendChild(p);
}

const slime = new Monster("スライム", 40, 8);
const dragon = new Monster("ドラゴン", 45, 12);

slime.special(dragon);   // 開幕必殺技！
while (slime.isAlive() && dragon.isAlive()) {
  slime.attack(dragon);
  if (dragon.isAlive()) {
    dragon.attack(slime);
  }
}
</script>

<div class="card">
  <h1>🚀 ミライのプログラマー</h1>
  <p>オープンキャンパスでプログラミングを体験中。<br>将来の夢はゲームクリエイター！</p>
  <p>
    <span class="skill">HTML</span>
    <span class="skill">CSS</span>
    <span class="skill">JavaScript</span>
  </p>
  <button id="theme">🌙 ダークモード</button>
  <button id="like">👍 いいね <span id="num">0</span></button>
</div>

document.getElementById("theme").addEventListener("click", function() {
  document.body.classList.toggle("dark");
});
</script>

<div class="card">
  <h1>🚀 ミライのプログラマー</h1>
  <p>オープンキャンパスでプログラミングを体験中。<br>将来の夢はゲームクリエイター！</p>
  <p>
    <span class="skill">HTML</span>
    <span class="skill">CSS</span>
    <span class="skill">JavaScript</span>
  </p>
  <button id="theme">🌙 ダークモード</button>
  <button id="like">👍 いいね <span id="num">0</span></button>
</div>

<div class="card">
  <h2>🏆 今日つくった作品</h2>
  <ol>
    <li>カウンター</li>
    <li>おみくじ</li>
    <li>10秒チャレンジ</li>
    <li>やることリスト</li>
    <li>ボールキャッチゲーム</li>
  </ol>
  <p><strong>ぜんぶ自分の手で動かした！</strong></p>
</div>

document.getElementById("theme").addEventListener("click", function() {
  document.body.classList.toggle("dark");
});
</script>