无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-07-17 15:05 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

JavaScript编写连连看小游戏,兼容各大浏览器的

  俄罗斯方块这个游戏也做了移动端的兼容, 这个游戏难点是怎么翻转方块, 自己实现的方式是把方块放到一个二维数组, 然后逆时针旋转二维数组。

天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢。

这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之。

  也有别的方法,比如直接用一个全局变量代表一个方向, 翻转的时候根据这个变量转动方块, 但是代码要写更多。

  使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>阻止事件冒泡</title>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/jquery.cookie.js"></script>
  <style type="text/css">
  </style>
  <script type="text/javascript">
    function clickDiv(){
      alert("clickDiv");
    }
    function clickP(event){
      stopEvent(event);
      alert("clickP");
    }
    function stopEvent(event){ //阻止冒泡事件
     //取消事件冒泡
     var e=arguments.callee.caller.arguments[0]||event; //若省略此句,下面的e改为event,IE运行可以,但是其他浏览器就不兼容
     if (e && e.stopPropagation) {
     // this code is for Mozilla and Opera
     e.stopPropagation();
     } else if (window.event) {
     // this code is for IE
      window.event.cancelBubble = true;
     }
    }
  </script>
</head>
<body>
  <div onclick="clickDiv()" style="width:100px; height:100px; background-color:red;">
    <p onclick="clickP(event)" style="width:50px; height:50px; margin:auto; background-color:green;">
      abad
    </p>
  </div>
  <script type="text/javascript">
  </script>
</body>
</html>

  在文库搜索到了一篇关于算法的文章, ....看着好心塞:

  最终的效果图:

以上所述就是本文的全部内容了,希望大家能够喜欢。

图片 1

图片 2

您可能感兴趣的文章:

  • 利用JQuery阻止事件冒泡
  • js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
  • JQuery中阻止事件冒泡几种方式及其区别介绍
  • js阻止冒泡及jquery阻止事件冒泡示例介绍
  • jQuery阻止事件冒泡具体实现
  • 事件冒泡是什么如何用jquery阻止事件冒泡
  • jquery 事件冒泡的介绍以及如何阻止事件冒泡
  • Jquery阻止事件冒泡 event.stopPropagation
  • cancelBubble阻止事件冒泡
  • 在点击div中的p时,如何阻止事件冒泡

  游戏截图PC端:

  写连连看之前要先考虑哪些呢?

图片 3

    1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开;

  游戏截图移动端:

    2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单。 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •̀ ω •́ )y;

图片 4

    3:布局如何布局呢, 用table, td加上边框, 边框内部一个div,div就是连连看的棋子, 界面更清爽, 简单, 其实直接用canvas写也行, 没认真研究过canvas;

  模板引擎用了HandlebarsJS,  为了更好的模块化,也用了requireJS....没用好;

    4:两个元素连接时连线的效果我们要怎么实现呢,如果用dom实现那么需要用到图片,元素连接时候把图片定位到连接的路径。 或者用canvas, 直接用canvas把连接的效果画出来, 我选择后者;

运行下面代码

  因为我不考虑低浏览器, 使用了zeptoJS库, 基于习惯,把bootstrap也引用了;

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:JavaScript编写连连看小游戏,兼容各大浏览器的

关键词: 注册送体验金_