Javascript writing 2048 mini game_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Javascript writing 2048 mini game_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:51 PM

javascript

Last year, 2048 was very popular. I had never played it before. My colleague said that if you use JS to write 2048, it only takes more than 100 lines of code;

I tried it today, and the logic is not complicated. It mainly involves various operations on the data in the data constructor, and then updates the interface by re-rendering the DOM. The whole thing is not complicated. The total cost of JS, CSS, and HTML is 300. Multiple lines;

The interface is generated using the template method of underscore.js, using jQuery, mainly for DOM selection and operation and animation effects. The binding of events is only compatible with the PC side, and only the keydown event is bound;

Put the code on github-page and click here to view the example: Open the 2048 instance;

The rendering is as follows:

All codes are divided into two blocks, Data and View;

Data is a constructor, which will construct the data, and the data will inherit some methods on the prototype;

View generates views based on instances of Data and binds events. I directly regard events as controllers and put them together with View. There is no need to separate them;

The structure of Data is as follows:

/**
 * @desc 构造函数初始化
 * */
init : function
/**
 * @desc 生成了默认的数据地图
 * @param void
 * */
generateData : function
/**
 * @desc 随机一个block填充到数据里面
 * @return void
 * */
generationBlock : function
/**
 * @desc 获取随机数 2 或者是 4
 * @return 2 || 4;
 * */
getRandom : function
/**
 * @desc 获取data里面数据内容为空的位置
 * @return {x:number, y:number}
 * */
getPosition : function
/**
 * @desc 把数据里第y排， 第x列的设置， 默认为0， 也可以传值;
 * @param x, y
 * */
set : function
/**
 * @desc 在二维数组的区间中水平方向是否全部为0
 * @desc i明确了二维数组的位置， k为开始位置， j为结束为止
 * */
no_block_horizontal : function
no_block_vertica : function
/**
 * @desc 往数据往左边移动，这个很重要
 * */
moveLeft : function
moveRight : function
moveUp : function
moveDown : function

Copy after login

With the data model, the view is simple. It mainly uses the template method of the bottom line library underscore to generate html strings with the data, and then redraws the interface:

View’s prototype method:
renderHTML: function //Generate html string and put it in the interface
init: function //Constructor initialization method
bindEvents: function //Bind events to str, just think it is a controller

Because the original 2048 has the movement effect of blocks, we have independently set up a service (tool method, this tool method will be inherited by View), which is mainly responsible for the movement of blocks in the interface. getPost is used by the bottom line library. During the template generation process, it is necessary to dynamically generate horizontal and vertical coordinates according to the position of the node, and then position:

var util = {
  animateShowBlock : function() {
    setTimeout(function() {
      this.renderHTML();
    }.bind(this),200);
  },
  animateMoveBlock : function(prop) {
    $("#num"+prop.form.y+""+prop.form.x).animate({top:40*prop.to.y,left:40*prop.to.x},200);
  },
  //底线库的模板中引用了这个方法;
  getPost : function(num) {
    return num*40 + "px";
  }
  //这个应该算是服务;
};

Copy after login

The following is all the code. The referenced JS uses CDN, you can open it directly and have a look:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<script src="http://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<style>
  #g{
    position: relative;
  }
 
  .block,.num-block{
    position: absolute;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 4px;
  }
  .block{
    border:1px solid #eee;
    box-sizing: border-box;
  }
  .num-block{
    color:#27AE60;
    font-weight: bold;
  }
</style>
  <div class="container">
    <div class="row">
      <div id="g">
      </div>
    </div>
  </div>
 
<script id="tpl" type="text/template">
  <% for(var i=0; i<data.length; i++) {%>
      <!--生成背景块元素--->
    <% for(var j=0; j< data[i].length; j++ ) { %>
      <div id="<%=i%><%=j%>" class="block" style="left:<%=util.getPost(j)%>;top:<%=util.getPost(i)%>" data-x="<%=j%>" data-y="<%=i%>" data-info='{"x":<%=[j]%>,"y":<%=[i]%>}'>
      </div>
    <% } %>
      <!--生成数字块元素--->
    <% for(var j=0; j< data[i].length; j++ ) { %>
      <!--如果数据模型里面的值为0，那么不显示这个数据的div--->
      <% if ( 0!==data[i][j] ) {%>
        <div id="num<%=i%><%=j%>" class="num-block" style="left:<%=util.getPost(j)%>;top:<%=util.getPost(i)%>" >
          <%=data[i][j]%>
        </div>
      <% } %>
    <% } %>
  <% } %>
</script>
<script>
  var Data = function() {
    this.init();
  };
  $.extend(Data.prototype, {
    /**
     * @desc 构造函数初始化
     * */
    init : function() {
      this.generateData();
    },
    /**
     * @desc 生成了默认的数据地图
     * @param void
     * */
    generateData : function() {
      var data = [];
      for(var i=0; i<4; i++) {
        data[i] = data[i] || [];
        for(var j=0; j<4; j++) {
          data[i][j] = 0;
        };
      };
      this.map = data;
    },
    /**
     * @desc 随机一个block填充到数据里面
     * @return void
     * */
    generationBlock : function() {
      var data = this.getRandom();
      var position = this.getPosition();
      this.set( position.x, position.y, data)
    },
    /**
     * @desc 获取随机数 2 或者是 4
     * @return 2 || 4;
     * */
    getRandom : function() {
      return Math.random()>0.5 &#63; 2 : 4;
    },
    /**
     * @desc 获取data里面数据内容为空的位置
     * @return {x:number, y:number}
     * */
    getPosition : function() {
      var data = this.map;
      var arr = [];
      for(var i=0; i<data.length; i++ ) {
        for(var j=0; j< data[i].length; j++ ) {
          if( data[i][j] === 0) {
            arr.push({x:j, y:i});
          };
        };
      };
      return arr[ Math.floor( Math.random()*arr.length ) ];
    },
    /**
     * @desc 把数据里第y排， 第x列的设置， 默认为0， 也可以传值;
     * @param x, y
     * */
    set : function(x,y ,arg) {
      this.map[y][x] = arg || 0;
    },
    /**
     * @desc 在二维数组的区间中水平方向是否全部为0
     * @desc i明确了二维数组的位置， k为开始位置， j为结束为止
     * */
    no_block_horizontal: function(i, k, j) {
      k++;
      for( ;k<j; k++) {
        if(this.map[i][k] !== 0)
        return false;
      };
      return true;
    },
    //和上面一个方法一样，检测的方向是竖排;
    no_block_vertical : function(i, k, j) {
      var data = this.map;
      k++;
      for(; k<j; k++) {
        if(data[k][i] !== 0) {
          return false;
        };
      };
      return true;
    },
    /**
     * @desc 往左边移动
     * */
    moveLeft : function() {
      /*
      * 往左边移动；
      * 从上到下， 从左到右， 循环；
      * 从0开始继续循环到当前的元素 ，如果左侧的是0，而且之间的空格全部为0 ， 那么往这边移，
      * 如果左边的和当前的值一样， 而且之间的空格值全部为0, 就把当前的值和最左边的值相加,赋值给最左边的值;
      * */
      var data = this.map;
      var result = [];
      for(var i=0; i<data.length; i++ ) {
        for(var j=1; j<data[i].length; j++) {
          if (data[i][j] != 0) {
            for (var k = 0; k < j; k++) {
              //当前的是data[i][j], 如果最左边的是0， 而且之间的全部是0
              if (data[i][k] === 0 && this.no_block_horizontal(i, k, j)) {
                result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
                data[i][k] = data[i][j];
                data[i][j] = 0;
                //加了continue是因为，当前的元素已经移动到了初始的位置，之间的循环我们根本不需要走了
                break;
              }else if(data[i][j]!==0 && data[i][j] === data[i][k] && this.no_block_horizontal(i, k, j)){
                result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
                data[i][k] += data[i][j];
                data[i][j] = 0;
                break;
              };
            };
          };
        };
      };
      return result;
    },
    moveRight : function() {
      var result = [];
      var data = this.map;
      for(var i=0; i<data.length; i++ ) {
        for(var j=data[i].length-2; j>=0; j--) {
          if (data[i][j] != 0) {
            for (var k = data[i].length-1; k>j; k--) {
              //当前的是data[i][j], 如果最左边的是0， 而且之间的全部是0
              if (data[i][k] === 0 && this.no_block_horizontal(i, k, j)) {
                result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
                data[i][k] = data[i][j];
                data[i][j] = 0;
                break;
              }else if(data[i][k]!==0 && data[i][j] === data[i][k] && this.no_block_horizontal(i, j, k)){
                result.push( {form : {y:i,x:j}, to :{y:i,x:k}} );
                data[i][k] += data[i][j];
                data[i][j] = 0;
                break;
              };
            };
          };
        };
      };
      return result;
    },
    moveUp : function() {
      var data = this.map;
      var result = [];
      // 循环要检测的长度
      for(var i=0; i<data[0].length; i++ ) {
        // 循环要检测的高度
        for(var j=1; j<data.length; j++) {
          if (data[j][i] != 0) {
            //x是确定的, 循环y方向;
            for (var k = 0; k<j ; k++) {
              //当前的是data[j][i], 如果最上面的是0， 而且之间的全部是0
              if (data[k][i] === 0 && this.no_block_vertical(i, k, j)) {
                result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
                data[k][i] = data[j][i];
                data[j][i] = 0;
                break;
              }else if(data[j][i]!==0 && data[k][i] === data[j][i] && this.no_block_vertical(i, k, j)){
                result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
                data[k][i] += data[j][i];
                data[j][i] = 0;
                break;
              };
            };
          };
        };
      };
      return result;
    },
    moveDown : function() {
      var data = this.map;
      var result = [];
      // 循环要检测的长度
      for(var i=0; i<data[0].length; i++ ) {
        // 循环要检测的高度
        for(var j=data.length - 1; j>=0 ; j--) {
          if (data[j][i] != 0) {
            //x是确定的, 循环y方向;
            for (var k = data.length-1; k>j ; k--) {
              if (data[k][i] === 0 && this.no_block_vertical(i, k, j)) {
                result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
                data[k][i] = data[j][i];
                data[j][i] = 0;
                break;
              }else if(data[k][i]!==0 && data[k][i] === data[j][i] && this.no_block_vertical(i, j, k)){
                result.push( {form : {y:j,x:i}, to :{y:k,x:i}} );
                data[k][i] += data[j][i];
                data[j][i] = 0;
                break;
              };
            };
          };
        };
      };
      return result;
    }
   });
  var util = {
    animateShowBlock : function() {
      setTimeout(function() {
        this.renderHTML();
      }.bind(this),200);
    },
    animateMoveBlock : function(prop) {
      $("#num"+prop.form.y+""+prop.form.x).animate({top:40*prop.to.y,left:40*prop.to.x},200);
    },
    //底线库的模板中引用了这个方法;
    getPost : function(num) {
      return num*40 + "px";
    }
    //这个应该算是服务;
  };
  var View = function(data) {
    this.data = data.data;
    this.el = data.el;
    this.renderHTML();
    this.init();
  };
  $.extend(View.prototype, {
    renderHTML : function() {
      var str = _.template( document.getElementById("tpl").innerHTML )( {data : this.data.map} );
      this.el.innerHTML = str;
    },
    init : function() {
      this.bindEvents();
    },
    bindEvents : function() {
      $(document).keydown(function(ev){
        var animationArray = [];
        switch(ev.keyCode) {
          case 37:
            animationArray = this.data.moveLeft();
            break;
          case 38 :
            animationArray = this.data.moveUp();
            break;
          case 39 :
            animationArray = this.data.moveRight();
            break;
          case 40 :
            animationArray = this.data.moveDown();
            break;
        };
        if( animationArray ) {
          for(var i=0; i<animationArray.length; i++ ) {
            var prop = animationArray[i];
            this.animateMoveBlock(prop);
          };
        };
        this.data.generationBlock();
        this.animateShowBlock();
      }.bind(this));
    }
  });
 
  $(function() {
    var data = new Data();
    //随机生成两个节点;
    data.generationBlock();
    data.generationBlock();
    //生成视图
    var view = new View({ data :data, el : document.getElementById("g") });
    //继承工具方法, 主要是动画效果的继承;
    $.extend( true, view, util );
    //显示界面
    view.renderHTML();
  });
</script>
</body>
</html>

Copy after login

The above is the entire content of this article, I hope you all like it.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

1 months ago By DDD

R.E.P.O. Best Graphic Settings

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7403

Java Tutorial

1630

CakePHP Tutorial

1358

Laravel Tutorial

1268

PHP Tutorial

1218

Related knowledge

How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

How to use insertBefore in javascript Nov 24, 2023 am 11:56 AM

Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).

How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

See all articles