php 井字过三关,【JQuery】“井字过三关”游戏

虽然我是一名实打实的产品喵，但是为了能够和程序猿们愉快地沟通(让撕逼再和谐一点)，我自学了一些代码知识，写了一些不入流不靠谱不成熟的“三不”应用，随便扔在这里分享一下。

简介

“井字过三关”相信大家都很熟悉了，其实用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.