'步步为营'游戏代码（js+HTML）

最新推荐文章于 2021-07-18 10:45:47 发布
最新推荐文章于 2021-07-18 10:45:47 发布
阅读量539 收藏
点赞数

001

<!DOCTYPE HTML>
002<html>
003<head>
004<meta charset="UTF-8">
005<title>Flood It</title>
006<style>
007span{display:inline-block;margin:2px;width:30px;height:30px;cursor:pointer;}
008</style>
009</head>
010<body>
011<div style="position:absolute;left:2px;top:2px;width:660px;">
012<canvas id="canvas" width="660" height="660"></canvas>
013</div>
014<div style="position:absolute;left:700px;width:300px;">
015<p><input type=button value="New Game" onclick=init()><span id="hint"></span></p>
016<p>
017<span style="background:#884cb8;" onclick=drawColor(0)></span>
018<span style="background:#f84870;" onclick=drawColor(1)></span>
019<span style="background:#f87c00;" onclick=drawColor(2)></span>
020<span style="background:#f8dc00;" onclick=drawColor(3)></span>
021<span style="background:#10d000;" onclick=drawColor(4)></span>
022<span style="background:#106cf8;" onclick=drawColor(5)></span>
023</p>
024<div>
025<script>
026var canvas = document.getElementById('canvas');
027var context = canvas.getContext('2d');
028//定义填充的颜色
029var color=['#884cb8','#f84870','#f87c00','#f8dc00','#10d000','#106cf8'];
030//格子区域
031var board;
032//宽度，高度最难级别22格
033var level=22;
034//当前颜色索引 0-5
035var currentColorIndex;
036//一个标志位仅在初始化时开启
037var flag;
038//显示步数的div
039var hint=document.getElementById('hint');
040//记录点击步数
041var step;
042//初始化数组，随即产生颜色index并存储
043function init(){
044    board=new Array();
045    for(i=0;i<level;i++){
046        var row=new Array();
047        for(j=0;j<level;j++){
048            row[j]=Math.floor(Math.random()*6);    
049        }
050        board[i]=row;
051    }
052    //当前颜色等于左上角的色块
053    currentColorIndex=board[0][0];
054    //翻转过的格子存储-1值，先另左上角的为-1
055    board[0][0]=-1;
056    //一下几行自己看吧，一言难尽
057    flag=false;
058    drawColor(currentColorIndex);
059    flag=true;
060    _drawBoard();
061    step=0;
062    hint.innerText=step+'/36'
063}
064 
065//绘制格子区域
066function _drawBoard(){
067    context.fillStyle=color[currentColorIndex];
068    context.fillRect(0,0,30*level,30*level);
069    for(i=0;i<level;i++){
070        for(j=0;j<level;j++){
071            if(board[i][j]!=-1){
072            context.fillStyle=color[board[i][j]];
073            context.fillRect(j*30,i*30,30,30);
074            }
075        }
076    }
077    hint.innerText=step+'/36'
078}
079//染色
080function drawColor(color_index){
081    //点击当前颜色值无效。初始化时除外。
082    if(color_index==currentColorIndex && flag) return;
083    for(i=0;i<level;i++){
084        for(j=0;j<level;j++){
085            if(board[i][j]==-1){
086                _findSameColor(i,j,color_index);
087            }
088        }
089    }
090    step++;
091    currentColorIndex=color_index;
092    _drawBoard();
093}
094//递归寻找同色格子
095function _findSameColor(cell_x,cell_y,color_index){
096    if(cell_x-1>=0 && board[cell_x-1][cell_y]==color_index) {board[cell_x-1][cell_y]=-1;_findSameColor(cell_x-1,cell_y,color_index);}
097    if(cell_x+1<level && board[cell_x+1][cell_y]==color_index) {board[cell_x+1][cell_y]=-1;_findSameColor(cell_x+1,cell_y,color_index);}
098    if(cell_y-1>=0 && board[cell_x][cell_y-1]==color_index) {board[cell_x][cell_y-1]=-1;_findSameColor(cell_x,cell_y-1,color_index);}
099    if(cell_y+1<level && board[cell_x][cell_y+1]==color_index) {board[cell_x][cell_y+1]=-1;_findSameColor(cell_x,cell_y+1,color_index);}
100}
101</script>
102</body>
103</html>

HTML页面：

001<!DOCTYPE HTML>
002<html>
003<head>
004<meta charset="UTF-8">
005<title>Flood It</title>
006<style>
007span{display:inline-block;margin:2px;width:30px;height:30px;cursor:pointer;}
008</style>
009</head>
010<body>
011<div style="position:absolute;left:2px;top:2px;width:660px;">
012<canvas id="canvas" width="660" height="660"></canvas>
013</div>
014<div style="position:absolute;left:700px;width:300px;">
015<p><input type=button value="New Game" onclick=init()><span id="hint"></span></p>
016<p>
017<span style="background:#884cb8;" onclick=drawColor(0)></span>
018<span style="background:#f84870;" onclick=drawColor(1)></span>
019<span style="background:#f87c00;" onclick=drawColor(2)></span>
020<span style="background:#f8dc00;" onclick=drawColor(3)></span>
021<span style="background:#10d000;" onclick=drawColor(4)></span>
022<span style="background:#106cf8;" onclick=drawColor(5)></span>
023</p>
024<div>
025<script>
026var canvas = document.getElementById('canvas');
027var context = canvas.getContext('2d');
028//定义填充的颜色
029var color=['#884cb8','#f84870','#f87c00','#f8dc00','#10d000','#106cf8'];
030//格子区域
031var board;
032//宽度，高度最难级别22格
033var level=22;
034//当前颜色索引 0-5
035var currentColorIndex;
036//一个标志位仅在初始化时开启
037var flag;
038//显示步数的div
039var hint=document.getElementById('hint');
040//记录点击步数
041var step;
042//初始化数组，随即产生颜色index并存储
043function init(){
044    board=new Array();
045    for(i=0;i<level;i++){
046        var row=new Array();
047        for(j=0;j<level;j++){
048            row[j]=Math.floor(Math.random()*6);    
049        }
050        board[i]=row;
051    }
052    //当前颜色等于左上角的色块
053    currentColorIndex=board[0][0];
054    //翻转过的格子存储-1值，先另左上角的为-1
055    board[0][0]=-1;
056    //一下几行自己看吧，一言难尽
057    flag=false;
058    drawColor(currentColorIndex);
059    flag=true;
060    _drawBoard();
061    step=0;
062    hint.innerText=step+'/36'
063}
064 
065//绘制格子区域
066function _drawBoard(){
067    context.fillStyle=color[currentColorIndex];
068    context.fillRect(0,0,30*level,30*level);
069    for(i=0;i<level;i++){
070        for(j=0;j<level;j++){
071            if(board[i][j]!=-1){
072            context.fillStyle=color[board[i][j]];
073            context.fillRect(j*30,i*30,30,30);
074            }
075        }
076    }
077    hint.innerText=step+'/36'
078}
079//染色
080function drawColor(color_index){
081    //点击当前颜色值无效。初始化时除外。
082    if(color_index==currentColorIndex && flag) return;
083    for(i=0;i<level;i++){
084        for(j=0;j<level;j++){
085            if(board[i][j]==-1){
086                _findSameColor(i,j,color_index);
087            }
088        }
089    }
090    step++;
091    currentColorIndex=color_index;
092    _drawBoard();
093}
094//递归寻找同色格子
095function _findSameColor(cell_x,cell_y,color_index){
096    if(cell_x-1>=0 && board[cell_x-1][cell_y]==color_index) {board[cell_x-1][cell_y]=-1;_findSameColor(cell_x-1,cell_y,color_index);}
097    if(cell_x+1<level && board[cell_x+1][cell_y]==color_index) {board[cell_x+1][cell_y]=-1;_findSameColor(cell_x+1,cell_y,color_index);}
098    if(cell_y-1>=0 && board[cell_x][cell_y-1]==color_index) {board[cell_x][cell_y-1]=-1;_findSameColor(cell_x,cell_y-1,color_index);}
099    if(cell_y+1<level && board[cell_x][cell_y+1]==color_index) {board[cell_x][cell_y+1]=-1;_findSameColor(cell_x,cell_y+1,color_index);}
100}
101</script>
102</body>
103</html>
tianpeiwen
关注
纯源码开源桌游小游戏 墙棋 步步为营-易语言
06-11
墙棋 墙棋又译为步步为营 ，是Mirko Marchesi在1997年推出的两到四人对战的棋类游戏，棋具类似路障棋。 中文名墙棋外文名Quoridor又 译步步为营推出者Mirko Marchesi年 份1997年人 数两到四人对战类 型棋类游戏 棋具 棋盘9乘9大小的棋格，格子间有沟槽。 棋子造型为类似西洋棋兵卒造型。每方各有一子。 做为墙壁的木片，长度为两棋格。两人玩时，每方各十片。三人玩时，每方七片。四人玩时，每方五片。 规则 先将各棋子放置在棋盘各边的中间格。两人玩时，两子需放在相对侧。 轮到回合的玩家，须作以下两动作之一： 动子 移动至邻边四格之一。若有其他玩家的棋子相邻，则可跳过后者至后方格，但不能一次跳过两子以上的棋子。若跳过的棋子后方为木板，则可以跳至后者左方或右方。棋子不可穿过墙。 花了几个晚上写出来的 开源之前特地补上了备注,避免大家看不懂~ UI很粗糙 实在不会做UI 能用就OK素材是官方黑白棋的素材~ 下面是游戏界面 游戏规则上面已经有了 不懂的可以百度一下~ 源码还有优化空间 剩下的就交给各位了~ 纯源码,没有调用任何模块~ 下面是代码截图~
步步为营 .NET 代码重构学习笔记 十三
weixin_34179968的博客
01-08 78
一、Replace Exception with Test（以测试取代异常） 动机（Motivation） 面对一个[调用者可预先加以检查]的条件，你抛出了一个异常。修改调用者，使它在调用函数之前先做检查。 示例 private Dictionary&lt;int, string&gt; _values; public double GetValueF...
AlphaZero算法玩游戏《步步为营》(Quoridor)
kurumi233的博客
07-28 6677
  引入   最近突然想起2个月前做的一个项目，还处于起步阶段，就是利用AlphaZero算法玩一个叫步步为营的游戏，最初写这个项目其实是受人所托，后来初步完成后由于各种原因，打比赛，做项目等等，就一直荒废在那里了。先介绍下这个游戏，中文名叫步步为营，英文名叫Quoridor，这个游戏在中国或许不火，但是以前在国外还是特别火的。属于一款益智类的桌游，大体如下面这个样子：   游戏可以由...
步步为营-60-代码生成器
weixin_30667649的博客
05-19 66
说明:代码生成器有很多,我们目前介绍的是动软代码生成器 1 打开动软,连接数据库,新建项目,选择要生成的表和地址,生成 2 自定义模板生成 <#@ template language="c#" HostSpecific="True" #> <#@ output extension= ".cs" #> <# TableHost host ...
步步为营桌游算法实现
Ybox的博客
07-18 899
最近整理文档，发现了18年参加的智能车竞赛写的一个游戏算法，这是我第一次写的一个超过1000行代码程序，当时也是完全没有接触过算法上的东西，一边学一边写磕磕碰碰竟然也把这个事情做成了。现在上了研究生，遇到的都是控制理论这方面的东西，算法未来应该是不会再接触了，把当时的思路在这里整理一下 也算对这个方向画个句号了。 当年决赛的题目是 步步为营 桌游的对抗，挺益智的一款桌游（当时队友写代码写得头大的时候会来放松一下hh），简单描述一下规则： 刚开始己方和对方的棋子都在底部中间，每个回合可以选择放置挡板或者移
基于C++实现步步为营游戏【100012350】
最新发布
05-22
客户端 UI 使用控制台实现，在游戏的底层数据结构 QuoridorUtils.cpp/h 上定义了两个抽象类 DataLoader GameView 作为接口。DataLoader 是用来加载数据的抽象类，本项目中实现了其子类 LogLoader 用来加载 csv 格式...
Photoshop CS3步步为营：启蒙+基础练习
08-26
《Photoshop CS3步步为营：启蒙+基础练习》是一本专为Photoshop初学者设计的教程，旨在通过实例教学，全面覆盖Photoshop的基础功能和技巧。教程涵盖多个主题，如基本工具、图像处理、绘图绘画、色彩调整、照片修饰、...
步步为营VS 2008 + .NET 3.5
11-14
LINQ中文书,翻译linq的中文书籍,步步为营VS 2008 + .NET 3.5
Photoshop_CS3中文版步步为营
06-15
Photoshop_CS3中文版步步为营：启蒙.基础练习]
HTML5游戏源代码集合
09-19
HTML5有望成为网络游戏开发的热门新平台，其跨平台性已奠定了其未来发展的基础。本资源为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写，为大家讲解HTML5游戏开发基础教程及分享实战经验。
JavaScript经典小游戏
02-24
很了二天时间下载并整理代码格式，确认运行效果，最终将几个感觉还不错的打包，供亲们下载！优点：代码格式良好，经过测试可以运行，内容经典包含：坦克（超猛）、俄罗斯方块、贪吃蛇、打雷、三子棋等六6个，希望能给深入学习JavaScript的童鞋们带来帮助
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发
08-29
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发，补充了上一版的欠缺的两个小程序代码。为全部《HTML+CSS3+JS动画小游戏开发》文档的源码
js+html版2048小游戏
12-12
javsascriptyu与HTML/css做的网页小游戏，比较初级适合在校学习的学生，
实用html5与JS写的小游戏_源码
03-07
实用html5与JS写的小游戏_源码 近百个小游戏 微信运营可使用
HTML和JS游戏demo源码下载（50duo个）
WebGIS开发博客
07-28 3349
HTML和JS游戏demo源码下载（50duo个）
（完整源码）H5贪吃蛇小游戏——HTML+CSS+JavaScript实现
热门推荐
bingocoder的博客
01-05 7万+
最近因为帮助大一的学妹做网页，又接触了一下前端方面的知识。（学妹已经成了女朋友！！！，嘻嘻）感谢自己当年认真学习，大三了好多东西还能拾起来，哈哈。我翻出了我当年写的代码，还真不少呢。今天复习复习，看一看那时候写的一个贪吃蛇的代码。当时用了一整天，跟着今日头条上推送给我的一个视频一点一点手敲的…… 两年半了，我记得这么清楚，是因为写这个太痛苦了，记忆犹新啊！！！大一手敲着不知道为什么的代码，一遍一遍...
win8.1 系统 自动激活正式版
hao33399998的专栏
06-12 1732
在商场里安装电脑系统已经两年多，安装的电脑数应该在两万左右吧，主要是品牌笔记本与台式机，戴尔，三星，华硕等。当然我们的系统是肯定要稳定的，现在不干这行业了，就把我们用的系统免费分享给大家，只希望多多支持。 首先下载系统文件和系统安装工具。 下载地址： Win7 32 64 位: Win8 64 位: 或者http://xitong456.com/xitong.html
负熵(看了好久，竟然这么简单,哎！…
胖大星的博客
08-05 1万+
今天看数据挖掘建立判定树的部分，被熵折磨得很痛苦，看了这篇博客稍微懂了一些，数学不好还是码农的孩纸桑不起啊！文章转载自chl033http://blog.csdn.net/chl033/article/details/4795154          首先明确一下熵的概念，虽然它是一个热力学度量，但是现在已经广泛应用在了数据分析的方方面面。 熵（ectropy）指的是体系的混乱程度，是体系的转
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值