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中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
随机推荐
- VSCode下，项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
vscode下webpack错误:无法将“webpack”项识别为 cmdlet.函数.脚本文件或可运行程序的名称.请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次. 解决方法: 1.因为 ...
- 使用SQL语句进行数据复制
使用SQL语句对数据或者表进行复制,一般用于两张表结构相同的时候使用. SQL Server中,如果目标表存在: insert into 目标表 select * from 原表; SQL Serve ...
- 【JVM之内存与垃圾回收篇】方法区
方法区 前言 这次所讲述的是运行时数据区的最后一个部分 从线程共享与否的角度来看 ThreadLocal:如何保证多个线程在并发环境下的安全性?典型应用就是数据库连接管理,以及会话管理 栈.堆.方法区 ...
- C++语法小记---继承中的构造和析构顺序
继承中构造和析构的顺序 先父母,后客人,最后自己 静态变量和全局变量在最开始 析构和构造的顺序完全相反 #include <iostream> #include <string> ...
- 轻松应对并发问题，简易的火车票售票系统，Newbe.Claptrap 框架用例，第一步 —— 业务分析
Newbe.Claptrap 框架非常适合于解决具有并发问题的业务系统.火车票售票系统,就是一个非常典型的场景用例. 本系列我们将逐步从业务.代码.测试和部署多方面来介绍,如何使用 Newbe.Cla ...
- 【工具】- HttpClient篇
简介 对于httpclient,相信很多人或多或少接触过,对于httpclient的使用姿势,相信很多人会有疑问?下面这边会通过代码说明 package xxx; import org.apache. ...
- 不是吧，阿sir，2020年程序员要不好过？
自从网传程序员到了35岁之后必须要转行,现在又有人传言:“疫情之下,程序员今年要过苦日子了,降薪裁员是大趋势.” 不是,我就不明白了,你们怎么就看不得程序员好呢?天天巴望着程序员降薪.转行.裁员… ...
- springMVC -- 对接UEditor(富文本编辑器)
工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 一种方 ...
- js获取json对象的属性值
// var responseData = response.data.result; for (var r in responseData) { ...
- ThreadLocal源码分析以及why导致内存泄露
1 ThreadLocal? This class provides thread-local variables. These variables differ from their normal ...