JavaScript实现五子棋游戏的方法详解
作者：webbc 发布时间：2024-04-30 10:11:54
标签：JavaScript,五子棋游戏
本文实例讲述了JavaScript实现五子棋游戏的方法。分享给大家供大家参考，具体如下：
最近半个月一直在看深入的学习JavaScript，里面有很多重点和难点，比如闭包、词法分析、面向对象等。今天给大家分享一个由JavaScript编写的五子棋游戏，主要用到JavaScript的面向对象、事件委托、闭包等知识，还是挺有分量的，正好可以检测学习的成果。
老规矩，先上图，再说话。
效果图：
五子棋素材图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML五子棋游戏</title>
<link rel="stylesheet" href="">
<script>
//五子棋的构造函数
function Game(){
this.isWin = false;//游戏是否结束标志
}
//闭包计棋器
Game.cnt = (function(){
var curr = 'black';
return function(){
var tmp = curr;
if(curr == 'black'){
curr = 'white';
}else{
curr = 'black';
}
return tmp;
}
})();
//下棋函数
Game.xiaQi = function(g){
//判断选择的位置是否已经下过棋了
if(this.style.backgroundImage.indexOf('gif') >= 0){
alert('这里已经下过棋了');
return ;
}
var color = Game.cnt();
this.style.backgroundImage = "url(./images/"+color+".gif)";
Game.judge.call(this,color,g);//判定函数
}
//判定游戏是否结束
Game.judge = function(color,g){
var tds = document.getElementsByTagName('td');
//获取当前棋子所下的位置
var curr = {x:this.cellIndex,y:this.parentElement.rowIndex,color:color};
var line = ['','','',''];//表示当前棋子的横、竖、左斜、右斜方向的棋子
//遍历255个棋格，看看是否能赢
for(var i=0,tmp={};i<tds.length;i++){
tmp = {x:tds[i].cellIndex,y:tds[i].parentElement.rowIndex,color:'0'};
if(tds[i].style.backgroundImage.indexOf('black') >= 0){
tmp.color = 'b';
}else if(tds[i].style.backgroundImage.indexOf('white') >= 0){
tmp.color = 'w';
}
//获取当前棋子的横向其他棋子的坐落情况
if(curr.y == tmp.y){
line[0] += tmp.color;
}
//获取当前棋子的竖向其他棋子的坐落情况
if(curr.x == tmp.x){
line[1] += tmp.color;
}
//获取当前棋子的左斜方向其他棋子的坐落情况
if(curr.x+curr.y == tmp.x+tmp.y){
line[2] += tmp.color;
}
//获取当前棋子的右斜方向其他棋子的坐落情况
if(curr.x-tmp.x == curr.y-tmp.y){
line[3] += tmp.color;
}
}
color = color == 'black'?'bbbbb':'wwwww';
//判断是否五子连珠
for(var i=0;i<line.length;i++){
if(line[i].indexOf(color) >=0){
alert('你赢了');
g.isWin = true;
break;
}
}
}
//页面加载完成
window.onload = function(){
var g = new Game();
document.getElementsByTagName('table')[0].onclick = function(ev){
//判断是否已经赢得游戏
if(g.isWin){
alert('此局已结束，请重新开始');
return;
}
Game.xiaQi.call(ev.srcElement,g);//下棋
}
}
</script>
</head>
<style>
table{
border-collapse:collapse;
width:540px;
height:540px;
border:solid 1px blue;
margin:auto;
background-image: url('./images/background.gif');
}
</style>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
今天不知道怎么搞的，写博客的时候上传不了图片，还好我机智，把图片存到GitHub上，好了，来讲代码。首先，我必须先说明一下，我觉得代码还有很大的优化空间，感兴趣的同学可以继续研究。
实现思路：首先创建一个表格，共15行，15列，把背景改成棋盘的图片，给这个table添加onclick事件，这里使用到了事件委托，事件委托我在之前的文章有介绍过，感兴趣的同学可以去看看。去调用xiaQi函数，在下棋函数中，先判断选择的位置是否已经下过棋了，使用闭包获取下一个棋子的颜色，然后调用judge函数，在函数中先获取当前棋子所下的位置，遍历255个棋格，看看是否能赢，判断是否五子连珠，如果有则游戏结束。
希望本文所述对大家JavaScript程序设计有所帮助。
来源：https://blog.csdn.net/baochao95/article/details/53000067
0
投稿猜你喜欢
1、页签的表达。页签表达很清晰，当前页签突出，且层级包涵关系明确；看下图，一目了然的感觉，不用疑惑我在那部分里。不信？拿当当的对比一下，你感- 1. 引言元组是Python中一种重要的内置数据类型。与列表一样，我们经常使用元组将多个对象保存为相应的数据容器。然而，与列表不同的是元组的
- 效果图：代码如下：<html><head><title>颜色变换</title><st
- 使用PyQt5应用程序制作PDF转换成图片的小工具，可以导入PDF文档后一键生成对应的PNG图片。PDF图片转换小工具使用的中间件：pyth
- Python(发音:[ 'paiθ(ə)n; (US) 'paiθɔn ]n.蟒蛇，巨蛇 )，是一种面向对象的解释性的计算机
- 说明如果你的项目流量非常小，完全不用担心有并发的购买请求，那么做这样一个系统意义不大。但如果你的系统要像12306那样，接受高并发访问和下单
- 1、微信小程序使用echarts，首先下载echarts并导入小程序项目中，因小程序后期上线对文件大小有要求，所以建议进行定制下载导入可减少
- 一些大型站点都有着非常一流的视觉外观，它们很可能在设计时使用了网格系统。网格可以是页面布局显得紧凑而且稳定，为设计师在设计站点时提供一个逻辑
- 一 、精灵(Sprite)，屏幕上的对象。精灵组是精灵的组合。创建空的精灵组对象：精灵组可以对其中的所有精灵调用它们各自的更新方法(self
- 这里为大家推荐一些不错的学习python基础的网站Python是一种计算机程序设计语言。你可能已经听说过很多种流行的编程语言，比如非常难学的
- 本文实例讲述了Python使用pickle模块报错EOFError Ran out of input的解决方法。分享给大家供大家参考，具体如
- 抱着“取之于众 服务于众”的思想，我总结了一下，把它拿到网上来与大家分享，希望能帮助遇到类似问题的朋友。 我主要使用了IE内置的WebBro
- 你好，一般情况下，Ctrl+C 是最简单的方法，当无法 Ctrl+C 时，我们借助于 Python，以下是具体步骤：第一步，安装工具库1、t
- 这是一个PHP的文件上传类带图片显示的.其实做成函数就可以了.不过还是做成类好玩一点.~~~~ 本来应该用JS来验证上传文件类型的.但懒得做
- python版本：3.8class object: """ The most base type "
- 1、字符串的定义所谓字符串，就是由0个或者多个字符组成的有限序列。在Python程序中，如果我们把单个或多个字符用单引号''
- 前言本文主要给大家介绍了关于Yii2结合Workerman的websocket的相关内容，两者都是好东西，我就想着能不能结合起来，这样Yii
- 一、Python操作PDF 13大库对比PDF（Portable Document Format）是一种便携文档格式，便于跨操作系统传播文档
- QComboBox 是一个允许用户从列表选项中选择一项的控件。#!/usr/bin/python3# -*- coding: utf-8 -
- 在日常工作或生活中，总避免不了需要操作文件或文件夹，比如希望找出电脑中所有临时文件并清除，或者找到指定文件夹内所有图片文件并进行重新命名等等
