자바스크립트 쓰기 2048 미니게임_자바스크립트 스킬
- WBOY원래의
- 2016-05-16 15:51:041545검색
작년에는 2048이 매우 인기가 많았습니다. 제 동료가 JS를 사용하여 2048을 작성하면 코드가 100줄 이상만 필요하다고 말했습니다.
오늘 시도해 보았는데 로직은 주로 데이터 생성자에서 데이터에 대한 다양한 작업을 수행한 다음 DOM을 다시 렌더링하여 인터페이스를 업데이트하는 것이 전부가 복잡하지 않습니다. JS, CSS 및 HTML은 300입니다. 여러 줄인터페이스는 jQuery를 사용하여 underscore.js의 템플릿 메소드를 사용하여 생성되며 주로 DOM 선택 및 조작 및 애니메이션 효과를 위해 이벤트 바인딩은 PC 측에서만 호환되며 keydown 이벤트만 바인딩됩니다. 🎜 >
예제를 보려면 github-page에 코드를 입력하고 여기를 클릭하세요. 2048 인스턴스를 엽니다.
렌더링은 다음과 같습니다.
모든 코드는 데이터와 뷰의 두 블록으로 나뉩니다.
데이터는 데이터를 구성하는 생성자이며 데이터는 프로토타입의 일부 메서드를 상속합니다.
View는 Data 인스턴스를 기반으로 뷰를 생성하고 이벤트를 컨트롤러로 간주하여 View와 함께 묶습니다.
Data의 구조는 다음과 같습니다.
/**
* @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
데이터 모델의 경우 뷰는 주로 최종 라이브러리 밑줄의 템플릿 방법을 사용하여 데이터로 HTML 문자열을 생성한 다음 인터페이스를 다시 그립니다. View의 프로토타입 방법:
renderHTML: 함수 //html 문자열을 생성하여 인터페이스에 넣습니다
init: 함수 //생성자 초기화 방법
binEvents: function //str에 이벤트를 바인딩합니다. 컨트롤러라고 생각하세요
원본 2048에는 블록 이동 효과가 있으므로 인터페이스에서 블록 이동을 주로 담당하는 서비스(도구 방법, 이 도구 방법은 View에서 상속됨)를 독립적으로 설정했습니다. 최종선 라이브러리에서 사용됩니다. 템플릿 생성 과정에서 노드의 위치에 따라 수평 및 수직 좌표를 동적으로 생성한 후 위치:
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";
}
//这个应该算是服务;
};
다음은 참조된 JS가 모두 CDN을 사용하는 코드입니다. 직접 열어서 살펴볼 수 있습니다.
<!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 ? 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>
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다. 성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.