利用原生 JS 实现拼图游戏, 实现封装, 变为插件, 组件化, 传入参数调用,
使用立即执行函数, 将变量私有化, 不污染全局,
利用 canvas 展示效果, 减少 dom 操作, 不影响 html 结构;
- var myPingTu = (function(){
- function init(row_i,dom){
- var myCanvas = dom;
- var row = row_i || 3,// 行列数
- arr = [],
- num = row * row;// 块个数
- if (!myCanvas || !myCanvas.getContext) {
- return;
- }
- myCanvas.width = row * 100 + 10 ;
- myCanvas.height = row * 100 + 10 ;
- var ctx = myCanvas.getContext('2d');
- for(var i = 0; i <num; i++){
- arr.push(i);
- }
- var ranodmArrKey = true;
- ranodmArr();
- createMap();
- Windows.onkeydown = function (event){
- var e = event || Windows.event;
- move(e.keyCode);
- }
- function move(n){
- switch (n) {
- case 38:{
- if(arr.indexOf(num -1)>= row){
- exchange(arr.indexOf(num -1),arr.indexOf(num - 1) - row);
- }
- return false;
- }
- break;
- case 40:{
- if(arr.indexOf(num -1) <num-row){
- exchange(arr.indexOf(num -1),arr.indexOf(num - 1) + row);
- }
- return false;
- }
- break;
- case 37:{
- if(arr.indexOf(num -1) % row != 0){
- exchange(arr.indexOf(num -1),arr.indexOf(num - 1) - 1);
- }
- return false;
- }
- break;
- case 39:{
- if(arr.indexOf(num -1) % row != row-1){
- exchange(arr.indexOf(num -1),arr.indexOf(num - 1) + 1);
- }
- return false;
- }
- break;
- default:
- break;
- }
- }
- function ranodmArr(){
- var j;
- for(var i = 0; i <num * num-1; i ++){
- j = parseInt(Math.random()*4) + 37;
- move(j);
- }
- ranodmArrKey = false;
- }
- function exchange(proto,target){
- var temp = arr[target];
- arr[target] = arr[proto];
- arr[proto] = temp;
- if(ranodmArrKey){
- return false
- };
- createMap();
- if(isWin()){
- console.log("win");
- };
- }
- function createMap(){
- for(var i = 0;i < row; i++){
- for(var j = 0; j < row ;j ++)
- createSquare(i,j,arr[i + j * row]);
- }
- }
- function createSquare(x,y,text){
- ctx.beginPath();
- ctx.fillStyle = 'antiquewhite';
- ctx.fillRect((10 + 100 * x), (10 + 100 * y), 90, 90);
- ctx.fillStyle = 'red';
- ctx.font = "50px bolder";
- ctx.textAlign="center";
- if(text != num -1){
- ctx.fillText(text + 1 ,(55 + 100 * x), (75 + 100 * y));
- }else{
- ctx.fillText(':)' ,(55 + 100 * x), (75 + 100 * y));
- }
- ctx.stroke();
- ctx.beginPath();
- }
- function isWin(){
- for(var i = 0 ; i < arr.length; i ++){
- if(i != arr[i]){
- return false
- }
- }
- return true
- }
- }
- return function(row,dom){
- init(row,dom);// 自定义难度和 canvas 的 dom 对象
- }
- }())
- <!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">
- <!-- <script src="../jquery.min.js"></script> -->
- <script src="pingtu.js">
- </script>
- <style>
- *{ margin: 0; padding: 0; } #pingtu { border: 1px solid silver; position:
- relative; margin-top: 20px; left: 50%; transform: translateX(-50%); }
- </style>
- <title>
- Document
- </title>
- </head>
- <body>
- <canvas id="pingtu">
- </canvas>
- <script>
- Windows.onload = function() {
- var aaa = document.getElementById("pingtu");
- myPingTu(5, aaa); // 传入行数与 dom
- }
- </script>
- </body>
- </HTML>
一开始把这个只作为 jQuery 的扩展插件, 后来发现不怎么用得上 jQuery 的东西, 主要还是 canvas, 就没必要用 jQuery, 原生就够了!
来源: http://www.bubuko.com/infodetail-2807351.html