码迷,mamicode.com
首页 > Web开发 > 详细

HTML5小游戏-简单抽奖小游戏

时间:2018-06-15 15:45:59      阅读:914      评论:0      收藏:0      [点我收藏+]

标签:span   style   tin   isp   判断   func   ==   name   没有   

  换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客。最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏。

  技术分享图片

 

     知识点

  •  canvas绘制背景
  •  canvas绘制图片
  •  canvas绘制边框
  •  canvas事件处理
  •  canvas简单动画制作

     步骤

  1、准备好图片,首先是机器的外观、以及滚动的奖项图片,我一共准备了6种,奖项图片按照一定的规律命名,这样方便处理

  

    技术分享图片

 

  2、准备好canvas画布,设置好基本的CSS样式,完成以后大概是这样子。

   PS:这里我设置了canvas的背景色,方便看到效果,完成品会去掉背景色,因为背景我们要设置成机器

   技术分享图片

  3、计算好位置,绘制背景图、以及奖励项目边框,绘制完大概是这样子

  PS:要注意的一点是,绘制背景要等到图片加载完才能绘制(这不是废话吗!),绘制边框要等到背景绘制完,不然会被覆盖掉。

  技术分享图片  

       4、绘制奖项图片,位置和边框位置一致,完成效果大致是这样

  技术分享图片

    5、加上点击事件、点击开启关闭切换,完成效果见顶部,done!

 待优化

  奖项切换的效果没有实现,就是奖励上下滚动的效果

  

 总结

  试水canvas,蛮有趣的,打开了新世界的大门。

技术分享图片
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SlotMachine</title>
  <style>
    body {
      background: gray;
    }

    #test {
      background: #fff;
      width: 100%;
      max-width: 551px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <canvas id="test" width="533" height="411">
    您的浏览器不支持Canvas,现在都什么年代了
  </canvas>
  <script>
    ; (function () {
      let canvas = document.querySelector(#test);
      //引入缩放比例计算,兼容多种终端
      let scaling = {
        w: canvas.clientWidth / canvas.width,
        h: canvas.clientHeight / canvas.height
      };
      if (canvas.getContext) {
        let ctx = canvas.getContext(2d);
        let bg = new Image();
        let imgs = {
          left: new Image(),
          middle: new Image(),
          right: new Image()
        };
        let flag = {
          left: 1,
          middle: 1,
          right: 1,
          max: 6
        };
        let ps = {
          left: [70, 160],
          middle: [185, 160],
          right: [295, 160]
        };
        let interval = 1000 / 10;
        let timer = {
          left: null,
          middle: null,
          right: null
        };

        //绘制图片
        function drawImg(img, x, y) {
          ctx.drawImage(img, x, y, img.width, img.height);
        }

        //绘制背景
        function drawBg(img) {
          let pattern = ctx.createPattern(img, no-repeat);
          ctx.fillStyle = pattern;
          ctx.fillRect(0, 0, 533, 411);
        }

        //绘制图片边框
        function drawBorder(x, y, w, h) {
          ctx.save();
          ctx.strokeStyle = #000000;
          ctx.lineWidth = 4;
          ctx.strokeRect(x, y, w, h);
          ctx.restore();
        }

        //判断点击是否在图片范围内
        function isPointInPath(x, y, x1, y1) {
          return x <= x1 && x + 100 >= x1 && y <= y1 && y + 100 >= y1;
        }

        //动画开始
        function start(key) {
          timer[key] = setInterval(function () {
            flag[key] === flag.max ? flag[key] = 1 : flag[key]++;
            imgs[key].src = ./img/slot + flag[key] + .png;
          }, interval);
        }

        //动画停止
        function stop(key) {
          clearInterval(timer[key]);
          timer[key] = null;
        }

        //初始化
        function init() {
          bg.src = ./img/machine.png;
          bg.onload = () => {
            drawBg(bg);
            drawBorder(ps.left[0], ps.left[1], 100, 100);
            drawBorder(ps.middle[0], ps.middle[1], 100, 100);
            drawBorder(ps.right[0], ps.right[1], 100, 100);
            imgs.left.src = ./img/slot6.png;
            imgs.left.onload = () => {
              drawImg(imgs.left, ps.left[0], ps.left[1]);
            };

            imgs.middle.src = ./img/slot6.png;
            imgs.middle.onload = () => {
              drawImg(imgs.middle, ps.middle[0], ps.middle[1]);
            };

            imgs.right.src = ./img/slot6.png;
            imgs.right.onload = () => {
              drawImg(imgs.right, ps.right[0], ps.right[1]);
            };
          };

          canvas.addEventListener(click, function (e) {
            //引入缩放比例计算,兼容多种终端
            let x1 = e.offsetX / scaling.w;
            let y1 =  e.offsetY / scaling.h;

            for (let key in ps) {
              if (ps.hasOwnProperty(key)) {
                let item = ps[key];

                if (!isPointInPath(item[0], item[1], x1, y1)) continue;

                if (timer[key]) {
                  stop(key);
                } else {
                  start(key);
                }
              }
            }
          });
        }

        init();
      }
    })();
  </script>
</body>

</html>
View Code

HTML5小游戏-简单抽奖小游戏

标签:span   style   tin   isp   判断   func   ==   name   没有   

原文地址:https://www.cnblogs.com/jydeng/p/9186738.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!