记忆随机数字块

css部分

.card2d { position: absolute; }

.card { width: 100%; height: 100%; cursor: pointer; }

.card-a { background-color: red; color: white; text-align: center; font-size: 30pt; }

.card-b { background-color: blue; }

 

html部分

<div id="game-div">

</div>

 

js部分

window.ucai = window.ucai || {};

(function () {

function Card(number) { this._width = 48; this._height = 48; this._number = number;

this._htmlNode = document.createElement("div"); this._htmlNode.className = "card2d"; this._cardA = document.createElement("div"); this._cardA.className = "card card-a"; this._cardA.innerHTML = "" + this._number; this._htmlNode.appendChild(this._cardA); this._cardB = document.createElement("div"); this._cardB.className = "card card-b"; this._htmlNode.appendChild(this._cardB);

this._htmlNode.style.width = this._width + "px"; this._htmlNode.style.height = this._height + "px";

this.showA();

var self = this; this._htmlNode.addEventListener("click", function (e) { if (self.onclick) { self.onclick(self); } }); }

var p = Card.prototype;

p.getWidth = function () { return this._width; };

p.getHeight = function () { return this._height; };

p.showA = function () { this._cardA.style.display = "block"; this._cardB.style.display = "none"; this._aVisble = true; };

p.showB = function () { this._cardA.style.display = "none"; this._cardB.style.display = "block"; this._aVisble = false; };

p.isAVisible = function () { return this._aVisble; };

p.getHtmlNode = function () { return this._htmlNode; };

p.getNumber = function () { return this._number; };

/** * 设置位置 * @param {number|Object} xOrPosition * @param {number} y */ p.setPosition = function (xOrPosition, y) { switch (arguments.length) { case 1: this._htmlNode.style.left = xOrPosition.x + "px"; this._htmlNode.style.top = xOrPosition.y + "px"; break; case 2: this._htmlNode.style.left = xOrPosition + "px"; this._htmlNode.style.top = y + "px"; break; } };

ucai.Card = Card;})();

 

 

(function () {

var gameDiv = document.querySelector("#game-div"); var allPoints = []; var currentNumber = 1; var cards = [];

function createPoints() { allPoints.length = 0;

for (var i = 0; i < 8; i++) { for (var j = 0; j < 8; j++) { allPoints.push({x: 50 * i, y: 50 * j}); } } }

function cClickedHandler(card) { if (currentNumber == card.getNumber()) { gameDiv.removeChild(card.getHtmlNode());

var index = cards.indexOf(card); if (index != -1) { cards.splice(index, 1);

if (currentNumber == 1) { for (var i = 0; i < cards.length; i++) { cards[i].showB(); } }

if (cards.length <= 0) { alert("成功了"); } }

currentNumber++; } else { alert("点错了"); } }

function addCards() {

cards.length = 0;

for (var i = 1; i <= 6; i++) { var c = new ucai.Card(i); gameDiv.appendChild(c.getHtmlNode()); cards.push(c);

var index = Math.floor(Math.random() * allPoints.length); c.setPosition(allPoints[index]); allPoints.splice(index, 1); c.onclick = cClickedHandler; } }

function init() { currentNumber = 1; createPoints(); addCards(); }

init();})();

转载于:https://www.cnblogs.com/lijiahui199494/p/5825006.html