<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {border-collapse: collapse;}
table tr td {padding: 0; border: 1px solid black; text-align: center; vertical-align: middle; cursor: default;}
table#scores tr td {width: 65px; height: 30px;}
table#play_field tr td {width: 50px; height: 50px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function newArray () {
return [
[
[0, 0], [0, 1], [0, 2]
],
[
[1, 0], [1, 1], [1, 2]
],
[
[2, 0], [2, 1], [2, 2]
]
];
}
var empty_cells = newArray ();
// Random number from range function
function randomNumber (low_limit, high_limit) {
return Math.round(Math.random()*(high_limit - low_limit)) + low_limit;
}
$(document).ready(function(){
var current_player = "PlayerX";
var current_game_turn = 1;
var max_game_turns_number = 9;
var current_game_round = 1;
var max_game_rounds_number = 5;
var scores_table = '<table id="scores">' +
'<tr><td>Round</td><td>Player X</td><td>Player O</td></tr>';
for (var i = 0; i < max_game_rounds_number; i++) {
scores_table += '<tr><td>' + ( i + 1) + '</td><td></td><td></td></tr>';
}
scores_table += '</table>';
var play_field_table = '<table id="play_field">' +
'<tr><td></td><td></td><td></td></tr>' +
'<tr><td></td><td></td><td></td></tr>' +
'<tr><td></td><td></td><td></td></tr>' +
'</table>';
var round_field = '<p id="round">Round: <span>1</span></p>';
$("body").append(round_field).append(scores_table).append('<br />').append(play_field_table);
function refreshScoresTable () {
for (var i = 0; i < 5; i++) {
$("table#scores tr:eq(" + (i + 1) + ") td:eq(1)").text("");
$("table#scores tr:eq(" + (i + 1) + ") td:eq(2)").text("");
}
}
function refreshPlayFieldTable () {
$("table#play_field tr td").text("").removeClass("checked");
}
var classPlayer = function () {};
classPlayer.prototype = {
scores: 0
};
var PlayerX = new classPlayer();
var PlayerO = new classPlayer();
function winCheck() {
// Diagonal Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(0)").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(2)").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(0)").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(2)").text() == "O")
) {
return "Player O Win";
}
// Diagonal Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(2)").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(0)").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(2)").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(0)").text() == "O")
) {
return "Player O Win";
}
for (var i=0; i < 3; i++) {
// Horizontal Win X X X
if (
($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "X") &&
($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "X")
) {
return "Player X Win";
}
// Horizontal Win O O O
if (
($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "O") &&
($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "O")
) {
return "Player O Win";
}
// Vertical Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "O")
) {
return "Player O Win";
}
}
return "Nobody Win";
};
function AIplayer () {
var random_row, random_cell, row, cell;
function checkCell () {
random_row = randomNumber (0, 2);
random_cell = randomNumber (0, 2); console.log("[" + random_row + "," + random_cell + "]");
if (empty_cells[random_row][random_cell] == undefined) {
for (var i=0; i < 3; i++) {
for (var j=0; j < 3; j++) {console.log("i: " + i + ", j: " + j);
if (empty_cells[i][j] != undefined) {
row = i;
cell = j;
break;
}
}
}
} else {
row = random_row;
cell = random_cell;
}
}
checkCell ();
$("table#play_field tr:eq(" + empty_cells[row][cell][0] + ") td:eq(" + empty_cells[row][cell][1] + ")").text("O").addClass("checked");
delete empty_cells[row][cell];
current_player = "PlayerX";
}
$("table#play_field tr td").click(function(){
if (!$(this).hasClass("checked")) {
if (current_player == "PlayerX") {
$(this).text("X").addClass("checked");
delete empty_cells[$(this).parent().index()][$(this).index()];
current_player = "PlayerO";
checkWinConditions ();
setTimeout (function() {
AIplayer ();
checkWinConditions ();
}, 1000);
}
}
function checkWinConditions () {
console.log(empty_cells);
current_game_turn++;
if(winCheck() == "Nobody Win") {
if (current_game_turn != (max_game_turns_number + 1)) {
// Game round continue.
} else {
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Draw");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Draw");
refreshPlayFieldTable ();
empty_cells = newArray ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
}
} else if (winCheck() == "Player X Win") {
PlayerX.scores = PlayerX.scores + 1;
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Win");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Lose");
refreshPlayFieldTable ();
empty_cells = newArray ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
} else if (winCheck() == "Player O Win") {
PlayerO.scores = PlayerO.scores + 1;
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Lose");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Win");
refreshPlayFieldTable ();
empty_cells = newArray ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
}
if (current_game_round == (max_game_rounds_number + 1)) {
refreshPlayFieldTable ();
empty_cells = newArray ();
if (PlayerX.scores > PlayerO.scores) {
alert("Game End. Player X Win.");
} else if (PlayerX.scores < PlayerO.scores) {
alert("Game End. Player O Win.");
} else if (PlayerX.scores == PlayerO.scores) {
alert("Game End. Draw.");
}
refreshScoresTable ();
current_game_turn = 1;
current_game_round = 1;
$("p#round span").text(current_game_round);
}
}
});
});
</script>
<title>XO Game</title>
</head>
<body>
</body>
</html>
пятница, 30 ноября 2012 г.
JavaScript Крестики-Нолики с AI
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {border-collapse: collapse;}
table tr td {padding: 0; border: 1px solid black; text-align: center; vertical-align: middle; cursor: default;}
table#scores tr td {width: 65px; height: 30px;}
table#play_field tr td {width: 50px; height: 50px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function newArray () {
return [
[
[0, 0], [0, 1], [0, 2]
],
[
[1, 0], [1, 1], [1, 2]
],
[
[2, 0], [2, 1], [2, 2]
]
];
}
var empty_cells = newArray ();
// Random number from range function
function randomNumber (low_limit, high_limit) {
return Math.round(Math.random()*(high_limit - low_limit)) + low_limit;
}
$(document).ready(function(){
var current_player = "PlayerX";
var current_game_turn = 1;
var max_game_turns_number = 9;
var current_game_round = 1;
var max_game_rounds_number = 5;
var scores_table = '<table id="scores">' +
'<tr><td>Round</td><td>Player X</td><td>Player O</td></tr>';
for (var i = 0; i < max_game_rounds_number; i++) {
scores_table += '<tr><td>' + ( i + 1) + '</td><td></td><td></td></tr>';
}
scores_table += '</table>';
var play_field_table = '<table id="play_field">' +
'<tr><td></td><td></td><td></td></tr>' +
'<tr><td></td><td></td><td></td></tr>' +
'<tr><td></td><td></td><td></td></tr>' +
'</table>';
var round_field = '<p id="round">Round: <span>1</span></p>';
$("body").append(round_field).append(scores_table).append('<br />').append(play_field_table);
function refreshScoresTable () {
for (var i = 0; i < 5; i++) {
$("table#scores tr:eq(" + (i + 1) + ") td:eq(1)").text("");
$("table#scores tr:eq(" + (i + 1) + ") td:eq(2)").text("");
}
}
function refreshPlayFieldTable () {
$("table#play_field tr td").text("").removeClass("checked");
}
var classPlayer = function () {};
classPlayer.prototype = {
scores: 0
};
var PlayerX = new classPlayer();
var PlayerO = new classPlayer();
function winCheck() {
// Diagonal Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(0)").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(2)").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(0)").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(2)").text() == "O")
) {
return "Player O Win";
}
// Diagonal Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(2)").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(0)").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(2)").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(0)").text() == "O")
) {
return "Player O Win";
}
for (var i=0; i < 3; i++) {
// Horizontal Win X X X
if (
($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "X") &&
($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "X")
) {
return "Player X Win";
}
// Horizontal Win O O O
if (
($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "O") &&
($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "O")
) {
return "Player O Win";
}
// Vertical Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "O")
) {
return "Player O Win";
}
}
return "Nobody Win";
};
function AIplayer () {
var random_row, random_cell, row, cell;
function checkCell () {
random_row = randomNumber (0, 2);
random_cell = randomNumber (0, 2); console.log("[" + random_row + "," + random_cell + "]");
if (empty_cells[random_row][random_cell] == undefined) {
for (var i=0; i < 3; i++) {
for (var j=0; j < 3; j++) {console.log("i: " + i + ", j: " + j);
if (empty_cells[i][j] != undefined) {
row = i;
cell = j;
break;
}
}
}
} else {
row = random_row;
cell = random_cell;
}
}
checkCell ();
$("table#play_field tr:eq(" + empty_cells[row][cell][0] + ") td:eq(" + empty_cells[row][cell][1] + ")").text("O").addClass("checked");
delete empty_cells[row][cell];
current_player = "PlayerX";
}
$("table#play_field tr td").click(function(){
if (!$(this).hasClass("checked")) {
if (current_player == "PlayerX") {
$(this).text("X").addClass("checked");
delete empty_cells[$(this).parent().index()][$(this).index()];
current_player = "PlayerO";
} else if (current_player == "PlayerO") {
AIplayer ();
}
console.log(empty_cells);
current_game_turn++;
if(winCheck() == "Nobody Win") {
if (current_game_turn != (max_game_turns_number + 1)) {
// Game round continue.
} else {
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Draw");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Draw");
refreshPlayFieldTable ();
empty_cells = newArray ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
}
} else if (winCheck() == "Player X Win") {
PlayerX.scores = PlayerX.scores + 1;
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Win");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Lose");
refreshPlayFieldTable ();
empty_cells = newArray ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
} else if (winCheck() == "Player O Win") {
PlayerO.scores = PlayerO.scores + 1;
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Lose");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Win");
refreshPlayFieldTable ();
empty_cells = newArray ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
}
if (current_game_round == (max_game_rounds_number + 1)) {
refreshPlayFieldTable ();
empty_cells = newArray ();
if (PlayerX.scores > PlayerO.scores) {
alert("Game End. Player X Win.");
} else if (PlayerX.scores < PlayerO.scores) {
alert("Game End. Player O Win.");
} else if (PlayerX.scores == PlayerO.scores) {
alert("Game End. Draw.");
}
refreshScoresTable ();
current_game_turn = 1;
current_game_round = 1;
$("p#round span").text(current_game_round);
}
}
});
});
</script>
<title>XO Game</title>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {border-collapse: collapse;}
table tr td {padding: 0; border: 1px solid black; text-align: center; vertical-align: middle; cursor: default;}
table#scores tr td {width: 65px; height: 30px;}
table#play_field tr td {width: 50px; height: 50px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function newArray () {
return [
[
[0, 0], [0, 1], [0, 2]
],
[
[1, 0], [1, 1], [1, 2]
],
[
[2, 0], [2, 1], [2, 2]
]
];
}
var empty_cells = newArray ();
// Random number from range function
function randomNumber (low_limit, high_limit) {
return Math.round(Math.random()*(high_limit - low_limit)) + low_limit;
}
$(document).ready(function(){
var current_player = "PlayerX";
var current_game_turn = 1;
var max_game_turns_number = 9;
var current_game_round = 1;
var max_game_rounds_number = 5;
var scores_table = '<table id="scores">' +
'<tr><td>Round</td><td>Player X</td><td>Player O</td></tr>';
for (var i = 0; i < max_game_rounds_number; i++) {
scores_table += '<tr><td>' + ( i + 1) + '</td><td></td><td></td></tr>';
}
scores_table += '</table>';
var play_field_table = '<table id="play_field">' +
'<tr><td></td><td></td><td></td></tr>' +
'<tr><td></td><td></td><td></td></tr>' +
'<tr><td></td><td></td><td></td></tr>' +
'</table>';
var round_field = '<p id="round">Round: <span>1</span></p>';
$("body").append(round_field).append(scores_table).append('<br />').append(play_field_table);
function refreshScoresTable () {
for (var i = 0; i < 5; i++) {
$("table#scores tr:eq(" + (i + 1) + ") td:eq(1)").text("");
$("table#scores tr:eq(" + (i + 1) + ") td:eq(2)").text("");
}
}
function refreshPlayFieldTable () {
$("table#play_field tr td").text("").removeClass("checked");
}
var classPlayer = function () {};
classPlayer.prototype = {
scores: 0
};
var PlayerX = new classPlayer();
var PlayerO = new classPlayer();
function winCheck() {
// Diagonal Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(0)").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(2)").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(0)").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(2)").text() == "O")
) {
return "Player O Win";
}
// Diagonal Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(2)").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(0)").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(2)").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(0)").text() == "O")
) {
return "Player O Win";
}
for (var i=0; i < 3; i++) {
// Horizontal Win X X X
if (
($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "X") &&
($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "X")
) {
return "Player X Win";
}
// Horizontal Win O O O
if (
($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "O") &&
($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "O")
) {
return "Player O Win";
}
// Vertical Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "O")
) {
return "Player O Win";
}
}
return "Nobody Win";
};
function AIplayer () {
var random_row, random_cell, row, cell;
function checkCell () {
random_row = randomNumber (0, 2);
random_cell = randomNumber (0, 2); console.log("[" + random_row + "," + random_cell + "]");
if (empty_cells[random_row][random_cell] == undefined) {
for (var i=0; i < 3; i++) {
for (var j=0; j < 3; j++) {console.log("i: " + i + ", j: " + j);
if (empty_cells[i][j] != undefined) {
row = i;
cell = j;
break;
}
}
}
} else {
row = random_row;
cell = random_cell;
}
}
checkCell ();
$("table#play_field tr:eq(" + empty_cells[row][cell][0] + ") td:eq(" + empty_cells[row][cell][1] + ")").text("O").addClass("checked");
delete empty_cells[row][cell];
current_player = "PlayerX";
}
$("table#play_field tr td").click(function(){
if (!$(this).hasClass("checked")) {
if (current_player == "PlayerX") {
$(this).text("X").addClass("checked");
delete empty_cells[$(this).parent().index()][$(this).index()];
current_player = "PlayerO";
} else if (current_player == "PlayerO") {
AIplayer ();
}
console.log(empty_cells);
current_game_turn++;
if(winCheck() == "Nobody Win") {
if (current_game_turn != (max_game_turns_number + 1)) {
// Game round continue.
} else {
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Draw");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Draw");
refreshPlayFieldTable ();
empty_cells = newArray ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
}
} else if (winCheck() == "Player X Win") {
PlayerX.scores = PlayerX.scores + 1;
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Win");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Lose");
refreshPlayFieldTable ();
empty_cells = newArray ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
} else if (winCheck() == "Player O Win") {
PlayerO.scores = PlayerO.scores + 1;
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Lose");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Win");
refreshPlayFieldTable ();
empty_cells = newArray ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
}
if (current_game_round == (max_game_rounds_number + 1)) {
refreshPlayFieldTable ();
empty_cells = newArray ();
if (PlayerX.scores > PlayerO.scores) {
alert("Game End. Player X Win.");
} else if (PlayerX.scores < PlayerO.scores) {
alert("Game End. Player O Win.");
} else if (PlayerX.scores == PlayerO.scores) {
alert("Game End. Draw.");
}
refreshScoresTable ();
current_game_turn = 1;
current_game_round = 1;
$("p#round span").text(current_game_round);
}
}
});
});
</script>
<title>XO Game</title>
</head>
<body>
</body>
</html>
четверг, 29 ноября 2012 г.
JavaScript игра Крестики-Нолики
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {border-collapse: collapse;}
table tr td {padding: 0; border: 1px solid black; text-align: center; vertical-align: middle; cursor: default;}
table#scores tr td {width: 65px; height: 30px;}
table#play_field tr td {width: 50px; height: 50px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var current_player = "PlayerX";
var current_game_turn = 1;
var max_game_turns_number = 9;
var current_game_round = 1;
var max_game_rounds_number = 5;
var scores_table = '<table id="scores">' +
'<tr><td>Round</td><td>Player X</td><td>Player O</td></tr>';
for (var i = 0; i < max_game_rounds_number; i++) {
scores_table += '<tr><td>' + ( i + 1) + '</td><td></td><td></td></tr>';
}
scores_table += '</table>';
var play_field_table = '<table id="play_field">' +
'<tr><td></td><td></td><td></td></tr>' +
'<tr><td></td><td></td><td></td></tr>' +
'<tr><td></td><td></td><td></td></tr>' +
'</table>';
var round_field = '<p id="round">Round: <span>1</span></p>';
$("body").append(round_field).append(scores_table).append('<br />').append(play_field_table);
function refreshScoresTable () {
for (var i = 0; i < 5; i++) {
$("table#scores tr:eq(" + (i + 1) + ") td:eq(1)").text("");
$("table#scores tr:eq(" + (i + 1) + ") td:eq(2)").text("");
}
}
function refreshPlayFieldTable () {
$("table#play_field tr td").text("").removeClass("checked");
}
var classPlayer = function () {};
classPlayer.prototype = {
scores: 0
};
var PlayerX = new classPlayer();
var PlayerO = new classPlayer();
function winCheck() {
// Diagonal Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(0)").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(2)").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(0)").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(2)").text() == "O")
) {
return "Player O Win";
}
// Diagonal Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(2)").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(0)").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(2)").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(0)").text() == "O")
) {
return "Player O Win";
}
for (var i=0; i < 3; i++) {
// Horizontal Win X X X
if (
($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "X") &&
($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "X")
) {
return "Player X Win";
}
// Horizontal Win O O O
if (
($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "O") &&
($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "O")
) {
return "Player O Win";
}
// Vertical Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "O")
) {
return "Player O Win";
}
}
return "Nobody Win";
};
$("table#play_field tr td").click(function(){ console.log("Round: " + current_game_round + " Turn: " + current_game_turn + " CurrentPlayer: " + current_player);
if (!$(this).hasClass("checked")) {
if (current_player == "PlayerX") {
$(this).text("X").addClass("checked");
current_player = "PlayerO";
} else if (current_player == "PlayerO") {
$(this).text("O").addClass("checked");
current_player = "PlayerX";
}
current_game_turn++;
if(winCheck() == "Nobody Win") {
if (current_game_turn != (max_game_turns_number + 1)) {
// Game round continue.
} else {
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Draw");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Draw");
refreshPlayFieldTable ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
}
} else if (winCheck() == "Player X Win") {
PlayerX.scores = PlayerX.scores + 1;
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Win");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Lose");
refreshPlayFieldTable ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
} else if (winCheck() == "Player O Win") {
PlayerO.scores = PlayerO.scores + 1;
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Lose");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Win");
refreshPlayFieldTable ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
}
if (current_game_round == (max_game_rounds_number + 1)) {
refreshPlayFieldTable ();
if (PlayerX.scores > PlayerO.scores) {
alert("Game End. Player X Win.");
} else if (PlayerX.scores < PlayerO.scores) {
alert("Game End. Player O Win.");
} else if (PlayerX.scores == PlayerO.scores) {
alert("Game End. Draw.");
}
refreshScoresTable ();
current_game_turn = 1;
current_game_round = 1;
$("p#round span").text(current_game_round);
}
}
console.log("Round: " + current_game_round + " Turn: " + current_game_turn + " CurrentPlayer: " + current_player + " WinCheck: " + winCheck());
});
});
</script>
<title>XO Game</title>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {border-collapse: collapse;}
table tr td {padding: 0; border: 1px solid black; text-align: center; vertical-align: middle; cursor: default;}
table#scores tr td {width: 65px; height: 30px;}
table#play_field tr td {width: 50px; height: 50px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var current_player = "PlayerX";
var current_game_turn = 1;
var max_game_turns_number = 9;
var current_game_round = 1;
var max_game_rounds_number = 5;
var scores_table = '<table id="scores">' +
'<tr><td>Round</td><td>Player X</td><td>Player O</td></tr>';
for (var i = 0; i < max_game_rounds_number; i++) {
scores_table += '<tr><td>' + ( i + 1) + '</td><td></td><td></td></tr>';
}
scores_table += '</table>';
var play_field_table = '<table id="play_field">' +
'<tr><td></td><td></td><td></td></tr>' +
'<tr><td></td><td></td><td></td></tr>' +
'<tr><td></td><td></td><td></td></tr>' +
'</table>';
var round_field = '<p id="round">Round: <span>1</span></p>';
$("body").append(round_field).append(scores_table).append('<br />').append(play_field_table);
function refreshScoresTable () {
for (var i = 0; i < 5; i++) {
$("table#scores tr:eq(" + (i + 1) + ") td:eq(1)").text("");
$("table#scores tr:eq(" + (i + 1) + ") td:eq(2)").text("");
}
}
function refreshPlayFieldTable () {
$("table#play_field tr td").text("").removeClass("checked");
}
var classPlayer = function () {};
classPlayer.prototype = {
scores: 0
};
var PlayerX = new classPlayer();
var PlayerO = new classPlayer();
function winCheck() {
// Diagonal Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(0)").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(2)").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(0)").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(2)").text() == "O")
) {
return "Player O Win";
}
// Diagonal Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(2)").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(0)").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(2)").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(0)").text() == "O")
) {
return "Player O Win";
}
for (var i=0; i < 3; i++) {
// Horizontal Win X X X
if (
($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "X") &&
($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "X") &&
($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "X")
) {
return "Player X Win";
}
// Horizontal Win O O O
if (
($("table#play_field tr:eq(" + i + ") td:eq(0)").text() == "O") &&
($("table#play_field tr:eq(" + i + ") td:eq(1)").text() == "O") &&
($("table#play_field tr:eq(" + i + ") td:eq(2)").text() == "O")
) {
return "Player O Win";
}
// Vertical Win
// X
// X
// X
if (
($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "X") &&
($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "X") &&
($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "X")
) {
return "Player X Win";
}
// Vertical Win
// O
// O
// O
if (
($("table#play_field tr:eq(0) td:eq(" + i + ")").text() == "O") &&
($("table#play_field tr:eq(1) td:eq(" + i + ")").text() == "O") &&
($("table#play_field tr:eq(2) td:eq(" + i + ")").text() == "O")
) {
return "Player O Win";
}
}
return "Nobody Win";
};
$("table#play_field tr td").click(function(){ console.log("Round: " + current_game_round + " Turn: " + current_game_turn + " CurrentPlayer: " + current_player);
if (!$(this).hasClass("checked")) {
if (current_player == "PlayerX") {
$(this).text("X").addClass("checked");
current_player = "PlayerO";
} else if (current_player == "PlayerO") {
$(this).text("O").addClass("checked");
current_player = "PlayerX";
}
current_game_turn++;
if(winCheck() == "Nobody Win") {
if (current_game_turn != (max_game_turns_number + 1)) {
// Game round continue.
} else {
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Draw");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Draw");
refreshPlayFieldTable ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
}
} else if (winCheck() == "Player X Win") {
PlayerX.scores = PlayerX.scores + 1;
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Win");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Lose");
refreshPlayFieldTable ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
} else if (winCheck() == "Player O Win") {
PlayerO.scores = PlayerO.scores + 1;
$("table#scores tr:eq(" + current_game_round + ") td:eq(1)").text("Lose");
$("table#scores tr:eq(" + current_game_round + ") td:eq(2)").text("Win");
refreshPlayFieldTable ();
current_game_turn = 1;
current_game_round++;
if (current_game_round > 5) {
$("p#round span").text(max_game_rounds_number);
} else {
$("p#round span").text(current_game_round);
}
}
if (current_game_round == (max_game_rounds_number + 1)) {
refreshPlayFieldTable ();
if (PlayerX.scores > PlayerO.scores) {
alert("Game End. Player X Win.");
} else if (PlayerX.scores < PlayerO.scores) {
alert("Game End. Player O Win.");
} else if (PlayerX.scores == PlayerO.scores) {
alert("Game End. Draw.");
}
refreshScoresTable ();
current_game_turn = 1;
current_game_round = 1;
$("p#round span").text(current_game_round);
}
}
console.log("Round: " + current_game_round + " Turn: " + current_game_turn + " CurrentPlayer: " + current_player + " WinCheck: " + winCheck());
});
});
</script>
<title>XO Game</title>
</head>
<body>
</body>
</html>
среда, 14 ноября 2012 г.
DNA Mutate
function in_array (item, array){
for (var i = 0; i < array.length; i++) {
if (array[i] === item) {
return true;
}
}
return false;
}
function getRandomInt(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var Cell = function(){};
Cell.prototype = {
DNA: [],
init: function(){
var dna_letters = ["A", "T", "G", "C"];
for (var i = 0; i < 100; i++) {
this.DNA[i] = dna_letters[getRandomInt(0, 3)];
}
},
hammingDistance: function(cell_object) {
var distance = 0;
for (var i = 0; i < 100; i++) {
if (this.DNA[i] != cell_object.DNA[i]) {
distance++;
}
}
return distance;
},
mutate: function(x){
var mutated_cells = [];
var dna_position;
var number_of_mutations = x;
var dna_letters = ["A", "T", "G", "C"];
while (number_of_mutations > 0) {
dna_position = getRandomInt(0, 99);
if (in_array(dna_position, mutated_cells)) {
continue;
} else {
this.DNA[dna_position] = dna_letters[getRandomInt(0, 3)];
mutated_cells.push(dna_position);
number_of_mutations--;
}
}
}
}
var FirstCell = new Cell();
FirstCell.init();
var SecondCell = new Cell();
SecondCell.init();
console.log(FirstCell.hammingDistance(SecondCell));
FirstCell.mutate(10);
SecondCell.mutate(20);
console.log(FirstCell.hammingDistance(SecondCell));
for (var i = 0; i < array.length; i++) {
if (array[i] === item) {
return true;
}
}
return false;
}
function getRandomInt(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var Cell = function(){};
Cell.prototype = {
DNA: [],
init: function(){
var dna_letters = ["A", "T", "G", "C"];
for (var i = 0; i < 100; i++) {
this.DNA[i] = dna_letters[getRandomInt(0, 3)];
}
},
hammingDistance: function(cell_object) {
var distance = 0;
for (var i = 0; i < 100; i++) {
if (this.DNA[i] != cell_object.DNA[i]) {
distance++;
}
}
return distance;
},
mutate: function(x){
var mutated_cells = [];
var dna_position;
var number_of_mutations = x;
var dna_letters = ["A", "T", "G", "C"];
while (number_of_mutations > 0) {
dna_position = getRandomInt(0, 99);
if (in_array(dna_position, mutated_cells)) {
continue;
} else {
this.DNA[dna_position] = dna_letters[getRandomInt(0, 3)];
mutated_cells.push(dna_position);
number_of_mutations--;
}
}
}
}
var FirstCell = new Cell();
FirstCell.init();
var SecondCell = new Cell();
SecondCell.init();
console.log(FirstCell.hammingDistance(SecondCell));
FirstCell.mutate(10);
SecondCell.mutate(20);
console.log(FirstCell.hammingDistance(SecondCell));
Vanilla JS Наследование классов
function ExtendClass (ChildClass, ParentClass)
{
var BaseParentClass = function(){};
BaseParentClass.prototype = ParentClass.prototype;
var TemporaryParentClass = new BaseParentClass();
for (var property in ChildClass.prototype) {
TemporaryParentClass[property] = ChildClass.prototype[property];
}
ChildClass.prototype = TemporaryParentClass;
ChildClass.prototype.super = ParentClass.prototype;
}
{
var BaseParentClass = function(){};
BaseParentClass.prototype = ParentClass.prototype;
var TemporaryParentClass = new BaseParentClass();
for (var property in ChildClass.prototype) {
TemporaryParentClass[property] = ChildClass.prototype[property];
}
ChildClass.prototype = TemporaryParentClass;
ChildClass.prototype.super = ParentClass.prototype;
}
понедельник, 3 сентября 2012 г.
Vanilla JS framework
Vanilla JS
Vanilla JS is a fast, lightweight, cross-platform framework
for building incredible, powerful JavaScript applications.
for building incredible, powerful JavaScript applications.
Introduction
The Vanilla JS team maintains every byte of code in the framework and works hard each day to make it is small and intuitive. Who's using Vanilla JS? Glad you asked! Here are a few:- YouTube
- Yahoo
- Wikipedia
- Windows Live
- Amazon
- MSN
- eBay
- Microsoft
- Tumblr
- Apple
- PayPal
- Netflix
- Stack Overflow
Download
Ready to try Vanilla JS? Choose exactly what you need!Options
Final size: 0 bytes uncompressed, 25 bytes gzipped.
Testimonials
Vanilla JS makes everything an object, which is very convenient for OO JS applications.
Getting Started
The Vanilla JS team takes pride in the fact that it is the most lightweight framework available anywhere; using our production-quality deployment strategy, your users' browsers will have Vanilla JS loaded into memory before it even requests your site.To use Vanilla JS, just put the following code anywhere in your application's HTML:
- <script src="path/to/vanilla.js"></script>
Speed Comparison
Here are a few examples of just how fast Vanilla JS really is:Retrieve DOM element by ID
| Code | ops / sec | |
|---|---|---|
| Vanilla JS | document.getElementById('test-table'); |
12,137,211
|
| Dojo | dojo.byId('test-table'); |
5,443,343
|
| Prototype JS | $('test-table') |
2,940,734
|
| Ext JS | delete Ext.elCache['test-table']; Ext.get('test-table'); |
997,562
|
| jQuery | $jq('#test-table'); |
350,557
|
| YUI | YAHOO.util.Dom.get('test-table'); |
326,534
|
| MooTools | document.id('test-table'); |
78,802
|
Retrieve DOM elements by tag name
| Code | ops / sec | |
|---|---|---|
| Vanilla JS | document.getElementsByTagName("span"); |
8,280,893
|
| Prototype JS | Prototype.Selector.select('span', document); |
62,872
|
| YUI | YAHOO.util.Dom.getElementsBy(function(){return true;},'span'); |
48,545
|
| Ext JS | Ext.query('span'); |
46,915
|
| jQuery | $jq('span'); |
19,449
|
| Dojo | dojo.query('span'); |
10,335
|
| MooTools | Slick.search(document, 'span', new Elements); |
5,457
|
Code Examples
Here are some examples of common tasks in Vanilla JS and other frameworks:Fade an element out and then remove it
| Vanilla JS | var s = document.getElementById('thing').style; s.opacity = 1; (function(){(s.opacity-=.1)<0?s.display="none":setTimeout(arguments.callee,40)})(); |
|---|---|
| jQuery | <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('#thing').fadeOut(); </script> |
Make an AJAX call
| Vanilla JS | var r = new XMLHttpRequest(); r.open("POST", "path/to/api", true); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200) return; alert("Success: " + r.responseText); }; r.send("banana=yellow"); |
|---|---|
| jQuery | <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $.ajax({ type: 'POST', url: "path/to/api", data: "banana=yellow", success: function (data) { alert("Success: " + data); }, }); </script> |
Further Reading
For more information about Vanilla JS:- check out the Vanilla JS documentation
- read some books on Vanilla JS
- or try out one of the many Vanilla JS plugins.
Vanilla JS
Vanilla JS — очень мощный javascript-фреймворк.
Кто использует Vanilla JS?
Хорошо, что вы спросили, вот несколько примеров: Facebook, Google, YouTube, Yahoo, Wikipedia, Windows Live, Twitter, Amazon, LinkedIn, MSN, eBay, Microsoft, Tumblr, Apple, Pinterest, PayPal, Reddit, Netflix, Stack Overflow. Команда Vanilla JS поддерживает каждый байт кода фреймворка и каждый день много трудится, чтобы сделать его маленьким и интуитивным.
На сайте вы можете скачать фреймворк, выбрав нужную вам функциональность:
- DOM (Манипуляции / Селекторы)
- Прототипная система объектов
- AJAX
- Анимации
- Система событий
- Регулярные выражения
- Функции как объекты
- Замыкания
- Библиотеку математических методов
- Библиотеку для работы с массивами
- Библиотеку для работы со строками
Плюс можете настроить вашу сборку:
- Сжать исходники
- В кодировке UTF8
- Использовать «CRLF» переносы строк (Windows)
При максимальной комплектации фреймворк будет весить:
- несжатый: 0 байт
- сжатый: 25 байт
На сайте вы можете скачать фреймворк, выбрав нужную вам функциональность:
- DOM (Манипуляции / Селекторы)
- Прототипная система объектов
- AJAX
- Анимации
- Система событий
- Регулярные выражения
- Функции как объекты
- Замыкания
- Библиотеку математических методов
- Библиотеку для работы с массивами
- Библиотеку для работы со строками
Плюс можете настроить вашу сборку:
- Сжать исходники
- В кодировке UTF8
- Использовать «CRLF» переносы строк (Windows)
При максимальной комплектации фреймворк будет весить:
- несжатый: 0 байт
- сжатый: 25 байт
Установка Vanilla JS
Команда Vanilla JS гордится тем фактом, что это самый лёгкий фреймворк всех времён; используйте нашу стратегию выкладки на продакшн, и браузеры ваших пользователей загрузят Vanilla JS в память ещё даже до того, как начнут загружать ваш сайт.
Чтобы подключить Vanilla JS, просто добавьте следующую строку в ваш HTML:
<script src="path/to/vanilla.js"></script>
Когда будете готовы выложить свой проект на продакшн, смените подключение на намного более быстрый метод:
Всё верно, совсем без кода. Vanilla JS настолько популярна, что браузеры автоматически загружают фреймворк уже лет десять.
Чтобы подключить Vanilla JS, просто добавьте следующую строку в ваш HTML:
<script src="path/to/vanilla.js"></script>
Когда будете готовы выложить свой проект на продакшн, смените подключение на намного более быстрый метод:
Всё верно, совсем без кода. Vanilla JS настолько популярна, что браузеры автоматически загружают фреймворк уже лет десять.
Сравнение скорости работы VanillaJS с другими фреймворками
Поиск DOM-элемента по ID
| Фреймворк | Код | Оп.\сек |
|---|---|---|
| Vanilla JS |
|
12,137,211 |
| Dojo |
|
5,443,343 |
| Prototype JS |
|
2,940,734 |
| Ext JS |
|
997,562 |
| jQuery |
|
350,557 |
| YUI |
|
326,534 |
| MooTools |
|
78,802 |
Поиск элементов по названию тэга
| Фреймворк | Код | Оп.\сек |
|---|---|---|
| Vanilla JS |
|
8,280,893 |
| Prototype JS |
|
62,872 |
| YUI |
|
48,545 |
| Ext JS |
|
46,915 |
| jQuery |
|
19,449 |
| Dojo |
|
10,335 |
| MooTools |
|
5,457 |
Примеры кода
Плавно скрыть элемент
| Vanilla JS |
|
| jQuery |
|
AJAX-вызов
| Vanilla JS |
|
| jQuery |
|
Подписаться на:
Сообщения (Atom)