You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
171 lines
5.5 KiB
171 lines
5.5 KiB
import { AcGameObject } from "./AcGameObject"; |
|
import { Snake } from "./Snake"; |
|
import $ from 'jquery'; |
|
|
|
export class GameMap extends AcGameObject { |
|
constructor(ctx, parent, store) { |
|
super(); |
|
|
|
this.ctx = ctx; |
|
this.parent = parent; |
|
this.store = store; |
|
this.L = 0; |
|
|
|
this.snake = new Snake(this.ctx, this); |
|
this.directions = []; |
|
|
|
this.status = "waiting"; // waiting -> playing -> win/lose |
|
} |
|
|
|
start() { |
|
this.ctx.canvas.focus(); |
|
this.ctx.canvas.addEventListener('keydown', e => { |
|
if (this.store.state.restart) return false; |
|
|
|
if (e.key === 'w' || e.key === 'ArrowUp') { |
|
this.directions.push(0); |
|
this.snake.eye_direction = 0; |
|
e.preventDefault(); |
|
} |
|
else if (e.key === 'd' || e.key == 'ArrowRight') { |
|
this.directions.push(1); |
|
this.snake.eye_direction = 1; |
|
e.preventDefault(); |
|
} |
|
else if (e.key === 's' || e.key === 'ArrowDown') { |
|
this.directions.push(2); |
|
this.snake.eye_direction = 2; |
|
e.preventDefault(); |
|
} |
|
else if (e.key === 'a' || e.key === 'ArrowLeft') { |
|
this.directions.push(3); |
|
this.snake.eye_direction = 3; |
|
e.preventDefault(); |
|
} |
|
else if (e.key === 'M' || e.key === 'm') { |
|
if (this.store.state.music === true) { |
|
this.store.state.music = false; |
|
this.store.commit("updateMusic",false); |
|
const audio = document.querySelector('#player') |
|
audio.pause(); |
|
}else { |
|
this.store.state.music = true; |
|
this.store.commit("updateMusic",true); |
|
const audio = document.querySelector('#player') |
|
audio.currentTime = 0; |
|
audio.play(); |
|
} |
|
} |
|
|
|
let k = this.directions.length; |
|
if (k > 1 && this.directions[k - 1] === this.directions[k - 2]) { |
|
this.directions.pop(); |
|
} |
|
|
|
while (this.directions.length > 2) |
|
this.directions.splice(0, 1); |
|
|
|
if (this.status === "waiting" && this.directions.length && this.directions[0] !== 3) { |
|
this.status = "playing"; |
|
this.snake.direction = this.directions[0]; |
|
} |
|
}); |
|
} |
|
|
|
update_size() { |
|
this.L = Math.min(this.parent.clientWidth / 17, this.parent.clientHeight / 15); |
|
this.ctx.canvas.width = this.L * 17; |
|
this.ctx.canvas.height = this.L * 15; |
|
} |
|
|
|
update_score() { |
|
$.ajax({ |
|
url: "https://app3359.acapp.acwing.com.cn/update_score/", |
|
type: "post", |
|
data: { |
|
score: this.store.state.score, |
|
}, |
|
headers: { |
|
'Authorization': "Bearer " + this.store.state.access, |
|
}, |
|
}) |
|
} |
|
|
|
win() { |
|
this.snake.color = "white"; |
|
this.status = "win"; |
|
this.store.commit('updateRestart', true); |
|
this.store.commit('updateNextStep',false); |
|
this.store.commit('updateMusic',false); |
|
this.store.state.audio.pause(); |
|
this.update_score(); |
|
} |
|
|
|
|
|
lose() { |
|
this.snake.color = "white"; |
|
this.status = "lose"; |
|
this.store.commit('updateRestart', true); |
|
this.store.commit('updateNextStep',false); |
|
this.store.commit("updateRecord",Math.max(this.store.state.score,this.store.state.record)); |
|
this.store.commit('updateMusic',false); |
|
if (this.store.state.music === false) { |
|
const audio = document.querySelector('#player') |
|
audio.pause() |
|
} |
|
this.update_score(); |
|
} |
|
|
|
restart() { |
|
this.store.state.score = 0; |
|
this.status = "waiting"; |
|
this.snake.destroy(); |
|
this.snake = new Snake(this.ctx, this); |
|
this.store.commit('updateRestart', false); |
|
this.store.commit('updateNextStep',false); |
|
this.ctx.canvas.focus(); |
|
// console.log(this.store.state.music); |
|
if (this.store.state.music === true) { |
|
const audio = document.querySelector('#player') |
|
audio.currentTime = 0; |
|
audio.play() |
|
this.store.commit('updateMusic',true); |
|
} |
|
} |
|
|
|
upgrade() { |
|
// this.status = "waiting"; |
|
// this.snake.destroy(); |
|
if (this.store.state.music === true) { |
|
const audio = document.querySelector('#player') |
|
audio.currentTime = 0; |
|
audio.play() |
|
} |
|
|
|
this.snake = new Snake(this.ctx, this); |
|
this.snake.color = this.store.state.color; |
|
this.snake.speed = this.store.state.speed; |
|
this.snake.number = this.store.state.number; |
|
this.store.commit("updateRecord",Math.max(this.store.state.score,this.store.state.record)); |
|
} |
|
|
|
update() { |
|
this.update_size(); |
|
this.render(); |
|
} |
|
|
|
render() { |
|
let color_even = "#AAD751", color_odd = "#A2D149"; |
|
|
|
for (let i = 0; i < 17; i ++ ) { |
|
for (let j = 0; j < 15; j ++ ) { |
|
if ((i + j) % 2 == 0) { |
|
this.ctx.fillStyle = color_even; |
|
} else { |
|
this.ctx.fillStyle = color_odd; |
|
} |
|
this.ctx.fillRect(i * this.L, j * this.L, this.L, this.L); |
|
} |
|
} |
|
} |
|
} |