JavaScript小游戏实例：统一着色
设计如下的简单小游戏。
在面板（画布）中放置10行10列共100个小方块，每个小方块随机在5种颜色中选一种颜色进行着色，在面板的下方，放置对应的5种颜色色块，如图1所示。
图1 “统一着色”游戏界面
游戏要求通过每次对包含最左上角方块的相邻同色区域方块改变着色的方式，最终使得面板中的100个小方块着色统一。
例如，图1中包含最左上角方块的相邻同色区域方块只有1个，此时对其有效改变着色应该是选择“绿色”（下方相邻的方块颜色）或“棕色”（左边相邻的方块颜色），这样扩大了包含最左上角方块的相邻同色区域；否则，不扩大包含最左上角方块的相邻同色区域，应是无效的着色选择。
单击面板下方5个色块中的某个色块，就可以将包含最左上角方块的相邻同色区域的所有方块颜色改为所单击色块的颜色。一次游戏过程如图2所示。
图2 “统一着色”游戏过程示例
定义一个数组
var colors = ["Aquamarine","Blue","BlueViolet","Brown","Chartreuse","Chocolate","Cyan",
"DeepPink","Fuchsia","Green","Orange","Purple","Red","SkyBlue","Yellow"];
保存游戏可供选择的颜色。
每局游戏选择5个色块，定义数组 var options=[];保存在colors数组中选择的5种颜色所对应的下标。为了达到随机选择5种颜色，采用对颜色数组进行简单洗牌的方法来完成。
定义数组var blocks=[];保存面板中100个小方块的着色，第i行第j列小方块的着色保存在数组元素blocks[10*i+j]中。初始时，每个小方块的着色在选定的5种颜色中随机选择一种，一个简单的循环可完成。
for (var i=0;i<100;i++)
blocks[i]=options[Math.floor(Math.random()*5)];
单击面板下方5个小色块中某个色块后，调用函数setColor()完成改变着色的过程。
改变着色的区域是包含最左上角方块的相邻同色区域的所有方块，因此关键问题是怎么找到这个相邻同色区域中的所有方块。可采用广度优先搜索算法的思想来完成。算法描述为：
记下最左上角方块的初始着色srcColor；
队列初始化；
最左上角方块编号 0入队；
while （队列非空）
{
队头元素出队，赋给k；
改变方块k的着色（修改blocks[k]的值为所单击色块的颜色编号destColor）；
if （方块k右边的方块k+1存在且颜色为srcColor）
方块编号k+1入队；
if （方块k下边的方块k+10存在且颜色为srcColor）
方块编号k+10入队；
}
实际上，一个方块相邻的方块有上下左右四个，但算法中只需考虑右边和下边，无需考虑左边和上边。这是因为本游戏的着色改变总是改变包含最左上角方块的相邻区域，即搜索总是从最左上角方块开始，而最左上角方块只能向右边和下边扩展，之后每个方块也只需向右边和下边扩展即可，无需向左边和上边扩展（因为左边和上边的方块已被扩展处理过）。
获胜判断就更简单了，因为获胜的条件是所有方块的着色统一，即数组blocks的元素值全部相同，因此用循环检查元素blocks[1]~blocks[99]，若它们的值全部与blocks[0]相同，则获胜，否则只要有一个元素与blocks[0]不同，就没有达到着色统一的获胜要求。编写为一个简单的函数。
function checkWin()
{
for (var i=1;i<blocks.length;i++)
if (blocks[i]!=blocks[0]) return false;
return true;
}
另外，为避免游戏过程中的无效色块单击，记录游戏的步数（色块单击次数），若35步内不能完成统一着色，判定游戏失败。
完整的HTML代码如下。
<!DOCTYPE html>
<html>
<head>
<title>统一着色</title>
<style>
.num
{
padding: 28px 0;
border: 1px solid ;
cursor: pointer;
}
.new-game {
cursor: pointer;
text-decoration: underline;
color: #00bcd4;
font:bold 24px Georgia, serif;
}
#mess
{
width:480px;
padding:5px;
border:2px solid gray;
margin:0px;
font:bold 24px Georgia, serif;
color: #FF6600;
}
</style>
</head>
<body>
<div class="new-game" onclick="newGame();">New Game</div><br/>
<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;">
</canvas><br/>
<table cellpadding="0" cellspacing="20">
<tbody><tr>
<td width="60"><div id="c0" class="num" onclick="setColor(this);"></div></td>
<td width="60"><div id="c1" class="num" onclick="setColor(this);"></div></td>
<td width="60"><div id="c2" class="num" onclick="setColor(this);"></div></td>
<td width="60"><div id="c3" class="num" onclick="setColor(this);"></div></td>
<td width="60"><div id="c4" class="num" onclick="setColor(this);"></div></td>
</tr>
</tbody>
</table><br/>
<div id="mess"> </div><br/>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
ctx= canvas.getContext('2d');
var colors = ["Aquamarine","Blue","BlueViolet","Brown","Chartreuse","Chocolate","Cyan","DeepPink","Fuchsia ","Green","Orange","Purple","Red","SkyBlue","Yellow"];
var running = false;
var steps=0;
function shuffle(arr) // 数组arr洗牌
{
for (var i = arr.length-1; i>=0; i--)
{
var j = Math.floor(Math.random() * i);
var t=arr[i];
arr[i]=arr[j];
arr[j]=t;
}
}
var colorNum=[];
for (var i=0;i<colors.length;i++) colorNum[i]=i;
var options=[];
var blocks=[];
function newGame()
{
shuffle(colorNum);
options=colorNum.slice(0,5);
for (var i=0;i<100;i++)
blocks[i]=options[Math.floor(Math.random()*5)];
running=true;
steps=0;
draw();
document.getElementById("c0").style.backgroundColor =colors[options[0]];
document.getElementById("c1").style.backgroundColor =colors[options[1]];
document.getElementById("c2").style.backgroundColor =colors[options[2]];
document.getElementById("c3").style.backgroundColor =colors[options[3]];
document.getElementById("c4").style.backgroundColor =colors[options[4]];
document.getElementById("mess").innerHTML ="Steps:"+steps+"/35";
}
function draw()
{
for (var i=0;i<10;i++)
{
for (var j=0;j<10;j++)
{
ctx.fillStyle = colors[blocks[i*10+j]];
ctx.fillRect(j*50,i*50,50,50);
}
}
ctx.fillStyle ="rgba(255,255,255,0.85)";
ctx.fillRect(20,20,10,10);
}
function setColor(d)
{
if (!running)
{
document.getElementById("mess").innerHTML ="请单击 New Game 开始新游戏！";
return;
}
var index= parseInt(d.id.charAt(1));
var srcColor=blocks[0];
var destColor=options[index];
if (srcColor==destColor)
{
document.getElementById("mess").innerHTML ="Steps:"+steps+"/35 未进行颜色改变，无效单击！";
return;
}
var queue=[];
var front=0;
var rear=0;
queue[rear++]=0;
while (front<rear)
{
var k=queue[front++];
blocks[k]=destColor;
if (k%10!=9 && blocks[k+1]==srcColor) // 右边的方格
queue[rear++]=k+1;
if (k<90 && blocks[k+10]==srcColor) // 下边的方格
queue[rear++]=k+10;
}
draw();
steps++;
document.getElementById("mess").innerHTML ="Steps:"+steps+"/35";
if (checkWin())
{
running=false;
ctx.font = '50px PingFang SC';
ctx.fillStyle = "red";
ctx.textAlign = 'center';
ctx.baseline = 'middle';
ctx.fillText('You Win！',canvas.width/2, canvas.height/2);
}
else
{
if (steps==35)
{
running=false;
ctx.font = '50px PingFang SC';
ctx.fillStyle = "black";
ctx.textAlign = 'center';
ctx.baseline = 'middle';
ctx.fillText('You failed！',canvas.width/2, canvas.height/2);
}
}
}
function checkWin()
{
for (var i=1;i<blocks.length;i++)
if (blocks[i]!=blocks[0]) return false;
return true;
}
newGame();
</script>
</body>
</html>
JavaScript小游戏实例：统一着色的更多相关文章
- JavaScript小游戏实例：简单的键盘练习
键盘是一种常用的输入设备,灵活熟练地使用键盘进行输入是计算机用户需掌握的一门基本功.下面我们编写一个简单的键盘练习游戏. 1．刺破气泡交互式小动画 在编写简单的键盘练习游戏之前,先设计一个简单地刺破气 ...
- 制作一个 JavaScript 小游戏
简评: 作者学习了编程两个月,边学边做了一个 JavaScript 小游戏,在文中总结了自己在这个过程中的一些体会,希望能给其他初学者一些帮助. 对于很多想学编程但一直没下定决心的同学来说,最大的问题 ...
- javascript小游戏--生命游戏
昨天参加Code Retreat的活动,"Code Retreat是一个一天的集中练习的活动,专注于软件开发和设计的基础". 要了解更多信息可前往 CodeRetreat官网 通过 ...
- JavaScript小游戏--2048（PC端）
1.初始化棋局 $(document).ready(function() { prepare_for_mobile(); //适配移动端 new_game(); }); 2.开始新游戏 functio ...
- JavaScript小游戏--翻牌记忆游戏
翻牌记忆游戏源码 1.有8张图片,每张图片要放两次,生成如下数组,长为16,[0,1,2,3,4,5,6,7,0,1,2,3,4,5,6,7] 其中两两相同的代表两张相同的图片,0对应文件夹image ...
- JavaScript 小游戏 贪吃蛇
贪吃蛇 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...
- CSS技术实例1-使用CSS计数器实现数值计算小游戏实例页面
一 实例要达到的要求如图所示: 二 分析 1.7个圆角矩形标签(或按钮) 2. 点击触发并开始运算,最后一个标签显示结果 3.计算成功后弹出"万岁"字眼 三 代码实现 关键CSS代 ...
- Chrome内置的断网Javascript 小游戏脚本示范
//示范面向对象 this 作用域 闭包 单例模式很好的示范 1 // Copyright (c) 2014 The Chromium Authors. All rights reserved. // ...
- JavaScript小游戏--2048（移动端）
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
随机推荐
- bzoj3673可持久化并查集 by zky&&bzoj3674可持久化并查集加强版
bzoj3673可持久化并查集 by zky 题意: 维护可以恢复到第k次操作后的并查集. 题解: 用可持久化线段树维护并查集的fa数组和秩(在并查集里的深度),不能路径压缩所以用按秩启发式合并,可以 ...
- bzoj3621我想那还真是令人高兴啊
bzoj3621我想那还真是令人高兴啊 题意: T组数据,每组给出两个三角形各点坐标,要求求出一个点使第一个三角形可以绕这个点放缩和旋转得到另一个三角形.T≤10,坐标为≤10000的实数,数据保证三 ...
- 安装调试mosquitto日志
1.下载mosquitto安装包https://mosquitto.org/download/2.安装其他依赖包 yum install gcc gcc-c++ libstdc++-devel yum ...
- “我放弃了年薪20W的offer......”
我的职业生涯开始和大多数测试人一样,开始接触都是纯功能界面测试.那时候在一家电商公司做测试,做了有一段时间,熟悉产品的业务流程以及熟练测试工作流程规范之后,效率提高了,工作比较轻松,也得到了更好的机会 ...
- T133309 57级返校测试重测-T2-选票统计
大致题意: 找出个数超过n/4的数们. 基本思路: 一开始我是用map做的,然后就很玄学的TLE了. 啊,那就换个法吧. 先排个序,然后一样的数就在一起了, 再然后直接从前往后遍历一下,就能得出结果了 ...
- CodeForces - 722C Destroying Array （并查集/集合的插入和删除）
原题链接:https://vjudge.net/problem/511814/origin Description: You are given an array consisting of n no ...
- 学会Python除了不能生孩子，其他的都能做。
随着人工智能的迅猛发展,相信大家对于it行业最熟悉的词莫过于 Python.那么,Python究竟可以做些什么呢?一个资深程序员说:“学会Python除了不能生孩子,其他的都能做.”加入3137821 ...
- php三元运算符?:和??
1.(expr1) ? (expr2) : (expr3) 在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3. $a = (expr1) ...
- PHP入门之类型与运算符(一)
前言 PHP对于大部分人来说,是比较容易入门的.笔者也是刚学习不久,所以就把自己学习的基础知识进行总结和整理.第一部分是类型与运算符.如果你想学习PHP,可以参考PHP学习手册学习,任何一本教学资料也 ...
- 解释Crypto模块，No module named "Crypto"
1.pip install pycryptodome 2.Python\Python38\Lib\site-packages,找到这个路径,下面有一个文件夹叫做crypto,将小写c改成大写C就ok了 ...