问卡片翻转画布抽奖
EN

Stack Overflow用户

提问于 2017-12-11 21:08:15

回答 0查看 278关注 0票数 0

我希望有12张卡片(图像)面朝下，并能够在单击其中一张时翻转它们。从12张卡片中随机选择一张而不重复两次显示同一张卡片。

此外，每当你点击一张卡，我希望有一个编号画布的相应部分，以便可以在上面绘图。这应该继续下去，直到所有的牌都翻了，所有的区域都画好了。

<html>
   <head>
      <title>game</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
      <!--[if IE]><script type="text/javascript" src="excanvas.js"></script>   <![endif]-->
      <script type="text/javascript" src="html5-canvas-drawing-app.js">   </script>
      <script language="javascript">
         var imagesArray = [ 'images/img-1.jpg', 'images/img-2.jpg',
         'images/img-3.jpg', 'images/img-4.jpg', 'images/img-5.jpg',
         'images/img-6.jpg', 'images/img-7.jpg', 'images/img-8.jpg',
         'images/img-9.jpg', 'images/img-10.jpg', 'images/img-11.jpg',
         'images/img-12.jpg' ];

         var usedImages = {}; var usedImagesCount = 0;

         function displayImage(){

             var num = Math.floor(Math.random() * (imagesArray.length));
             if (!usedImages[num]){
                 document.canvas.src = imagesArray[num];
                 usedImages[num] = true;
                 usedImagesCount++;
                 if (usedImagesCount === imagesArray.length){
                     usedImagesCount = 0;
                     usedImages = {};
                 }
             } else {
                 displayImage();
             } }


      </script>
   </head>
   <body>
      <table border=0 cellpadding="0" cellspacing="0">
         <tr align="center">
            <td><img src="images/blank.jpg" name="canvas" onClick="displayImage()"/></td>
         </tr>
      </table>
      <div id="canvasDiv"></div>
      <script type="text/javascript"> $(document).ready(function() {
         prepareCanvas(); });
      </script>
      <a href="#" class="button" id="btn-download" download="my-file-name.png">Save</a>
      <script language="javascript"> var button = document.getElementById('btn-download');
         button.addEventListener('click', function (e) {
             var dataURL = canvas.toDataURL('image/png');
             button.href = dataURL; });

      </script> 
   </body>
</html>

我不知道如何让所有的牌在开始时都朝下，以及如何只选择画布的过去进行绘制。

javascript

image

html5-canvas

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47753697

复制

相似问题

问卡片翻转画布抽奖
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问卡片翻转画布抽奖EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问卡片翻转画布抽奖
EN