Katselmointi

Pelin käytettävyys

Mitä tein

• 14.8.2019 klo ~13:10

• Pelasin peliä 5 pelaajan ryhmällä

  • Ensimmäinen 3 pisteeseen kisa
  • Yleistä pelailua

Kokemus

• Todella hauska peli jota oli mukava pelata ryhmällä

• Ohjeet, erityisesti näppäimet saisi varmaankin mahdutettua myös kuvaruudulle

• Pelissä toisiin osuminen oli hyvin vaikeaa, panokset jatkoivat matkaa ja välillä vaikka minuun selkeästi osui en menettänyt elämäpisteitä.

• Hyvät painovoimasimuloinnit aluksille ja luodeille. Aluksiin olisi kuitenkin kiva saada painovoimatasaajat ettei alus itsekseen liikkuisi.

• Olisi kiva nähdä high-score kun kuolemasta menettää kaikki pisteet

• Poweruppien käyttö on hieman epäselvää.

• Pistelistan näkyminen oikeassa yläreunassa oli mainiota, käytimme sitä huudellaksemme toisillemme.

Koodi

• Frontin koodin voisi saada esim Dockerilla paketoitua kätevästi yhteen backendin kanssa

• Kaikki frontin koodi yhdessä tiedostossa. :( Vaikea löytää mitä etsii.

• Koodissa on lisäksi outoja muuttujia ja satunnaisia numeroita, luettavuus kärsii tästä huomattavasti. (Koodi ei dokumentoi itseään eikä siellä myöskään ole dokumentaatiota)

• avaruussota/js/main.js

  Lines 221 to 356 in 4d0729e

  	ws.addEventListener('message', (e) => {
  	const obj = serial.decode(serial.recv(e.data))
  	if (serial.is_token(obj)) {
  	document.getElementById('onlinestatus').textContent = 'in game'
  	token = obj.token
  	} else if (serial.is_pong(obj)) {
  	const now = performance.now()
  	document.getElementById('onlinestatus').textContent =
  	`in game, ping: ${Math.max(now - obj.time, 0).toFixed(1)}ms`
  	} else if (serial.is_data(obj)) {
  	no_data = 0
  	let you = null
  	let projs = null
  	let oldHealth = {}
  	for (const ship of ships) {
  	oldHealth[ship._id] = ship.health
  	}
  	({ you, ships, projs, count, rubber, seed } = obj)
  	for (const ship of ships) {
  	if (oldHealth.hasOwnProperty(ship._id) && oldHealth[ship._id] > ship.health) {
  	bubbles.push({ x: ship.posX, y: ship.posY, alpha: 100, radius: 0.3 * (1 + oldHealth[ship._id] - ship.health) })
  	}
  	}
  	if (self.dead) {
  	self = you
  	self.dead = false
  	self.highAgility = document.getElementById('perkselect').value.trim() == 'movespeed'
  	} else {
  	if (Math.abs(you.posX - self.posX) > 0.3) {
  	self.posX = (self.posX + you.posX) / 2
  	self.velX = (self.velX + you.velX) / 2
  	}
  	if (Math.abs(you.posY - self.posY) > 0.3) {
  	self.posY = (self.posY + you.posY) / 2
  	self.velY = (self.velY + you.velY) / 2
  	}
  	if (Math.abs(you.velX - self.velX) > 0.2) {
  	self.velX = you.velX
  	}
  	if (Math.abs(you.velY - self.velY) > 0.2) {
  	self.posY = you.posY
  	}
  	if (!accel && you.accel !== null) {
  	send_turn = true
  	} else if (accel && you.accel === null) {
  	send_turn = true
  	} else if (!brake && you.brake !== null) {
  	send_turn = true
  	} else if (brake && you.brake === null) {
  	send_turn = true
  	}
  	document.getElementById('yourscore').textContent
  	= document.getElementById('scoreanimation').textContent
  	= document.getElementById('finalscorenum').textContent
  	= you.score
  	if (you.score > self.score) {
  	document.getElementById('scoreanimation').style.visilbility = 'visible'
  	document.getElementById('scoreanimation').style.animation = 'none'
  	document.getElementById('scoreanimation').style.animation = ''
  	}
  	self.name = you.name
  	self.score = you.score
  	self.dead = you.dead
  	if (you.health < self.health) {
  	damageAlpha = 0.8 * (self.health - you.health)
  	damageGot = performance.now() + (self.health - you.health) * 700
  	bubbles.push({ x: self.posX, y: self.posY, alpha: 100, radius: 0.3 * (1 + self.health - you.health) })
  	}
  	self.health = you.health
  	self.latched = you.latched
  	self.speedMul = you.speedMul
  	self.item = you.item
  	self.regen = you.regen
  	self.overdrive = you.overdrive
  	self.rubbership = you.rubbership
  	}
  	if (physics.getPlanetSeed() != seed) {
  	physics.setPlanetSeed(seed)
  	planets = physics.getPlanets(self.posX, self.posY)
  	}
  	if (projs.length) {
  	bullets = [...bullets, ...projs.filter(x => x)]
  	}
  	updatePowerup()
  	physics.setPlanetSeed(seed)
  	document.getElementById('playerCountNum').textContent = count
  	document.getElementById('healthbarhealth').style.width = `${Math.ceil(self.health * 200)}px`
  	} else if (serial.is_board(obj)) {
  	leaderboard = obj.board
  	drawLeaderboard()
  	} else if (serial.is_orient(obj)) {
  	self.orient = obj.orient
  	} else if (serial.is_unauth(obj)) {
  	disconnect()
  	} else if (serial.is_killed(obj)) {
  	explosion(self)
  	hideLose()
  	leaveGame()
  	document.getElementById('defeat').style.display = 'inline'
  	document.getElementById('defeatname').style.display = 'inline'
  	document.getElementById('defeatname').innerHTML = obj.ship
  	} else if (serial.is_crashed(obj)) {
  	explosion(self)
  	hideLose()
  	leaveGame()
  	document.getElementById('defeatcrash').style.display = 'inline'
  	document.getElementById('defeatname').style.display = 'inline'
  	document.getElementById('defeatname').innerHTML = obj.ship
  	} else if (serial.is_hitpl(obj)) {
  	explosion(self)
  	hideLose()
  	leaveGame()
  	document.getElementById('defeatplanet').style.display = 'inline'
  	} else if (serial.is_killship(obj)) {
  	const matching = ships.find(ship => ship._id === obj.ship)
  	if (matching !== null) {
  	explosion(matching)
  	}
  	ships = ships.filter(ship => ship._id !== obj.ship)
  	} else if (serial.is_killproj(obj)) {
  	bullets = bullets.filter(bullet => bullet._id !== obj.proj)
  	} else if (serial.is_minexpl(obj)) {
  	bubbles.push({ x: obj.mine.posX, y: obj.mine.posY, alpha: 200, radius: 1 })
  	} else if (serial.is_addpup(obj)) {
  	powerups.push(obj.powerup)
  	// document.getElementById('powerupanimation').style.visibility = 'visible'
  	document.getElementById('powerupanimation').style.animation = 'none'
  	document.getElementById('powerupanimation').style.animation = ''
  	} else if (serial.is_delpup(obj)) {
  	powerups = powerups.filter(powerup => powerup._id !== obj.powerup)
  	}
  	})

  voisi helposti jakaa useammaksi funktioksi jotka olisi hyvin nimettyjä.

• Backissä vähän sama juttu, game.js tiedoston sijaan voisi olla game kansio jonka sisällä logiikka useammassa tiedostossa.

• Ihmetystä herätti myös wss antaminen pelille

  avaruussota/src/game.js

  Lines 72 to 85 in 4d0729e

  	const gameFactory = (wss) => {
  	let ships = {}
  	let bullets = {}
  	let powerups = {}
  	let lastTick = null
  	let lastSocket = {}
  	let leaderboard = []
  	let nearbyBullets = {}
  	let rubberbandRadius = 150
  	let rubberbandRadiusGoal = 150
  	let nextPowerup = null
  	const announce = (obj) => {
  	wss.clients.forEach((ws) => {

  Saisikohan tämän riippuvuuden eriytettyä
  • Samalla voisi korjata oudon requiren keskellä tiedostoa (vieläpä funktion sisällä)

    avaruussota/src/sockserver.js

    Line 48 in 4d0729e

    const game = require('./game')(wss)

• Peli pyörii aika hyvin ja selkesti optimointeja on tehty useaan paikkaan.

• Helppo tapa ratkaista ylläpidettävyyshuolenaiheet olisi lisätä eslint jollakin hyvällä presetillä ja noudattaa sen sääntöjä

Kokonaisuus

• Projektissa on paljon hiomisen varaa. Toiminnallisuus ylittää odotukset, mutta koodin hiomiseen käyttäisin vielä aikaa.

• Mielenkiintoinen peli ja toteutus. Olisi mukava, jos pystyisit jatkamaan sen kehittämistä.