document.title = 'チョコレートクリッカー クッキークリッカー風放置ゲーム';

let texts = [
  'Lets Chocolate Cliker!',
  'チョコレートクリッカー',
  'クッキーよりチョコがすき',
  '2/14 バレンタインデーの準備をしよう',
  '3/14 ホワイトデーもチョコでおかえし',
  '量より質で♪いろんなチョコをつくろう',
  'これは数字をインフレさせるゲーム…ではない',
  'いっぱいクリック',
  'チョコの種類の名前を調べよう',
  '「チョコレート工場の秘密」はいいぞ',
  'ハートチョコをいくつあつめられる？',
  'チョコください',
  'あなたのハートがほしい',
  '金のエンゼルがほしい',
  'トッポってすごいよな',
  '甘くて幸せ♪',
  '生チョコは至高',
  'きみはどのチョコがすき？',
  '明治と森永とロッテ、どっちがすき？',
  'きのこvsたけのこ戦争勃発',
  'チョコを食べるたびに5セントもらっていたら今頃大金持ちだぜ！',
  'そんなにやりこむとは思ってないのでショップ上限低めです',
  'ショップの価格や生産バランスは随時更新調整します',
  '別タブ開いてるとクリック動作しないようにしてます',
  '主原料はカカオの種子を発酵又は焙煎したカカオマス',
  '砂糖、ココアバター、粉乳などを混ぜて練り固めた菓子',
  'カカオは16世紀にスペイン人によってヨーロッパへと紹介された',
  '1847年にイギリスのジョセフ・フライが固形チョコレートを発明',
  '日本は年間 233,880 t のチョコレートを生産',
  '日本のチョコレート消費量は年間 2.1 kg',
  '『クッキークリッカー』（Cookie Clicker）は、2013年8月8日に公開された',
  '画面に現れるクッキーを1回クリックするごとに1枚クッキーを焼くことができる',
  'カカオポリフェノールに期待される3つの効果は、「血圧低下」、「動脈硬化予防」、「老化防止」',
  'カカオ原産地であるメソアメリカでは紀元前1900年頃から利用されている',
  'フォラステロ種 Forasteroは南米原産の栽培種',
  '日本のチョコはガーナ産が多い',
  'カカオバターの結晶にはI型からVI型までの6種類の型がある',
  'チョコレートの保存は、15℃ - 17℃、湿度50%以下が好まし',
  '徳川昭武は、慶應4年（1868年）8月3日、「朝8時、ココアを喫んだ後、海軍工廠を訪ねる」と日記に記す',



];


let w = window.innerWidth;
let h = window.innerHeight;

document.oncontextmenu = function () {return false;}

$(function(){
  var count = Number(localStorage.getItem('choco-count')) || 99;
  let time = 0;
  let $count = $('<count>');
  let $serif = $('<serif>');
  let $items = $('<items>');
  let $amazon = $('<amazon>');

  let $demo = $('#demo');
  let timer;
  $demo
    .append($count)
    .append($serif)
    .append($amazon)
    .append($items);
  $count.text(count);

  $amazonLink = $('<a>',{href:'https://www.amazon.co.jp/dp/B00AE3TUJA/?tag=hi0a0a-22',target:'_blank'});
  $amazonImg = $('<img>',{src:'choco-set.png'});
  
  $amazon
    .append($amazonLink);
  $amazonLink
    .append($amazonImg);

  function updateCount(c=1, type){
    count += c;
    $count.text(count);
    if(c>0){
      addEffect(c,type);
    }
    if(count>10000){
      $count.css({fontSize:'100px'});
    }
    if(count>10000*100){
      $count.css({fontSize:'60px'});
    }
    if(h>w){
      $count.css({fontSize:'14px'});
    }
    localStorage.setItem('choco-count', count);
  }
  function addEffect(c=0, type){
    let $effect = $('<effect>');
    if(type){
      src = type +'.png';
    } else {
      src = 'choco.png';
    }
    let $img = $('<img>',{src:src});
    let top = Math.random()*50 - 10;
    let left = Math.random()*80 + 10;
    $effect.css({left:left+'%', top:top+'px'});
    $effect.append($img);
    $demo.append($effect);
    setTimeout(function(){
      $effect.remove();
    }, 8*1000);
  }


  let items = [
    {
      name:'clicker',
      text:'クリッカー',
      price:10,
      pace:10,
      plus:1,
      num:1,
    },
    {
      name:'choco-hitokuchi',
      text:'ひとくちチョコ',
      price:50,
      pace:5,
      plus:1,
      num:0,
    },
    {
      name:'choco-ita',
      text:'板チョコ',
      price:100,
      pace:3,
      plus:1,
      num:0,
    },
    {
      name:'type2',
      text:'ひとくちチョコ2',
      price:200,
      pace:11,
      plus:5,
      num:0,
      type:'type2',
    },
    {
      name:'type3',
      text:'ひとくちチョコ3',
      price:300,
      pace:13,
      plus:5,
      num:0,
      type:'type3',
    },
    {
      name:'type4',
      text:'ひとくちチョコ4',
      price:400,
      pace:17,
      plus:10,
      num:0,
      type:'type4',
    },
    {
      name:'type5',
      text:'ひとくちチョコ5',
      price:500,
      pace:21,
      plus:10,
      num:0,
      type:'type5',
    },
    {
      name:'type6',
      text:'ひとくちチョコ6',
      price:600,
      pace:22,
      plus:10,
      num:0,
      type:'type6',
    },
    {
      name:'type7',
      text:'ひとくちチョコ7',
      price:700,
      pace:23,
      plus:10,
      num:0,
      type:'type7',
    },
    {
      name:'type8',
      text:'ひとくちチョコ8',
      price:800,
      pace:24,
      plus:11,
      num:0,
      type:'type8',
    },
    {
      name:'type9',
      text:'ひとくちチョコ9',
      price:900,
      pace:25,
      plus:14,
      num:0,
      type:'type9',
    },

    {
      name:'choco-tirol',
      text:'チロルチョコ',
      price:1000,
      pace:10,
      plus:2,
      num:0,
      type:'choco-tirol',
    },
    {
      name:'choco-pocky',
      text:'ポッキーチョコ',
      price:1111,
      pace:11,
      plus:1,
      num:0,
      type:'choco-pocky',
    },
    {
      name:'choco-alfort',
      text:'アルフォート',
      price:2222,
      pace:22,
      plus:2,
      num:0,
      type:'choco-alfort',
    },
    {
      name:'choco-blackthunder',
      text:'ブラックサンダー',
      price:3333,
      pace:33,
      plus:3,
      num:0,
      type:'choco-blackthunder',
    },
    {
      name:'choco-kitkat',
      text:'キットカット',
      price:4444,
      pace:44,
      plus:4,
      num:0,
      type:'choco-kitkat',
    },
    {
      name:'choco-kinoko',
      text:'きのこの山',
      price:5555,
      pace:55,
      plus:5,
      num:0,
      type:'choco-kinoko',
    },
    {
      name:'choco-takenoko',
      text:'たけのこの里',
      price:5555,
      pace:55,
      plus:5,
      num:0,
      type:'choco-takenoko',
    },
    {
      name:'choco-apollo',
      text:'アポロチョコ',
      price:6666,
      pace:66,
      plus:6,
      num:0,
      type:'choco-apollo',
    },
    {
      name:'choco-painomi',
      text:'パイの実チョコ',
      price:8888,
      pace:88,
      plus:8,
      num:0,
      type:'choco-painomi',
    },
    {
      name:'choco-mugi',
      text:'麦チョコ',
      price:1000*10,
      pace:9,
      plus:10,
      num:0,
    },
    {
      name:'choco-marble',
      text:'マーブルチョコ',
      price:5000*10,
      pace:7,
      plus:10,
      num:0,
    },
    {
      name:'choco-almond',
      text:'アーモンドチョコ',
      price:1000*100,
      pace:77,
      plus:100,
      num:0,
    },
    {
      name:'choco-splay',
      text:'チョコスプレー',
      price:1000*1000,
      pace:66,
      plus:100,
      num:0,
    },
    {
      name:'choco-raisins',
      text:'チョコレーズン',
      price:1000*1000*10,
      pace:55,
      plus:100,
      num:0,
    },
    {
      name:'choco-heart',
      text:'ハートチョコ',
      price:777777,
      pace:777,
      plus:7,
      num:0,
      type:'choco-heart',
    },
    {
      name:'plant',
      text:'チョコレート工場',
      price:1000*1000*1000,
      pace:10,
      plus:100,
      num:0,
    },
  ];

  function setTimer(){
    timer = setInterval(function(){
      //console.log(time);
      items.forEach(function(v){
        if(time % v.pace === 0 && time > 1){
          updateCount(v.plus * v.num, v.type);
        }

        if(v.num > 0){
          v.ele.css({opacity:1,display:'block'});
          v.ele.addClass('active');
          v.ele.find('num').removeClass('disable');
        } else if(count < v.price /1000 || count - v.price < -100){
          v.ele.css({display:'none'});
        } else if(count < v.price/100){
          v.ele.css({opacity:0.1,display:'block'});
        } else if(count < v.price/10){
          v.ele.css({opacity:0.2,display:'block'});
        } else if(count < v.price){
          v.ele.css({opacity:0.5,display:'block'});
        } else {
          v.ele.css({opacity:1,display:'block'});
        }
      });

      if(time % 120 === 0){
        let r = Math.floor(Math.random()*texts.length);
        $serif.text(texts[r]);
      }
      time++;
    },1*1000);
  }

  items.forEach(function(v){
    let title = '説明:' +v.text+'::'+v.pace + '秒に' + v.plus + '個' + 'チョコレートを生産';
    let $i = $('<item>',{title:title});
    v.num = Number(localStorage.getItem('choco-item'+v.name)) || v.num;
    $items.append($i);
    let $img = $('<img>',{src:v.name+'.png'});
    let $price = $('<price>',{title:'価格'}).text(v.price);
    let $num = $('<num>',{title:'売る'}).text(v.num).addClass('disable');
    $i.append($img).append($price).append($num);
    v.ele = $i;
    if(v.num < 1){
      v.ele.css({display:'none'});
    }
    $img.on('click', function(){
      if(count<v.price){return;}
      addEffect(0,v.type);
      if(v.num>98){return;}
      updateCount(-v.price, v.type);
      v.num++;
      console.log(v);
      $(this).parent().find('num').text(v.num);
      localStorage.setItem('choco-item'+v.name, v.num);
    });
    $num.on('click', function(){
      if(v.num<1){return;}
      v.num--;
      console.log(v);
      updateCount(v.price);
      $(this).parent().find('num').text(v.num);
      localStorage.setItem('choco-item'+v.name, v.num);
    });
  });
  $count.on('click', function(){
    updateCount(1);
  });
  setTimer();


  let $sentence = $('<div>');
  $demo.after($sentence);
  texts.forEach(function(v){
    let $p = $('<p>').text(v);
    $sentence.append($p);
  });

  document.addEventListener( 'visibilitychange', () => {
    if ( document.visibilityState === 'hidden' ) {
      clearInterval(timer);
      document.title = '■' + document.title;
    } else {
      setTimer();
      document.title = document.title.replace(/■/,'');
    }
  }, false );
  
})

html,body{
  overflow:hidden;
}

::-webkit-scrollbar{
   width: 2px;
}
::-webkit-scrollbar-track{
   background-color: #56331D;
}
::-webkit-scrollbar-thumb{
   background-color: #472404;
}

#demo{
  user-select:none;
  background-image:url(choco.png);
  background-size:5%;
  position:relative;
  top:0;
  left:0;
}

count{
  display:block;
  width:calc(100% - 120px);
  font-size:120px;
  height:100vh;
  line-height:100vh;
  text-align:center;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
}

serif{
  position:absolute;
  top:0;
  left:0px;
  background-color:#000;
  color:#fff;
  padding:2px 24px;
}
amazon{
  position:absolute;
  top:20px;
  left:0;
}

items{
  position:absolute;
  top:0;
  right:0;
  z-index:9;
  font-size:16px;
  height:100vh;
  text-align:center;
  overflow-y:scroll;
  overflow-x:hidden;
}
items *{
  display:block;
  box-sizing:border-box;
}
item{
  width:120px;
  height:60px;
  border:1px solid #000;
  background-color:#fff;
  cursor:pointer;
  position:relative;
  top:0;
  left:0;
}
item img{
  position:absolute;
  top:0;
  left:0;
  height:60px;
}
item price{
  position:absolute;
  top:0;
  right:0;
}
item num{
  position:absolute;
  bottom:0;
  right:0;
}

item.active img{
  animation-name: imgAnime;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-timing-function:ease;
  animation-delay: 0.5s;
  animation-direction:normal;
}

@keyframes imgAnime{
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.2);
  }
}

item num:hover{
  color:#0f0;
}
item price:before{
  display:inline;
  content:"$";
}
item num{
  font-weight:bold;
}
item num:before{
  display:inline;
  content:"x";
}
item num.disable{
  font-weight:normal;
  opacity:.5;
}


effect {
  position: absolute;
  left: 45%;
  top:0;
  transform: translateY(-500%);
  animation: effectAnime 2s linear 1;
}
effect img{
  width:80px;
}

/* animation */
@keyframes effectAnime {
  0% {
    transform: translateY(-100px) rotate(0);
  }
  100% {
    transform: translateY(800px) rotate(720deg);
  }
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-game-cookie-clicker-chocolate/