虽然我是一名实打实的产品喵，但是为了能够和程序猿们愉快地沟通（让撕逼再和谐一点），我自学了一些代码知识，写了一些不入流不靠谱不成熟的“三不”应用，随便扔在这里分享一下。
简介
“井字过三关”相信大家都很熟悉了，其实用JQuery处理起来也不算太难，我这里编写了两款，一款是“玩家VS玩家”，一款是“玩家VS电脑”。其实“VS电脑”的版本我只是做了一个很基础的设定，那就是“玩家怎么走，电脑就怎么封路”，毕竟我就是一产品汪，写不出啥牛逼的算法。
基本的思路就是玩家点击哪块，哪块就增加一个“X”或“O”（没错，为了简单处理，我使用的就是英文字母大写的“X”和“O”），每一次有玩家/电脑走完，系统都会判断一次是否获胜，如果获胜了就结束游戏并重置。
挺适合前端新手用来练手的。
截图
激烈战斗中
代码
HTML+CSS框架使用的是bootstrap 3，不过这里主要分享一下js部分的代码，使用的是JQuery。
玩家VS玩家：
window.onload = function () {
$(document).ready(function(){
//定义玩家序号
var player = 1;
//点击某方块时
$(".block").click(function(){
var blockSelected = $(this);
//我们通过class来定义“X”和“O”
if(blockSelected.hasClass("ex") || blockSelected.hasClass("oh")){
alert("Please select another block.");
}
//当胜负已判时，提醒玩家重置游戏
else if(blockSelected.hasClass("game-over")){
alert("This game is finished. Please click 'RESET' to start a new game.");
}
else {
//1号玩家用“X”，首先测是否获胜，如果不获胜，玩家代号变为2
if(player === 1){
blockSelected.addClass("ex").text("X");
if(checkVictory("ex")){
$(".victory-msg").text("Player " + player + "'s Victory!").fadeIn("slow");
$(".block").addClass("game-over");
}
player = 2;
}
//号玩家用“O”，首先测是否获胜，如果不获胜，玩家代号变为1
else {
blockSelected.addClass("oh").text("O");
if(checkVictory("oh")){
$(".victory-msg").text("Player " + player + "'s Victory!").fadeIn("slow");
$(".block").addClass("game-over");
}
player = 1;
}
}
});
//重置游戏
$(".reset").click(function(){
$(".block").html("").removeClass("ex oh game-over");
$(".victory-msg").fadeOut("slow");
player = 1;
});
//判断胜负的函数
//“井字过三关”一共只有8种胜利情况，因此我很无脑地把他们都列出来了
//函数的参数使用的是“X”以及“O”
function checkVictory(symbol){
if($("#1").hasClass(symbol) && $("#2").hasClass(symbol)&& $("#3").hasClass(symbol)){
return true;
}
else if($("#4").hasClass(symbol) && $("#5").hasClass(symbol) && $("#6").hasClass(symbol)){
return true;
}
else if($("#7").hasClass(symbol) && $("#8").hasClass(symbol) && $("#9").hasClass(symbol)){
return true;
}
else if($("#1").hasClass(symbol) && $("#4").hasClass(symbol) && $("#7").hasClass(symbol)){
return true;
}
else if($("#2").hasClass(symbol) && $("#5").hasClass(symbol) && $("#8").hasClass(symbol)){
return true;
}
else if($("#3").hasClass(symbol) && $("#6").hasClass(symbol) && $("#9").hasClass(symbol)){
return true;
}
else if($("#1").hasClass(symbol) && $("#5").hasClass(symbol) && $("#9").hasClass(symbol)){
return true;
}
else if($("#3").hasClass(symbol) && $("#5").hasClass(symbol) && $("#7").hasClass(symbol)){
return true;
}
else {
return false;
}
}
});
}
玩家VS电脑：
window.onload = function () {
$(document).ready(function(){
//定义电脑
var AiMoveId;
$(".block").click(function(){
var blockSelected = $(this);
if(blockSelected.hasClass("ex") || blockSelected.hasClass("oh")){
alert("Please select another block.");
}
else if(blockSelected.hasClass("game-over")){
alert("This game is finished. Please click 'RESET' to start a new game.");
}
else {
//玩家走“X”
blockSelected.addClass("ex").text("X");
if(checkVictory("ex")){
$(".block").addClass("game-over");
$(".victory-msg").text("Player's Victory!").fadeIn("slow");
}
else {
//在上面玩家走完之后，下面轮到电脑走“O”
AiMoveId = AiSmartMove();
$("#"+AiMoveId).addClass("oh").text("O");
if(checkVictory("oh")){
$(".block").addClass("game-over");
$(".victory-msg").text("AI's Victory!").fadeIn("slow");
}
}
}
});
$(".reset").click(function(){
$(".block").html("").removeClass("ex oh game-over");
$(".victory-msg").fadeOut("slow");
});
function checkVictory(symbol){
if($("#1").hasClass(symbol) && $("#2").hasClass(symbol)&& $("#3").hasClass(symbol)){
return true;
}
else if($("#4").hasClass(symbol) && $("#5").hasClass(symbol) && $("#6").hasClass(symbol)){
return true;
}
else if($("#7").hasClass(symbol) && $("#8").hasClass(symbol) && $("#9").hasClass(symbol)){
return true;
}
else if($("#1").hasClass(symbol) && $("#4").hasClass(symbol) && $("#7").hasClass(symbol)){
return true;
}
else if($("#2").hasClass(symbol) && $("#5").hasClass(symbol) && $("#8").hasClass(symbol)){
return true;
}
else if($("#3").hasClass(symbol) && $("#6").hasClass(symbol) && $("#9").hasClass(symbol)){
return true;
}
else if($("#1").hasClass(symbol) && $("#5").hasClass(symbol) && $("#9").hasClass(symbol)){
return true;
}
else if($("#3").hasClass(symbol) && $("#5").hasClass(symbol) && $("#7").hasClass(symbol)){
return true;
}
else {
return false;
}
}
//电脑封路的函数
//总体思路也很无脑，就是把所有玩家（“X”）连成一条的情况列出来，然后让电脑去走玩家会获胜的那一块，在没有出现这种情况的时候，电脑随机走
function AiSmartMove(){
var result;
if(($("#2").hasClass("ex") && $("#3").hasClass("ex")) || ($("#4").hasClass("ex") && $("#7").hasClass("ex")) || ($("#5").hasClass("ex") && $("#9").hasClass("ex"))){
if($("#1").hasClass("oh")){
result = AiRandomMove();
}
else {
result = 1;
}
}
else if(($("#1").hasClass("ex") && $("#3").hasClass("ex")) || ($("#5").hasClass("ex") && $("#8").hasClass("ex"))){
if($("#2").hasClass("oh")){
result = AiRandomMove();
}
else {
result = 2;
}
}
else if(($("#1").hasClass("ex") && $("#2").hasClass("ex")) || ($("#5").hasClass("ex") && $("#7").hasClass("ex")) || ($("#6").hasClass("ex") && $("#9").hasClass("ex"))){
if($("#3").hasClass("oh")){
result = AiRandomMove();
}
else {
result = 3;
}
}
else if(($("#1").hasClass("ex") && $("#7").hasClass("ex")) || ($("#5").hasClass("ex") && $("#6").hasClass("ex"))){
if($("#4").hasClass("oh")){
result = AiRandomMove();
}
else {
result = 4;
}
}
else if(($("#4").hasClass("ex") && $("#6").hasClass("ex")) || ($("#2").hasClass("ex") && $("#8").hasClass("ex")) || ($("#1").hasClass("ex") && $("#9").hasClass("ex")) || ($("#3").hasClass("ex") && $("#7").hasClass("ex"))){
if($("#5").hasClass("oh")){
result = AiRandomMove();
}
else {
result = 5;
}
}
else if(($("#4").hasClass("ex") && $("#5").hasClass("ex")) || ($("#3").hasClass("ex") && $("#9").hasClass("ex"))){
if($("#6").hasClass("oh")){
result = AiRandomMove();
}
else {
result = 6;
}
}
else if(($("#1").hasClass("ex") && $("#4").hasClass("ex")) || ($("#8").hasClass("ex") && $("#9").hasClass("ex")) || ($("#3").hasClass("ex") && $("#5").hasClass("ex"))){
if($("#7").hasClass("oh")){
result = AiRandomMove();
}
else {
result = 7;
}
}
else if(($("#7").hasClass("ex") && $("#9").hasClass("ex")) || ($("#2").hasClass("ex") && $("#5").hasClass("ex"))){
if($("#8").hasClass("oh")){
result = AiRandomMove();
}
else {
result = 8;
}
}
else if(($("#1").hasClass("ex") && $("#5").hasClass("ex")) || ($("#7").hasClass("ex") && $("#8").hasClass("ex")) || ($("#3").hasClass("ex") && $("#6").hasClass("ex"))){
if($("#9").hasClass("oh")){
result = AiRandomMove();
}
else {
result = 9;
}
}
else {
result = AiRandomMove();
}
return result;
}
//电脑随机走，返回电脑可走的方块代号
function AiRandomMove(){
var blockIdArr = [1,2,3,4,5,6,7,8,9];
var movableBlocksArr = blockIdArr.filter(function(e){
if(!$("#"+e).hasClass("ex") && !$("#"+e).hasClass("oh") && !$("#"+e).hasClass("game-over")){
return e;
}
});
return movableBlocksArr[Math.floor(Math.random()*movableBlocksArr.length)];
}
});
}
相关
想看源代码的童鞋可以来CODING.NET获取。
也可以通过这些DEMO体验一下：玩家VS玩家 / 玩家VS电脑。
THE END.