點擊大 PK | 程式專案 | 橘蘋學習平台

{"id":32449,"student_id":227,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css\\\" integrity=\\\"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm\\\" crossorigin=\\\"anonymous\\\"\u003e\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.2.1.slim.min.js\\\" integrity=\\\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN\\\" crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js\\\" integrity=\\\"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q\\\" crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\u003cscript src=\\\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js\\\" integrity=\\\"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl\\\" crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cimg class=\\\"rope js-rope\\\" src=\\\"rope.png\\\"\u003e\\n    \u003cp class=\\\"text-center alert alert-warning message js-message\\\"\u003e\u003c/p\u003e\\n    \u003cbutton class=\\\"btn btn-primary pair js-pair\\\"\u003e配對\u003c/button\u003e\\n    \u003cbutton class=\\\"btn btn-primary restart js-restart\\\"\u003e重新比賽\u003c/button\u003e\\n    \u003cbutton class=\\\"btn btn-danger pull js-pull\\\"\u003e拉繩子\u003c/button\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n\\n\",\"css\":\"body {\\r\\n    background-color: #eee;\\r\\n    background-image: url(bg.jpg);\\r\\n    background-position: center;\\r\\n    background-size: cover;\\r\\n    position: relative;\\r\\n    height: 100vh;\\r\\n}\\r\\n\\r\\n.rope {\\r\\n    position: fixed;\\r\\n    height: 200%;\\r\\n    top: calc(50% - 100vh);\\r\\n    left: 50%;\\r\\n    transform: translateY(50%);\\r\\n}\\r\\n\\r\\n.message {\\r\\n    opacity: .5;\\r\\n}\\r\\n\\r\\n.pair {\\r\\n    position: fixed;\\r\\n    bottom: 10px;\\r\\n    left: 10px;\\r\\n}\\r\\n\\r\\n.restart {\\r\\n    position: fixed;\\r\\n    bottom: 10px;\\r\\n    left: 70px;\\r\\n}\\r\\n\\r\\n.pull {\\r\\n    position: fixed;\\r\\n    right: 10px;\\r\\n    bottom: 10px;\\r\\n}\\r\\n\\r\\n\\r\\n\",\"js\":\"var p1_times = 0;\\nvar p2_times = 0;\\nvar status = 0;\\nvar p1_id = Math.floor(Math.random()*10000);\\nvar p2_id;\\n\\n$('.js-pair').click(function () {\\n    p2_id = prompt('對方 ID');\\n});\\n\\n$('.js-pull').click(function () {\\n    if (status == 1) {\\n        p1_times++;\\n    }\\n});\\n$(\\\".js-restart\\\").click(function(){\\n    p1_times = 0;\\n    p2_times = 0;\\n    status = 0;\\n})\\n\\n\\nsetInterval(function () {\\n    var diff = p1_times - p2_times;\\n    $('.rope').css('transform', `translateY(${diff}%`);\\n    if (status == 0) {\\n        $('.js-message').text(`你的ID${p1_id}對方ID為${p2_id}`);\\n    }\\n    if (status == 1) {\\n        $('.js-message').text(`比賽中`);\\n    }\\n    if (status == 2) {\\n        if (p1_times \u003e p2_times) {\\n            $('.js-message').text(`護勝`);\\n        } else {\\n            $('.js-message').text(`失敗`);\\n        }\\n    }\\n    var gameOver=p1_times \u003e p2_times + 10;\\n    if(gameOver){\\n        status=2;\\n    }\\n    if(p2_id\u0026\u0026status != 2){\\n        DB.broadcast('update', {\\n            id:p1_id,\\n            times:p1_times,\\n        });\\n    }\\n}, 50);\\nDB.onMessage('update', function(data) {\\n    if (data.id == p2_id){\\n        status=1;\\n        p2_times=data.times;\\n    }\\n})\"}","created_at":"2018-06-28T20:35:19.356+08:00","updated_at":"2019-11-07T07:25:45.950+08:00","name":"點擊大 PK","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/32449/c4f7e1f2fb2db98caeb1c5090e0bd1dd.jpg"},"parent_id":31711,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":91,"hashid":"4y3sk6e3","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}