mirror of
https://github.com/chenasraf/strange-tactics.git
synced 2026-05-17 17:58:04 +00:00
Some refactoring + circle tile surround func
This commit is contained in:
Chen Asraf
58
character.js
58
character.js
@@ -1,58 +0,0 @@
|
||||
class Character extends Sprite {
|
||||
constructor(i, j, img, hoverImg) {
|
||||
super(i, j, i * gridSize, i * gridSize, 32, 32, img, hoverImg)
|
||||
this.movementR = 3
|
||||
this.movementGridVisible = false
|
||||
}
|
||||
|
||||
show() {
|
||||
let img = this.mouseOver() ? this.hoverImg : this.img
|
||||
image(img, this.x + 2, this.y, this.w - 8, this.h, 44, 40, 36, 50)
|
||||
if (this.movementGridVisible) {
|
||||
this.drawCircleGrid(this.movementR)
|
||||
}
|
||||
}
|
||||
|
||||
update() {
|
||||
if (mouseIsPressed && this.mouseOver() && !this.controlActive) {
|
||||
this.controlActive = true
|
||||
this._toggleMovementGrid()
|
||||
setTimeout(() => this.controlActive = false, 100)
|
||||
}
|
||||
}
|
||||
|
||||
move(i, j) {
|
||||
this.i = i
|
||||
this.j = j
|
||||
}
|
||||
|
||||
drawCircleGrid(r) {
|
||||
let d = (5 - r * 4) / 4,
|
||||
x = 0,
|
||||
y = r * gridSize,
|
||||
circleColor = color(255, 255, 255, 100)
|
||||
|
||||
do {
|
||||
fill(circleColor)
|
||||
rect(this.x + x, this.y + y, gridSize, gridSize)
|
||||
rect(this.x + x, this.y - y, gridSize, gridSize)
|
||||
rect(this.x - x, this.y + y, gridSize, gridSize)
|
||||
rect(this.x - x, this.y - y, gridSize, gridSize)
|
||||
rect(this.x + y, this.y + x, gridSize, gridSize)
|
||||
rect(this.x + y, this.y - x, gridSize, gridSize)
|
||||
rect(this.x - y, this.y + x, gridSize, gridSize)
|
||||
rect(this.x - y, this.y - x, gridSize, gridSize)
|
||||
|
||||
if (d < 0) {
|
||||
d += 2 * x + gridSize
|
||||
} else {
|
||||
d += 2 * (x - y) + gridSize
|
||||
y -= gridSize
|
||||
}
|
||||
x += gridSize
|
||||
} while (x <= y)
|
||||
}
|
||||
_toggleMovementGrid() {
|
||||
this.movementGridVisible = !this.movementGridVisible
|
||||
}
|
||||
}
|
||||
10
index.html
10
index.html
@@ -4,10 +4,10 @@
|
||||
<title>Strange Tactics</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="p5.js"></script>
|
||||
<script src="sprite.js"></script>
|
||||
<script src="character.js"></script>
|
||||
<script src="tile.js"></script>
|
||||
<script src="game.js"></script>
|
||||
<script src="vendor/p5.min.js"></script>
|
||||
<script src="lib/sprite.js"></script>
|
||||
<script src="lib/character.js"></script>
|
||||
<script src="lib/tile.js"></script>
|
||||
<script src="lib/game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
31
lib/character.js
Normal file
31
lib/character.js
Normal file
@@ -0,0 +1,31 @@
|
||||
class Character extends Sprite {
|
||||
constructor(i, j, img, hoverImg) {
|
||||
super(i, j, i * gridSize, i * gridSize, gridSize, gridSize, img, hoverImg)
|
||||
this.movementR = 3
|
||||
this.movementGridVisible = false
|
||||
}
|
||||
|
||||
show() {
|
||||
let img = this.mouseOver() ? this.hoverImg : this.img
|
||||
image(img, this.x + 2, this.y, this.w - 8, this.h, 44, 40, 36, 50)
|
||||
if (this.movementGridVisible) {
|
||||
this.drawCircleGrid(this.movementR)
|
||||
}
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this.mouseIsClicking()) {
|
||||
this._startInteraction()
|
||||
this._toggleMovementGrid()
|
||||
}
|
||||
}
|
||||
|
||||
move(i, j) {
|
||||
this.i = i
|
||||
this.j = j
|
||||
}
|
||||
|
||||
_toggleMovementGrid() {
|
||||
this.movementGridVisible = !this.movementGridVisible
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
const w = 640,
|
||||
const w = 720,
|
||||
h = 480,
|
||||
gridSize = 32,
|
||||
gridSize = 48,
|
||||
partySize = 5
|
||||
|
||||
let tiles, party
|
||||
@@ -54,7 +54,7 @@ function draw() {
|
||||
|
||||
ellipse(mouseX, mouseY, 10)
|
||||
fill(255, 255, 255, 100)
|
||||
textSize(16)
|
||||
text(`x${mouseX}y${mouseY}`, 20, 20)
|
||||
textSize(12)
|
||||
text(`x${mouseX.toFixed(2)}y${mouseY.toFixed(2)}`, 3, 10)
|
||||
fill(0)
|
||||
}
|
||||
109
lib/sprite.js
Normal file
109
lib/sprite.js
Normal file
@@ -0,0 +1,109 @@
|
||||
const INTERACTION_INTERVAL = 50
|
||||
const MIN_INTERACTION_HOLDING = INTERACTION_INTERVAL * 2
|
||||
|
||||
class Sprite {
|
||||
static get INTERACTION_INTERVAL() { return INTERACTION_INTERVAL }
|
||||
static get MIN_INTERACTION_HOLDING() { return MIN_INTERACTION_HOLDING }
|
||||
|
||||
constructor(i, j, x, y, w, h, img, hoverImg) {
|
||||
this.i = i
|
||||
this.j = j
|
||||
this.x = i * gridSize
|
||||
this.y = j * gridSize
|
||||
this.w = w
|
||||
this.h = h
|
||||
this.img = img
|
||||
this.hoverImg = hoverImg
|
||||
this.hoverImg.filter(GRAY)
|
||||
this.circleGridCache = {}
|
||||
this.control = {
|
||||
active: false,
|
||||
continuous: false,
|
||||
holdTime: 0,
|
||||
}
|
||||
}
|
||||
|
||||
mouseOver() {
|
||||
return mouseX > 0 && mouseY > 0 &&
|
||||
mouseX < w && mouseY < h &&
|
||||
mouseX >= this.x &&
|
||||
mouseX < this.x + this.w &&
|
||||
mouseY >= this.y &&
|
||||
mouseY < this.y + this.w
|
||||
}
|
||||
|
||||
drawCircleGrid(r) {
|
||||
let i = r,
|
||||
j = 0,
|
||||
err = 1 - i,
|
||||
circleColor = color(30, 167, 255, 100),
|
||||
cache = {}
|
||||
|
||||
// if (r > 0)
|
||||
// this.drawCircleGrid(r - 1)
|
||||
|
||||
while (i >= j) {
|
||||
fill(circleColor)
|
||||
|
||||
let startI = -i + this.i,
|
||||
endI = i + this.i + 1
|
||||
|
||||
this.drawHorizontalLineGrid(startI, endI, j + this.j)
|
||||
|
||||
if (j != 0)
|
||||
this.drawHorizontalLineGrid(startI, endI, -j + this.j)
|
||||
|
||||
j++
|
||||
|
||||
if (err < 0)
|
||||
err += 2 * j + 1
|
||||
else {
|
||||
if (i >= j) {
|
||||
startI = -j + 1 + this.i
|
||||
endI = j + this.i
|
||||
this.drawHorizontalLineGrid(startI, endI, i + this.j)
|
||||
this.drawHorizontalLineGrid(startI, endI, -i + this.j)
|
||||
}
|
||||
i--
|
||||
err += 2 * (j - i + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawHorizontalLineGrid(startI, endI, j) {
|
||||
console.debug('line from', startI, 'to', endI, 'on', j)
|
||||
for (let curI = startI; curI < endI; curI++)
|
||||
rect(curI * gridSize, j * gridSize, gridSize, gridSize)
|
||||
}
|
||||
|
||||
mouseIsClicking() {
|
||||
return !this.control.active && mouseIsPressed && this.mouseOver() && !this.control.continuous
|
||||
}
|
||||
|
||||
mouseIsHolding(immediate = true) {
|
||||
return !this.control.active && mouseIsPressed && this.mouseOver() && (immediate && true || this.continuous)
|
||||
}
|
||||
|
||||
_startInteraction() {
|
||||
this.control.active = Boolean(mouseIsPressed && this.mouseOver())
|
||||
this.control.continuous = false
|
||||
this.interactionInterval = setInterval(() => this._endInteraction(), INTERACTION_INTERVAL)
|
||||
|
||||
console.debug('_startInteraction', this.control)
|
||||
}
|
||||
|
||||
_endInteraction() {
|
||||
this.control.active = Boolean(mouseIsPressed && this.mouseOver())
|
||||
|
||||
if (this.control.active) {
|
||||
this.control.holdTime += INTERACTION_INTERVAL
|
||||
this.control.continuous = this.control.holdTime >= MIN_INTERACTION_HOLDING
|
||||
} else {
|
||||
clearInterval(this.interactionInterval)
|
||||
this.control.holdTime = 0
|
||||
this.control.continuous = false
|
||||
}
|
||||
|
||||
console.debug('_endInteraction', this.control)
|
||||
}
|
||||
}
|
||||
@@ -22,7 +22,5 @@
|
||||
},
|
||||
"homepage": "https://github.com/chenasraf/strange-tactics#readme",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"bower": "^1.8.0"
|
||||
}
|
||||
"devDependencies": {}
|
||||
}
|
||||
|
||||
22
sprite.js
22
sprite.js
@@ -1,22 +0,0 @@
|
||||
class Sprite {
|
||||
constructor(i, j, x, y, w, h, img, hoverImg) {
|
||||
this.i = i
|
||||
this.j = j
|
||||
this.x = i * gridSize
|
||||
this.y = j * gridSize
|
||||
this.w = w
|
||||
this.h = h
|
||||
this.img = img
|
||||
this.hoverImg = hoverImg
|
||||
this.hoverImg.filter(GRAY)
|
||||
}
|
||||
|
||||
mouseOver() {
|
||||
return mouseX > 0 && mouseY > 0 &&
|
||||
mouseX < w && mouseY < h &&
|
||||
mouseX >= this.x &&
|
||||
mouseX < this.x + this.w &&
|
||||
mouseY >= this.y &&
|
||||
mouseY < this.y + this.w
|
||||
}
|
||||
}
|
||||
0
p5.js → vendor/p5.js
vendored
0
p5.js → vendor/p5.js
vendored
0
p5.min.js → vendor/p5.min.js
vendored
0
p5.min.js → vendor/p5.min.js
vendored
Reference in New Issue
Block a user