1. Thông báo:
    Diễn Đàn Bạn Là IT thử nghiệm trang get link Fshare tại địa chỉ getlink.banlait.com
    Hiện tại website đang chạy beta, mong cần sự ủng hộ của mọi người để website chạy chính thức
    Xin 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ồ Member Thành viên BQT Super Moderator

    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