结对编程-五子棋游戏-开发过程

薛丁格爱猫 薛丁格爱猫     2022-09-21     231

关键词:

 

1.项目所在地址:https://gitee.com/g961231/WuZiQi/commits/master

2.CSS和JS都采用内联式

3.创建canvas :html代码部分

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head> 
 4     <meta content="text/html; charset=utf-8" /> 
 5     <title></title> 
 6     <style type="text/css"> 
 7         body { 
 8             margin: 10px; 
 9         } 
10    
11 </head> 
12 <body > 
13     <div> 
14         <canvas width="640" id="canvas"  height="640">
15         </canvas> 
16     </div> 
17   
18 </body> 
19 </html>

4.编写css部分

<style type="text/css"> 
        body { 
            margin: 10px;
        } 
        div {
            text-align:center;
        }
        canvas{
            background-color:cornflowerblue;
        }
    </style>

5.JS部分:利用canvas技术画出棋盘,并导入棋子

<script type="text/javascript"> 
        var canvas; 
        var context; 
        var img_b = new Image(); 
        img_b.src = "b.png";
        var img_w = new Image(); 
        img_w.src = "w.png";
        function drawRect() {
            canvas = document.getElementById("canvas"); 
            context = canvas.getContext("2d"); 
  
            for (var i = 0; i <= 640; i += 40) {
                context.beginPath(); 
                context.moveTo(0, i); 
                context.lineTo(640, i); 
                context.closePath(); 
                context.stroke(); 
  
                context.beginPath(); 
                context.moveTo(i, 0); 
                context.lineTo(i, 640); 
                context.closePath(); 
                context.stroke(); 
            } 
        } 
        
    </script>

6.网页显示的效果

 

结对-五子棋游戏-开发环境搭建过程

项目名称:五子棋游戏参加项目人员:李一轩、程吉环境搭建:下载HBuilder软件,下载Google浏览器;依次安装即可使用  查看详情

结对-五子棋游戏-开发过程

项目所在:https://gitee.com/proM/WuZiQiYouXi目前完成页面的布置和棋盘的布置,其他部分只有知识进展,没有技术完成HTML功能设置代码:CSS代码:页面情况: 查看详情

结对-五子棋游戏-开发过程

项目所在地址:https://gitee.com/zixiao520/h5WuZiQi/tree/mastercss与js都采用内联式1.创建canvas:html代码部分1<!DOCTYPEhtml>2<html>3<head>4<metacontent="text/html;charset=utf-8"/>5<title></t 查看详情

结对编程项目五子棋-需求分析

简单介绍五子棋游戏的制作过程与需求支持多个平台的游戏运行,有无网络都可运行玩乐的休闲益智游戏制作:初步设置一个游戏窗口,调节窗口大小画出游戏需要的画面,绘画出需要的落子设置鼠标按键,退出游戏的按键设置... 查看详情

结对-结对编项目作业名称-开发环境搭建过程

我们这次的开发任务是用html做一个五子棋游戏。首先我们需要一个编辑环境和一个运行环境。第一步:我们选择一个编程软件,这里我使用我自己的HBuilder这款软件,百度HBuilder看你电脑的系统是32还是64选择对版本,下载一个安... 查看详情

结对-五子棋游戏-测试过程

地址:https://gitee.com/g961231/WuZiQi/tree/master测试功能:点击棋盘在对应的位置落子,棋盘边缘不能落子最后现阶段有个小BUG就是已经落子的位置可以重复下字。以后修复 查看详情

结对编程项目作业0

...号:2015035107010 姓名:郑月 结对编程项目作业名称:五子棋游戏 选择该结对编程项目原因:因为五子棋游戏是一种受大众喜欢的一款游戏,其规则简单,变化多端,只需要另个人即可进行,非常富有趣味性和消遣性。 查看详情

结对-五子棋-开发环境搭建过程

主要使用notepad++和sublime完成此项目  查看详情

结对编程作业需求分析—五子棋

五子棋需求分析1.需求分析:五子棋的人机对战复杂,本小组只设计人人对战游戏。具体需求如下:(1)初始化:屏幕初始化,棋盘由纵横各15条等距离、垂直交叉的平行线构成,形成225个交叉点,以对局开始时的黑方为准(2)... 查看详情

结对-贪吃蛇游戏-开发环境搭建过程

安装Pythonpygame 新建文本文档并将后缀更改为py 开始编程 查看详情

结对编程-设计文档-五子棋

使用html和css设计整个游戏设计棋盘的大小设计落子的规则顺序点击鼠标设计格子内是否有棋子设计取胜规则从下子的地方为中心朝4个方向判断,若连成五子,遇空子或敌方棋子则改变方向则胜出    查看详情

结对-结对编项目作业名称-需求分析

目标要求本次结对编程设计网络休闲益智类游戏——五子棋。这个软件应该达到以下目标:制定合法规则,能够判断出非法操作,以便公正地进行并分出胜负;支持人人对战方便操作和使用。基本规则1、双人对战,由五子棋的... 查看详情

结对-结对编项目作业名称-需求分析

【目标要求】本次结对编程设计网络休闲益智类游戏——五子棋。这个软件应该达到以下目标:制定合法规则,能够判断出非法操作,以便公正地进行并分出胜负;支持人人对战方便用户的操作和使用。【基本规则】1、双人对... 查看详情

结对-五子棋游戏-最终程序

结对成员1:李金鹏2015035107035结对成员0:陈智鹏2015035107017   成员合照:、 查看详情

结对编程——黄金点游戏

本次的结对编程的项目是黄金点游戏,我的结对对象是杨月永,我们的编程能力都不太好,而且都对C语言更熟悉些,因此我们决定用C语言来实现。(1)分工:角色分配:杨月永是领航员,我是驾驶员,但由于我们的编程能力都... 查看详情

《结对编项目作业名称-设计文档》

结对编程项目:五子棋游戏成员:鞠牧孜,郑月搭建环境:python  VC++步骤:1.绘制五子棋棋盘     2.两位玩家交替下棋     3.根据五子相连判断输赢 查看详情

结对编程项目-开发环境搭建过程

开发成员:2015035107169焦广鑫     2015035107161杜念泽结对编程项目:四则元算器这次我们开发的项目是四则运算器,用到的开发语言为python2.7,具体环境搭建链接为http://jingyan.baidu.com/article/eb9f7b6da950c4869364e8f5.html 查看详情

结对编程需求分析

1.编写目的本文档将对《关灯游戏》游戏软件开发需求进行描述,开发出一部属于自己的软件游戏。本项目作为训练编程能力而提出,通过了解《关灯游戏》的游戏开发历程,了解软件文档的相关标准和编写原则,训练并掌握各... 查看详情