Canvas：Fifteenの15分

CANVASの手順：

子供の頃、私は斑点がありました、誰もがこのパズルを知っていると思います。プラスチックの箱に入れたタグを大切な数字の順番になるまで移動するのは非常に興味深い活動でした。そしてつい最近、スポーツの興味の順に、ブラウザウィンドウだけでなく、AndroidまたはiOSを実行しているスマートフォンからも再生できるタグを自分で作成しました。
私たちのゲームは、1人のパパにある2つのファイルで構成されます。最初のファイルはindex.htmという名前で、2番目のパズルは15
htmlファイルの内容は投稿全体で変更されることはなく、実際には次のようになります。

<html> <head> <meta charset="utf-8"> <title></title> <script src="puzzle15.js"></script> </head> <body> <canvas id="puzzle15">     - </canvas> <script>init();</script> </body> </html>

2番目のファイルの書き込みに忙しくなります。したがって、最初にinit関数を記述します。これは、キャンバスのサイズを変更し、均一な色でペイントします。 puzzle15.jsの内容は次のとおりです。

 function init() { var canvas = document.getElementById("puzzle15"); canvas.width = 320; //    canvas.height = 320; var context = canvas.getContext("2d"); context.fillStyle = "#222"; //  "" context.fillRect(0, 0, canvas.width, canvas.height); //   }

ブラウザでindex.htmファイルを開くと、濃い灰色の長方形が表示されます。タグについては、すべてのゲームロジックが取り出される1つのクラスを準備しました。このクラスは実際にはファイルに配置する必要があります。

 function game15() { var cellView = null; var numView = null; var arr = [[1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,0]]; var clicks = 0; function getNull() { //      for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { if (arr[j][i] === 0) { return{"x":i,"y":j}; } } } }; //      function getRandomBool() { if (Math.floor(Math.random() * 2) === 0) { return true; } } //     this.getClicks = function() { return clicks; }; //   ""    this.move = function(x, y) { var nullX = getNull().x; var nullY = getNull().y; if (((x - 1 == nullX || x + 1 == nullX) && y == nullY) || ((y - 1 == nullY || y + 1 == nullY) && x == nullX)) { arr[nullY][nullX] = arr[y][x]; arr[y][x] = 0; clicks++; } }; //    this.victory = function() { var e = [[1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,0]]; var res = true; for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { if (e[i][j] != arr[i][j]) { res = false; } } } return res; }; //  ""  this.mix = function(stepCount) { var x,y; for (var i = 0; i < stepCount; i++) { var nullX = getNull().x; var nullY = getNull().y; var hMove = getRandomBool(); var upLeft = getRandomBool(); if (!hMove && !upLeft) { y = nullY; x = nullX - 1;} if (hMove && !upLeft) { x = nullX; y = nullY + 1;} if (!hMove && upLeft) { y = nullY; x = nullX + 1;} if (hMove && upLeft) { x = nullX; y = nullY - 1;} if (0 <= x && x <= 3 && 0 <= y && y <= 3) { this.move(x, y); } } clicks = 0; }; //    this.setCellView = function(func) { cellView = func; }; //    this.setNumView = function(func) { numView = func; }; //       this.draw = function(context, size) { for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { if (arr[i][j] > 0) { if (cellView !== null) { cellView(j * size, i * size); } if (numView !== null) { numView(); context.fillText(arr[i][j], j * size + size / 2, i * size + size / 2); } } } } }; }

これで、ゲームを簡単に静的な長方形から実際に機能するスポットに変えることができます

 function init() { var canvas = document.getElementById("puzzle15"); canvas.width = 320; canvas.height = 320; var cellSize = canvas.width / 4; var context = canvas.getContext("2d"); var field = new game15(); //    field.mix(350); //     field.setCellView(function(x, y) { //     context.fillStyle = "#FFB93B"; context.fillRect(x+1, y+1, cellSize-2, cellSize-2); }); field.setNumView(function() { //     context.font = "bold "+(cellSize/2)+"px Sans"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillStyle = "#222"; }); context.fillStyle = "#222"; context.fillRect(0, 0, canvas.width, canvas.height); field.draw(context, cellSize); }

さて、残っているのはマウスとタッチイベントの処理だけを追加することです。このため、field.draw（context、cellSize）の最後の行の後にinit関数に小さなコードを追加します。

  function event(x, y) { //      () field.move(x, y); context.fillStyle = "#222"; context.fillRect(0, 0, canvas.width, canvas.height); field.draw(context, cellSize); if (field.victory()) { //   ,     alert("  "+field.getClicks()+" !"); //    !! field.mix(300); context.fillStyle = "#222"; context.fillRect(0, 0, canvas.width, canvas.height); field.draw(context, cellSize); } } canvas.onclick = function(e) { //    var x = (e.pageX - canvas.offsetLeft) / cellSize | 0; var y = (e.pageY - canvas.offsetTop) / cellSize | 0; event(x, y); //    }; canvas.ontouchend = function(e) { //    var x = (e.touches[0].pageX - canvas.offsetLeft) / cellSize | 0; var y = (e.touches[0].pageY - canvas.offsetTop) / cellSize | 0; event(x, y); };

誰がすぐにそのリンクのためにプレーしたいのか。
コードには複雑なものはなく、すべてが非常に迅速に記述されます。 iPodのスポットのアイデアと写真を提供してくれたhobbeatに感謝します。

Canvas：Fifteenの15分

More articles: