基于jsp的井字游戏实例

做一款回忆童年的游戏,这款游戏代码比较简单,主要是掌握算法的原理,但是也有一些需要注意的地方。

游戏界面

进入正题。项目的效果图如下:

游戏有一个开始界面可供选择玩家的角色,然后选择先手是哪一方,接着开始游戏。选择界面做了一个遮罩层,里面提供给用户选择,选择之后便把遮罩层隐藏并开始游戏。

具体实现

说了那么多,可能比较枯燥,下面介绍一下具体的代码实现。

使用一个二维数组panel保存棋盘的状态,1是电脑的值,-1是玩家的值。
winArr保存所有可能赢的8个棋位组合;维护computerWin和userWin,初始值等于winArr,当电脑或玩家每次下棋时,都分别更新这两个数组,删除掉不能赢的棋位组合。在更新panel的时候会分别更新computerWin和userWin。

核心的方法是play,play的执行步骤伪代码如下:

如果可以攻击
    遍历computerWin数组,找到可以攻击的棋位,下棋,显示是否赢了。
不能攻击,如果需要防守
    遍历userWin,根据玩家可赢的组合,找出需要防守的棋位,下棋,更新panel;
不需要防守,如果是电脑先手的第一步
    在中心位置下棋,更新panel;
不是先手第一步
    如果中心位置没有被占去,在中心位置下棋,更新panel;返回
    如果是特殊情况,在棱位下棋,更新panel; 返回
    如果角位仍有位置,选择一个角位下棋,更新panel; 返回
    最后一种情况,找到剩余的空位,优先选择位于computerWin的空位,下棋,更新panel; 返回

play算法的实现如下:

 if(canAttack()) {
  console.log("attack");
  var attackPos = findAttackPos();
  updatePanel(attackPos, computerVal);
} else if(needDefend()) {
  console.log("defend");
  var defendPos = findDefendPos();
  updatePanel(defendPos, computerVal);
} else if(firstStep()) {
  console.log("first");
    updatePanel(firstPos, computerVal);
    running = true;
} else {
  console.log("other");
  if(panel[1][1] == 0) {
        updatePanel(firstPos, computerVal);
      return;
  }
  if(special()) {
    console.log('special');
    var pos = findSpecialPos();
    updatePanel(pos, computerVal);
    return;
  }
  var random = Math.floor(Math.random() * 2);
  if(panel[0][0] == 0 && panel[2][2] == 0) {
    var pos = (random == 0) ? 0 : 8;
    updatePanel(pos, computerVal);
  } else if(panel[0][2] == 0 && panel[2][0] == 0) {
    var pos = (random == 0) ? 2: 6;
    updatePanel(pos, computerVal);
  } else {
    var otherPos = findEmptyPos();
    updatePanel(otherPos, computerVal);
  }
}

总结

在编码的过程中遇到的一个难题就是JavaScript的数组对象,我在第一次调用play方法开头输出panel的时候,得到的是play执行后panel的值,后来请教一位大神,发现是因为panel是一个对象,因为对象遍历引用的都是同一块内存地址,所以一旦有改变,就全部改了。如果直接使用下标输出每一个值的话是可以得到初始的值的,也可以用JSON方法将数组字符串,然后打印出来查看结果。

(0)

相关推荐

  • C#实现简单的井字游戏实例

    本文实例讲述了C#实现简单的井字游戏.分享给大家供大家参考.具体如下: /* * Created using: SharpDevelop * Created by: Tony Misner * Date: 1/2/2007 * Time: 2:34 PM * */ using System; using System.Collections.Generic; using System.Drawing; using System.Windows.Forms; namespace TicTacToe

  • 基于jsp的井字游戏实例

    做一款回忆童年的游戏,这款游戏代码比较简单,主要是掌握算法的原理,但是也有一些需要注意的地方. 游戏界面 进入正题.项目的效果图如下: 游戏有一个开始界面可供选择玩家的角色,然后选择先手是哪一方,接着开始游戏.选择界面做了一个遮罩层,里面提供给用户选择,选择之后便把遮罩层隐藏并开始游戏. 具体实现 说了那么多,可能比较枯燥,下面介绍一下具体的代码实现. 使用一个二维数组panel保存棋盘的状态,1是电脑的值,-1是玩家的值. winArr保存所有可能赢的8个棋位组合:维护computerWin和

  • 基于jsp+servlet实现的简单博客系统实例(附源码)

    本文实例讲述了基于jsp+servlet实现的简单博客系统.分享给大家供大家参考.具体如下: 没有用框架写的 小博客, 代码大量重复. 个人感觉重复代码对于新手还是有好处的,我也是新手,见谅. 完整实例代码点击此处本站下载. 1. servlet /* * To change this template, choose Tools | Templates * and open the template in the editor. */ package Servlet; import blog.

  • 基于jsp的AJAX多文件上传的实例

    最近的项目开发中,遇到了一个多文件上传的问题,即在不刷新页面的情况下,上传多个文件至服务器.现总结分享如下: 本文主要采用了基于jsp的ajax,jquery,servlet等技术. 1.upload.jsp 点击上传时,调用对应的fileupload函数,通过ajax将文件异步传送到servlet中处理.注意在文件上载时,所使用的编码类型应当是"multipart/form-data",它既可以发送文本数据,也支持二进制数据上载. <%@ page language="

  • 基于JSP实现一个简单计算器的方法

    本文实例讲述了基于JSP实现一个简单计算器的方法.分享给大家供大家参考.具体实现方法如下: index.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  <%  String path = request.getContextPath();  String basePath = request.getSch

  • 基于jsp实现新闻管理系统 附完整源码

    很棒的新闻发布系统分享给大家,希望大家喜欢. 下面就让我们来说一说基于jsp的新闻发布系统,其中使用的技术有JavaBean.fillter.数据库等,能够实现新闻的发布功能,在发布之后能够进行对每一条新闻的删除.修改.或者继续增加新的文章,最后还能够进行查询功能,其中引用了百度编辑器,能够进行图文并茂的编辑,极大地方便用户的使用. 注:完整项目下载地址:新闻发布系统 一.效果演示 首先让我们来看一看实现的效果: 下面是登陆的首界面: 图1 首界面 管理员登录页面: 图2 管理员登录界面 下面是

  • 基于Vue过渡状态实例讲解

    前面的话 Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢?包括数字和运算.颜色的显示.SVG 节点的位置.元素的大小和其他的属性等.所有的原始数字都被事先存储起来,可以直接转换到数字.做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态 状态动画 通过watcher,能监听到任何数值属性的数值更新 <div id="animated-number-demo"> <input v-

  • 基于Bootstrap分页的实例讲解(必看篇)

    前面的话 分页导航几乎在每个网站都可见,好的分页能给用户带来好的用户体验.本文将详细介绍Bootstrap分页 概述 在Bootstrap框架中提供了两种分页导航: ☑ 带页码的分页导航 ☑ 带翻页的分页导航 页码分页 带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式 [默认分页] 平时很多人喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签

  • 基于Java ActiveMQ的实例讲解

    所需引入Jar包: jms-1.1.jar activemq-all-5.15.0.jar 生产者 package com.mousewheel.demo; import javax.jms.Connection; import javax.jms.ConnectionFactory; import javax.jms.Destination; import javax.jms.JMSException; import javax.jms.Message; import javax.jms.Me

  • 基于JSP的RSS阅读器的设计与实现方法(推荐)

    阅读器访问地址:http://easyrss.tk/,欢迎体验! 阅读导览 一. 概述 二. 设计的基本概念和原理 三. 设计方案 四. 主要源代码 五. 阅读器使用说明 概述 获得信息是在人类的生活中是必不可少的环节.如果现在的社会对获得信息不快捷,那么这个社会将不会像如今这般的发达和进步.在当今网络技术相当发达的今天,大量的信息充斥在网上.现在网络越来越发达,用户在网上既能工作也能娱乐.当用户在网上需浏览很多个网站才能获取自己多需的信息时,那就感觉很累.因为现在每个网站都有很多信息,找到自己

  • Jsp真分页实例---分页

    网页的分页功能的实现比较简单,实现方法也多种多样. 今天总结一个简单的Jsp真分页实例. 首先,提到分页就要先明确一个概念,何为真分页何谓假分页. 假分页:一次性从数据库读出表的所有数据一次性的返回给客户端,由js来控制每一页的显示. 真分页:由程序控制,每一次只返回一页大小的数据,显示到客户端. 由此可以很清楚的分辨出真假分页各自的优缺点: 假分页:由于一次性读出所有数据并返回给客户端,如果数据量庞大,所以这一次的动作可能是非常消耗服务器资源和带宽的, 但是返回给客户端以后就非常轻松了,客户在

随机推荐