react连连看
// Math.floor(t * Math.random());
var isInclude = function (array, element) {
let alen = array.length;
for (let i = 0; i
{num}
);
}
});
var GameTable = React.createClass({
getInitialState: function () {
return this.props;
},
render: function () {
let blocks = this.props.blocks;
let selectedGrid = this.props.selectedGrid;
let _lines = [];
let _line;
let attr = {};
for (let i = 0; i );
}
_lines.push(
);
}
return (
);
}
});
//*/
var GameBox = React.createClass({
getInitialState: function () {
let [lines, remaining] = this.getBlocks(this.props.row, this.props.col, this.props.pairs);
return {
...this.props,
blocks: lines,
remaining: remaining,
selectedGrid: [],
isGaming: true,
maxCornerLen: 2
};
},
componentDidMount: function () {
},
componentWillUnmount: function () {
},
getRandomPositions: function (row, col, pairs, blocks) {
let i, j;
let _tmpNums = [];
for (i = 0; i = ps.length) {
//
}
if (ps[n]) {
blocks[i][j].num = ps[n];
blocks[i][j].bgc = getColor(ps[n]);
}
n++;
}
}
let remaining = pairNum * pairs;
return [blocks, remaining];
},
getBlocks: function (row, col, pairs) {
let line = [];
let lines = [];
for (let i = 0; i 0)
return true;
return false;
},
doRemove: function (rc1, rc2) {
let toRemoves = this.findPath(rc1, rc2);
//console.log(toRemoves);
this.setState({isGaming: false});
let _this = this;
let flashSpeed = 200;
let _len = toRemoves.length;
for (let i = 0; i = row || rc[1] = col);
},
findDirectRcs: function (oriRcs, rc2) {
let {row, col, blocks} = this.state;
let retRes = [];
let hs = {};
let _rc, _ds, _rc2;
for (let i = 0; i
还剩{this.state.remaining}对
{this.state.msg}
宽:
每个数字有几对:
);
}
});
var gb = ReactDOM.render(
,
document.getElementById("llk_content")
);
$("#llk_content").find("table").attr("border", "3px");//.attr("rules", "all");
gb.changeRC(7, 9, 3);
// ]]>
react连连看的更多相关文章
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- React 入门教程
React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...
- 通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
- 2017-1-5 天气雨 React 学习笔记
官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...
- RxJS + Redux + React = Amazing!(译二)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
- React的使用与JSX的转换
前置技能:Chrome浏览器 一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...
随机推荐
- 运维脚本while语法
循环的意思就是让程序重复地执行某些语句; whiler循环就是循环结构的一种,当事先不知道循环该执行多少次,就要用到while循环; while循环语句的运行过程 使用while循环语句时,可以根据特 ...
- (原创)Verilog三段式状态机
下面以上图一个简单的FSM说明三段式Verilog状态机范式: `timescale 1ns / 1ps module FSM( clk,rst_n, in1,in2, out1,out2, CS,N ...
- 10/03/2019 PCL-1.8.1 Ubuntu 16.04 boost 1.69 CUDA 9.0 installation
cmake -DCMAKE_BUILD_TYPE=None -DBUILD_GPU=ON -DBUILD_CUDA=ON -DBUILD_gpu_kinfu=ON -DBUILD_gpu_kinfu_ ...
- Qt设置创建部分半透明,上面控件不透明
//头文件#pragma once #include <QWidget> #include "ui_widgetFullAD.h" class widgetFullAD ...
- 鼠标跟随效果 vue或者js通用
this.$refs.tooltip.getBoundingClientRect() => 用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. ...
- v-echart 按需加载
import 'v-charts/lib/style.css';import VeBar from 'v-charts/lib/bar' // 条形图import VeRadar from 'v-ch ...
- CentOS 7 环境下GitLab安装及基本配置
新实验室要求重新建设GitLab,对于我来讲,是第一次有机会当元老参与实验室的建设.下面分享我自己的实测经验: 1. 安装依赖软件并设置开机启动 yum install curlpolicycoreu ...
- Linux环境下mysql主从同步环境搭建
#my.cnf添加内容vim /etc/my.cnf添加以内容: ## replicationserver_id=195binlog-ignore-db=mysqlbinlog_format=mixe ...
- 机器视觉:MobileNet 和 ShuffleNet
虽然很多CNN模型在图像识别领域取得了巨大的成功,但是一个越来越突出的问题就是模型的复杂度太高,无法在手机端使用,为了能在手机端将CNN模型跑起来,并且能取得不错的效果,有很多研究人员做了很多有意义的 ...
- AI之旅(4):初识逻辑回归
前置知识 求导 知识地图 逻辑回归是用于分类的算法,最小的分类问题是二元分类.猫与狗,好与坏,正常与异常.掌握逻辑回归的重点,是理解S型函数在算法中所发挥的作用,以及相关推导过程. 从一个例子 ...