js小游戏---智力游戏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 一个无聊的游戏 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> </HEAD>
<style type="text/css">
tr td{cursor: pointer;transition: all ease .3s;color: #fff;font-weight: 600;box-shadow: 0 0 5px 1px #000;}
tr:last-child td:last-child{color: #000}
.bd{margin: 0 auto;width: 300px;}
</style>
<BODY style="background-color:#eee">
<div class="bd">
<h4 style="margin:15px 15px;">全部换色即为过关！</h4>
<table width="300" height="180" border="0" cellpadding="0" cellspacing="3">
<tr align="center">
<td bgcolor="#4599cc" width="25%" id="0-0" onclick="ct(this)"></td>
<td bgcolor="#4599cc" width="25%" id="0-1" onclick="ct(this)"></td>
<td bgcolor="#4599cc" width="25%" id="0-2" onclick="ct(this)"></td>
<td bgcolor="#4599cc" width="25%" id="0-3" onclick="ct(this)"></td>
</tr>
<tr align="center">
<td bgcolor="#4599cc" width="25%" id="1-0" onclick="ct(this)"></td>
<td bgcolor="#4599cc" width="25%" id="1-1" onclick="ct(this)"></td>
<td bgcolor="#4599cc" width="25%" id="1-2" onclick="ct(this)"></td>
<td bgcolor="#4599cc" width="25%" id="1-3" onclick="ct(this)"></td>
</tr>
<tr align="center">
<td bgcolor="#4599cc" width="25%" id="2-0" onclick="ct(this)"></td>
<td bgcolor="#4599cc" width="25%" id="2-1" onclick="ct(this)"></td>
<td bgcolor="#4599cc" width="25%" id="2-2" onclick="ct(this)"></td>
<td bgcolor="#f5f5d5" id="2-3" onclick="resetBox(this)"></td>
</tr>
</table>
<h4 id="mm"></h4>
</div>
</BODY>
</HTML>
<script type="text/javascript">
console.log("E H J I F C D H C")
var $ = function(ele){return document.getElementById(ele);}
var box = [
[1,1,1,1],
[1,1,1,1],
[1,1,1,0]
];
var maxX = 2; //最大行
var maxY = 3; //最大列
var count = 0;
function ct(ele){
var p = ele.id.split("-");
if(box[p[0]][p[1]] == 1){ //能点击
box[p[0]][p[1]] = -1; var sum = 0;
var aX = parseInt(p[0])-1,
bX = parseInt(p[0])+1,
cY = parseInt(p[1])-1,
dY = parseInt(p[1])+1;
if ( aX >= 0 ){
if(box[aX][p[1]] == -1){
box[aX][p[1]] = 1;
}else{
box[aX][p[1]] = -1;
}
}
if ( bX <= maxX ) {
if(box[bX][p[1]] == -1){
box[bX][p[1]] = 1;
}else{
box[bX][p[1]] = -1;
}
}
if( cY >= 0 ){
if(box[p[0]][cY] == -1){
box[p[0]][cY] = 1;
}else{
box[p[0]][cY] = -1;
}
}
if( dY <= maxY ){
if(box[p[0]][dY] == -1){
box[p[0]][dY] = 1;
}else{
box[p[0]][dY] = -1;
}
}
box[2][3] = 0;
$("mm").innerHTML = "第"+(++count)+"次尝试";
for(var i = 0; i<3 ; i++){
for(var j =0 ;j <4 ; j++){
sum += box[i][j];
if(box[i][j] == 1){
$(i+"-"+j).bgColor = "#4599cc";
$(i+"-"+j).style.color = "#fff"; }else if(box[i][j] == -1){
$(i+"-"+j).bgColor = "#d8cb59";
$(i+"-"+j).style.color = "#074d6d"; }else{
$(i+"-"+j).bgColor = "#f5f5d5";
};
}
};
if(sum == -11){ //
$("mm").innerHTML = "恭喜过关!尝试总次数："+count;
$("mm").style.color = "#960000";
}
}
}
function resetBox(){
for(var i=0; i<3; i++){
for(var j=0; j<4; j++){
box[i][j] = 1;
$(i + '-' + j).bgColor = '#4599cc';
$(i + '-' + j).style.color = '#fff';
}
}
box[2][3] = 0;
count = 0;
$(2 + '-' + 3).bgColor = '#f5f5d5';
$('mm').innerHTML = '';
$("mm").style.color = "#000";
}
</script>
这里主要运用的技术就是数组了，逻辑很简单，让点击的元素四周元素全部变色，所有元素换色成功后即为过关
js小游戏---智力游戏的更多相关文章
- 一个js小游戏----总结
花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...
- html+css+js实现网页拼图游戏
代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...
- BZOJ_1022_[SHOI2008]_小约翰的游戏John_(博弈论_反Nim游戏)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1022 反Nim游戏裸题.详见论文<组合游戏略述——浅谈SG游戏的若干拓展及变形>. ...
- SHOI2008小约翰的游戏John
1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 1139 Solved: 701[Submit][ ...
- BZOJ2464: 中山市选[2009]小明的游戏
2464: 中山市选[2009]小明的游戏 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 280 Solved: 124[Submit][Statu ...
- bzoj 1022: [SHOI2008]小约翰的游戏John anti_nim游戏
1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 1189 Solved: 734[Submit][ ...
- BZOJ 1022 [SHOI2008]小约翰的游戏John
1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 1635 Solved: 1036[Submit] ...
- 6、Cocos2dx 3.0游戏开发找小三之游戏的基本概念
重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27689713 郝萌主友情提示: 人是习惯的产物,当你 ...
- 1022: [SHOI2008]小约翰的游戏John
1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 1322 Solved: 829[Submit][ ...
随机推荐
- html中的rel，rev是什么？
html中的rel,rev是什么? 这2个标记主要是用于表示文档之间的联系,rel是从源文档到目标文档的关系:rev是从目标文档到源文档的关系 经常用到的属性如下: Alternate - 定义交替出 ...
- 【cocos2d-x + Lua（2） C++和lua数据通讯之间的互调】
我们主要解决如下几个问题: 转载注明出处:http://www.cnblogs.com/zisou/p/cocos2dx-lua2.html 1,C++如何获取Lua里面的一个变量值? 2,C++如何 ...
- UIDynamic(重力行为+碰撞检测)
一.重力行为 说明:给定重力方向.加速度,让物体朝着重力方向掉落 1.方法 (1)UIGravityBehavior的初始化 - (instancetype)initWithItems:(NSArra ...
- SpringBoot源码解析：AOP思想以及相应的应用
spring中拦截器和过滤器都是基于AOP思想实现的,过滤器只作用于servlet,表现在请求的前后过程中:拦截器属于spring的一个组件,由spring管理, 可以作用于spring任何资源,对象 ...
- mysql索引
1.创建索引 (PRIMARY KEY,INDEX,UNIQUE) mysql>ALTER TABLE tbl_name ADD INDEX index_name (column list); ...
- Nginx反向代理tomcat，seesion会话保持。
proxy_pass http://10.0.0.10:8081/monitor/; proxy_cookie_path /monitor/ /; proxy_set_header Host &quo ...
- <<< 将一个rar格式的文件变成一张jpg图片，按照后缀来选择打开他的模式
把一个压缩格式和一张图片合成,按照后缀来判断他打开是图片还是解压文件,后缀是jpg打开的就是一张图片,后缀是rar打开的就是一个压缩包,里面存放你放的东西 :例如(秘密) 准备一张图片,test. ...
- SDL简介（网络汇总）
摄像头视频播放采用sdl,下面简单介绍下.不保证正确及网址永远有效.后面文章采用tao框架http://sourceforge.net/projects/taoframework/ SDL. ...
- 简单的STM32 汇编程序—闪烁LED
要移植操作系统,汇编是道不得不跨过去的坎.所以承接上篇的思路,我准备用汇编写一个简单的闪烁LED灯的程式.以此练习汇编,为操作系统做准备. 第一步,还是和上篇一样,建立一个空的文件夹. 第二步,因为是 ...
- 深入理解javascript原型和闭包（13）-【作用域】和【上下文环境】
上文简单介绍了作用域,本文把作用域和上下文环境结合起来说一下,会理解的更深一些. 如上图,我们在上文中已经介绍了,除了全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了.而不 ...