• 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
  • Thông báo:
    Hiện tại diễn đàn cấm đi link trên chữ ký, vì vậy tất cả các thành viên vui lòng không thêm chữ ký có các đường link bán hàng, thành viên nào thêm link vào chữ ký sẽ bị xóa chữ ký và khóa tài khoản, xin cảm ơn!

Chơi caro bằng code

vũ hồ

Well-Known Member
#1
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>
 
Top