1. Thông báo:
    Tham gia nhóm Bạn Là IT Community để học hỏi kinh nghiệm và giao lưu với diễn đàn bạn nhé 
    Xin trân trọng cảm ơn

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ồ Active Member Thành viên BQT Super Moderator

    109
    53
    28
    21/4/16
    Nam
    {Học sinh lớp 11
    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 Hãy đăng nhập hoặc đăng ký để xem được links
    <!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("Hãy đăng nhập hoặc đăng ký để xem được links");
    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>
     

    Xem Bài Viết Cùng Chủ Đề

    2 people like this.

Chia sẻ trang này