简单的刮刮乐源码

最新推荐文章于 2024-04-05 09:05:59 发布

da宗熊

最新推荐文章于 2024-04-05 09:05:59 发布

阅读量4.9k

点赞数

分类专栏： web前端文章标签： canvas 图片移动刮刮乐 js

本文链接：https://blog.csdn.net/linfenpan/article/details/52038024

版权

上周看到有同学，写了个刮刮乐的demo，但功能并不完善。
这里手痒，重新封装了一个。
支持成功的回调，修正滑动速度太快，掉帧的问题。
修正移动端，对canvas缩放后，坐标的偏差。

AND 用canvas背景来放置奖励结果的图片，这个想法太赞了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>刮刮乐整理版</title>
  <style media="screen">
    * { margin: 0; padding: 0; }
    #guaguale { margin: 20px; height: 120px; width: 240px; }
  </style>
</head>
<body>
  <div id="guaguale"></div>

<script>
  'use strict';

  function keys(obj, fn) {
    
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        fn.call(obj, key, obj[key]);
      }
    }
  }

  function css(elem, styleObject) {
    
    keys(styleObject, function(key, value) {
    
      elem.style[key] = value;
    });
  }

  function extend(source, obj) {
    
    keys(obj, function(key, value) {
    
      source[key] = value;
    });
    return source;
  }

  function addEventListener(elem, obj) {
    
    keys(obj, function(key, fn) {
    
      var events = key.split(' ');
      for (var i = 0, max = events.length; i < max; i++) {
        elem.addEventListener(events[i], fn, false);
      }
    });
  }

  function removeEventListener(elem, obj) {

最低0.47元/天解锁文章

da宗熊

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
简单的刮刮乐源码

上周看到有同学，写了个刮刮乐的demo，但功能并不完善。这里手痒，重新封装了一个。支持成功的回调，修正滑动速度太快，掉帧的问题。修正移动端，对canvas缩放后，坐标的偏差。AND 用canvas背景来放置奖励结果的图片，这个想法太赞了。<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewpor
复制链接

扫一扫