js数组案例之五子棋游戏

本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下

一、效果图

二、设计思路

第一步:创建棋盘,生成棋盘所对应的数组坐标。
第二步:鼠标点击当前位置返回当前点的坐标。
第三步:生成对应的棋子。
第四步:添加悔棋、重新开始事件。
第五步:设置棋子输赢,若某个棋子五个连成一条线,则该棋子赢。

三、核心代码

//1.创建棋盘
var item = document.querySelector(".item-map");
var itemchild = document.querySelector(".item-child");
var yuanele = document.querySelector(".yuan");
var nameele = document.querySelector(".name");
var btnback = document.querySelector(".btnback");
var btnrestart = document.querySelector(".btnrestart");
var Game = {
        w: 30,
        h: 30,
        col: 13,
        row: 13,
        src: './img/bg.png',
        _Map: null,//接收整个地图对象
        ux: null,
        uy: null,
        mappos: [],//地图上每个点对应坐标数组
        r: 14,
        offset: 0,
        ele: [{class: 'hei', name: "黑棋子"}, {class: 'bai', name: "白棋子"}],
        index: 0,
        nowEle: null,
        saveEle: null,
        listmap: [],
        fx: 0,
        fy: 0,
        createMap: function () {
            //创建地图的
            if (this._Map == null) {
                //使用dom元素创建
                this._Map = document.createElement("div");
                this._Map.className = "map";
                this._Map.style.width = this.w * this.col + "px";
                this._Map.style.height = this.h * this.row + "px";
                this._Map.style.backgroundImage = "url('" + this.src + "')";
                item.appendChild(this._Map);
                //自动计算偏移
                this.offset = this._Map.offsetLeft;
                //生成数组坐标
                this.createPos();
            }
        },
        createPos: function () {
            for (var i = 0; i <= this.row; i++) {
                this.mappos.push([]);
                this.listmap.push([]);
                for (var k = 0; k <= this.col; k++) {
                    this.mappos[i].push([k * this.w, i * this.h]);
                    this.listmap[i].push(null);
                }
            }

        },
        checkPos: function () {
            //检测到了返回当前点坐标
            for (var i = 0; i < this.mappos.length; i++) {
                for (var k = 0; k < this.mappos[i].length; k++) {
                    var center = this.mappos[i][k];
                    var cx = center[0] - this.ux;
                    var cy = center[1] - this.uy;
                    var ishas = this.r * this.r >= cx * cx + cy * cy;
                    if (ishas) {
                        this.fx=i;
                        this.fy=k;
                        return center;
                    }
                }
            }
        },
        getNextEle: function () {
            this.nowEle = this.ele[this.index];
            yuanele.className = "yuan " + this.nowEle.class;
            nameele.innerText = this.nowEle.name;
            this.index = ++this.index >= this.ele.length ? 0 : this.index;
            return this.nowEle;
        },
        createNowPosEle: function () {
            //在当前的坐标位置创建一个元素
            var arr = Game.checkPos();
            if (arr)//[0,0]
            {
                //创建当前的棋子
                var nowqizi = document.createElement("div");
                nowqizi.style.width = this.r * 2 + "px";
                nowqizi.style.height = this.r * 2 + "px";
                nowqizi.className = "qizi " + this.nowEle.class;
                nowqizi.style.left = arr[0] - this.r + this.offset + "px";
                nowqizi.style.top = arr[1] - this.r + this.offset + "px";
                //记录当前的棋子
                this.saveEle = nowqizi;
                itemchild.appendChild(nowqizi);
                //给对应的集合对应位置添加对象
                var s = 0;
                if (this.nowEle.class == "hei") {
                    s = 0;
                }
                else {
                    s = 1;
                }
                this.listmap[this.fx][this.fy] = s;
                //自动检测游戏是否结束
                //以当前这个子,四周找五连子,确定输赢
                this.checkWin();
                Game.getNextEle();

            }
        },
        checkWin:function () {
            var win=null;
            if(this.heng(this.listmap[this.fx])){
                win=this.nowEle;
            }
            else if(this.zong(this.fx,this.fy)){
                win=this.nowEle;
            }
            if(win){
                setTimeout(function(){
                    switch (win.class){
                        case 'bai':
                            alert("白棋赢了!");
                            break;
                        case 'hei':
                            alert("黑棋赢了!");
                            break;
                    }
                    btnrestart.click();
                },500)
            }
        },
        //纵向检测
        zong:function(x,y){
            for(var i=0;i<this.listmap.length;i++){
                var iscome=true;
                var n=this.listmap[i][y];
                if(n==null)
                continue;
                var arr=[i];
                for(var k=i+1;k<=i+5;k++){
                    //后面k+5之后会超出map范围会报错
                    if(this.listmap[k]==undefined)
                        break;
                    if(this.listmap[k][y]==null)
                        continue;
                    if(n!=this.listmap[k][y]){
                        iscome=false;
                        break;
                    }
                    else{
                        arr.push(k);
                    }
                }
                if(iscome&&arr.length==5){
                    return iscome;
                }
            }
        },
        heng:function (h) {
            //检测当前行上面是否存在连续的五个
            for(var i=0;i< h.length;i++){
                var iscome=true;
                var n=h[i];
                if(n==null)
                    continue;
                var arr=[i];
                for(var k=i+1;k<=i+5;k++){
                    //后面k+5之后会超出map范围会报错
                    if(h[k]==null)
                        continue;
                    if(n!=h[k]){
                        iscome=false;
                        break;
                    }
                    else{
                        arr.push(k);
                    }
                }
                if(iscome&&arr.length==5){
                    return iscome;
                }
            }
        }
    };
    window.onload = function () {
        Game.createMap();
        //显示当前棋子
        Game.getNextEle();

        //给item添加鼠标点击事件
        item.onclick = function (e) {
            Game.ux = e.offsetX - Game.offset;
            Game.uy = e.offsetY - Game.offset;
            Game.createNowPosEle();
        }
        //悔棋事件
        btnback.onclick = function () {
            if (Game.saveEle) {
                Game.getNextEle();
                //删除之前的棋子
                Game.saveEle.remove();
                Game.saveEle = null;
            }
            else {
                alert("不能在悔棋了!!");
            }

        }
        //重新开始
        btnrestart.onclick = function () {
            //直接删除所有的棋子
            itemchild.innerHTML = "";
            Game.saveEle = null;
            Game.index = 0;
            Game.getNextEle();
        }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 纯JS实现五子棋游戏兼容各浏览器(附源码)

    纯JS五子棋(各浏览器兼容) 效果图:  代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/

  • Javascript和HTML5利用canvas构建Web五子棋游戏实现算法

    这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五

  • 基于JavaScript实现五子棋游戏

    本文实例为大家分享了js实现五子棋的具体代码,供大家参考,具体内容如下 思路: 1.先用canvas画五子棋的棋盘 2.获取鼠标点击的位置 3.根据鼠标点击的位置判断,并画棋子 4.根据下的棋子判断是否赢了 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>

  • javascript 初学教程及五子棋小程序的简单实现

    一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 二.hbulider工具的使用 1) hbulider的特点: 1.飞快的编码速度 2.HBuilder直接创建移动App,打包为ios或Android原生安装包 3.HTML5语法.HTML5+

  • JS canvas绘制五子棋的棋盘

    本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow blur spread color inset: h-shadow: (必须)阴影的水平偏移量,如果是正值,则阴影在元素块右边:如果是负值,则阴影在元素块左边. v-shadow: (必须)阴影的垂直偏移量,如果是正值,则阴影在元素块底部:如果是负值,则阴影在元素块顶部. blur: (可选)阴影

  • H5+C3+JS实现双人对战五子棋游戏(UI篇)

    本篇文章实现的是双人对战模式,主要是实现除人机AI算法和判断输赢之外的其他功能,下一篇将会发布AI 框架搭建 <!Doctype html> <html> <head> <!-- 百度爬虫优化 --> <meta http-equiv="author" content="成兮,缘分五月" /> <meta http-equiv="Keywords" cotent="五子棋

  • H5+C3+JS实现五子棋游戏(AI篇)

    本文实例为大家分享了H5+C3+JS实现五子棋游戏的具体代码,供大家参考,具体内容如下 新增全局变量 <script> //所有赢法总和 var count = 0; //容纳所有赢法的三维数组 var allWin = []; for(var i =0; i <15; i++){ allWin[i] = []; for(var j=0; j <15; j++){ allWin[i][j] = []; } } //横线赢法 for(var i =0; i <15; i++){

  • JS+canvas实现的五子棋游戏【人机大战版】

    本文实例讲述了JS+canvas实现的五子棋游戏.分享给大家供大家参考,具体如下: 运行效果图: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css

  • 原生JS+Canvas实现五子棋游戏实例

    一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *

  • js实现简单五子棋游戏

    本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" href="css/style.css" /> </head> <b

随机推荐