0
カードの12枚（画像）を横にしておき、1枚のカードをクリックすると裏返すことができます。同じイメージを2回繰り返さずに12の選択肢からランダム（aの画像）カードを表示する。カードターン・キャンバス・ドロー
また、カードをクリックするたびに、番号が付けられたキャンバスの対応する部分を描画してアクセスできるようにしたいと思います。これは、すべてのカードが回転し、すべての領域が描かれるまで続きます。
<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>
私は開始時に下向きとどのように描画するためのキャンバスの過去だけを選択するために、すべてのカードを持ってする方法を見つけ出すことはできません。
あなたの投稿を読む方法によっては、まったく疑問があるか、複数質問があります。あなたは実際に尋ねたいことを再考すべきです。 – mikuszefski
あなたのHTMLをすべてのjavascriptとともに最小の実例で表示して、あなたが現在いる段階を複製してください。 – pokeybit
コードのように強調表示されるようにコードを再フォーマットしました。ちょうど読みやすくするためです。 :) Stack-overflowは、4つのスペースを引用に使うのが好きです。 –