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
0px;
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>
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
0px;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>
