JS高级-分享一个别踩白块的小游戏（源码）

"我是Spirit_Breeze,中文<晟世清风>,在这纷纷乱世之中,祈望能有一股清流之风." 本人从事销售,不甘心于口舌之利,突然对代码和框架充满兴趣,遂之研究研究,欢迎研究讨论,转载请备注地址和作者,谢谢。

第7章综合案例（别踩白块JS）

整体思路：

1：创建基本的静态页面；

2：让div动起来

3：动态创建Div

4：动起来后，填补缺失的div

5：随机创建黑块

6：绑定点击事件

7：点击判断输赢

8：游戏结束后的限制处理

9：黑块触底的处理

10：加分

11：加速

注意变量作用域和this指向的问题

insertBefore、firstChild、getComputedStyle、appendChild、createElement、Math.random、Math.floor

<!DOCTYPEhtml>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>Document</title>
   <style>
   #cont {
     margin-top:100px;
     width: 400px;
     height: 400px;
     border-top:1pxsolidblue;
     position: relative;
     /*隐藏顶部*/
     overflow: hidden;
      }
   #main {
     width: 400px;
     height: 400px;
     /*去掉红框*/
     /* border:1px solidred; */
     position: relative;
     top:-100px;
      }
   .row {
     height: 100px;
      }
   .rowdiv {
     width: 98px;
     height: 98px;
     border:1pxsolidgray;
     float: left;
      }
   .black {
     background: black;
      }
   </style>
</head>
<body>
   <inputtype="text"id="fen"value="0"disabled>
   <divid="cont">
   <divid="main"></div>
   </div>
</body>

<script>
   functionYouxi(){
   // 获取main节点对象
   this.main=document.getElementById('main');
   this.interval=''; // 定时器
   this.over=false; // 有是否结束的标志
   this.sudu=1; // 初始化下降速度

   // 创建DIV的方法
   this.cdiv=function(classNames){
     // 创建一个div节点对象
     vardiv=document.createElement('div');
     // 根据传入的值，创建不同class属性的div
     if(classNames){
      div.className=classNames;
      }
     returndiv;
      }

   //一次生成一行div
   this.crow=function(init){
     varrow=this.cdiv('row');
     // 获取0-3的随机数
     vark=Math.floor(Math.random()*4)
     // 每行div根据随机数，随机设置一个黑块
   for(vari=0;i<4;i++){
      // 随机出现黑块
      if(i==k){
      row.appendChild(this.cdiv('black'));
         }else{
      row.appendChild(this.cdiv());
         }
      }
     returnrow;
      }

   // 初始化运行
   this.init=function(){
     // 循环创建4行，并添加到main中
     for(vari=0;i<4;i++){
      varrow=this.crow();
      this.main.appendChild(row);
      }
     // 绑定点击事件
     this.clicks();
     // 设置定时器，使DIV动起来
     this.interval=window.setInterval('start.move()' , 15);
      }

   // 绑定点击事件
   this.clicks=function(){
     // 因为在其他作用域中要使用本对象，
     // 防止this指向冲突，将this赋值给一个新的变量，在其他作用域中使用新的变量代替this
     varthat=this;
     // 为整个main绑定点击事件
     this.main.onclick=function(ev){
      // 通过事件对象，获取具体点击的节点
      varfocus=ev.target;
      // 如果游戏已经结束了
      if(that.over){
      alert('游戏结束！');
         }
      // 如果点击的元素有值为black的class属性，
      // 证明用户点击的是黑色块
      elseif(focus.className=='black'){
      // 获取文本框节点对象
      varscore=document.getElementById('fen');
      // 将文本框的值获取并加1后重新复制
      varsc=parseInt(score.value)+1;
      score.value=sc;
      // 将黑块变白
      focus.className='';
      // 如果此行被点击过，给这一行发一个'同行证'
      focus.parentNode.pass=true;
      // 得分每增加5，下降速度提高0.5个像素点
      if(sc%5==0){
      that.sudu+=0.5;
         }

         }else{
      // 点击的不是黑块，结束游戏
      window.clearInterval(that.interval);
      // 游戏已经结束了
      that.over=true;
      alert('游戏已结束')
         }
      }
      }

   // 每调用一次 main的top值加2像素，main就会向下移动2像素
   // 我们只需要不断调用move,就会让main不断下降
   this.move=function(){
     // 获取top值
     vart=getComputedStyle(this.main, null)['top'];
     vartops=parseInt(t);
     // 如果tops大于1，证明一行下降结束
     if(tops>1){
      // 如果此行没有通行证，游戏结束
      if(this.main.lastChild.pass==undefined){
      window.clearInterval(this.interval);
      // 游戏已经结束了
      this.over=true;
      alert('游戏已结束')
         }else{ // 如果有通行证
      // 如果大于5行，删除最后一行
      if(this.main.children.length>=5) {
      this.main.removeChild(this.main.lastChild);
         }
         }
      // 下降结束一行，则在最顶部增加一行，完成下降的连续性
      varrow=this.crow();
      this.main.insertBefore(row,this.main.firstChild);
      // 并重新隐藏新加的一行
      this.main.style.top='-100px';
      }else{
      // 定时器每调用一次，top 值修改一次
      // 完成下降动作
      this.main.style.top=tops+this.sudu+'px';
      }
      }
   }

   varstart=newYouxi();
   start.init();
</script>
</html>

JS高级-分享一个别踩白块的小游戏（源码）相关推荐

前端《别踩白块儿》小游戏源码分享
源码样式查看源码领取方式 1.微信打开"扫一扫" 更多源码特效尽在公众号 2. 微信搜索"渔夫小猿"
制作别踩白块网页小游戏
介绍属于简化版别踩白块,代码相对较为简单易学,主要涉及通过 javascript 操作元素节点的增删以及属性节点(class)的操作. 页面布局可以用 div+css 布局来实现别踩白块的静态效果 ...
100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
【开学了】整理各种常用功能的实现 | 小游戏源码分享
暑假余额严重不足,还有两天就开学了,马上初三了学习任务很紧,不出意外摸不到手机电脑了.花点时间整理下学过的知识,算是对自己自学两年Creator的一个总结. 2D / 3D摇杆三角函数详细讲解 | ...
js密室逃脱微信小游戏源码
下载地址 js密室逃脱小游戏源码,微信朋友圈小游戏密室逃脱. dd:
贪吃蛇小游戏源码分享
创建2个文件夹,一个是放源码还有一个文件夹是发图片的. 然后创建三个实体类. package com.Bubbles.snake; import javax.swing.*; import java. ...
js找你妹微信小游戏源码
下载地址js找你妹微信小游戏源码,在众多袜子中找到唯一的妹子 dd:
C语言实现《别碰白块》小游戏！全部代码+思路注释
今天我们将用C语言实现一个小球跳跃躲避方块的游戏. 就像闯关游戏一样,小球闯关类游戏是休闲游戏的一种,玩家在游戏中需要控制各种不同的小球展开不同的挑战,尽情的闯过重重的关卡,努力的操作小球躲避障碍物以 ...
HTML+CSS+JS实现【别踩鸡块】，含(源码+思路)
个人名片:

JS高级-分享一个别踩白块的小游戏（源码）

JS高级-分享一个别踩白块的小游戏（源码）相关推荐

最新文章

热门文章