Javascript实现找不同色块的游戏

游戏规则：在变化数量的颜色块里找出一个不同颜色的块点击

这里使用了JS中的构造函数来创建元素

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>找不同色块的游戏（构造函数）</title>
</head>
<style>
 *{
  margin: 0;
  padding: 0;
 }
 #box{
  width: 600px;
  height: 600px;
  margin: auto;
  margin-top: 100px;
 }
 #score{
  width: 180px;
  height: 50px;
  line-height: 150%;
  font-size: 2em;
  position: absolute;
  top: 30px;
  left: 35%;
 }
 .creat{
  float: left;
  border-radius: 100%;
 }
</style>
<body>
 <div id="score">关卡：1</div>
 <div id="box"></div>
 <script>
  var n=1;//关卡值
  var Create=new creat(3);//定义构造函数对象，传入一个参数（开始时的布局3x3）
  Create.go();//调用构造函数里面的函数属性
  function creat(event){//定义构造函数creat
   var obox=document.getElementById("box");
   this.className="creat";//设置className
   this._creat=null;//事先创建出一个属性_creat用于指向一个对象
   this.go=function(){//创建颜色块的方法函数
    var colorNum1=Math.floor(Math.random()*253)+1;//随机数取一个值范围是（1~254）防止白色块出现
    var colorNum2=Math.floor(Math.random()*253)+1;
    var colorNum3=Math.floor(Math.random()*253)+1;
    this.color="rgb("+colorNum1+","+colorNum2+","+colorNum3+")";//定义rgb颜色属性
    this.diffOpacity=0.7;//用于改变其中一个颜色快的颜色(这里可以自定义改变透明度)
    for(var i=0;i<event*event;i++){//创建循环循环event*2次，每当点击颜色块后event变化
     this._creat=document.createElement("div");//动态创建一个div赋给this._creat属性
     this._creat.style.width=Math.floor(600/event)+"px";//设置div的宽，高，颜色和className
     this._creat.style.height=Math.floor(600/event)+"px";
     this._creat.style.backgroundColor=this.color;
     this._creat.className=this.className;//在样式中给div左浮动
     obox.appendChild(this._creat);//作为孩子添加到obox中
    }
    var odiv=document.getElementsByClassName("creat");//获取一下创建好的div
    var numRandom=parseInt(Math.random()*odiv.length);//随机取到其中一个改变其透明度值
    odiv[numRandom].style.opacity=this.diffOpacity;
    odiv[numRandom].onclick=function(){
    /*给取到的div绑定事件，当点击时先清空obox中元素即上一关卡的div
    *获取score改变n的值
    *改变event的值，可以自定义难度
    *再调用一下调用构造函数里面的go函数属性,创建一组新的元素
    */
     var oScore=document.getElementById("score");
     n++;
     oScore.innerHTML="关卡："+n+"";
     obox.innerHTML="";
     event++;
     Create.go();
    }
   }
  }
 </script>
</body>
</html>

以上所述是小编给大家介绍的Javascript实现找不同色块的游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js H5 canvas投篮小游戏

    本文实例为大家分享了H5 canvas投篮小游戏实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="init(19,'mylegend',820,500,main,LEvent.INIT)"> <div

  • JS快速实现移动端拼图游戏

    JS快速实现移动端拼图游戏

    最近做的一个简陋的手机端拼图游戏,代码简单易懂,废话不多说了,让大家证明一切吧! 先看下效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" id="viewport" cont

  • JavaScript实现在数组中查找不同顺序排列的字符串

    需求描述:从一组数组中找出一组按不同顺序排列的字符串的数组元素.假如有这样一个数组: 复制代码 代码如下: [ 'abcd', 'hello', 'bdca', 'olleh', 'cadb', 'nba', 'abn', 'abc' ] 需要找出的结果是: 复制代码 代码如下: [ 'abcd', 'bdca', 'cadb' ] 那么这里的关键点是判断一组字符串是否是否只是字符的顺序不同,只要解决整个关键点其他都好办了. 方法1: 复制代码 代码如下: var stringClassify

  • 纯JavaScript 实现flappy bird小游戏实例代码

    纯JavaScript 实现flappy bird小游戏实例代码

    前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它 步骤1:页面布局,这儿就不多说了,页面内容如下:

  • 基于jsp的井字游戏实例

    基于jsp的井字游戏实例

    做一款回忆童年的游戏,这款游戏代码比较简单,主要是掌握算法的原理,但是也有一些需要注意的地方. 游戏界面 进入正题.项目的效果图如下: 游戏有一个开始界面可供选择玩家的角色,然后选择先手是哪一方,接着开始游戏.选择界面做了一个遮罩层,里面提供给用户选择,选择之后便把遮罩层隐藏并开始游戏. 具体实现 说了那么多,可能比较枯燥,下面介绍一下具体的代码实现. 使用一个二维数组panel保存棋盘的状态,1是电脑的值,-1是玩家的值. winArr保存所有可能赢的8个棋位组合:维护computerWin和

  • js贪吃蛇游戏实现思路和源码

    js贪吃蛇游戏实现思路和源码

    本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;

  • Javascript实现找不同色块的游戏

    Javascript实现找不同色块的游戏

    游戏规则:在变化数量的颜色块里找出一个不同颜色的块点击 这里使用了JS中的构造函数来创建元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>找不同色块的游戏(构造函数)</title> </head> <style> *{ margin: 0; padding: 0; } #bo

  • 使用Javascript写的2048小游戏

    最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议. HTML代码如下 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="2048.css"/> <scri

  • 基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编

  • javascript高仿热血传奇游戏实现代码

    前言 游戏的第一个版本开发于14年,浏览器端使用html+css+js,服务端使用asp+php,通讯采用ajax,数据存储使用access+mySql.不过由于一些问题(当时还不会用node,用asp写复杂的逻辑真的会写吐:当时对canvas写的也少,dom渲染很容易达到性能瓶颈),已经废弃.后来用canvas重制了一版.本文写于18年. 1.开发前的准备 为什么要用Javascript来实现一款比较复杂的PC端游戏 1.js实现PC端网游是可行的.随着PC.手机硬件配置的升级和浏览器的更新换

  • 如何利用JavaScript编写一个格斗小游戏

    如何利用JavaScript编写一个格斗小游戏

    拖延症晚期的我原本计划趁着周末写个年终总结,但是一直没有什么思路,想来想去也没想到要写啥就胡乱写了这么一个小东西. 一直比较痴迷游戏行业,可能我不太适合做前端,应该去学C++.... 首先当然是选择一张背景图,作为整个场景中的地图,而且要大要高清.布局到页面中. 然后通过可视区值展示这张图片的一小部分.我这里用的是宽600,高420的,超出直接隐藏掉. width: 600px; height: 420px; 这样一个简单的场景就写好了,接着我们需要在这个场景中加入我们的人物.也就是游戏中的角色

  • JavaScript实现九宫格移动拼图游戏

    JavaScript实现九宫格移动拼图游戏

    本文实例为大家分享了JavaScript实现九宫格移动拼图游戏的具体代码,供大家参考,具体内容如下 效果图: 代码以及详细逻辑: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉

  • 基于JavaScript编写一个翻卡游戏

    目录 前言 翻卡动画 生成随机分布数组 均匀元素下的随机算法 不均匀元素下的随机算法 生成最终数组 点击事件 完整代码 前言 首先将这个游戏需求拆分成三个部分: 翻卡动画 生成随机分布数组 点击事件 翻卡动画 假如我们的盒子模型不是个二维的平面,而是有个三维的体积,让它可以有正反两面,那我们在做的时候是不是只要将它真实的翻个面就可以了.让我们来想想将它变成三维的方法. 之后发现了这个属性: transform: translateZ(1px); 使用了它,就可以把盒子内部的元素与盒子的底部撑出个

  • 原生javascript制作贪吃蛇小游戏的方法分析

    本文实例讲述了原生javascript制作贪吃蛇小游戏的方法.分享给大家供大家参考,具体如下: <!--1. 创建场景 --> <!-- 2.定义初始数据  以及随机食物 --> <!-- 3.控制贪吃蛇方向 --> <!-- 4.判断位置以及和随机食物的位置 增加贪吃蛇长度 --> HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta char

  • Javascript实现贪吃蛇小游戏（含详细注释）

    本文实例为大家分享了Javascript实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 前言 原生JavaScript实现贪吃蛇小游戏 GitHub地址 直接复制可用 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w

随机推荐