search
LoginSignup
3

More than 1 year has passed since last update.

posted at

updated at

ใ€Rubyใ€‘๐ŸกTHE HOUSE OF THE DEAD CODE๐ŸงŸ๐ŸงŸโ€โ™€๏ธ๐ŸงŸโ€โ™‚๏ธ

ใ“ใฎ่จ˜ไบ‹ใฏ ้—‡ใฎ้ญ”่ก“ใซๅฏพใ™ใ‚‹้˜ฒ่ก›่ก“ Advent Calendar 2020 ใฎ24ๆ—ฅ็›ฎใฎ่จ˜ไบ‹ใงใ™ใ€‚

ๆ˜Žๆ—ฅใ€ๆœ€็ต‚ๆ—ฅใฏใ‚ซใƒฌใƒณใƒ€ใƒผใฎไฝœๆˆ่€…ใงใ‚‚ใ‚ใ‚‹ @nfujita55a ใ•ใ‚“ใฎ ใ‚ˆใ็Ÿฅใ‚‰ใชใ„ใ‚ขใƒ—ใƒชใ‚ฑใƒผใ‚ทใƒงใƒณใฎๆ€ง่ƒฝใจๆˆฆใ‚ใชใ„ใจใ„ใ‘ใชใ„ใจใใฎ้˜ฒ่ก›่ก“๏ผˆๅพŒ็ทจ๏ผ‰ ใงใ™๏ผ๏ผ


THE HOUSE OF THE DEAD CODE

ๆจ™็คบใ•ใ‚Œใ‚‹rubyใฎใ‚ณใƒผใƒ‰ใ‹ใ‚‰ใ€ ใƒ‡ใƒƒใƒ‰ใ‚ณใƒผใƒ‰ใจใชใฃใฆใ„ใ‚‹ Am I dead? ้ƒจๅˆ†ใ‚’ใ€ๅˆถ้™ๆ™‚้–“ๅ†…ใซๅ…จใฆใ‚ฏใƒชใƒƒใ‚ฏ ใ—ใฆใใ ใ•ใ„ใ€‚

ใ‚ณใƒผใƒ‰ใฏใ€ruby 2.7.2 ใง ruby ใ‚ณใƒžใƒณใƒ‰ใง่ตทๅ‹• ใ•ใ‚Œใ‚‹ใ‚‚ใฎใจใ—ใพใ™ใ€‚

See the Pen HODCใ€Rubyใ€‘ by j5c8k6m8 (@j5c8k6m8) on CodePen.

็งใฎ็’ฐๅขƒใงใฏCodePenใฎๅŸ‹ใ‚่พผใฟใŒๅ‹•ใใพใ›ใ‚“ใงใ—ใŸใ€‚CodePenใฎๅŸ‹ใ‚่พผใฟใŒๅ‹•ใ‹ใชใ„ๅ ดๅˆใฏใ€ไธ‹่จ˜ใฎใƒชใƒณใ‚ฏใ‹ใ‚‰ๅ‚็…งใ—ใฆใใ ใ•ใ„
https://codepen.io/j5c8k6m8/full/PoGJxmE

ไฝœๆˆ็ตŒ็ทฏใชใฉ

้—‡ใฎ้ญ”่ก“ใซๅฏพใ™ใ‚‹้˜ฒ่ก›่ก“ Advent Calendar 2020 ใฎ๏ผ‘ๆ—ฅ็›ฎใฎ่จ˜ไบ‹ DEAD CODE COOKBOOK ~ใƒ‡ใƒƒใƒ‰ใ‚ณใƒผใƒ‰ใฎไฝœใ‚Šๆ–นใจๅพฉๆดปใฎๅ‘ชๆ–‡~ ใฎ็ดนไป‹ ๅŸท็ญ†ๆ™‚ใซใ€THE HOUSE OF THE DEAD CODE ใจใ„ใ†ใ‚ฟใ‚คใƒˆใƒซใ‚’ๆ€ใ„ไป˜ใ„ใŸใฎใงใ€ๅ‹ขใ„ใง24ๆ—ฅ็›ฎใซใ‚จใƒณใƒˆใƒชใƒผใ—ใพใ—ใŸใ€‚

ๅฝ“ๅˆใฏใ€ๆง˜ใ€…ใชใƒ‡ใƒƒใƒ‰ใ‚ณใƒผใƒ‰ใ‚’ๅซใ‚“ใ ใ‚ณใƒผใƒ‰ใ‚’ๅ˜็ด”ใซๆŽฒ่ผ‰ใ—ใ‚ˆใ†ใจ่€ƒใˆใฆใ„ใพใ—ใŸใŒใ€ The Typing of the Dead ใฎใ‚ˆใ†ใชใ‚ฒใƒผใƒ ่ฆ็ด ใ‚’ๅ…ฅใ‚Œใฆใ‚‚ๆฅฝใ—ใ„ใ‹ใชใƒผ๏ผŸใจๆ€ใ„ใชใŒใ‚‰ใ€ไฝ•ใ‚‚ใ›ใšใซใ€ใ‚ใฃใจใ„ใ†้–“ใซ๏ผ’ๆ—ฅๅ‰ใจใชใฃใฆใ—ใพใ„ใพใ—ใŸ:frowning2:

ใจใซใ‹ใๅฝขใซใ—ใŸใ„๏ผใŸใ ใ€ใ‚ณใƒผใƒ‰ใฎใƒใ‚คใƒฉใ‚คใƒˆใ ใ‘ใฏๆญปๅฎˆใ—ใ‚ˆใ†ใจ่€ƒใˆใ€CDNใงใฎ prism.js ๅˆฉ็”จใ‚’ๅ‰ๆใจใ—ใฆ่€ƒใˆใพใ—ใŸใ€‚

ๆ™‚้–“ใ‚‚ใชใ„ใ—ใ€CDNใ ใ—ใ€ใƒใ‚คใƒฉใ‚คใƒˆๅค‰ๆ›ๅพŒใฎDOMๆ“ไฝœๅฟ…่ฆใ ใ—ใ€ ใ‚ชใƒฏใ‚ณใƒณใฎ jQuery ไฝฟใฃใกใ‚ƒใˆ๏ผใจใ€ใƒฉใ‚คใƒ–ใƒฉใƒชใฏใ‚ทใƒณใƒ—ใƒซใซ prism.js + jQuery ใ ใ‘ใงไฝœใ‚Šใพใ—ใŸใ€‚

็ตๆžœใ€ใ€Œ4ๆ™‚้–“็จ‹ๅบฆใงไฝœใ‚ŒใŸใ—ใ€jsใฏ86่กŒใ ใ—ใ€ใ‚ฏใ‚คใ‚บใจใ—ใฆใ‚‚ๆฅฝใ—ใ„ใ—ใ€ใพใใ€ใ„ใ„ใชใ€‚ๆ–‡ๅญ—ๅˆ—ใซ " ไฝฟใ†่จ€่ชžใชใ‚‰ HTML ๆ›ธใใ ใ‘ใง็ฐกๅ˜ใซๅ•้กŒไฝœใ‚Œใ‚‹ใ‹ใ‚‰ใ€ GitHub ใซๅ…ฅใ‚ŒใฆใŠใใ‹ใ€‚ใ€ใจใ„ใ†้ฉๅฝ“ใ‚ณใƒผใƒ‰ใงใ™ใ€‚

ใ‚ฒใƒผใƒ ้ƒจๅˆ†ใฎใ‚ณใƒผใƒ‰ใ‚’่ฆ‹ใ‚‹
HODC.js
setTimeout(() => {
const pages = {};
let current_page, current_zombies;
let current_id = 0;
const start = i => {
  current_page = i;
  current_id += 1;
  if (pages[i]) {
    $('pre.active').removeClass('active');
    $("#stage-num").html(i);
    $("#stage-time").html(pages[i]['time']);
    current_zombies = pages[i]['zombies'].concat();
    current_num = current_zombies.length;
    $('pre.stage').addClass('active');
    setTimeout(() => {
      $('pre.active').removeClass('active');
      $(`[data-page="${i}"]`).addClass('active');
      const action_id = current_id;
      setTimeout(() => {
        if (action_id === current_id && current_zombies.length > 0) {
          current_id += 1;
          $('pre.active').removeClass('active');
          $('pre.dead').addClass('active');
        }
      }, pages[i]['time'] * 1000);
    }, 1500);
  } else {
    $('pre.active').removeClass('active');
    $('pre.complete').addClass('active');
  }
}
$('[data-page]').each(function() {
  pages[Number($(this).attr('data-page'))] = {
    zombies: $(this).attr('data-zombie').split(',').map( s => `"${s} Am I dead?"`),
    time: Number($(this).attr('data-time')),
  };
  $(this).find('span.token.string').each(function() {
    if (/โญ•"$/.test($(this).html())) {
      $(this).html($(this).html().replace("โญ•", "Am I dead?"))
      $(this).click(function () {
        const action_id = current_id;
        const s = $(this).html();
        if (/Am I dead\?"$/.test(s)) {
          const i = current_zombies.indexOf(s)
          if (i > -1) {
            current_zombies.splice(i, 1);
            const $this = $(this);
            $this.attr('data-org-code', $(this).html());
            $this.html('"๐ŸงŸ"');
            setTimeout(() => {
              if (action_id === current_id) { // 2้€ฑ็›ฎใฎ่€ƒๆ…ฎใฏใ—ใชใ„
                if ($this.html() === '"๐ŸงŸ"') {
                  $this.html('"โ˜ "');
                  setTimeout(() => {
                    if (action_id === current_id) { // 2้€ฑ็›ฎใฎ่€ƒๆ…ฎใฏใ—ใชใ„
                      current_num += -1;
                      if (current_num === 0) {
                        start(current_page + 1);
                      }
                    }
                  }, 400);
                }
              }
            }, 400);
          } else {
            current_id += 1;
            $('pre.active').removeClass('active');
            $('pre.miss').addClass('active');
          }
        }
      });
    }
  });
});
$(".retry").click(function() {
  $('pre.active').removeClass('active');
  $('pre.top').addClass('active');
});
$("#start").click(function() {
  $('[data-org-code]').each(function() {
    $(this).html($(this).attr('data-org-code'))
  });
  start(1)
});
$('pre.top').addClass('active');
}, 1000); // prism.jsใฎใƒžใƒผใ‚ฏใ‚ขใƒƒใƒ—ใ‚’ๅพ…ๅ—
HODC.css
body {
  width :320px;
}
pre {
  display: none;
}
pre.active {
  display: block;
}
.top,.stage,.dead,.miss,.complete {
  text-align: center;
}
button {
  margin-top: 18px;
}
span {
  touch-action: manipulation;
}

ๅ‹•ไฝœไฟ่จผใฏใ—ใพใ›ใ‚“ใŒใ€ไปฅไธ‹ใฎใ‚ˆใ†ใช HTML ใฎใฟใง็ฐกๅ˜ใซๅ•้กŒไฝœใ‚Œใพใ™ใ€‚

ๆœฌๅ•้กŒใฎ HTML ใ‚’่ฆ‹ใ‚‹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HODCใ€Rubyใ€‘</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-twilight.min.css" integrity="sha512-akb4nfKzpmhujLUyollw5waBPeohuVf0Z5+cL+4Ngc4Db+V8szzx6ZTujguFjpmD076W8LImVIbOblmQ+vZMKA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/j5c8k6m8/HODC@v0.0.2/HODC.css"/>
</head>
<body>
<pre class="top" style="padding-top: 20px;">
  <span style="font-size: 24px;">THE</span><span style="font-size: 40px;margin-left: 4px">HOUSE</span><span style="font-size: 32px;margin:10px;">OF</span><span style="font-size: 24px;">THE</span><span style="font-size: 40px;margin-left: 4px;margin-right:18px;">DEAD</span>
  <span style="font-size: 36px;line-height: 40px;">CODE</span>
  <span style="font-size: 24px;line-height: 40px;">ใ€Rubyใ€‘</span>
  <button id="start" type="button">START ๐Ÿก</button>
  <span style="font-size: 18px;line-height: 60px;"> ้Šใณๆ–น: DEAD CODEใ‚’ใ‚ฏใƒชใƒƒใ‚ฏใ—ใ‚ˆใ† </span>
</pre>
<pre class="stage" style="font-size: 24px; padding-top: 80px;">
  ROOM <span id="stage-num"></span>
  (ๅˆถ้™ๆ™‚้–“ <span id="stage-time"></span> ็ง’)
</pre>
<pre class="complete" style="padding-top: 80px;">
  <span style="font-size:30px;">๐ŸŽ‰ Congratulations! ๐ŸŽ‰</span>
  <button class="retry" type="button">ใƒชใƒˆใƒฉใ‚ค</button>
</pre>
<pre class="dead" style="padding-top: 80px;">
  <span style="font-size:30px;">๐ŸงŸ Time Out! ๐ŸงŸ</span>
  <button class="retry" type="button">ใƒชใƒˆใƒฉใ‚ค</button>
</pre>
<pre class="miss" style="padding-top: 80px;">
  <span style="font-size:30px;">๐Ÿ‘ฎ Miss Shot! ๐Ÿ‘ฎ</span>
  <button class="retry" type="button">ใƒชใƒˆใƒฉใ‚ค</button>
</pre>
<pre data-page="1", data-zombie="๐Ÿ™๐Ÿพโ€โ™‚๏ธ" data-time="5">
  <code class="language-rb">
puts "๐Ÿ™Žโ€โ™‚๏ธ โญ•"
return
puts "๐Ÿ™๐Ÿพโ€โ™‚๏ธ โญ•"
  </code>
</pre>
<pre data-page="2", data-zombie="๐Ÿ™…๐Ÿฝโ€โ™‚๏ธ" data-time="10">
  <code class="language-rb">
3.times do |i|
  case i
  when 1,2 then
    puts "๐Ÿ’๐Ÿผโ€โ™€๏ธ โญ•"
  when 3 then
    puts "๐Ÿ™…๐Ÿฝโ€โ™‚๏ธ โญ•"
  else
    puts "๐Ÿคฆ๐Ÿฝ โญ•"
  end
end
  </code>
</pre>
<pre data-page="3", data-zombie="๐Ÿคท๐Ÿฝโ€โ™€๏ธ,๐Ÿ™๐Ÿปโ€โ™‚๏ธ" data-time="10">
  <code class="language-rb">
def add a, b
  puts "๐Ÿคท๐Ÿฝโ€โ™€๏ธ โญ•"
  return a + b
  puts "๐Ÿ™๐Ÿปโ€โ™‚๏ธ โญ•"
end

puts 3 + 5
puts "๐Ÿ™…๐Ÿฝโ€โ™‚๏ธ โญ•"
  </code>
</pre>
<pre data-page="4", data-zombie="๐Ÿ‘จ๐Ÿผโ€๐ŸŽ“" data-time="10">
  <code class="language-rb">
3.times do |i|
  if i % 2 == 0
    unless i % 3 == 0
      puts "๐Ÿ‘ฉ๐Ÿพโ€๐ŸŒพ โญ•"
    end
    if i % 3 == 1
      puts "๐Ÿ‘จ๐Ÿผโ€๐ŸŽ“ โญ•"
    end
  end
end
  </code>
</pre>
<pre data-page="5", data-zombie="๐Ÿ‘จ๐Ÿฝโ€๐Ÿญ,๐Ÿ‘จ๐Ÿปโ€๐Ÿซ" data-time="10">
  <code class="language-rb">
if false
  puts "๐Ÿ‘จ๐Ÿฝโ€๐Ÿญ โญ•"
end
if 0
  puts "๐Ÿ‘จ๐Ÿฟโ€๐Ÿš€ โญ•"
end
if ""
  puts "๐Ÿ‘จโ€๐Ÿณ โญ•"
end
if nil
  puts "๐Ÿ‘จ๐Ÿปโ€๐Ÿซ โญ•"
end
  </code>
</pre>
<pre data-page="6", data-zombie="๐Ÿ‘ฉโ€๐Ÿ‘ฉโ€๐Ÿ‘ง,๐Ÿ‘ฉ๐Ÿพโ€๐Ÿคโ€๐Ÿ‘จ๐Ÿป,๐Ÿ‘ฉโ€๐Ÿ‘ฆ,๐Ÿ‘ฉ๐Ÿผโ€๐Ÿคโ€๐Ÿ‘จ๐Ÿฟ" data-time="20">
  <code class="language-rb">
while true do
  puts "๐Ÿ‘จโ€๐Ÿ‘จโ€๐Ÿ‘ฆ โญ•"
  for num in 1..3 do
    puts "๐Ÿ‘ฉ๐Ÿผโ€๐Ÿคโ€๐Ÿ‘จ๐Ÿป โญ•"
      until false do
        puts "๐Ÿ‘จ๐Ÿฟโ€๐Ÿคโ€๐Ÿ‘จ๐Ÿผ โญ•"
      end
      puts "๐Ÿ‘ฉโ€๐Ÿ‘ฉโ€๐Ÿ‘ง โญ•"
    continue
    puts "๐Ÿ‘ฉ๐Ÿพโ€๐Ÿคโ€๐Ÿ‘จ๐Ÿป โญ•"
  end
puts "๐Ÿ‘ฉโ€๐Ÿ‘ฆ โญ•"
end
puts "๐Ÿ‘ฉ๐Ÿผโ€๐Ÿคโ€๐Ÿ‘จ๐Ÿฟ โญ•"
  </code>
</pre>
<pre data-page="7", data-zombie="๐Ÿง˜๐Ÿผโ€โ™‚๏ธ,๐ŸŒ๐Ÿฝโ€โ™€๏ธ,๐Ÿ‹" data-time="15">
  <code class="language-rb">
def a
  puts "๐Ÿคธ๐Ÿพ โญ•"
  b
  c
  puts "๐Ÿง˜๐Ÿผโ€โ™‚๏ธ โญ•"
end
def b
  puts "๐Ÿคพ๐Ÿปโ€โ™‚๏ธ โญ•"
  c
  puts "๐Ÿคน๐Ÿผโ€โ™‚๏ธ โญ•"
  a
  puts "๐ŸŒ๐Ÿฝโ€โ™€๏ธ โญ•"
end
def c
  puts "๐Ÿ‹๐Ÿพ โญ•"
end
a
puts "๐Ÿ‹ โญ•"
  </code>
</pre>
<pre data-page="8", data-zombie="๐Ÿฆน๐Ÿฟโ€โ™€๏ธ,๐Ÿง๐Ÿฝ" data-time="10">
  <code class="language-rb">
def a
  puts "๐Ÿฆธ๐Ÿปโ€โ™‚๏ธ โญ•"
  yield
  puts "๐Ÿง™๐Ÿผโ€โ™€๏ธ โญ•"
end
def b
  puts "๐Ÿฆน๐Ÿฝโ€โ™‚๏ธ โญ•"
  yield
  puts "๐Ÿฆน๐Ÿฟโ€โ™€๏ธ โญ•"
end

a do
  puts "๐Ÿง™๐Ÿผโ€โ™‚๏ธ โญ•"
end
b do
  puts "๐Ÿฆธ๐Ÿฟ โญ•"
  break
  puts "๐Ÿง๐Ÿฝ โญ•"
end
  </code>
</pre>
<pre data-page="9", data-zombie="๐Ÿด,๐Ÿ–,๐Ÿซ" data-time="30">
  <code class="language-rb">
puts [*1..3].filter{ |x|
  puts "๐Ÿ• โญ•"
  x % 2 == 1
}.filter{ |x|
  puts "๐Ÿˆ โญ•"
  x % 3 == 2
}.filter{ |x|
  puts "๐Ÿด โญ•"
  x % 4 == 3
}.any? { |x|
  puts "๐Ÿ– โญ•"
  x % 4 == 3
}&.tap {
  puts "๐Ÿ โญ•"
} ? "๐Ÿซ โญ•"
  : "๐Ÿ˜ โญ•"
  </code>
</pre>
<pre data-page="10", data-zombie="๐Ÿฆธ๐Ÿฝ" data-time="6">
  <code class="language-rb">
def raise
  puts "๐Ÿ‘จโ€๐Ÿ’ป โญ•"
end

begin
  puts "๐Ÿ… โญ•"
  raise
  puts "๐Ÿ™‡ โญ•"
rescue RuntimeError
  puts "๐Ÿฆธ๐Ÿฝ โญ•"
end
  </code>
</pre>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/components/prism-core.min.js" integrity="sha512-hqRrGU7ys5tkcqxx5FIZTBb7PkO2o3mU6U5+qB9b55kgMlBUT4J2wPwQfMCxeJW1fC8pBxuatxoH//z0FInhrA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-Q3qGP1uJL/B0sEmu57PKXjCirgPKMbg73OLRbTJ6lfHCVU5zkHqmcTI5EV2fSoPV1MHdKsCBE7m/aS6q0pPjRQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/j5c8k6m8/HODC@v0.0.2/HODC.js"></script>
</body>
</html>

ใƒ‡ใƒƒใƒ‰ใ‚ณใƒผใƒ‰ใ‚’ๅˆถ้™ๆ™‚้–“ๅ†…ใซ่ฆ‹ใคใ‘ใ‚‹ใ‚ฒใƒผใƒ ใฃใฆใ€ใƒ—ใƒญใ‚ฐใƒฉใƒŸใƒณใ‚ฐๆ•™่‚ฒใŒๆฑ‚ใ‚ใ‚‰ใ‚Œใฆใ„ใ‚‹ไปŠใ€ใƒใƒ†ใƒณใ‚ทใƒฃใƒซใŒใ‚ใ‚Šใใ†ใ ใ‹ใ‚‰ใ€SEGAใ•ใ‚“ ่ชฐใ‹ใŒใกใ‚ƒใ‚“ใจใ—ใŸใฎใ‚’ไฝœใฃใฆใใ‚Œใชใ„ใ‹ใชใƒผใ€‚ไป–ไบบไปปใ›

ใŠใ‚ใ‚Šใซ

ๅฎŸใฏใ€ใ‚ขใƒ‰ใƒ™ใƒณใƒˆใ‚ซใƒฌใƒณใƒ€ใƒผๆœŸ้–“ใฏๆฏŽๆ—ฅ ใƒ‡ใƒƒใƒ‰ใ‚ณใƒผใƒ‰ใ‚ฏใƒƒใ‚ฏใƒ–ใƒƒใ‚ฏ ใ‚’ๆ›ดๆ–ฐใ™ใ‚‹ไบˆๅฎšใงใ—ใŸใŒใ€้€”ไธญใงๆŒซๆŠ˜ใ—ใพใ—ใŸใ€‚(ไปŠๅพŒใ€็ถ™็ถš็š„ใซๆ›ดๆ–ฐใ—ใฆใ„ใไบˆๅฎšใงใ™ใ€‚ใ€‚)
้—‡ใฎ้ญ”่ก“ใซๅฏพใ™ใ‚‹้˜ฒ่ก›่ก“ Advent Calendar 2020ใซใฏ็ตๅฑ€6ๅ€‹ใฎใƒใ‚จใƒ ใ‚’ๆ›ธใ„ใŸ

ใใ‚ˆใใ‚ˆใ—ใฆใ‚‚ไป•ๆ–นใŒใชใ„ใฎใงใ€ ruby3.0ใจใ„ใ†ใ‚ฏใƒชใ‚นใƒžใ‚นใƒ—ใƒฌใ‚ผใƒณใƒˆ ใŒใ‚‚ใ‚‰ใˆใ‚‹ๆ˜Žๆ—ฅใ‚’ๆฅฝใ—ใฟใซๅพ…ใค๏ผ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3