临风而眠

react入门学习:井字棋游戏（官方文档教程）

react入门学习:井字棋游戏

学习教程来自官方文档：https://react.docschina.org/tutorial/tutorial.html#what-are-we-building

文章目录

react入门学习:井字棋游戏
- 一.创建项目
- - - 遇到的问题
    - npx create-react-app my-app 太慢
- 二.概览
- - 1.初始代码
  - 2.render方法
  - 3.Props传递数据
  - - 修改代码，将数据从Board组件传递到Square组件
  - 4.给组件添加交互
  - - 给Square组件实现“记忆”功能
- 三.游戏完善
- - 1.状态提升
  - 2.函数式组件
  - 3.轮流落子
  - 4.判断胜出者
  - 5.目前代码
- 四.历史记录功能
- - 1.提升状态
  - 2.展现历史步骤记录
  - 3.最终代码

一.创建项目

1st:
```
npx creact-react-app my-app
```
小tips：npm与npx的区别
把源代码删掉
```
cd src
del *
```
windows命令行使用del *
在src目录下新建文件
```
touch index.css
touch index.js
```

在 index.js写入:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

运行网页
```
cd my-app
npm start
```
此时应该能看到空白网页

遇到的问题

npx create-react-app my-app 太慢

npm查看源地址以及更换源地址
解决npx create-react-app速度过慢的问题

二.概览

1.初始代码

html文件就是自动生成的public路径下的index.html

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React Apptitle>
  head>
  <body>
    <noscript>You need to enable JavaScript to run this app.noscript>
    <div id="root">div>
    
  body>
html>

CSS文件 src路径下的index.css

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

js文件 src路径下的index.js

import React form 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Square extends React.Component {
    render() {
        return (
        	
		);
        //return后面的内容加括号,防止VScode等编辑器自动在return后面加分号
    }
}

class Board extends React.Component {
    
    renderSquare(i){
        return ;
    }
    
    render() {
        const status = 'Next player:X';
        
        return (
        	
            	
                	{status}
                
                
                
                	{this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                
                
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                
                
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                
            
            
        
        )
    }
    
}

class Game extends React.Component {
    render() {
        return (
        	
            	
                	
                
                
                
                	{ }
                    { }
                
            
        )
    }
}

ReactDOM.render(
	,
    document.getElementById('root')
)

初始代码中有三个React组件
- Square
  - 渲染了单独的
- Board
  - 渲染了9个方块
- Game
  - 渲染了含有默认值的一个棋盘

2.render方法

React根据描述把结果展示出来
render方法的返回了一个React元素
上面的代码使用了JSX语法糖

3.Props传递数据

修改代码，将数据从Board组件传递到Square组件

在Board组件的renderSquare方法中,改写代码,将名为value的prop传递到Square中
```
renderSquare(i) {
	return <Square value={i} />;
}
```

然后,修改Square组件的render方法，在button中加入内容

class Square extends React.Component {
	render() {
		return(
			
		);
	}
}

修改后,在my-app路径下打开终端使用npm start启动项目

在渲染结果中,可以看到每个方格中都有数字
刚刚修改代码的过程中，把一个prop从父组件Board传递给了子组件Square
- 在 React 应用中，数据通过 props 的传递，从父组件流向子组件

4.给组件添加交互

这一步的目标是让棋盘的在点击之后每个格子能落下”X"作为棋子
首先修改Square组件的render()方法的返回值中的button标签

增加onClick属性
```
class Square extends React.Component {
    render() {
        return (
            
        );
    }   
}
```
箭头函数也可以写为

onClick={function(){alert('click'); }}

但是箭头函数可以减少代码量
效果

给Square组件实现“记忆”功能

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

通过state来实现“记忆”功能
在React组件的构造函数中设置this.state初始化state

this.state应被视为一个组件的私有属性。在 this.state 中存储当前每个方格（Square）的值，并且在每次方格被点击的时候改变这个值。

首先,在Square中用构造函数来初始化state

class Square extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			value : null.
		};
	}
	
	render() {
		return (
			
		);
	}
}

在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头

其次,修改Square组件的render方法，实现每当方格被点击时显示当前state值

方法是在Square组件的render方法中的onClick事件监听函数中调用this.setState
```
class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      
    );
  }
}
```
这样子就能实现：在每次

三.游戏完善

井字棋游戏要放置 "X"和"O"两种棋

1.状态提升

为Board组件添加构造函数，将Board组件的初始状态设置为长度为9的空数组值

constructor(props) {
        super(props);
        this.state = {
            squares: Array(9).fill(null),
        };
    }

其次

考虑到填充棋盘后,每个格子上可能的形式是null,O,X三种

这些我们打算存储到squares数组里面,那么就要修改Board的renderSquare方法来读取这些值
```
    renderSquare(i) {
        return ;
    }
```
这样，每个Square就都能接收到一个 value prop 了，这个 prop 的值可以是 'X'、 'O'、或 null（null 代表空方格）。

接着，要修改Square的事件监听函数

 renderSquare(i) {
        return ( this.handleClick(i)}
        />);
    }

再其次,从Board组件向Square组件中传递value和onClick两个props参数

需要修改Square的代码

class Square extends React.Component {
	render(){
		return (
			
		);
	}
}

当每一个Square被点击时,Board提供的onClick函数就会触发,这是如何实现的呢？

于是,添加handleClick方法


    handleClick(i) {
        const squares = this.state.squares.slice();
        squares[i] = 'X';
        this.setState({squares: squares});
    }

2.函数式组件

定义一个函数，接收props参数，然后返回需要渲染的元素
把Square组件重写为一个函数组件
```
function(props)
{
	return(
	
	
	);
}
```
可以注意到this.props被换成了props

箭头函数也变成了onClick={props.onClick}

3.轮流落子

将"X"默认设置为先手棋，设置一个布尔值来表示下一步轮到哪个玩家

棋子每移动一步，xIsNext都会反转，该值确定下一步轮到哪个玩家，并且游戏的状态会被保存下来

在构造函数中添加xIsNext

修改handleClick函数

constructor(props) {
        super(props);
        this.state = {
            squares: Array(9).fill(null),
            xIsNext: true,

        };
    }

    handleClick(i) {
        const squares = this.state.squares.slice();
        squares[i] = this.state.xIsNext? 'X':'O';
        this.setState({
            squares: squares,
            xIsNext:!this.state.xIsNext,
        });
    }

效果

这样子就实现了轮流落子了

CSS修改了一下

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol,
ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 5px solid rgb(7, 130, 168);
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 50px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 50px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

显示轮到哪个玩家

在Board组件的render方法中修改status的值

    render() {
        const status = 'Next player:'+(this.state.xIsNext?'X':'O');

        return (
            
                
                    {status}
                
                
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                
                
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                
                
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                
            
        )
    }

效果：

4.判断胜出者

定义一个函数

function calculateWinner(squares) {
	const lines = [
		[0,1,2],
		[3,4,5],
		[6,7,8],
		[0,3,6],
		[1,4,7],
		[2,5,8],
		[0,4,8],
		[2,4,6],
	
	];
	for(let i = 0 ; i < lines.length ; i++) {
		const[a,b,c] = lines[i];
		if(squares[a]&&squares[a]===squares[b]&&squares[a]===squares[c]){
		return squares[a];
		}
	}
    
    return null;
}

代码中const[a,b,c]=lines[i]

相当于
const a = lines[i][0];
const b = lines[i][1];
const c = lines[i][2];
参考

JavaScript——编程风格

ES6 解构赋值

接着，在Board组件的render方法中调用刚刚那个函数检查是否有玩家胜出，有人胜出就把玩家信息显示出来

修改Board组件的render方法

    render() {
        const winner = calculateWinner(this.state.squares);
        let status;
        if (winner) {
            status = 'Winner:' + winner;

        } else {
            status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
        }
        
        return (
            
                
                    {status}
                
                
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                
                
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                
                
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                
            
        )
    }

效果

此时还有个问题

已经有人胜出了，但是棋盘还能落子

还有个bug，当某个Square落子之后，还能覆盖继续落子

修改handleClick，使得当有玩家胜出时,或者某个Square被填充时,该函数不做任何处理直接返回

   handleClick(i) {
        const squares = this.state.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext? 'X':'O';
        this.setState({
            squares: squares,
            xIsNext:!this.state.xIsNext,
        });
    }

5.目前代码

此时已经实现了井字棋游戏的功能

目前的index.js代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// class Square extends React.Component {
// 	render(){
// 		return (
// 			
// 		);
// 	}
// }
function Square(props) {

    return (
        
    );
}
class Board extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            squares: Array(9).fill(null),
            xIsNext: true,

        };
    }

    handleClick(i) {
        const squares = this.state.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext? 'X':'O';
        this.setState({
            squares: squares,
            xIsNext:!this.state.xIsNext,
        });
    }
    renderSquare(i) {
        return ( this.handleClick(i)}
        />);
    }

    render() {
        const winner = calculateWinner(this.state.squares);
        let status;
        if (winner) {
            status = 'Winner:' + winner;

        } else {
            status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
        }
        
        return (
            
                
                    {status}
                
                
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                
                
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                
                
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                
            
        )
    }
}

class Game extends React.Component {
    render() {
        return (
            
                
                    
                
                
                    { }
                    { }
                
            
        )
    }
}

ReactDOM.render(
    ,
    document.getElementById('root')
)

function calculateWinner(squares) {
    const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ];

    for (let i = 0; i < lines.length; i++){
        const [a, b, c] = lines[i];
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }

    }
    return null;

}

四.历史记录功能

1.提升状态

目标是实现顶层Game组件展示出一个历史步骤的列表

这个功能需要访问history的数据

故把history这个state放在顶层Game组件中

首先，在Game组件的构造函数中初始化state

constructor(props) {
	super(props);
	this.state = {
		history:[{
			squares: Array(9).fill(null),
		}],
		xIsNext: true,
	};
}

接着

修改后的Board组件的代码：

class Board extends React.Component {

    handleClick(i) {
        const squares = this.state.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext? 'X':'O';
        this.setState({
            squares: squares,
            xIsNext:!this.state.xIsNext,
        });
    }
    renderSquare(i) {
        return ( this.props.onClick(i)}
        />);
    }

    render() {
        const winner = calculateWinner(this.state.squares);
        let status;
        if (winner) {
            status = 'Winner:' + winner;

        } else {
            status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
        }
        
        return (
            
                
                    {status}
                
                
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                
                
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                
                
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                
            
        )
    }
}

接着，修改Game组件的render函数,用最新的一次历史记录来确定并展示游戏的状态

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            history: [{
                squares: Array(9).fill(null),
            }],
            xIsNext: true,
        };
    }
    render() {
        const history = this.state.history;
        const current = history[history.length - 1];
        const winner = calculateWinner(current.squares);
        let status;
        if (winner) {
            status = 'Winner: ' + winner;

        } else {
            status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
        }
        return (
            
                
                    this.handleClick(i)}
                    />
                
                
                    {status}
                    { }
                
            
        )
    }
}

因为Game组件渲染了游戏状态，所以可以把Board组件的render方法中的对应代码移除，修改Board组件如下

class Board extends React.Component {
  renderSquare(i) {
    return (
       this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      
        
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        
        
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        
        
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        
      
    );
  }
}

还要把Board组件的handleClick方法移动到Game组件中

    handleClick(i) {
        const history = this.state.history
        const current = history[history.length - 1];
        const squares = current.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            history: history.concat([{
                squares:squares,
            }]),
            xIsNext:!this.state.xIsNext,
        })
    }

2.展现历史步骤记录

可以把历史记录以历史步骤列表的形式展现给玩家
可以通过map方法，把历史步骤映射为代表按钮的React元素
- 然后展示出一个按钮的列表
- 点击这些按钮，可以跳转到对应的历史步骤

在Game组件的render方法中调用history的map方法

          const moves = history.map((step, move) => {
              const desc = move ?
                  'Go to move #' + move :
                  'Go to game start';
              return (
                  
                      
                  
              )
    })

对于井字棋历史记录的每一步，都创建出了一个包含按钮

在Game的构造函数中添加stepNumber这个值来表示我们当前正在查看哪一项历史记录

constructor(props) {
        super(props);
        this.state = {
            history: [{
                squares: Array(9).fill(null),
            }],
            stepNumber: 0,
            xIsNext: true,
        };
    }

添加jumpTo方法


    jumpTo(step) {
        this.setState({
            stepNumber: step,
            xIsNext:(step%2)===0,
        })
    }

修改Game组件的handleClick方法

    handleClick(i) {
        const history = this.state.history.slice(0, this.state.stepNumber + 1);

        const current = history[history.length - 1];
        const squares = current.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            history: history.concat([{
                squares:squares,
            }]),
            stepNumber: history.length,
            xIsNext:!this.state.xIsNext,
        })
    }

再修改Game组件的render方法,将代码改为根据当前stepNumber渲染

const current = history[this.state.stepNumber];

3.最终代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// class Square extends React.Component {
// 	render(){
// 		return (
// 			
// 		);
// 	}
// }
function Square(props) {

    return (
        
    );
}
class Board extends React.Component {
  renderSquare(i) {
    return (
       this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      
        
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        
        
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        
        
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        
      
    );
  }
}

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            history: [{
                squares: Array(9).fill(null),
            }],
            stepNumber: 0,
            xIsNext: true,
        };
    }
    handleClick(i) {
        const history = this.state.history.slice(0, this.state.stepNumber + 1);

        const current = history[history.length - 1];
        const squares = current.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            history: history.concat([{
                squares:squares,
            }]),
            stepNumber: history.length,
            xIsNext:!this.state.xIsNext,
        })
    }

    jumpTo(step) {
        this.setState({
            stepNumber: step,
            xIsNext:(step%2)===0,
        })
    }

      render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);
    
          const moves = history.map((step, move) => {
              const desc = move ?
                  'Go to move #' + move :
                  'Go to game start';
              return (
                  
                      
                  
              )
    })      
    let status;
    if (winner) {
      status = 'Winner: ' + winner;
    } else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      
        
           this.handleClick(i)}
          />
        
        
          {status}
          {moves}
        
      
    );
  }
}

ReactDOM.render(
    ,
    document.getElementById('root')
)

function calculateWinner(squares) {
    const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ];

    for (let i = 0; i < lines.length; i++){
        const [a, b, c] = lines[i];
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }

    }
    return null;

}

效果

你可能感兴趣的:(前端,react.js,游戏,javascript)

2021年12月19日，春蕾教育集团团建活动感受——黄晓丹黄错错加油
感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
从鸡肉高汤到记忆的魔法再到有效提示的艺术步子哥人工智能
还记得小时候那些天马行空的白日梦吗？也许只要按下键盘上的某个神奇组合，电脑就会发出滴滴的声响，一个隐藏的世界突然在你眼前展开，让你获得超凡的能力，摆脱平凡的生活。这听起来像是玩过太多电子游戏的幻想，但实际上，间隔重复系统给人的感觉惊人地相似。在最佳状态下，这些系统就像魔法一样神奇。本文将以一个看似平凡的鸡肉高汤食谱为例，深入浅出地探讨如何编写有效的间隔重复提示，让你像掌握烹饪技巧一样轻松地掌握记忆
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
2019-08-08 65454
东莞家庭聚会出行旅游去哪里玩住？想起来有很久没有和家里人聚会啦，这次组织家人来到威廉古堡别墅轰趴，一大家子27个人，在别墅订了一天办，玩的非常的开心，小孩子玩游戏机，也很放心不会丢，我们就在唱歌、打麻将、打桌球一系列的活动，还准备小次等小孩生日在别墅举办，还可以给孩子做一个生日的策划
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
C语言判断回文数 Y雨何时停T c语言学习
一，回文数概念“回文”是指正读反读都能读通的句子，它是古今中外都有的一种修辞方式和文字游戏，如“我为人人，人人为我”等。在数学中也有这样一类数字有这样的特征，成为回文数。设n是一任意自然数。若将n的各位数字反向排列所得自然数n1与n相等，则称n为一回文数。例如，若n=1234321，则称n为一回文数；但若n=1234567，则n不是回文数。二，判断回文数实现思路一：数组与字符串将数字每一位按顺序放
用Python实现简单的猜数字游戏程序媛了了 python 游戏 java
猜数字游戏代码：importrandomdefpythonit():a=random.randint(1,100)n=int(input("输入你猜想的数字："))whilen!=a:ifn>a:print("很遗憾，猜大了")n=int(input("请再次输入你猜想的数字："))elifna::如果玩家猜的数字n大于随机数字a，则输出"很遗憾，猜大了"，并提示玩家再次输入。elifn
2024.9.14 Python，差分法解决区间加法，消除游戏，压缩字符串 RaidenQ python 游戏开发语言算法力扣
1.区间加法假设你有一个长度为n的数组，初始情况下所有的数字均为0，你将会被给出k个更新的操作。其中，每个操作会被表示为一个三元组：[startIndex,endIndex,inc]，你需要将子数组A[startIndex…endIndex]（包括startIndex和endIndex）增加inc。请你返回k次操作后的数组。示例:输入:length=5,updates=[[1,3,2],[2,4,
快点三国哪个平台有返利？快点三国哪个平台充值折扣最高？诸葛村夫123
标题：快点三国哪个平台有返利？快点三国哪个平台充值折扣最高？今天我告诉大家一个可以申请内部号的平台，直接比返利号牛逼10倍不止，最近几年出现了特别多的手游平台。每个平台的福利的各不相同，但是本质是一样的，就给点礼包，首充什么的。感觉毫无卵用。就在上个月，经一个做游戏行业的朋友介绍，了解到了一个平台“游人特权站”，特别NB。这个平台给的是内部号，什么是内部号？说白了就是托号。进服就会给300-500
2019年8月6日星期二晴李佳晨宝宝
今天我写完作业以后，我玩儿了一会儿我的拼装玩具，拼装玩具是我的世界的游戏里面的乐高，我拿出乐高把它拼成上次的迷宫，然后又给他升级了一下，我拆出上面一些部分的零件加大了游戏的难度，然后我又做了一个小牛圈。这个小牛圈里面住的是猪和牛，还有羊，给那里摆了一块草地，他们想吃东西直接在草地上吃，然后我把牛圈建了一个遮阳伞，防止天气太热把它们晒死。然后这样我的小牛就万无一失了，我再看看加大难度后的迷宫，实在是
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
科幻游戏《外卖员模拟器》主要地理环境设定 (1) 穷人小水滴游戏科幻设计
游戏名称:《外卖员模拟器》(英文名称:waimai_se)作者:穷人小水滴本故事纯属虚构,如有雷同实属巧合.故事发生在一个(架空)平行宇宙的地球,21世纪(超低空科幻流派).相关文章:https://blog.csdn.net/secext2022/article/details/141790630目录1星球整体地理设定2巨蛇国主要设定3海蛇市主要设定3.1主要地标建筑3.2交通3.3能源(电力)
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
阅读《认知觉醒》读书笔记就看看书
本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
高考后该不该给孩子买电脑，什么情况能买？什么情况不能买？寻求改变
我知道家长们很担心，怕买了电脑小孩沉迷游戏，耽误了学业，也不利于身体健康。对于准大学生来说，基本上在18岁左右，也不算小了，但在很多父母眼里，依旧是个小孩子。数据显示，这种情况是有发生的，大学生约70%的电脑主要被用于玩网络游戏，如果没有养成一个用良好的习惯，对孩子影响是非常大的。我总结为三买，三不买。最近有看到群里很多家长再问，小孩上大学该不该给他买电脑，要买和不买两种观点的家长都有，那么哪种情
崩坏星穹铁道哪个角色值得培养崩坏星穹铁道新手角色优先级教学会飞滴鱼儿
崩坏星穹铁道新手角色培养攻略：哪些角色值得投资？在《崩坏星穹铁道》中，角色的强度和培养一直是玩家们关心的焦点。要想体验更爽快的游戏过程，选对角色至关重要。那么，哪些角色值得投资培养呢?本篇教学文章将针对新手玩家，从T0到T1强度的角色中为你做出详尽解析。游戏豹官网现在的手游平台很多，但是在游戏界有这么一个传说：“喜欢肝的玩家不如氪金玩家，氪金玩家不如内部福利玩家”，这就是游戏界可悲的生物链，很多平
屠龙决战沙城怎么才能当托屠龙决战沙城如何可以申请内部福利号诸葛村夫123
我2015年从事游戏行业，曾担任某游戏平台的运营负责人。很多朋友玩了一辈子手游可能都还不知道手游托这事儿。你们经常在游戏中遇到那些土豪玩家，进服就充几百，几千的玩家，十有八九都是托，也就是我们常说的内部号。每个人的钱都不是大风刮来的，并不是每个人都舍得在游戏里充这么多钱。那这些内部号的充值到底是哪儿来的呢？其实内部号由于运营商扶持，这种账号一开始就领先普通账号十倍不止。内部号进服运营商会给300-
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
4 大低成本娱乐方式: 小说, 音乐, 视频, 电子游戏穷人小水滴娱乐音视频低成本小说游戏
穷人如何获得快乐?小说,音乐,视频,游戏,本文简单盘点一下这4大低成本(安全)娱乐方式.这里是穷人小水滴,专注于穷人友好型低成本技术.(本文为58号作品.)目录1娱乐方式1.1小说(网络小说)1.2音乐1.3视频(b站)1.4游戏(电子游戏/计算机软件)2低成本:一只手机即可3总结与展望1娱乐方式这几种,也可以说是艺术的具体形式.更专业的说,(娱乐)是劳动力再生产的重要组成部分.使人放松,获得快乐
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
《爱情》杜文霞
杜文霞坚持原创分享第39天（20190214）图片发自App对爱情的认识我越来越清晰了。真正的爱情是成年人的游戏，双方在关系中是平等的。就像舒婷《致橡树》中写的：我如果爱你——绝不学痴情的鸟儿，为绿荫重复单调的歌曲；必须是你近旁的一株木棉，作为树的形象和你站在一起。我们共享雾霭、流岚、虹霓。仿佛永远分离，却又终身相依。爱情中的爱是相互的，是爱与被爱的流动，不是控制和占有。如果一方总觉得另一方“应该
python简单好玩的编程代码,python有哪些好玩的代码 2301_81900439 pygame python 开发语言
大家好，小编来为大家解答以下问题，20行python代码的入门级小游戏，python有什么好玩的代码嘛，今天让我们一起来看看吧！哈喽铁子们表弟最近在学Python，总是跟我抱怨很枯燥无味，其实，他有没有认真想过，可能是自己学习姿势不对？比方说，可以通过打游戏来学编程！今天给大家分享100个Python小游戏，一定要收藏！1、简易飞机大战飞机大战相信大家都玩过吧，非常简单有意思的游戏，咱们通过Pyt
github中多个平台共存 jackyrong github
在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1）设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
ip地址与整数的相互转换(javascript) alxw4616 JavaScript
//IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
读书笔记-jquey+数据库+css chengxuyuancsdn html jquery oracle
1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
javaSE javaEE javaME == API下载 Array_06 java
oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
shiro入门学习 cugfy java Web 框架
声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。首先配置我们的web.xml代码如下，固定格式，记死就成 <filter> <filter-name>shiroFilter</filter-name> &nbs
Array添加删除方法 357029540 js
刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除 Array.prototype.del = function(n){
navigation bar 更改颜色张亚雄 IO
今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下
unicode转换成中文 adminjun unicode 编码转换
在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成中文
一站式 Java Web 框架 firefly aijuans Java Web
Firefly是一个高性能一站式Web框架。涵盖了web开发的主要技术栈。包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。更新日志：增加自定义系统错误页面功能
设计模式——单例模式 ayaoxinchao 设计模式
定义 Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。” 分析从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。 &nb
Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。一、document.formName.item(”itemName”) 问题问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11 单元测试
下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：
[Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)： #!/bin/bash #!!!Change the name!!! #The zookeepe
【Spark八十】Spark RDD API二 bit1129 spark
coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
在modules目录中只有httpd.exp，那些so文件呢？我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
Java基础-克隆 BrokenDreams java基础
Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为克隆。 Java提供了java.lang.
读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
HDR图像PS教程集锦&心得 cherishLC PS
HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。软件有photomatix和nik hdr efex。一、教程叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。二、心得 1、去除阴影部分的
maven-3.3.3 mvn archetype 列表 crabdave ArcheType
maven-3.3.3 mvn archetype 列表可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml [INFO] Scanning for projects... [INFO]
linux shell 中文件编码查看及转换方法 daizj shell 中文乱码 vim 文件编码
一、查看文件编码。在打开文件的时候输入:set fileencoding 即可显示文件编码格式。二、文件编码转换 1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式 &
MySQL--binlog日志恢复数据 dcj3sjt126com binlog
恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002
数据库中数据表数据迁移方法 dcj3sjt126com sql
刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用下面看看如何使用语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍有三张表a、b、c，现在需要从表b
Java反转字符串 dyy_gusi java 反转字符串
前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
UI设计中我们为什么需要设计动效 gcq511120594 UI linux
随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。一、加强体验舒适度嗯，就是让用户更加爽更加爽的用
JBOSS服务部署端口冲突问题 HogwartsRow java 应用服务器 jboss server EJB3
服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。 1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml 2、./server/default/deploy/jbossweb.sar/server.xml 3、.
第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdb reids twemproxy
目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
ZooKeeper原理及使用 liyonghui160com
ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
程序员解决问题的60个策略 pda158 框架工作单元测试
根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。良好的单元测试强制数据库约束使用输入验证框架避免未实现的“else”条件在应用到主程序之前知道如何在孤立的情况下使用日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
Create the Google Play Account sillycat Google
Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
JSP三大指令 vikingwei jsp
JSP三大指令一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%> * pageEncoding和contentType： > pageEncoding：它