8000 实现多尺寸支持 · HashCoding/boxbot@0a23487 · GitHub
[go: up one dir, main page]
Skip to content

Commit 0a23487

Browse files
qiuxiangqiuxiang
committed
实现多尺寸支持
1 parent 9bac315 commit 0a23487

File tree

6 files changed

+72
-21
lines changed

6 files changed

+72
-21
lines changed

‎app.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ var Application = function () {
88
this.$run= document.querySelector('#run')
99
this.$reset= document.querySelector('#reset')
1010
this.$duration= document.querySelector('#duration')
11+
this.$resolution= document.querySelector('#resolution')
1112

1213
this.init()
1314
this.reset()
@@ -19,11 +20,17 @@ Application.prototype.init = function () {
1920
this.$reset.addEventListener('click', this.reset.bind(this))
2021
this.$random.addEventListener('click', this.random.bind(this))
2122
this.$duration.addEventListener('change', this.setDuration.bind(this))
23+
this.$resolution.addEventListener('change', this.setResolution.bind(this))
2224
this.$image.addEventListener('change', this.loadImage.bind(this))
2325
}
2426

2527
Application.prototype.setDuration = function () {
26-
this.boxbot.setDuration(this.$duration.value)
28+
this.boxbot.setDuration(parseInt(this.$duration.value))
29+
}
30+
31+
Application.prototype.setResolution = function () {
32+
this.boxbot.setResolution(parseInt(this.$resolution.value))
33+
this.reset()
2734
}
2835

2936
/**
@@ -142,9 +149,8 @@ Application.prototype.random = function () {
142149

143150
Application.prototype.reset = function () {
144151
this.boxbot.queue = []
145-
this.boxbot.bot.turn(BOTTOM)
146-
this.boxbot.bot.goto([1, 1])
147152
this.boxbot.map.clear()
153+
this.boxbot.bot.init()
148154
this.editor.clearFlag()
149155
}
150156

‎boxbot-bot.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ var RIGHT = 270
99
*/
1010
var BoxbotBot = function (selector) {
1111
this.element = document.querySelector(selector)
12+
this.init()
13+
}
14+
15+
BoxbotBot.prototype.init = function () {
16+
this.element.style.left = this.element.clientWidth + 'px'
17+
this.element.style.top = this.element.clientHeight + 'px'
18+
this.element.style.transform = 'rotate(0edg)'
1219
}
1320

1421
/**

‎boxbot-map.js

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
/**
22
* @constructor
33
* @param {string} selector
4-
* @param {int} columns
5-
* @param {int} rows
64
*/
7-
var BoxbotMap = function (selector, columns, rows) {
5+
var BoxbotMap = function (selector) {
86
this.element = document.querySelector(selector)
9-
this.columns = columns
10-
this.rows = rows
11-
this.init()
127
}
138

149
/**
15-
* 初始化，生成地图
10+
* 创建地图
11+
*
12+
* @param {int} columns
13+
* @param {int} rows
1614
*/
17-
BoxbotMap.prototype.init = function () {
15+
BoxbotMap.prototype.create = function (columns, rows) {
1816
var html = ''
19-
for (var y = 0; y <= this.rows; y += 1) {
17+
for (var y = 0; y <= rows; y += 1) {
2018
html += '<tr>'
21-
for (var x = 0; x <= this.columns; x += 1) {
19+
for (var x = 0; x <= columns; x += 1) {
2220
if (x == 0 && y == 0) {
2321
html += '<td></td>'
2422
} else {
@@ -33,10 +31,15 @@ BoxbotMap.prototype.init = function () {
3331
}
3432
html += '</tr>'
3533
}
34+
this.columns = columns
35+
this.rows = rows
3636
this.element.innerHTML = html
3737
this.boxs = this.element.getElementsByTagName('td')
3838
}
3939

40+
/**
41+
* 清除地图数据
42+
*/
4043
BoxbotMap.prototype.clear = function () {
4144
for (var y = 1; y <= this.rows; y += 1) {
4245
for (var x = 1; x <= this.columns; x += 1) {

‎boxbot.css

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,11 @@ body {
1616
}
1717

1818
.boxbot-box {
19-
width: 25px;
20-
height: 25px;
19+
width: 37px;
20+
height: 37px;
2121
box-sizing: border-box;
22-
transition: all ease-in-out .25s;
22+
transition-property: left, top, transform;
23+
transition-duration: .25s;
2324
}
2425

2526
.boxbot-bot {
@@ -29,8 +30,8 @@ body {
2930
}
3031

3132
.boxbot-bot img {
32-
width: 24px;
33-
height: 24px;
33+
width: 36px;
34+
height: 36px;
3435
}
3536

3637
.boxbot-map {
@@ -68,7 +69,7 @@ td.boxbot-box {
6869
}
6970

7071
.boxbot-buttons {
71-
margin-bottom: 12px;
72+
margin: 7px 0 12px 0;
7273
}
7374

7475
.boxbot-buttons select,
@@ -88,7 +89,7 @@ td.boxbot-box {
8889
}
8990

9091
.boxbot-commander {
91-
height: 600px;
92+
height: 741px;
9293
overflow: hidden;
9394
}
9495

@@ -148,3 +149,21 @@ td.boxbot-box {
148149
margin-top: 20px;
149150
color: #999;
150151
}
152+
153+
.boxbot-30x30 .boxbot-commander {
154+
height: 751px;
155+
}
156+
157+
.boxbot-30x30 .boxbot-buttons {
158+
margin: 0 0 7px 0;
159+
}
160+
161+
.boxbot-30x30 .boxbot-box {
162+
width: 25px;
163+
height: 25px;
164+
}
165+
166+
.boxbot-30x30 .boxbot-bot img {
167+
width: 24px;
168+
height: 24px;
169+
}

‎boxbot.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
* @constructor
33
*/
44
var Boxbot = function () {
5+
this.element = document.querySelector('.boxbot')
56
this.bot = new BoxbotBot('.boxbot-bot')
6-
this.map = new BoxbotMap('.boxbot-map', 30, 30)
7+
this.map = new BoxbotMap('.boxbot-map')
8+
this.map.create(20, 20)
79
this.finder = new BoxbotFinder(this.map)
810
this.duration = 250
911
this.queue = []
@@ -110,6 +112,16 @@ Boxbot.prototype.setDuration = function (duration) {
110112
}
111113
}
112114

115+
/**
116+
* 设置地图尺寸
117+
*
118+
* @param {int} size
119+
*/
120+
Boxbot.prototype.setResolution = function (size) {
121+
this.map.create(size, size)
122+
this.element.className = 'clearfix boxbot boxbot-' + size + 'x' + size
123+
}
124+
113125
/**
114126
* 修墙
115127
*

‎index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
</article>
1515
<article class="boxbot-controls">
1616
<article class="boxbot-buttons clearfix">
17+
<select title="时间间隔" id="resolution">
18+
<option value="30">30x30</option>
19+
<option value="20" selected>20x20</option>
20+
</select>
1721
<select title="时间间隔" id="duration">
1822
<option value="500">慢速</option>
1923
<option value="250" selected>常速</option>

0 commit comments

Comments
 (0)
0