原生js-五子棋游戏

最新推荐文章于 2024-06-27 10:26:13 发布
最新推荐文章于 2024-06-27 10:26:13 发布
阅读量824 收藏
点赞数
文章标签： 五子棋 原生JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44038355/article/details/84944060
版权
html:
<body>
    <h2>五子棋游戏</h2>
    <div id="box">
        <div id="box01"></div>
        <div id="box02">haha</div>
    </div>
</body>
css:
<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /*overflow: hidden;*/
            margin-top: 10px;
            text-align: center;
            background-color: #C7C7C7;
        }
        #box{
            position: relative;
            border: 1px solid;
            margin: 20px auto;
            width: 546px;
            height: 546px;
            background-color: #C7C7C7;
        }
        #box .squre{
            width: 40px;
            height: 40px;
            border: 1px solid;
            float: left;
        }
        #box01 .squre:hover{
            background-color: pink;
        }
        #box01{
            position: absolute;
            /*border: 1px solid;*/
            margin: 0 auto;
            width: 588px;
            height: 588px;
            /*background-color: pink;*/
            /*opacity: 0.5;*/
            top: -20px;
            left: -20px;
        }
        #box01 .qz{
            width: 30px;
            height: 30px;
            border: 1px solid #C7C7C7;
            float: left;
            border-radius: 50%;
            margin: 5px;
        }
        #box01 .qz:hover{
            background-color: pink;
        }
        #box02{
            position: absolute;
            line-height: 546px;
            font-size: 50px;
            color: black;
            width: 100%;
            background-color: pink;
            display: none;
            opacity: 0.6;
        }
    </style>
script:
<script type="text/javascript">
        window.onload = function () {
            let box = document.getElementById("box");
            let box01 = document.getElementById("box01");
            //画棋盘
            let arr = new Array();
            for (let i=0;i<13;i++){
                arr[i] = new Array();
                for (let j=0;j<13;j++){
                    arr[i][j] = document.createElement("div");
                    arr[i][j].className = "squre";
                    box.appendChild(arr[i][j]);
                }
            }
            //画棋子
            let arr01 = new Array();
            for (let i=0;i<14;i++){
                arr01[i] = new Array();
                for (let j=0;j<14;j++){
                    arr01[i][j] = document.createElement("div");
                    arr01[i][j].className = "qz";
                    box01.appendChild(arr01[i][j]);
                }
            }
            for (let m=0;m<14;m++){
                for (let n=0;n<14;n++){
                    arr01[m][n].onclick = function () {
                        //下棋之前统计一下黑白棋的个数，以便黑白交换下棋
                        let count = 0;
                        for (let l = 0; l < 14; l++) {
                            for (let k = 0; k < 14; k++){
                                if (arr01[l][k].style.backgroundColor != "") {
                                    count++;
                                }
                            }
                        }
                        // console.log(count);
                        if (this.className == "qz" && count % 2 == 0 && this.style.backgroundColor == "") {
                            //下棋
                            this.style.backgroundColor = "black";
                            //引入判断函数
                            // console.log(m,n);
                            checkGame(m, n);

                        } else if (this.className == "qz" && count % 2 != 0 && this.style.backgroundColor == "") {
                            //下棋
                            this.style.backgroundColor = "white";
                            //引入判断函数
                            checkGame(m, n);
                        }
                    }
                }
            }

            //判断哪方输赢,四个方向（横向、纵向、左斜、右斜）
            //m是y轴，n是x轴
            let a,b;
            let flag = 0;
            let box02 = document.getElementById("box02");
            function checkGame(a,b) {
                //判断横向
                let qzColor = arr01[a][b].style.backgroundColor;
                // console.log(qzColor);
                for (let k=(b-4);k<=(b+4);k++){
                    if (k>=0 && k < 14){
                        if (qzColor == arr01[a][k].style.backgroundColor && arr01[a][k].style.backgroundColor != ""){
                            flag++;
                            if (flag == 5){
                                // alert(qzColor+" win!!");
                                box02.innerHTML = qzColor+" win!!";
                                box02.style.display = "block";
                            }
                        } else {
                            flag = 0;
                        }
                    } else {
                        flag = 0;
                    }
                }

                //判断纵向
                for (let k=(a-4);k<=(a+4);k++){
                    if (k>=0 && k < 14){
                        if (qzColor == arr01[k][b].style.backgroundColor && arr01[k][b].style.backgroundColor != ""){
                            flag++;
                            if (flag == 5){
                                // alert(qzColor+" win!!");
                                box02.innerHTML = qzColor+" win!!";
                                box02.style.display = "block";
                            }
                        } else {
                            flag = 0;
                        }
                    } else {
                        flag = 0;
                    }
                }

                //判断左斜
                let ax = (a-4);//ax用来记录横坐标的变化
                for (let k=(b-4);k<=(b+4);k++){
                    if (k>=0 && k < 14 && ax>=0 && ax<14){
                        if (qzColor == arr01[ax][k].style.backgroundColor && arr01[ax][k].style.backgroundColor != ""){
                            flag++;
                            if (flag == 5){
                                // alert(qzColor+" win!!");
                                box02.innerHTML = qzColor+" win!!";
                                box02.style.display = "block";
                            }
                        } else {
                            flag = 0;
                        }
                    } else {
                        flag = 0;
                    }
                    ax++;
                }

                //判断右斜
                bx = a-4;
                for (let k=(b+4);k>=(b-4);k--){
                    if (k>=0 && k < 14 && bx>=0 && bx<14){
                        if (qzColor == arr01[bx][k].style.backgroundColor && arr01[bx][k].style.backgroundColor != ""){
                            flag++;
                            if (flag == 5){
                                // alert(qzColor+" win!!");
                                box02.innerHTML = qzColor+" win!!";
                                box02.style.display = "block";
                            }
                        } else {
                            flag = 0;
                        }
                    } else {
                        flag = 0;
                    }
                    bx++;
                }
            }
        }
    </script>
阿布的小布
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用javascript实现五子棋(一)
从零开始的博客
10-04 2万+
大学毕业进了公司学了几个月的web开发,只会用jquery做事,但是又不甘心,又想要深入的学习一下js,但是无论怎么学都感觉自己抓不到要领。于是决定通过写js游戏来锻炼一下自己。 一、游戏背景画面 既然是锻炼js能力，用图片当背景怎么行，这里我选择了html5的canvas标签来绘制五子的整个背景，html代码如下 五子棋游戏 后台的绘制背
原生JS五子棋
liuzhenweii的博客
07-07 2968
用js实现一款五子棋小游戏，首先把五子棋所有的功能总结一下 然后是html部分, 一个canvas标签. <body style="background: rgb(248, 204, 179);"> <canvas style="border:solid 2px red;margin: 50px;" id="can" height="600" width="600"></canvas> <div id="ts" style="font-size: 50px;d
【JavaScript源代码】原生JavaScript实现简单五子棋游戏.docx
12-30
原生JavaScript实现简单五子棋游戏 　　本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码，供大家参考，具体内容如下　　HTML页面　　注释都很明确了，大家好好学习。　　<!DOCTYPE html>　　<html lang="en">　　  　　<head>　　  <meta charset="UTF-8">　　  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">　　  <title>五子棋</t
纯前端JS实现五子棋游戏
最新发布
Casss1的博客
06-27 309
在系统初始化时为每一格位置使用dom操作进行创建div 并添加点击事件，其中需要为每一个格子赋予唯一的id，我用的方法为A1，A2，.... B1，B2......O15。很简单的一个五子棋效果，有很多可以改进的部分，例如寻找左面子时候如果直接找到五个就可以提前结束游戏了，或者添加一些游戏记录等，欢迎给位指正、讨论。接下来就是最核心的获胜判定部分，我采用的方法，以横向判定为例先寻找当前落子点位最左面的相同色子，在依次向右寻找五格，若均为同色，则判断获胜。首先html页面中有一个基础的棋盘和胜利后的遮罩。
JavaScript 实例 | 使用原生 JS 写五子棋
Lunaqi的博客
07-27 1169
通过制作五子棋实例 掌握作用域、原型、闭包、多态等 前端基础知识点的应用 前端开发者们 一起来看看吧 前言 听说这是一道腾讯的面试题，可能网上已经有不少答案了，晚上没事看到这道题就自己做了下。逻辑很简单，考虑到是面试题，使用了 ES6 的语法。本文介绍下核心逻辑跟部分代码。 代码请至这里下载 domo 请点击这里查
HTML写五子棋小游戏,js实现简单五子棋游戏
weixin_29056101的博客
06-01 533
本文实例为大家分享了js实现五子棋游戏的具体代码，供大家参考，具体内容如下html五子棋csscanvas{display: block;margin: 50px auto;box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;}jsvar me = true;var over = false;var chessBox = [];var win...
五子棋游戏JS实现
whrjxyygx的专栏
07-13 867
使用HTML5和JS实现五子棋游戏
原生js实现五子棋游戏
12-28
本文实例为大家分享了js实现五子棋游戏的具体代码，供大家参考，具体内容如下 html: <body> 五子棋游戏 <div id=box01></div> <div id=box02>haha </body> css: <style type=text/css> ...
原生JavaScript实现五子棋游戏
01-18
本文实例为大家分享了JavaScript实现五子棋游戏的具体代码，供大家参考，具体内容如下 1.HTML部分 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport ...
原生js实现单机五子棋游戏
06-29
在本项目中，“原生js实现单机五子棋游戏”是一个基于JavaScript的简单游戏开发实例，主要展示了如何使用纯JavaScript编程语言来构建一个功能完备的五子棋游戏。五子棋是一种双人对弈的策略型棋类游戏，目标是在棋盘...
基于原生JS的五子棋游戏
05-04
**基于原生JS的五子棋游戏** 在Web开发领域，HTML5的出现极大地扩展了网页的交互性和表现力，其中Canvas标签就是一种强大的图形绘制工具。本项目是一个基于原生JavaScript实现的五子棋游戏，它充分利用了Canvas的...
js实现五子棋游戏
01-26
js实现五子棋游戏 js五子棋 五子棋游戏 js五子棋 五子棋游戏
JS的一些简单应用 —— 五子棋
烟敛寒林的博客
05-19 371
让我们用JS来玩五子棋吧！（棋的颜色和背景色可以自己修改） 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; table { width: 40
html五子棋游戏制作原理,JavaScript实现五子棋游戏的方法详解
weixin_29022821的博客
06-01 548
本文实例讲述了JavaScript实现五子棋游戏的方法。分享给大家供大家参考，具体如下：最近半个月一直在看深入的学习JavaScript，里面有很多重点和难点，比如闭包、词法分析、面向对象等。今天给大家分享一个由JavaScript编写的五子棋游戏，主要用到JavaScript的面向对象、事件委托、闭包等知识，还是挺有分量的，正好可以检测学习的成果。老规矩，先上图，再说话。效果图：五子棋素材图：代...
javascript五子棋游戏制作（-）
专注于java，站在巨人头顶看世界
10-28 3462
闲着无事，使用jquery和js写写五子棋游戏，帮各位拍砖呀。 准备工作： 下载jQuery包。 1、制作房间： Jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.g
利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈
李熠专用博客_白帽子一枚，人称低危终结者
09-05 9199
前言     本文主要介绍利用开源引擎lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程。 游戏规则     玩过五子棋的都应该知道五子棋的规则，这里就简单介绍其规则。     1、传统五子棋的棋具与围棋大致相同，棋子分为黑白两色，棋盘为15×15，棋子放置于棋盘线交叉点上。两人对局，各执一色，轮流下一子，先将横、竖或斜线的5个或5个以上同色棋子连成不间断
JavaScript应用：五子棋游戏实战开发
黑夜开发者的博客
08-10 3228
本篇文章介绍了如何使用JavaScript开发一个简单的五子棋游戏。通过绘制棋盘、实现开始按钮和游戏逻辑、处理用户交互、判断胜负和游戏结束等功能，我们完成了一个基本的五子棋游戏。当然，我们还可以对游戏进行优化和扩展，例如增加悔棋功能、提示下一步最佳落子位置等。JavaScript是一种非常强大和灵活的编程语言，可以用于开发各种类型的应用程序和游戏。希望通过这篇文章，你对使用JavaScript开发游戏有了更深入的了解。如果你对五子棋游戏开发还有任何问题或建议，欢迎在评论区留言讨论。
原生Javascript实现五子棋
qq_41961383的博客
08-26 3543
原生Javascript实现五子棋
学弟学妹看我文章顺利毕业，基于HTML+Javascript五子棋人机博弈系统设计与实现《记得收藏》
苏州程序大白的博客
07-03 3617
基于HTML+Javascript五子棋人机博弈系统设计与实现《记得收藏》目录????️‍????1、需求分析1.1.1、功能性需求分析 目录 ????开讲啦！！！！ ????️‍????1、需求分析 1.1.1、功能性需求分析 本系统的主要功能是人机在线进行对弈， 能统计下棋的棋数目以及输赢的总数。 能对用户名进行修改，使用vcsode开发，基于win10操作系统开发的在线人机对弈平台，阐述了系统的总体架构，逻辑，并且说明了系统的总体设计的策略。说明了本软件的需求规格。人机五子棋博弈项目，
"深度学习：云原生培训-Docker实战技巧
云原生培训-Docker 云原生技术是近年来随着云计算的发展而逐渐兴起的一种新的软件开发和部署方法论，它以容器化、微服务、自动化运维等特点，成为了越来越多企业和开发者的首选技术栈。在云原生技术中，Docker作为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值