井字棋 HTML小游戏（部分）

最新推荐文章于 2024-07-29 15:47:48 发布

umbrella244

最新推荐文章于 2024-07-29 15:47:48 发布

阅读量4.2k

点赞数 2

分类专栏：小游戏

本文链接：https://blog.csdn.net/qq_55648018/article/details/123157126

版权

HTML5 游戏开发井字游戏 CSS动画 JavaScript

关键词由CSDN通过智能技术生成

小游戏专栏收录该内容

4 篇文章 0 订阅

订阅专栏

井.html

<!DOCTYPE html>
<html>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="井.css">
	<script src="井.js"></script>
	<body>
		<div class="outer-container">
			<button class="hard-reset">重启</button>
			<p class="score-1"><span class="points"></span><span class="name"></span></p>
			<i class="points-divider">&#124;</i>
			<p class="score-2"><span class="points"></span><span class="name"></span></p>
			<div class="player-one-turn">
				<p></p>
			</div>
			<div class="player-two-turn">
				<p></p>
			</div>
			<div class="board-container">
				<div class="game-starter">
					<p>你希望是 X 还是 O?</p>
					<button class="choose-x">X</button>
					<button class="choose-o">O</button>
					<button class="back-button"><i class="fa fa-arrow-left"></i> 返回</button>
				</div>
				<div class="game-choice">
					<p>请选择模式</p>
					<button class="one-player">电脑</button>
					<button class="two-player">双人</button>
				</div>
				<div class="game-board">
					<div class="draw-message">
						<p>是平局... :|</p>
					</div>
					<div class="lose-message">
						<p>你输了... :(</p>
					</div>
					<div class="win-message">
						<p>你赢了!!! :)</p>
					</div>
					<canvas id="myCanvas"></canvas>
					<ul class="boxes">
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

井.css 部分代码

.rotate {
	-webkit-animation: rotating 2s linear infinite;/* Safari 和 Chrome */
	-moz-animation: rotating 2s linear infinite;/* Firefox */
	-ms-animation: rotating 2s linear infinite;/* Triden */
	-o-animation: rotating 2s linear infinite;/* Opera */
	animation: rotating 2s linear infinite;/*IE*/
}

@keyframes rotating {
	
/*使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这与0％到100％相同。*/
	from {
		-ms-transform: rotateY(0deg);
		-moz-transform: rotateY(0deg);
		-webkit-transform: rotateY(0deg);s
		-o-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}

	to {
		-ms-transform: rotateY(360deg);
		-moz-transform: rotateY(360deg);
		-webkit-transform: rotateY(360deg);
		-o-transform: rotateY(360deg);
		transform: rotateY(360deg);
	}
}

井.js 部分代码

var MYAPP = MYAPP || {
	gameInPlay: false,//游戏是否正在进行
	winCombos: [
		[1, 2, 3],//第一排
		[4, 5, 6],//第二排
		[7, 8, 9],//第三排
		[1, 4, 7],//第一列
		[2, 5, 8],//第二列
		[3, 6, 9],//第三列
		[1, 5, 9],//正对角
		[7, 5, 3] //反对角
	],//当有满足条件后胜利
	playerOneScore: 0,//玩家一胜利场数
	playerTwoScore: 0,//玩家二胜利场数
	timeOuts: [],
	initializeVars: function() {//对局初始化函数
		this.numFilledIn = 0;
		this.currentBoard = {
			1: '',
			2: '',
			3: '',
			4: '',
			5: '',
			6: '',
			7: '',
			8: '',
			9: ''
		};
	},
	initializeGame: function() {
		MYAPP.initializeVars();//初始化
		MYAPP.display.drawBoard();//画板
		$('.game-choice button').click(function() {//class:game-choice button(电脑 或 双人)
			MYAPP.secondPlayer = MYAPP.game.gameSelection(this);
			MYAPP.display.hideGameChoice();
			MYAPP.display.showGameStarter(MYAPP.secondPlayer);
			$('.game-starter .choose-x, .game-starter .choose-o').off().click(MYAPP.game.firstGame);

			$('.back-button').on('click', function() {
				MYAPP.display.hideGameStarter();
				MYAPP.display.showGameChoice();
			});
		});
		$('.hard-reset').on('click', MYAPP.game.resetGame);
	}
};