/tricolors

Permalink
Browse files

Impl

1 parent 4378949 commit 59dc861475239389079599b8275bb5b90dd252a1 @LastLeaf committed Nov 29, 2017
Unified Split
Showing with 89 additions and 36 deletions.
  1. +1 −1 index.html
  2. +4 −1 src/buttons.js
  3. +1 −1 src/consts.js
  4. +8 −8 src/cover.js
  5. +20 −0 src/dot-fonts/special.js
  6. +5 −3 src/game.js
  7. +5 −4 src/generator.js
  8. +2 −2 src/levels/tutorial-1.js
  9. +2 −2 src/levels/tutorial-2.js
  10. +8 −8 src/levels/tutorial-3.js
  11. +33 −6 src/tiles.js
View
2 index.html
@@ -13,7 +13,7 @@
var gameCanvas = document.getElementById('game')
var gameCanvasScale = 1
var isVertical = false
- if (document.documentElement.clientWidth < document.documentElement.clientHeight) {
+ if (1 || document.documentElement.clientWidth < document.documentElement.clientHeight) { // force set to vertical layout mode
gameCanvas.width = 1080
gameCanvas.height = 1920
isVertical = true
View
5 src/buttons.js
@@ -26,7 +26,10 @@ export const flashButton = (container) => {
const btn = container.index(0).color(...COLOR_BTN_FLASH_ARR).setAlpha(0)
let curAlpha = 0
const flash = () => {
- if (!container.buttonFlashing) return
+ if (!container.buttonFlashing) {
+ activateButton(container)
+ return
+ }
curAlpha = 1 - curAlpha
animateObj(btn, {
x: btn.x,
View
2 src/consts.js
@@ -15,7 +15,7 @@ export const COLOR_BG_ARR = [0.1, 0.1, 0.1, 1]
export const COLOR_BTN_NORMAL_ARR = [0.2, 0.2, 0.2, 1]
export const COLOR_BTN_ACTIVE_ARR = [0.6, 0.6, 0.6, 1]
-export const COLOR_BTN_FLASH_ARR = [0.7, 0.7, 0.7, 1]
+export const COLOR_BTN_FLASH_ARR = [0.9, 0.9, 0.9, 1]
export const R = 1
export const G = 2
View
16 src/cover.js
@@ -20,20 +20,20 @@ export default (stage, container) => {
container.append(titleContainer)
const tutorialContainer = stage.createContainer().pos(760, 600)
- const tutorialButton = createButton(stage, 100, 100, 20, () => {
+ const tutorialButton = createButton(stage, 140, 140, 20, () => {
selectCb('tutorial')
- })
- const tutorialText1 = createTexts(stage, '?', 80, COLOR_R_ARR).pos(15, 10).blendMode('SRC_ALPHA', 'ONE')
- const tutorialText2 = createTexts(stage, '?', 80, COLOR_G_ARR).pos(15, 10).blendMode('SRC_ALPHA', 'ONE')
+ }).pos(-20, -20)
+ const tutorialText1 = createTexts(stage, '?', 100, COLOR_R_ARR).pos(5, 10).blendMode('SRC_ALPHA', 'ONE')
+ const tutorialText2 = createTexts(stage, '?', 100, COLOR_G_ARR).pos(5, 10).blendMode('SRC_ALPHA', 'ONE')
tutorialContainer.append(tutorialButton).append(tutorialText1).append(tutorialText2)
container.append(tutorialContainer)
const endlessContainer = stage.createContainer().pos(1060, 600)
- const endlessButton = createButton(stage, 100, 100, 20, () => {
+ const endlessButton = createButton(stage, 140, 140, 20, () => {
selectCb('endless')
- })
- const endlessText1 = createTexts(stage, '\x01', 80, COLOR_R_ARR).pos(15, 10).blendMode('SRC_ALPHA', 'ONE')
- const endlessText2 = createTexts(stage, '\x01', 80, COLOR_G_ARR).pos(15, 10).blendMode('SRC_ALPHA', 'ONE')
+ }).pos(-20, -20)
+ const endlessText1 = createTexts(stage, '\x01', 100, COLOR_R_ARR).pos(5, 10).blendMode('SRC_ALPHA', 'ONE')
+ const endlessText2 = createTexts(stage, '\x01', 100, COLOR_G_ARR).pos(5, 10).blendMode('SRC_ALPHA', 'ONE')
endlessContainer.append(endlessButton).append(endlessText1).append(endlessText2)
container.append(endlessContainer)
View
20 src/dot-fonts/special.js
@@ -9,4 +9,24 @@ export default {
+++
++
`,
+ '\x02': `
+ [6,8]
+
+ +++++
+ + +
+ +
+ +
+ +++++
+
+ `,
+ '\x03': `
+ [6,8]
+
+ + +
+ + +
+ +
+ + +
+ + +
+
+ `,
}
View
8 src/game.js
@@ -30,18 +30,20 @@ export const init = (canvas, isVertical) => {
coverUtils.onSelect((type) => {
if (type === 'tutorial') {
root.clear().append(mainContainer)
- const levels = [TUTORIAL_1, TUTORIAL_2, TUTORIAL_3]
+ const levels = [TUTORIAL_1(), TUTORIAL_2(), TUTORIAL_3()]
const nextLevel = (item) => {
if (!levels.length) return showCover()
- tileUtils.loadLevel(levels.shift(), (info) => {
+ tileUtils.loadLevel(levels.shift(), ({timeUsed, quit}) => {
+ if (quit) return showCover()
nextLevel()
})
}
nextLevel()
} else if (type === 'endless') {
let levelNum = 0
root.clear().append(mainContainer)
- const nextLevel = ({timeUsed}) => {
+ const nextLevel = ({timeUsed, quit}) => {
+ if (quit) return showCover()
tileUtils.loadLevel(endless({
level: ++levelNum,
timeUsed
View
9 src/generator.js
@@ -24,9 +24,10 @@ const P_SYMMETRY_ALL_INC = 0.001 / D_PER_LEVEL
const P_SYMMETRY_ALL_ROTATE_INC = 0
const SYMMETRY_INC_LEVELS = 16
+const FAIL_STEP = 4
-const P_2_COLOR_D_MIN = D_PER_LEVEL * 2
-const P_3_COLOR_D_MIN = D_PER_LEVEL * 4
+const P_2_COLOR_D_MIN = D_PER_LEVEL * 4
+const P_3_COLOR_D_MIN = D_PER_LEVEL * 6
const P_2_COLOR_D_INC = 0.2 / D_PER_LEVEL
const P_3_COLOR_D_INC = 0.1 / D_PER_LEVEL
@@ -190,7 +191,6 @@ export const endless = ({level, timeUsed}) => {
// check and write to map
stepD *= D_COLOR_COUNT[colorType] * D_STEP_BATCH[stepCount] * D_STEP_SAME_POINT[stepSamePoint]
if (stepD + currentD <= difficulty || currentD === 0) {
- console.info([stepM, stepN, stepColor]) // FIXME step is shown in console
for(let j = 0; j < 5; j++) {
for(let i = 0; i < 5; i++) {
if (weightMap[j][i] % 2) {
@@ -204,9 +204,10 @@ export const endless = ({level, timeUsed}) => {
}
return stepD
}
+ let allowFailStep = FAIL_STEP
while (currentD < difficulty) {
const stepD = nextStep()
- if (!stepD) break
+ if (!stepD && !--allowFailStep) break
currentD += stepD
}
View
4 src/levels/tutorial-1.js
@@ -1,4 +1,4 @@
-export default {
+export default () => ({
tutorialSteps: [
[2, 2],
[2, 3],
@@ -12,4 +12,4 @@ export default {
-r-r-
--r--
`
-}
+})
View
4 src/levels/tutorial-2.js
@@ -1,4 +1,4 @@
-export default {
+export default () => ({
tutorialSteps: [
[1, 2],
[3, 2],
@@ -13,4 +13,4 @@ export default {
bp-r-
b----
`
-}
+})
View
16 src/levels/tutorial-3.js
@@ -1,17 +1,17 @@
-export default {
+export default () => ({
tutorialSteps: [
[1, 3],
[3, 3],
- [-1, 0],
+ [-1, 2],
[2, 1],
[2, 2]
],
title: '#03',
mapStr: `
- --r--
- -r-r-
- -y-p-
- ggwbb
- -g-b-
+ --b--
+ -b-b-
+ -c-p-
+ ggwrr
+ -g-r-
`
-}
+})
View
39 src/tiles.js
@@ -53,6 +53,7 @@ export default function(stage, mainContainer) {
let userClickEnabled = false
let userColor = R | G | B
let map = null
+ let originalMapJSON = null
let steps = []
let startTime = 0
let timeTobj = null
@@ -75,9 +76,10 @@ export default function(stage, mainContainer) {
mainContainer.append(metaContainer)
metaContainer.pos(TILE_AREA_MARGIN, TILE_AREA_MARGIN)
const colorHintContainer = stage.createContainer(0, 1080 - TILE_AREA_MARGIN * 2 - 200)
- const levelInfoContainer = stage.createContainer(0,40)
+ const levelInfoContainer = stage.createContainer(0, 40)
+ const menuContainer = stage.createContainer(1080 - TILE_AREA_MARGIN, 30)
const userColorSelectContainer = stage.createContainer(0, 1080 - TILE_AREA_MARGIN * 2)
- metaContainer.append(colorHintContainer).append(levelInfoContainer).append(userColorSelectContainer)
+ metaContainer.append(colorHintContainer).append(levelInfoContainer).append(userColorSelectContainer).append(menuContainer)
// add background tiles
const drawBackground = () => {
@@ -155,6 +157,21 @@ export default function(stage, mainContainer) {
timeContainer.append(createTexts(stage, minuteStr + secondStr, TIME_SIZE, TITLE_COLOR_ARR))
}, 1000)
}
+ const showMenuButtons = () => {
+ const resetButton = createButton(stage, 70, 70, 10, () => {
+ if (!userClickEnabled) return
+ if (currentTutorialStep) return
+ resetLevel()
+ }).pos(-260, 0)
+ const resetText = createTexts(stage, '\x02', 70, [0.4, 0.4, 0.4, 1]).pos(-255, 5)
+ const quitButton = createButton(stage, 70, 70, 10, () => {
+ if (!userClickEnabled) return
+ if (currentTutorialStep) return
+ endLevel(true)
+ }).pos(-140, 0)
+ const quitText = createTexts(stage, '\x03', 70, [0.4, 0.4, 0.4, 1]).pos(-135, 5)
+ menuContainer.append(resetButton).append(resetText).append(quitButton).append(quitText)
+ }
const showMapInfo = (str) => {
const mapInfoContainer = createTexts(stage, str, 30, [0.3, 0.3, 0.3, 1]).pos(0, -60)
levelInfoContainer.append(mapInfoContainer)
@@ -201,8 +218,8 @@ export default function(stage, mainContainer) {
}
const drawUserColorSelect = (maxColor) => {
const SPACING = 30
- const BORDER_SIZE = 10
- const SIZE = 60
+ const BORDER_SIZE = 15
+ const SIZE = 70
let x = 0
let y = -BORDER_SIZE * 2 - SIZE
const btns = colorSelectButtons = []
@@ -358,6 +375,7 @@ export default function(stage, mainContainer) {
if (currentTutorialStep[0] === -1) {
const btn = colorSelectButtons[currentTutorialStep[1]]
unflashButton(btn)
+ activateButton(btn)
} else {
tutorialContainer.clear()
}
@@ -386,7 +404,10 @@ export default function(stage, mainContainer) {
tutorialSteps = level.tutorialSteps || []
currentTutorialStep = null
map = level.map || parseLevelStr(level.mapStr)
+ originalMapJSON = JSON.stringify(map)
// reset ui
+ animateContainer.clear()
+ tutorialContainer.clear()
resetMetaContainer()
refreshTiles()
// stat used colors
@@ -411,9 +432,14 @@ export default function(stage, mainContainer) {
// show title
startTime = Date.now() - (level.timeUsed || 0)
showTitle(level.title, maxColor)
+ showMenuButtons()
if (level.difficulty) showMapInfo('SEED:' + level.seed + ' D:' + level.difficulty)
acceptUserClick()
}
+ const resetLevel = () => {
+ map = JSON.parse(originalMapJSON)
+ refreshTiles()
+ }
const checkLevelEnd = () => {
let status = -1
for(let j = 0; j < M_N_MAX; j++) {
@@ -426,10 +452,11 @@ export default function(stage, mainContainer) {
endLevel()
return true
}
- const endLevel = () => {
+ const endLevel = (quit = false) => {
clearInterval(timeTobj)
levelEndCb({
- timeUsed: Date.now() - startTime
+ timeUsed: Date.now() - startTime,
+ quit
})
}

0 comments on commit 59dc861

Please sign in to comment.