Обычно мы разбираемся с случайно тронутыми картами по порядку от маленького до большого (я помню, когда я был ребенком, игрок не мог поймать обе колоды карт). Это эссе состоит в том, чтобы осознать эту функцию, чтобы ознакомиться с соответствующими знаниями массивов сортировки в JS и других вещах.
Используйте знаний:
1. Создать объекты на заводе
2.JS Array Sort () Метод
Кода -копия выглядит следующим образом:
var testarr = [1, 3, 4, 2];
testarr.sort (function (a, b) {
вернуть A - B;
})
оповещение (testarr.toString ()); // 1,2,3,4
testarr.sort (function (a, b) {
вернуть B- A;
})
оповещение (testarr.toString ()); // 4,3,2,1
3.js-math.radom () Случайное число
Math.random (); // 0-1 полученное число, больше или равно 0 и меньше 1
4.JS Использование сплайсинга массива
Кода -копия выглядит следующим образом:
// Первый параметр - начальная позиция вставки
// Второй параметр - это количество элементов, удаленных из исходной позиции
// Третий параметр - это элемент, который начинает вставлять в начальную позицию
//пример
var testarr = [1, 3, 4, 2];
testarr.splice (1, 0, 8);
оповещение (testarr.toString ()); // 1,8,3,4,2
var testarr1 = [1, 3, 4, 2];
testarr1.splice (1, 1, 8);
Alert (testarr1.toString ()); // 1,8,3,4,2
5.JS Использование смены массива
Кода -копия выглядит следующим образом:
// возвращает первый элемент в массиве и удалите первый элемент в массиве.
//пример
var testarr = [1, 3, 4, 2];
var k = testarr.shift ();
оповещение (testarr.toString ()); // 3,4,2
предупреждение (k); // 1
С этими основными знаниями мы можем начать играть в карты. Предположим, что один человек касается карт, карта Трампа случайна. Каждый раз, когда мы рисуем карту, мы должны вставить ее в карту в нашей руке, гарантируя, что порядок от малого до большого!
Шаг 1: Сначала нам нужно написать метод для создания объектов игровой карты:
Кода -копия выглядит следующим образом:
/*Создание различных карт в режиме заводских
*Номер: номер на карте
*Тип: цвет карты
*/
var cards = (function () {
var card = function (номер, тип) {
this.number = число;
this.type = type;
}
возврат функции (номер, тип) {
вернуть новую карту (номер, тип);
}
}) ()
Шаг 2: Создать игровые карты, перетасовать их и хранить
Кода -копия выглядит следующим образом:
var Radomcards = []; // Случайный массив хранения карт
var mycards = []; // хранение карты, которые вы коснулись
// Цветовый цвет 0-SPAD 1-сплам BLOSSOM 2-Current 3-Heart 4-Big Ghost 5-Little Ghost
// значение 0-13 представляет призрак, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, J, Q, k;
функция createCompleteCard () {
var index = 2;
var arr = [];
для (var i = 0; i <= 13; i ++) {
if (i == 0) {
arr [0] = новые карты (i, 4);
arr [1] = новые карты (i, 5);
} еще {
for (var j = 0; j <= 3; j ++) {
arr [index] = новые карты (i, j);
index ++;
}
}
}
RadomCards = sortCards (arr);
Show (); // Показать текущую карту на странице
}
// закрыть карты
функция SortCards (arr) {
arr.sort (function (a, b) {
Возврат 0,5 - Math.random ();
})
возврат Arr;
}
Шаг 3: Начните прикасаться к картам. При прикосновении к картам мы должны сначала определить позицию вставки, а затем вставить новую карту в указанную позицию, чтобы сформировать новый аккуратный заказ.
Кода -копия выглядит следующим образом:
// Как коснуться карты
функция getCards (cardobj) {
var k = incardsidex (mycards, cardobj); // Рассмотрим позицию вставки
Mycards.splice (k, 0, cardobj); // Вставка, чтобы сформировать новый заказ
}
/*【Получите позицию, в которую должна быть вставлена карта】
*ARR: текущая карта в вашей руке
*OBJ: недавно тронутая карта
*/
функция incardsIndex (arr, obj) {
var len = arr && arr.length || 0;
if (len == 0) {
возврат 0;
} else if (len == 1) {
if (obj.number> = arr [0] .number) {
возврат 1;
} еще {
возврат 0;
}
} еще {
var backi = -1;
для (var i = 0; i <len; i ++) {
if (obj.number <= arr [i] .number) {
backi = i;
перерыв;
}
}
if (backi == -1) {
backi = len;
}
вернуть Backi;
}
}
ХОРОШО! Запустите кнопку кнопки на HTML, чтобы касаться карты, нажмите и коснитесь по одной карте за раз! И покажи это
Кода -копия выглядит следующим образом:
function start () {// Как коснуться карт, прикоснись по одному за раз
if (radomcard.length> 0) {
GetCards (radomCards.Shift ());
Показывать();
} еще {
оповещение ("нет");
}
}
// Этот метод шоу используется для отображения текущего движения карты на странице
функция show () {
var lenold = RadomCards.Length;
var lennew = mycards.length;
var html = "";
for (var i = 0; i <lenold; i ++) {
html + = "<div class = 'pai'> <b>" + radomcards [i] .type + "</b>-<div class = 'nu'>" + radomcards [i] .number + "</div> </div>";
}
document.getElementbyId ("old"). innerhtml = html;
html = "";
for (var i = 0; i <lennew; i ++) {
html + = "<div class = 'pai new'> <b>" + mycards [i] .type + "</b>-<div class = 'nu'>" + mycards [i] .number + "</div> </div>";
}
document.getElementById ("new"). innerHtml = html;
}
Код на HTML и CSS
Кода -копия выглядит следующим образом:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<стиль типа = "text/css">
.boom {
Ширина: 50px;
Высота: 50px;
Граница: твердый 1px красный;
позиция: абсолютно;
Верх: 5px;
Слева: 5px;
}
.pai
{
Ширина: 50px;
высота: 100px;
Граница: твердый 1px красный;
Мяботая маржа: 3PX;
Плавание: осталось;
}
.новый
{
Граница: твердый 1PX синий;
}
.NU
{
Текст-альбом: Центр;
размер шрифта: 24px;
маржинальная версия: 25px;
}
</style>
</head>
<тело>
<!-<div> </div>->
<input type = "button" value = "start" onclick = "createCompleteCard ()" />
<input type = "button" value = "touch the card" onclick = "start ()" />
<br/>
Название карты: <div id = "old"> </div>
<div style = "clear: оба"> </div>
<HR />
Карта, которую я коснулся: <div id = "new"> </div>
</body>
</html>