井字遊戲(改) | Programming Project | OrangeApple Learning Platform

{"id":12555,"student_id":10,"content":"{\"html\":\"\u003clink rel=\\\"stylesheet\\\" href=\\\"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\\\"\u003e\\n\u003cscript src=\\\"https://code.jquery.com/jquery-3.2.1.min.js\\\"\u003e\u003c/script\u003e\\n\\n\u003cdiv class=\\\"grid\\\"\u003e\\n    \u003cdiv id=\\\"0\\\" class=\\\"cell\\\"\u003e\\n        \u003ci class=\\\"fa fa-times\\\"\u003e\u003c/i\u003e\\n        \u003ci class=\\\"fa fa-circle-o\\\"\u003e\u003c/i\u003e\\n    \u003c/div\u003e\\n    \u003cdiv id=\\\"1\\\" class=\\\"cell\\\"\u003e\\n        \u003ci class=\\\"fa fa-times\\\"\u003e\u003c/i\u003e\\n        \u003ci class=\\\"fa fa-circle-o\\\"\u003e\u003c/i\u003e\\n    \u003c/div\u003e\\n    \u003cdiv id=\\\"2\\\" class=\\\"cell\\\"\u003e\\n        \u003ci class=\\\"fa fa-times\\\"\u003e\u003c/i\u003e\\n        \u003ci class=\\\"fa fa-circle-o\\\"\u003e\u003c/i\u003e\\n    \u003c/div\u003e\\n    \u003cdiv id=\\\"3\\\" class=\\\"cell\\\"\u003e\\n        \u003ci class=\\\"fa fa-times\\\"\u003e\u003c/i\u003e\\n        \u003ci class=\\\"fa fa-circle-o\\\"\u003e\u003c/i\u003e\\n    \u003c/div\u003e\\n    \u003cdiv id=\\\"4\\\" class=\\\"cell\\\"\u003e\\n        \u003ci class=\\\"fa fa-times\\\"\u003e\u003c/i\u003e\\n        \u003ci class=\\\"fa fa-circle-o\\\"\u003e\u003c/i\u003e\\n    \u003c/div\u003e\\n    \u003cdiv id=\\\"5\\\" class=\\\"cell\\\"\u003e\\n        \u003ci class=\\\"fa fa-times\\\"\u003e\u003c/i\u003e\\n        \u003ci class=\\\"fa fa-circle-o\\\"\u003e\u003c/i\u003e\\n    \u003c/div\u003e\\n    \u003cdiv id=\\\"6\\\" class=\\\"cell\\\"\u003e\\n        \u003ci class=\\\"fa fa-times\\\"\u003e\u003c/i\u003e\\n        \u003ci class=\\\"fa fa-circle-o\\\"\u003e\u003c/i\u003e\\n    \u003c/div\u003e\\n    \u003cdiv id=\\\"7\\\" class=\\\"cell\\\"\u003e\\n        \u003ci class=\\\"fa fa-times\\\"\u003e\u003c/i\u003e\\n        \u003ci class=\\\"fa fa-circle-o\\\"\u003e\u003c/i\u003e\\n    \u003c/div\u003e\\n    \u003cdiv id=\\\"8\\\" class=\\\"cell\\\"\u003e\\n        \u003ci class=\\\"fa fa-times\\\"\u003e\u003c/i\u003e\\n        \u003ci class=\\\"fa fa-circle-o\\\"\u003e\u003c/i\u003e\\n    \u003c/div\u003e\\n\u003c/div\u003e\",\"css\":\".grid {\\n    position: absolute;\\n    top: 50vh;\\n    left: 50vw;\\n    transform: translate(-50%, -50%);\\n    width: 50vw;\\n}\\n\\n.cell {\\n    box-sizing: border-box;\\n    background-color: #fff;\\n    border-radius: 5px;\\n    color: #fff;\\n    display: inline-block;\\n    width: 30%;\\n    padding-top: 33%;\\n    margin: 0px;\\n    position: relative;\\n}\\n\\n.cell i {\\n    opacity: 0;\\n}\\n\\n.cell.o, .cell.O {\\n    background-color: #428ff4;\\n}\\n.cell.o i.fa.fa-circle-o, .cell.O i.fa.fa-circle-o {\\n    opacity: 1;\\n}\\n.cell.x, .cell.X {\\n    background-color: #f44a41;\\n}\\n.cell.x i.fa.fa-times, .cell.X i.fa.fa-times {\\n    opacity: 1;\\n}\\n\\n.cell i {\\n    position: absolute;\\n    top: 50%;\\n    left: 50%;\\n    font-size: 40px;\\n    transform: translate(-50%, -50%);\\n}\",\"js\":\"var grid = [0, 0, 0, 0, 0, 0, 0, 0, 0];\\n\\nvar query = [];\\n\\nvar current = \\\"o\\\";\\n\\n$(window).ready(function () {\\n\\n    $('.cell').hover(function () {\\n        if (grid[$(this).attr('id')] == 0) {\\n            s = current.toUpperCase();\\n            $(this).addClass(s);\\n        }\\n    }, function () {\\n        if (grid[$(this).attr('id')] == 0) {\\n            s = current.toUpperCase();\\n            $(this).removeClass(s);\\n        }\\n    });\\n\\n    $('.cell').click(function () {\\n\\n        var index = $(this).attr('id');\\n\\n        if (grid[index] != 0) return;\\n\\n        if (current == \\\"o\\\") {\\n            grid[index] = current;\\n            query.unshift(index);\\n            current = \\\"x\\\";\\n        } else if (current == \\\"x\\\") {\\n            grid[index] = current;\\n            query.unshift(index);\\n            current = \\\"o\\\";\\n        }\\n\\n        if (query.length \u003e 7) {\\n            var index = query.pop();\\n            grid[index] = 0;\\n        }\\n\\n\\n        var re = check();\\n        if (re == \\\"o\\\") alert(\\\"獲勝者 O\\\");\\n        if (re == \\\"x\\\") alert(\\\"獲勝者 X\\\");\\n\\n        for(var i=0; i\u003cgrid.length; i++) {\\n            var ele = $('#' + i);\\n            ele.removeClass(\\\"o\\\").removeClass(\\\"x\\\");\\n            if (grid[i] == 'o') ele.addClass('o');\\n            if (grid[i] == 'x') ele.addClass('x');\\n        }\\n\\n    });\\n\\n});\\n\\nfunction check () {\\n\\n    console.log(grid)\\n\\n    if (grid[0] == grid[1] \u0026\u0026 grid[1] == grid[2] \u0026\u0026 grid[0] != 0) {\\n        return grid[0];\\n    }\\n    if (grid[3] == grid[4] \u0026\u0026 grid[4] == grid[5] \u0026\u0026 grid[3] != 0) {\\n        return grid[3];\\n    }\\n    if (grid[6] == grid[7] \u0026\u0026 grid[7] == grid[8] \u0026\u0026 grid[6] != 0) {\\n        return grid[6];\\n    }\\n    if (grid[0] == grid[3] \u0026\u0026 grid[3] == grid[6] \u0026\u0026 grid[0] != 0) {\\n        return grid[0];\\n    }\\n    if (grid[1] == grid[4] \u0026\u0026 grid[4] == grid[7] \u0026\u0026 grid[1] != 0) {\\n        return grid[1];\\n    }\\n    if (grid[2] == grid[5] \u0026\u0026 grid[5] == grid[8] \u0026\u0026 grid[2] != 0) {\\n        return grid[2];\\n    }\\n    if (grid[0] == grid[4] \u0026\u0026 grid[4] == grid[8] \u0026\u0026 grid[0] != 0) {\\n        return grid[0];\\n    }\\n    if (grid[2] == grid[4] \u0026\u0026 grid[4] == grid[6] \u0026\u0026 grid[2] != 0) {\\n        return grid[2];\\n    }\\n\\n}\"}","created_at":"2017-10-02T16:47:18.032+08:00","updated_at":"2019-11-03T00:11:28.678+08:00","name":"井字遊戲(改)","language":"web","screenshot":{"url":"/uploads/project/screenshot/12555/dc0781d1965aca655465aa69d5c87f25.jpg"},"parent_id":null,"plugin":null,"description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":716,"hashid":"9ygspg9k","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}