From eb9db7b70205af14d7a5a07105eecbb697087dd1 Mon Sep 17 00:00:00 2001 From: Jussi Mattas Date: Thu, 16 May 2019 22:38:52 +0300 Subject: [PATCH 1/3] Add keyboard controls to resize objects. --- src/level-editor.js | 68 +++++++++++++++++++++++++++++++++++++-------- 1 file changed, 57 insertions(+), 11 deletions(-) diff --git a/src/level-editor.js b/src/level-editor.js index 77d80a8..35ac8dc 100644 --- a/src/level-editor.js +++ b/src/level-editor.js @@ -13,6 +13,7 @@ export default function LevelEditor(onStateChange, initParams) { this.newObjectType = Objects.OBSTACLE; this.deleteObject = false; + this.mouseDown = false; this.mouseX = 0; this.mouseY = 0; this.dragOffsetX = 0; @@ -107,6 +108,41 @@ export default function LevelEditor(onStateChange, initParams) { case 16: // shift this.deleteObject = true; break; + // 'y', 'h' and 'j', 'k' adjust width and height of object + case 89: // 'y', + if (this.selectedObject !== undefined) { + const obj = this.levelObjects[this.selectedObject]; + if (obj.type === Objects.OBSTACLE) { + obj.y -= 10; + obj.h += 10; + } + } + break; + case 72: // 'h' + if (this.selectedObject !== undefined) { + const obj = this.levelObjects[this.selectedObject]; + if (obj.type === Objects.OBSTACLE && obj.h > 10) { + obj.y += 10; + obj.h -= 10; + } + } + break; + case 74: // 'j', + if (this.selectedObject !== undefined) { + const obj = this.levelObjects[this.selectedObject]; + if (obj.type === Objects.OBSTACLE && obj.w > 10) { + obj.w -= 10; + } + } + break; + case 75: // 'k' + if (this.selectedObject !== undefined) { + const obj = this.levelObjects[this.selectedObject]; + if (obj.type === Objects.OBSTACLE) { + obj.w += 10; + } + } + break; default: console.log('key pressed: ' + e.keyCode); break; @@ -124,20 +160,23 @@ export default function LevelEditor(onStateChange, initParams) { mousemove: e => { this.mouseX = e.clientX - this.globalOffset.x; this.mouseY = e.clientY - this.globalOffset.y; - if (this.selectedObject !== undefined) { - this.levelObjects[this.selectedObject].x = this.snapToGrid(this.mouseX - this.dragOffsetX); - this.levelObjects[this.selectedObject].y = this.snapToGrid(this.mouseY - this.dragOffsetY); - } else if (this.newObject !== undefined) { - if (this.newObjectType === Objects.OBSTACLE) { - this.newObject.w = this.snapToGrid(this.mouseX - this.newObject.x); - this.newObject.h = this.snapToGrid(this.mouseY - this.newObject.y); - } else { - this.newObject.x = this.snapToGrid(this.mouseX); - this.newObject.y = this.snapToGrid(this.mouseY); + if (this.mouseDown) { + if (this.selectedObject !== undefined) { + this.levelObjects[this.selectedObject].x = this.snapToGrid(this.mouseX - this.dragOffsetX); + this.levelObjects[this.selectedObject].y = this.snapToGrid(this.mouseY - this.dragOffsetY); + } else if (this.newObject !== undefined) { + if (this.newObjectType === Objects.OBSTACLE) { + this.newObject.w = this.snapToGrid(this.mouseX - this.newObject.x); + this.newObject.h = this.snapToGrid(this.mouseY - this.newObject.y); + } else { + this.newObject.x = this.snapToGrid(this.mouseX); + this.newObject.y = this.snapToGrid(this.mouseY); + } } } }, mousedown: e => { + this.mouseDown = true; this.selectedObject = this.getObjectUnderCursor(); if (this.selectedObject !== undefined) { if (this.deleteObject) { @@ -164,7 +203,7 @@ export default function LevelEditor(onStateChange, initParams) { } }, mouseup: () => { - this.selectedObject = undefined; + this.mouseDown = false; if (this.newObject !== undefined) { if (this.checkDimensions(this.newObject)) { this.levelObjects.push(this.newObject); @@ -190,6 +229,7 @@ export default function LevelEditor(onStateChange, initParams) { this.drawHelperLines = function(ctx) { ctx.strokeStyle = 'lightgreen'; + ctx.setLineDash([]); // divide to quadrants ctx.lineWidth = 2; ctx.beginPath(); @@ -247,5 +287,11 @@ export default function LevelEditor(onStateChange, initParams) { ctx.fillStyle = this.getFillStyle(this.newObject.type); ctx.fillRect(this.newObject.x, this.newObject.y, this.newObject.w, this.newObject.h); } + if (this.selectedObject !== undefined) { + const obj = this.levelObjects[this.selectedObject]; + ctx.strokeStyle = '#f0f'; + ctx.setLineDash([5, 10]) + ctx.strokeRect(obj.x - 5, obj.y - 5, obj.w + 10, obj.h + 10); + } }; } From 5c2ada392a065149a5e5fa8cafc684f237edc927 Mon Sep 17 00:00:00 2001 From: Jussi Mattas Date: Tue, 16 Jul 2019 21:55:20 +0300 Subject: [PATCH 2/3] Add copying of level objects to Level Editor. Just press 'c' to copy selected object. --- src/level-editor.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/level-editor.js b/src/level-editor.js index 35ac8dc..68d1b39 100644 --- a/src/level-editor.js +++ b/src/level-editor.js @@ -143,6 +143,18 @@ export default function LevelEditor(onStateChange, initParams) { } } break; + case 67: // 'c' copies selected object + if (this.selectedObject !== undefined) { + const obj = this.levelObjects[this.selectedObject]; + if (obj.type === Objects.OBSTACLE) { + const clone = _.cloneDeep(obj); + clone.x += 10; + clone.y += 10; + this.levelObjects.push(clone); + this.selectedObject = this.levelObjects.length - 1; + } + } + default: console.log('key pressed: ' + e.keyCode); break; From b3dc6e87823a0c9455fd5d4f68ae6fa93f591a6b Mon Sep 17 00:00:00 2001 From: Jussi Mattas Date: Tue, 16 Jul 2019 21:55:56 +0300 Subject: [PATCH 3/3] Update README. It didn't really make sense. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 397916c..82de6ed 100755 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ A (for now extremely) minimalistic platformer written in JavaScript. ## Usage -Run `npm install` to install dependencies. Then open `dist/index.html` in a browser. +To play, open `dist/index.html` in a browser. To develop, run `npm install` to install dependencies and `npm run dev` to build the Webpack bundle (watches for changes in source files and re-builds automatically). And `npm test` to run the little test suite. ## Gameplay goal I (done)