Base game & server skeleton
This commit is contained in:
Thomas
@@ -11,6 +11,7 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
background-color: #475b6e;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -13,14 +13,26 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
player: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
direction: 0,
|
||||
walls: []
|
||||
x: 100,
|
||||
y: 100,
|
||||
angle: 0,
|
||||
targetAngle: 0,
|
||||
walls: [],
|
||||
lastWall: 0,
|
||||
color: 'red'
|
||||
},
|
||||
players: [],
|
||||
mouse: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
settings: {
|
||||
playerSize: 10,
|
||||
playerSpeed: 2,
|
||||
playerTurnSpeed: 10,
|
||||
wallSize: 8,
|
||||
wallUpdate: 5,
|
||||
arenaSize: 1000
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -35,30 +47,177 @@ export default {
|
||||
mounted () {
|
||||
this.canvas.width = window.innerWidth
|
||||
this.canvas.height = window.innerHeight
|
||||
this.context.fillStyle = 'rgb(200, 0, 0)'
|
||||
this.context.fillRect(10, 10, 50, 50)
|
||||
|
||||
this.context.fillStyle = 'rgba(0, 0, 200, 0.5)'
|
||||
this.context.fillRect(30, 30, 50, 50)
|
||||
this.canvas.addEventListener('mousemove', this.mouseEvent)
|
||||
// setInterval(this.render, 1000 / 60)
|
||||
setInterval(this.render, 1000 / 60)
|
||||
setInterval(this.movePlayer, 100)
|
||||
},
|
||||
methods: {
|
||||
render () {
|
||||
this.renderBorders(this.player.x, this.player.y)
|
||||
this.renderPlayer()
|
||||
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
||||
this.renderBorders()
|
||||
this.renderPlayer(this.player)
|
||||
this.renderWalls(this.player.walls, this.player.color)
|
||||
|
||||
this.players.forEach(player => {
|
||||
this.renderPlayer(player)
|
||||
this.renderWalls(player.walls, player.color)
|
||||
})
|
||||
|
||||
this.renderDebug()
|
||||
|
||||
this.checkPlayerColision()
|
||||
this.updatePlayer()
|
||||
},
|
||||
renderBorders (x, y) {
|
||||
renderBorders () {
|
||||
this.context.strokeStyle = 'black'
|
||||
this.context.lineWidth = 1
|
||||
this.context.strokeRect(this.canvas.width / 2 - x, this.canvas.height / 2 - y, 3000, 3000)
|
||||
this.context.strokeRect(this.canvas.width / 2 - this.player.x, this.canvas.height / 2 - this.player.y, this.settings.arenaSize, this.settings.arenaSize)
|
||||
},
|
||||
renderPlayer () {
|
||||
this.context.strokeStyle = 'black'
|
||||
this.context.lineWidth = 3
|
||||
this.context.strokeRect(this.player.x - 50, this.player.y - 50, this.player.x + 50, this.player.y + 50)
|
||||
renderPlayer (player) {
|
||||
this.context.save()
|
||||
|
||||
const canvasX = this.canvas.width / 2 + player.x - this.player.x
|
||||
const canvasY = this.canvas.height / 2 + player.y - this.player.y
|
||||
|
||||
this.context.translate(canvasX, canvasY)
|
||||
this.context.rotate(player.angle)
|
||||
this.context.fillStyle = player.color
|
||||
this.context.fillRect(-this.settings.playerSize, -this.settings.playerSize, this.settings.playerSize * 2, this.settings.playerSize * 2)
|
||||
this.context.translate(0, 0)
|
||||
|
||||
this.context.restore()
|
||||
},
|
||||
renderWalls (walls, color) {
|
||||
this.context.beginPath()
|
||||
this.context.lineWidth = this.settings.wallSize
|
||||
this.context.strokeStyle = color
|
||||
walls.forEach(wall => {
|
||||
const canvasX = this.canvas.width / 2 + wall.x - this.player.x
|
||||
const canvasY = this.canvas.height / 2 + wall.y - this.player.y
|
||||
this.context.lineTo(canvasX, canvasY)
|
||||
})
|
||||
this.context.lineTo(this.canvas.width / 2, this.canvas.height / 2)
|
||||
this.context.stroke()
|
||||
},
|
||||
renderDebug () {
|
||||
this.context.beginPath()
|
||||
const canvasX = this.canvas.width / 2
|
||||
const canvasY = this.canvas.height / 2
|
||||
this.context.lineTo(canvasX, canvasY)
|
||||
this.context.lineTo(this.mouse.x, this.mouse.y)
|
||||
this.context.lineWidth = 1
|
||||
this.context.strokeStyle = 'blue'
|
||||
this.context.stroke()
|
||||
|
||||
const x = canvasX + 30 * Math.cos(this.player.angle) * 2
|
||||
const y = canvasY + 30 * Math.sin(this.player.angle) * 2
|
||||
this.context.beginPath()
|
||||
this.context.lineTo(canvasX, canvasY)
|
||||
this.context.lineTo(x, y)
|
||||
this.context.lineWidth = 1
|
||||
this.context.strokeStyle = 'yellow'
|
||||
this.context.stroke()
|
||||
|
||||
this.context.beginPath()
|
||||
this.context.arc(this.mouse.x, this.mouse.y, 25, 0, 2 * Math.PI, false)
|
||||
this.context.lineWidth = 1
|
||||
this.context.strokeStyle = 'yellow'
|
||||
this.context.stroke()
|
||||
|
||||
const canvasX2 = this.canvas.width / 2
|
||||
const canvasY2 = this.canvas.height / 2
|
||||
this.context.beginPath()
|
||||
this.context.arc(canvasX2, canvasY2, this.settings.playerSize, 0, 2 * Math.PI, false)
|
||||
this.context.lineWidth = 1
|
||||
this.context.strokeStyle = 'purple'
|
||||
this.context.stroke()
|
||||
|
||||
this.context.fillText('player x: ' + this.player.x + ' y:' + this.player.y, 10, 10)
|
||||
this.context.fillText('a:' + this.player.angle + ' a_t' + this.player.targetAngle, 10, 20)
|
||||
this.context.fillText('canvasX: ' + canvasX + ' canvasY:' + canvasY, 10, 30)
|
||||
this.context.fillText('walls: ' + this.player.walls.length, 10, 40)
|
||||
},
|
||||
mouseEvent (event) {
|
||||
var rect = this.canvas.getBoundingClientRect()
|
||||
this.mouse.x = event.clientX - rect.left
|
||||
this.mouse.y = event.clientY - rect.top
|
||||
|
||||
var dx = this.mouse.x - this.canvas.width / 2
|
||||
var dy = this.mouse.y - this.canvas.height / 2
|
||||
|
||||
this.player.targetAngle = Math.atan2(dy, dx)
|
||||
},
|
||||
updatePlayer () {
|
||||
this.player.lastWall++
|
||||
if (this.player.lastWall > this.settings.wallUpdate) {
|
||||
this.player.walls.push({ x: this.player.x, y: this.player.y })
|
||||
this.player.lastWall = 0
|
||||
}
|
||||
|
||||
this.player.x += this.settings.playerSpeed * Math.cos(this.player.angle)
|
||||
this.player.y += this.settings.playerSpeed * Math.sin(this.player.angle)
|
||||
|
||||
this.player.angle = this.player.targetAngle
|
||||
// angle lag
|
||||
/*
|
||||
if (this.player.targetAngle !== this.player.angle) {
|
||||
const delta = this.player.targetAngle - this.player.angle
|
||||
if (delta < 0) this.player.angle += delta / this.settings.playerTurnSpeed
|
||||
if (delta > 0) this.player.angle += delta / this.settings.playerTurnSpeed
|
||||
if (delta <= 0.1 && delta >= -0.1) this.player.angle = this.player.targetAngle
|
||||
}
|
||||
*/
|
||||
},
|
||||
checkPlayerColision () {
|
||||
const playerX = this.player.x
|
||||
const playerY = this.player.y
|
||||
// BORDERS
|
||||
if (playerX - this.settings.playerSize < 0 ||
|
||||
playerX + this.settings.playerSize > this.settings.arenaSize ||
|
||||
playerY - this.settings.playerSize < 0 ||
|
||||
playerY + this.settings.playerSize > this.settings.arenaSize
|
||||
) {
|
||||
this.context.fillText('DED BORDER', this.canvas.width / 2, this.canvas.height / 2)
|
||||
}
|
||||
|
||||
// WALLS
|
||||
for (var i = 0; i < this.player.walls.length - 2; i++) {
|
||||
const wallA = this.player.walls[i]
|
||||
const wallB = this.player.walls[i + 1]
|
||||
if (this.isCloseToWall(wallA.x, wallA.y, wallB.x, wallB.y, playerX, playerY, this.settings.playerSize)) {
|
||||
if (this.isCrossingLine(wallA.x, wallA.y, wallB.x, wallB.y, playerX, playerY, this.settings.playerSize)) {
|
||||
this.context.fillText('DED WALL OWN', this.canvas.width / 2, this.canvas.height / 2)
|
||||
this.context.beginPath()
|
||||
const canvasX = this.canvas.width / 2 + wallA.x - this.player.x
|
||||
const canvasY = this.canvas.height / 2 + wallA.y - this.player.y
|
||||
this.context.lineTo(canvasX, canvasY)
|
||||
const canvasX2 = this.canvas.width / 2 + wallB.x - this.player.x
|
||||
const canvasY2 = this.canvas.height / 2 + wallB.y - this.player.y
|
||||
this.context.lineTo(canvasX2, canvasY2)
|
||||
this.context.lineWidth = this.settings.wallSize
|
||||
this.context.strokeStyle = 'purple'
|
||||
this.context.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
isCloseToWall (xa, ya, xb, yb, xc, yc, radius) {
|
||||
var xar = Math.min(xa, xb) - radius
|
||||
var yar = Math.min(ya, yb) - radius
|
||||
var xbr = Math.max(xa, xb) + radius
|
||||
var ybr = Math.max(ya, yb) + radius
|
||||
|
||||
return ((xc >= xar && xc <= xbr) && (yc >= yar && yc <= ybr))
|
||||
},
|
||||
isCrossingLine (xa, ya, xb, yb, xc, yc, radius) {
|
||||
var a = xc - xa
|
||||
var b = xb - xa
|
||||
var c = yc - ya
|
||||
var d = yb - ya
|
||||
var result = (a * d - b * c) / Math.sqrt(Math.pow(xa - xb, 2) + Math.pow(ya - yb, 2))
|
||||
|
||||
return result < radius
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user