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

最新推荐文章于 2025-01-24 09:00:00 发布
最新推荐文章于 2025-01-24 09:00:00 发布
阅读量606 收藏
点赞数
本文深入探讨了游戏开发领域的核心技术，包括Unity3D、Cocos2d-X等游戏引擎的使用，以及OpenGL ES、OpenCV等图像处理技术在游戏中的应用。同时，还涉及了AR特效、音视频直播流媒体等前沿技术，旨在为开发者提供全面的游戏开发知识。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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
关注
8年前端与众不同的Vue实战系列，助你成为前端顶级开发者
xingyu_qie的专栏
04-17 1721
Vue前端实战，从0到1，第三方组件自己开发
『前端实习笔记』前言 坎坷的找实习之路
猪窝
11-17 1941
文章目录前言：坎坷的找实习之路 前言：坎坷的找实习之路 上半年 2020年春，全国疫情肆虐，我正处于大三下学期。 此时的我丝毫没有意识到，自己正处于关键时期。 目前的自己会什么？除了专业课讲过的，啥也不会。 就连数据结构和算法都只是会皮毛。Leetcode刷中等题都困难。 只会一点Java基础，会点MySQL，会点专业课。 上个学期跟同学水了个项目，全程摸鱼，什么都没学到。 上半年的暑期实习投递 非常不乐观，投了很多都是简历都没过。 比如字节跳动，盛趣游戏，触宝等等，简历就挂了。 美团、4399这种
纯源码开源桌游小游戏 墙棋 步步为营-易语言
06-11
墙棋 墙棋又译为步步为营 ，是Mirko Marchesi在1997年推出的两到四人对战的棋类游戏，棋具类似路障棋。 中文名墙棋外文名Quoridor又 译步步为营推出者Mirko Marchesi年 份1997年人 数两到四人对战类 型棋类游戏 棋具 棋盘9乘9大小的棋格，格子间有沟槽。 棋子造型为类似西洋棋兵卒造型。每方各有一子。 做为墙壁的木片，长度为两棋格。两人玩时，每方各十片。三人玩时，每方七片。四人玩时，每方五片。 规则 先将各棋子放置在棋盘各边的中间格。两人玩时，两子需放在相对侧。 轮到回合的玩家，须作以下两动作之一： 动子 移动至邻边四格之一。若有其他玩家的棋子相邻，则可跳过后者至后方格，但不能一次跳过两子以上的棋子。若跳过的棋子后方为木板，则可以跳至后者左方或右方。棋子不可穿过墙。 花了几个晚上写出来的 开源之前特地补上了备注,避免大家看不懂~ UI很粗糙 实在不会做UI 能用就OK素材是官方黑白棋的素材~ 下面是游戏界面 游戏规则上面已经有了 不懂的可以百度一下~ 源码还有优化空间 剩下的就交给各位了~ 纯源码,没有调用任何模块~ 下面是代码截图~
步步为营-60-代码生成器
weixin_30667649的博客
05-19 95
说明:代码生成器有很多,我们目前介绍的是动软代码生成器 1 打开动软,连接数据库,新建项目,选择要生成的表和地址,生成 2 自定义模板生成 <#@ template language="c#" HostSpecific="True" #> <#@ output extension= ".cs" #> <# TableHost host ...
步步为营 .NET 代码重构学习笔记 十三
weixin_34179968的博客
01-08 100
一、Replace Exception with Test（以测试取代异常） 动机（Motivation） 面对一个[调用者可预先加以检查]的条件，你抛出了一个异常。修改调用者，使它在调用函数之前先做检查。 示例 private Dictionary&lt;int, string&gt; _values; public double GetValueF...
步步为营桌游算法实现
Ybox的博客
07-18 1081
最近整理文档，发现了18年参加的智能车竞赛写的一个游戏算法，这是我第一次写的一个超过1000行代码程序，当时也是完全没有接触过算法上的东西，一边学一边写磕磕碰碰竟然也把这个事情做成了。现在上了研究生，遇到的都是控制理论这方面的东西，算法未来应该是不会再接触了，把当时的思路在这里整理一下 也算对这个方向画个句号了。 当年决赛的题目是 步步为营 桌游的对抗，挺益智的一款桌游（当时队友写代码写得头大的时候会来放松一下hh），简单描述一下规则： 刚开始己方和对方的棋子都在底部中间，每个回合可以选择放置挡板或者移
HTML和JS游戏demo源码下载（50duo个）
WebGIS开发博客
07-28 3490
HTML和JS游戏demo源码下载（50duo个）
原生JS成语接龙小游戏
Blancker的博客
03-06 3705
1、界面实现及逻辑判断 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;成语接龙机器人&lt;/title&gt; &lt;style type="text/css"&gt; body,div,span,
探索微信小游戏开发：步步惊心源码分析
步步惊心可能指的是游戏设计中的一个概念，游戏中可能会有步步为营、小心翼翼的挑战元素，玩家需要在游戏中进行决策和操作，每个步骤都可能影响游戏的进程和结果。这种类型的游戏通常具有较高的互动性和挑战性，...
程序员别敲代码啦！转型运营岗开启快乐新篇章
最新发布
宝码香车的博客
01-24 1157
与此同时，技术的快速迭代更新，也给程序员带来了巨大的学习压力。新的编程语言、框架和工具层出不穷，他们需要不断学习，才能跟上行业的步伐。一旦跟不上技术更新的速度，就可能面临被淘汰的风险。在竞争激烈的职场环境中，程序员们还要面对晋升的压力。金字塔式的晋升结构，使得越往上晋升难度越大，能够成功晋升的人寥寥无几。
qt开发学习日志--步步为营
06-30
qt程序员写的 很有条理 从简至深 值得大家参考
实用html5与JS写的小游戏_源码
03-07
实用html5与JS写的小游戏_源码 近百个小游戏 微信运营可使用
js+html版2048小游戏
12-12
javsascriptyu与HTML/css做的网页小游戏，比较初级适合在校学习的学生，
HTML5游戏源代码集合
09-19
HTML5有望成为网络游戏开发的热门新平台，其跨平台性已奠定了其未来发展的基础。本资源为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写，为大家讲解HTML5游戏开发基础教程及分享实战经验。
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发
08-29
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发，补充了上一版的欠缺的两个小程序代码。为全部《HTML+CSS3+JS动画小游戏开发》文档的源码
AlphaZero算法玩游戏《步步为营》(Quoridor)
kurumi233的博客
07-28 7167
  引入   最近突然想起2个月前做的一个项目，还处于起步阶段，就是利用AlphaZero算法玩一个叫步步为营的游戏，最初写这个项目其实是受人所托，后来初步完成后由于各种原因，打比赛，做项目等等，就一直荒废在那里了。先介绍下这个游戏，中文名叫步步为营，英文名叫Quoridor，这个游戏在中国或许不火，但是以前在国外还是特别火的。属于一款益智类的桌游，大体如下面这个样子：   游戏可以由...
JavaScript经典小游戏
02-24
很了二天时间下载并整理代码格式，确认运行效果，最终将几个感觉还不错的打包，供亲们下载！优点：代码格式良好，经过测试可以运行，内容经典包含：坦克（超猛）、俄罗斯方块、贪吃蛇、打雷、三子棋等六6个，希望能给深入学习JavaScript的童鞋们带来帮助
（完整源码）H5贪吃蛇小游戏——HTML+CSS+JavaScript实现
热门推荐
bingocoder的博客
01-05 7万+
最近因为帮助大一的学妹做网页，又接触了一下前端方面的知识。（学妹已经成了女朋友！！！，嘻嘻）感谢自己当年认真学习，大三了好多东西还能拾起来，哈哈。我翻出了我当年写的代码，还真不少呢。今天复习复习，看一看那时候写的一个贪吃蛇的代码。当时用了一整天，跟着今日头条上推送给我的一个视频一点一点手敲的…… 两年半了，我记得这么清楚，是因为写这个太痛苦了，记忆犹新啊！！！大一手敲着不知道为什么的代码，一遍一遍...
经典消除游戏——Unity 祖玛游戏
梓瑜的专栏
06-18 7916
在Unity设计一个祖玛游戏
HTML5快速学习：步步为营
"HTML5_Step_by_Step 是一本由 Faithe Wempen 编写的教程，旨在帮助读者快速学习如何使用 HTML5 规范创建网页。这本书通过 O'Reilly Media, Inc. 出版，并获得了微软公司的授权。内容涵盖了 HTML5 的基本概念、结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值