龜兔賽跑副本 | 程式專案

{"id":79160,"student_id":253,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003e龜兔賽跑\u003c/title\u003e\\n\\t\\t\u003cscript\\n  src=\\\"https://code.jquery.com/jquery-3.4.1.slim.min.js\\\"\\n  integrity=\\\"sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=\\\"\\n  crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003ch1\u003e龜兔賽跑\u003c/h1\u003e\\n    \u003cdiv id=\\\"result\\\"\u003e究竟誰能勝出呢？\u003c/div\u003e\\n    預測能力：\u003cdiv id=\\\"score\\\"\u003e0\u003c/div\u003e\\n    \u003cbutton class=\\\"btn turtle-btn\\\"\u003e🐢 烏龜會獲勝\u003c/button\u003e\\n    \u003cbutton class=\\\"btn rabbit-btn\\\"\u003e🐇 兔子會獲勝\u003c/button\u003e\\n    \u003chr\u003e\\n    \u003cdiv id=\\\"turtle\\\"\u003e🐢\u003c/div\u003e\\n    \u003cbr\u003e\\n    \u003cdiv id=\\\"rabbit\\\"\u003e🐇\u003c/div\u003e\\n    \u003cbr\u003e\\n    \u003chr\u003e\\n    \u003cbutton class=\\\"full-btn reset-btn\\\"\u003e繼續下一場\u003c/button\u003e\\n    \\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"*{\\r\\n  font-size:30px;\\r\\n  font-family:Microsoft JhengHei;\\r\\n}\\r\\n\\r\\n#turtle{\\r\\n  position:absolute;\\r\\n  left:95%;\\r\\n}\\r\\n\\r\\n#rabbit{\\r\\n  position:absolute;\\r\\n  left:95%;\\r\\n}\\r\\n\\r\\n.btn{\\r\\n  display:inline-block;\\r\\n  border-radius:10px;\\r\\n  width:49%;\\r\\n}\\r\\n\\r\\n.full-btn{\\r\\n  display:inline-block;\\r\\n  border-radius:10px;\\r\\n  width:100%;\\r\\n}\\r\\n\\r\\n#result{\\r\\n  background:\\t#fff8d9;\\r\\n  padding:10px;\\r\\n  display:inline-block;\\r\\n  border-radius:20px;\\r\\n  width:50%;\\r\\n}\\r\\n\\r\\n#score{\\r\\n  background:\\t#fff8d9;\\r\\n  padding:10px;\\r\\n  display:inline-block;\\r\\n  border-radius:20px;\\r\\n  width:5%;\\r\\n  margin-bottom:10px;\\r\\n}\\r\\n\\r\\n.selected{\\r\\n  border:2px solid red;\\r\\n}\\r\\n\\r\\n.reset-btn{\\r\\n  display:none;\\r\\n  background:skyblue;\\r\\n}\",\"js\":\"var turtleStep;\\r\\nvar rabbitStep;\\r\\nvar score=0;\\r\\n\\r\\n$(\\\".reset-btn\\\").click(function(){\\r\\n    rabbitStep=95;\\r\\n    turtleStep=95;\\r\\n    // $(\\\"#turtle\\\").css(\\\"left\\\",turtleStep+\\\"%\\\");\\r\\n    // $(\\\"#rabbit\\\").css(\\\"left\\\",rabbitStep+\\\"%\\\");\\r\\n    // $(\\\".btn\\\").attr(\\\"disabled\\\",false);\\r\\n    // $(\\\".btn\\\").removeClass(\\\"selected\\\");\\r\\n    // $(\\\".reset-btn\\\").hide();\\r\\n    // $(\\\"#result\\\").html(\\\"究竟誰能勝出呢？\\\");\\r\\n});\\r\\n\\r\\n$(\\\".turtle-btn\\\").click(function(){\\r\\n  bet(\\\"turtle\\\");\\r\\n});\\r\\n\\r\\n$(\\\".rabbit-btn\\\").click(function(){\\r\\n  bet(\\\"rabbit\\\");\\r\\n});\\r\\n\\r\\nfunction bet(decision){\\r\\n\\r\\n  //增加選擇框\\r\\n // alert(decision);\\r\\n  if(decision==\\\"rabbit\\\"){\\r\\n      $(\\\".rabbit-btn\\\").addClass(\\\"selected\\\");\\r\\n  }else{\\r\\n      $(\\\".turtle-btn\\\").addClass(\\\"selected\\\");\\r\\n  }\\r\\n  $(\\\".rabbit-btn\\\").attr(\\\"disabled\\\",true);\\r\\n  $(\\\".turtle-btn\\\").attr(\\\"disabled\\\",true);\\r\\n  \\r\\n  rabbitStep=95;\\r\\n  turtleStep=95;\\r\\n  \\r\\n var gameStart = setInterval(function(){\\r\\n    //開始賽跑\\r\\n    rabbitStep-=Math.random()*5;\\r\\n    turtleStep-=Math.random()*5;\\r\\n    $(\\\"#rabbit\\\").css(\\\"left\\\",rabbitStep+\\\"%\\\");\\r\\n    $(\\\"#turtle\\\").css(\\\"left\\\",turtleStep+\\\"%\\\");\\r\\n    \\r\\n    if(rabbitStep\u003c=0 || turtleStep\u003c=0){\\r\\n       clearInterval(gameStart);\\r\\n       if()\\r\\n    }\\r\\n    \\r\\n  },100);\\r\\n  \\r\\n}\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\"}","created_at":"2019-07-13T11:49:28.381+08:00","updated_at":"2019-10-11T03:20:35.516+08:00","name":"龜兔賽跑 副本","language":"web","screenshot":{"url":null},"parent_id":79022,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":66,"hashid":"5j3s4zez","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}