1. Hiện tại Forum Bạn Là IT đang tổ chức evest post bài nhận quả cùng Bạn Là IT, mời các thành viên tham gia tại link:https://banlait.com/threads/event-post-bai-nhan-qua-cung-ban-la-it.1478/

Chơi caro bằng code

Thảo luận trong 'Các mã nguồn khác' bắt đầu bởi vũ hồ, 6/8/16.

  1. vũ hồ

    vũ hồ Member Thành viên BQT Super Moderator

    Tham gia ngày:
    21/4/16
    Bài viết:
    108
    Đã được thích:
    19
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Nghề nghiệp:
    Học sinh lớp 11
    Nơi ở:
    Sa Đéc. Đồng Tháp
    mở notepad lên!!!! nếu không biết cách hay hấn nút windows + R sau đó nhập notepad, nhập code vào và lưu lại với tên caro.html ( lưu trên desktop nhé. ) xong chỉ cần nhấn dô cái html mà bạn đã save thôi!!1
    code đây:
    hay thu tro choi nay !!!<br/>
    made by Vu Ho https://www.facebook.com/profile.php?id=100011224351140&fref=ts
    <!DOCTYPE html>
    <html>
    <head>
    <title>Game</title>
    <style type="text/css">
    *{
    box-sizing: border-box;
    }
    ‪#‎instructions‬{
    border-radius: 10px;
    box-shadow: 3px 3px 6px black;
    display: inline-block;
    padding: 3px 3px;
    color: white;
    background-color: rgba(0,0,0,0.5);
    position: relative;
    left: 200px;
    font-family: "comic sans ms", "fantasy","times new roman";
    background: rgba(0,0,0,0.5);
    max-width: 300px;
    }
    body{
    background-color: white;
    background-image:url("https://pixabay.com/…/2…/07/11/22/05/baby-390555_960_720.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    }
    ‪#‎_rstartBtn‬, button{
    border-radius:10px;
    border:2px groove grey;
    width:50%;height:30px;
    font-weight:bold;
    font-family:sans-serif;
    font-size: 20px;
    background-image: -webkit-linear-gradient(top,rgb(200,200,200),rgb(100,100,100));background-image: -moz-linear-gradient(top,rgb(200,200,200),rgb(100,100,100));background-image: -ms-linear-gradient(top,rgb(200,200,200),rgb(100,100,100));background-image: linear-gradient(top,rgb(200,200,200),rgb(100,100,100));}
    ‪#‎Form‬{
    position:absolute;
    top:200px;
    left:200px;
    background-color:rgba(0,0,0,0.5);
    border-radius:20px;
    box-shadow:4px 4px 8px black;
    padding:4px 4px;}
    .inpt{height:100px;
    width:100px;
    font-size:60px;
    font-family:comic sans ms;
    padding:0px 0px 0px 20px;
    opacity: 0.7;
    background-color: black;
    color:white;
    font-weight: bold;
    border-radius:10px;}
    h1{
    position: relative;
    left: 170px;
    border-radius: 10px;
    box-shadow: 3px 3px 6px black;
    display: inline-block;
    padding: 3px 3px;
    color: white;
    background-color: rgba(0,0,0,0.5);
    font-family: "comic sans ms", "fantasy","times new roman";
    }
    /*
    These animations were not looking good to me
    You can uncomment these animations to see what happens when you win
    @-webkit-keyframes win
    {
    0%{color:black;background-color:white;}
    15%{color:black;background-color: violet;} *These are the animations,
    30%{color:black;background-color: indigo;} *I commented them because they were not looking good in the end to me.
    45%{color:black; background-color: blue;}
    60%{color:black;background-color: green;}
    75%{color:black;background-color: yellow;}
    90%{color:black; background-color: orange;}
    100%{color:black; background-color: red;}
    }
    @-ms-keyframes win
    {
    0%{color:black;background-color:white;}
    15%{color:black;background-color: violet;}
    30%{color:black;background-color: indigo;}
    45%{color:black; background-color: blue;}
    60%{color:black;background-color: green;}
    75%{color:black;background-color: yellow;}
    90%{color:black; background-color: orange;}
    100%{color:black; background-color: red;}
    }
    @-moz-keyframes win
    {
    0%{color:black;background-color:white;}
    15%{color:black;background-color: violet;}
    30%{color:black;background-color: indigo;}
    45%{color:black; background-color: blue;}
    60%{color:black;background-color: green;}
    75%{color:black;background-color: yellow;}
    90%{color:black; background-color: orange;}
    100%{color:black; background-color: red;}
    }
    @-keyframes win
    {
    0%{color:black;background-color:white;}
    15%{color:black;background-color: violet;}
    30%{color:black;background-color: indigo;}
    45%{color:black; background-color: blue;}
    60%{color:black;background-color: green;}
    75%{color:black;background-color: yellow;}
    90%{color:black; background-color: orange;}
    100%{color:black; background-color: red;}
    }*/
    input{
    outline: none;
    }
    </style>
    <script type="text/javascript">
    var testDigit;
    var win = false;
    function hideInstructions(){
    document.getElementById("instructions").setAttribute("style","display: none;")
    }
    function setReadOnly(a)
    {
    var box = document.getElementById(a);
    if ((box.value.toUpperCase() === "X" || box.value.toUpperCase() === "O") && (box.value.toUpperCase() !== testDigit)) {
    box.setAttribute("readonly", "true");
    }
    }
    function inpt(b) {
    var _value = document.getElementById(b).value;
    if ((_value.toUpperCase() === "X" || _value.toUpperCase() === "O") && (_value.toUpperCase() !== testDigit)) {
    document.getElementById(b).value = _value.toUpperCase();
    } else {
    document.getElementById(b).value = ""
    }
    testDigit = _value.toUpperCase();
    }
    function check() {
    var a1 = document.getElementById("_1");
    var a2 = document.getElementById("_2");
    var a3 = document.getElementById("_3");
    var a4 = document.getElementById("_4");
    var a5 = document.getElementById("_5");
    var a6 = document.getElementById("_6");
    var a7 = document.getElementById("_7");
    var a8 = document.getElementById("_8");
    var a9 = document.getElementById("_9");
    var cngrt = document.getElementById("congrats");
    var styl = "style";
    var vlu = "color:cyan;opacity:0.8;-webkit-animation-name:win;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-ms-animation-name:win;-ms-animation-duration:1s;-ms-animation-iteration-count:infinite;-moz-animation-name:win;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;animation-name:win;animation-duration:1s;animation-iteration-count:infinite;"
    if (a1.value === a2.value && a2.value === a3.value && a1.value !== "") {
    a1.setAttribute(styl, vlu);
    a2.setAttribute(styl, vlu);
    a3.setAttribute(styl, vlu);
    window.alert("Player " + a1.value + " WINS!!!");
    win = true;
    }
    if (a4.value === a5.value && a5.value === a6.value && a4.value !== "") {
    a4.setAttribute(styl, vlu);
    a5.setAttribute(styl, vlu);
    a6.setAttribute(styl, vlu);
    window.alert("Player " + a4.value + " WINS!!!");
    win = true;
    }
    if (a8.value === a7.value && a8.value === a9.value && a8.value !== "") {
    a7.setAttribute(styl, vlu);
    a8.setAttribute(styl, vlu);
    a9.setAttribute(styl, vlu);
    window.alert("Player " + a7.value + " WINS!!!");
    win = true;
    }
    if (a1.value === a4.value && a4.value === a7.value && a1.value !== "") {
    a1.setAttribute(styl, vlu);
    a4.setAttribute(styl, vlu);
    a7.setAttribute(styl, vlu);
    window.alert("Player " + a1.value + " WINS!!!");
    win = true;
    }
    if (a1.value === a5.value && a5.value === a9.value && a1.value !== "") {
    a1.setAttribute(styl, vlu);
    a5.setAttribute(styl, vlu);
    a9.setAttribute(styl, vlu);
    window.alert("Player " + a1.value + " WINS!!!");
    win = true;
    }
    if (a3.value === a5.value && a5.value === a7.value && a3.value !== "") {
    a3.setAttribute(styl, vlu);
    a5.setAttribute(styl, vlu);
    a7.setAttribute(styl, vlu);
    window.alert("Player " + a3.value + " WINS!!!");
    win = true;
    }
    if (a2.value === a5.value && a8.value === a5.value && a2.value !== "") {
    a2.setAttribute(styl, vlu);
    a5.setAttribute(styl, vlu);
    a8.setAttribute(styl, vlu);
    window.alert("Player " + a2.value + " WINS!!!");
    win = true;
    }
    if (a3.value === a6.value && a6.value === a9.value && a3.value !== "") {
    a3.setAttribute(styl, vlu);
    a6.setAttribute(styl, vlu);
    a9.setAttribute(styl, vlu);
    window.alert("Player " + a3.value + " WINS!!!");
    win = true;
    }
    var r = "readonly";
    var v = "true";
    if (win === true) {
    a1.setAttribute(r, v);
    a2.setAttribute(r, v);
    a3.setAttribute(r, v);
    a4.setAttribute(r, v);
    a5.setAttribute(r, v);
    a6.setAttribute(r, v);
    a7.setAttribute(r, v);
    a8.setAttribute(r, v);
    a9.setAttribute(r, v);
    }
    if (a1.value != "" && a2.value != "" && a3.value != "" && a4.value != "" && a5.value != "" && a6.value != "" && a7.value != "" && a8.value != "" && a9.value != "" && win === false) {
    window.alert("Match Ties, no one loses");
    }
    }
    </script>
    </head>
    <body>
    <h1>Game caro</h1>
    <div id="instructions" onclick="hideInstructions()"><p> chon "X" hoac "O" (no se khong nhan bat cu chu nao khac) va no la mot mo hinh</p><button onclick="hideInstructions()">Okay, bat dau!</button></div>
    <center>
    <form id="Form">
    <table>
    <tr><td><input type="text" id="_1" class="inpt" maxlength="1" oninput="setReadOnly('_1'),inpt('_1'),check()"></td><td><input type="text" id="_2" class="inpt" maxlength="1" oninput="setReadOnly('_2'),inpt('_2'),check()"></td><td><input type="text" id="_3" class="inpt" maxlength="1" oninput="setReadOnly('_3'),inpt('_3'),check()"></td></tr>
    <tr><td><input type="text" id="_4" class="inpt" maxlength="1" oninput="setReadOnly('_4'),inpt('_4'),check()"></td><td><input type="text" id="_5" class="inpt" maxlength="1" oninput="setReadOnly('_5'),inpt('_5'),check()"></td><td><input type="text" id="_6" class="inpt" maxlength="1" oninput="setReadOnly('_6'),inpt('_6'),check()"></td></tr>
    <tr><td><input type="text" id="_7" class="inpt" maxlength="1" oninput="setReadOnly('_7'),inpt('_7'),check()"></td><td><input type="text" id="_8" class="inpt" maxlength="1" oninput="setReadOnly('_8'),inpt('_8'),check()"></td><td><input type="text" id="_9" class="inpt" maxlength="1" oninput="setReadOnly('_9'),inpt('_9'),check()"></td></tr>
    </table><input type="submit" value="thu lai" id="_rstartBtn">
    </form>
    <span id='congrats'></span>
    </center>
    </body>
    </html>
     
    nhotruc thích bài này.

Chia sẻ trang này