|
|
class Cphoto {
|
|
|
constructor(root){
|
|
|
this.root = root;
|
|
|
this.$cphoto = $(`<div style="background-color: black; color: white; padding: 20px;width: 100%; height:100%;z-index : 9999"></div>`);
|
|
|
//this.hide();
|
|
|
//this.root.$ac_game.append(this.$cphoto);
|
|
|
this.start();
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
start(){
|
|
|
|
|
|
}
|
|
|
|
|
|
hide(){
|
|
|
this.$cphoto.hide();
|
|
|
|
|
|
}
|
|
|
show(){
|
|
|
this.$cphoto.show();
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
class AcGameMenu {
|
|
|
constructor(root) {
|
|
|
this.root = root;
|
|
|
this.$menu = $(`
|
|
|
<div class="ac-game-menu">
|
|
|
<div class="ac-game-menu-field">
|
|
|
<div class="ac-game-menu-field-item ac-game-menu-field-item-cphoto">
|
|
|
头像选择
|
|
|
</div>
|
|
|
<div class="ac-game-menu-field-item ac-game-menu-field-item-single-mode">
|
|
|
单人模式
|
|
|
</div>
|
|
|
<br>
|
|
|
<div class="ac-game-menu-field-item ac-game-menu-field-item-multi-mode">
|
|
|
多人模式
|
|
|
</div>
|
|
|
<div class="ac-game-menu-field-item ac-game-menu-field-item-ranklist">
|
|
|
天梯榜
|
|
|
</div>
|
|
|
<br>
|
|
|
|
|
|
<div class="ac-game-menu-field-item ac-game-menu-field-item-settings">
|
|
|
退出
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
`);
|
|
|
this.$menu.hide();
|
|
|
this.root.$ac_game.append(this.$menu);
|
|
|
this.$single_mode = this.$menu.find('.ac-game-menu-field-item-single-mode');
|
|
|
this.$multi_mode = this.$menu.find('.ac-game-menu-field-item-multi-mode');
|
|
|
this.$settings = this.$menu.find('.ac-game-menu-field-item-settings');
|
|
|
this.$cphoto_button = this.$menu.find('.ac-game-menu-field-item-cphoto');
|
|
|
this.$ranklist_button = this.$menu.find('.ac-game-menu-field-item-ranklist')
|
|
|
this.start();
|
|
|
}
|
|
|
|
|
|
start() {
|
|
|
this.add_listening_events();
|
|
|
}
|
|
|
|
|
|
add_listening_events() {
|
|
|
|
|
|
let outer = this;
|
|
|
this.$single_mode.click(function () {
|
|
|
outer.hide();
|
|
|
outer.root.playground.show("single mode");
|
|
|
|
|
|
});
|
|
|
this.$multi_mode.click(function () {
|
|
|
|
|
|
|
|
|
outer.hide();
|
|
|
outer.root.playground.show("multi mode");
|
|
|
});
|
|
|
this.$settings.click(function () {
|
|
|
outer.root.settings.logout_on_remote();
|
|
|
});
|
|
|
this.$cphoto_button.click(function () {
|
|
|
window.location.href = '/photo';
|
|
|
|
|
|
console.log(outer.root.settings.photo);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
this.$ranklist_button.click(function () {
|
|
|
$.ajax({
|
|
|
url: "https://app6641.acapp.acwing.com.cn/settings/ranklist/",
|
|
|
type: "GET",
|
|
|
headers: {
|
|
|
'Authorization': "Bearer " + outer.root.access,
|
|
|
},
|
|
|
success: function (resp) {
|
|
|
// 清空当前页面内容
|
|
|
document.body.innerHTML = `
|
|
|
<div style="text-align: center; margin-top: 20px;">
|
|
|
<button id="logout-button" style="
|
|
|
padding: 10px 20px;
|
|
|
background-color: #f44336;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: 5px;
|
|
|
cursor: pointer;
|
|
|
font-size: 16px;
|
|
|
margin-bottom: 20px;
|
|
|
">退出</button>
|
|
|
<h1>用户排名</h1>
|
|
|
</div>
|
|
|
<table style="
|
|
|
width: 60%;
|
|
|
margin: auto;
|
|
|
border-collapse: collapse;
|
|
|
">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th style="
|
|
|
padding: 10px;
|
|
|
border: 1px solid #ddd;
|
|
|
text-align: center;
|
|
|
">排名</th>
|
|
|
<th style="
|
|
|
padding: 10px;
|
|
|
border: 1px solid #ddd;
|
|
|
text-align: center;
|
|
|
">头像</th>
|
|
|
<th style="
|
|
|
padding: 10px;
|
|
|
border: 1px solid #ddd;
|
|
|
text-align: center;
|
|
|
">用户名</th>
|
|
|
<th style="
|
|
|
padding: 10px;
|
|
|
border: 1px solid #ddd;
|
|
|
text-align: center;
|
|
|
">分数</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody id="ranklist-body">
|
|
|
<!-- 用户排名信息将通过 JavaScript 插入到这里 -->
|
|
|
</tbody>
|
|
|
</table>
|
|
|
`;
|
|
|
|
|
|
// 获取表格主体的 DOM 元素
|
|
|
const ranklistBody = document.getElementById('ranklist-body');
|
|
|
|
|
|
// 遍历用户数据并生成 HTML 行
|
|
|
resp.forEach((user, index) => {
|
|
|
const row = document.createElement('tr');
|
|
|
|
|
|
// 排名
|
|
|
const rankCell = document.createElement('td');
|
|
|
rankCell.textContent = index + 1;
|
|
|
rankCell.setAttribute("style", "padding: 10px; border: 1px solid #ddd; text-align: center;");
|
|
|
row.appendChild(rankCell);
|
|
|
|
|
|
// 头像
|
|
|
const photoCell = document.createElement('td');
|
|
|
const img = document.createElement('img');
|
|
|
img.src = user.photo;
|
|
|
img.alt = user.username;
|
|
|
img.setAttribute("style", "width: 50px; height: 50px; border-radius: 50%;");
|
|
|
photoCell.appendChild(img);
|
|
|
photoCell.setAttribute("style", "padding: 10px; border: 1px solid #ddd; text-align: center;");
|
|
|
row.appendChild(photoCell);
|
|
|
|
|
|
// 用户名
|
|
|
const usernameCell = document.createElement('td');
|
|
|
usernameCell.textContent = user.username;
|
|
|
usernameCell.setAttribute("style", "padding: 10px; border: 1px solid #ddd; text-align: center;");
|
|
|
row.appendChild(usernameCell);
|
|
|
|
|
|
// 分数
|
|
|
const scoreCell = document.createElement('td');
|
|
|
scoreCell.textContent = user.score;
|
|
|
scoreCell.setAttribute("style", "padding: 10px; border: 1px solid #ddd; text-align: center;");
|
|
|
row.appendChild(scoreCell);
|
|
|
|
|
|
// 将行添加到表格主体中
|
|
|
ranklistBody.appendChild(row);
|
|
|
});
|
|
|
|
|
|
// 添加“退出”按钮点击事件
|
|
|
document.getElementById('logout-button').addEventListener('click', () => {
|
|
|
window.location.href = "https://app6641.acapp.acwing.com.cn/"; // 将此路径替换为实际的注销页面路径
|
|
|
});
|
|
|
},
|
|
|
error: function (xhr, status, error) {
|
|
|
console.error("请求失败:", error);
|
|
|
alert("无法获取排名列表，请稍后重试。");
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
}
|
|
|
show() {
|
|
|
this.$menu.show();
|
|
|
}
|
|
|
|
|
|
|
|
|
hide() {
|
|
|
this.$menu.hide();
|
|
|
}
|
|
|
}
|
|
|
let AC_GAME_OBJECTS = [];
|
|
|
|
|
|
class AcGameObject {
|
|
|
constructor() {
|
|
|
AC_GAME_OBJECTS.push(this);
|
|
|
|
|
|
this.has_called_start = false; // 是否执行过start函数
|
|
|
this.timedelta = 0; // 当前帧距离上一帧的时间间隔
|
|
|
this.uuid = this.create_uuid();
|
|
|
}
|
|
|
create_uuid() {
|
|
|
let res = "";
|
|
|
for(let i = 0;i < 8 ; i++){
|
|
|
let x = parseInt(Math.floor(Math.random()*10));
|
|
|
res += x;
|
|
|
}
|
|
|
return res;
|
|
|
|
|
|
|
|
|
}
|
|
|
start() { // 只会在第一帧执行一次
|
|
|
}
|
|
|
|
|
|
update() { // 每一帧均会执行一次
|
|
|
}
|
|
|
|
|
|
|
|
|
late_update(){
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
on_destroy() { // 在被销毁前执行一次
|
|
|
}
|
|
|
|
|
|
destroy() { // 删掉该物体
|
|
|
this.on_destroy();
|
|
|
|
|
|
for (let i = 0; i < AC_GAME_OBJECTS.length; i ++ ) {
|
|
|
if (AC_GAME_OBJECTS[i] === this) {
|
|
|
AC_GAME_OBJECTS.splice(i, 1);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
let last_timestamp;
|
|
|
let AC_GAME_ANIMATION = function(timestamp) {
|
|
|
for (let i = 0; i < AC_GAME_OBJECTS.length; i ++ ) {
|
|
|
let obj = AC_GAME_OBJECTS[i];
|
|
|
if (!obj.has_called_start) {
|
|
|
obj.start();
|
|
|
obj.has_called_start = true;
|
|
|
} else {
|
|
|
obj.timedelta = timestamp - last_timestamp;
|
|
|
obj.update();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
for(let i = 0;i< AC_GAME_OBJECTS.length;i++){
|
|
|
let obj = AC_GAME_OBJECTS[i];
|
|
|
obj.late_update();
|
|
|
|
|
|
}
|
|
|
last_timestamp = timestamp;
|
|
|
|
|
|
requestAnimationFrame(AC_GAME_ANIMATION);
|
|
|
}
|
|
|
|
|
|
|
|
|
requestAnimationFrame(AC_GAME_ANIMATION);
|
|
|
|
|
|
class ChatField{
|
|
|
constructor(playground){
|
|
|
console.log("chat");
|
|
|
this.playground = playground;
|
|
|
this.$history = $(`<div class = "ac-game-chat-field-history"></div>`)
|
|
|
this.$input = $(`<input type="text" class = "ac-game-chat-field-input">`)
|
|
|
|
|
|
this.$history.hide();
|
|
|
this.$input.hide();
|
|
|
this.playground.$playground.append(this.$history);
|
|
|
this.playground.$playground.append(this.$input);
|
|
|
this.start();
|
|
|
this.function_id = null;
|
|
|
|
|
|
}
|
|
|
start(){
|
|
|
this.add_listening_events();
|
|
|
|
|
|
}
|
|
|
|
|
|
add_listening_events(){
|
|
|
let outer =this;
|
|
|
this.$input.keydown(function(e){
|
|
|
if(e.which === 27){
|
|
|
outer.hide_input();
|
|
|
return false;
|
|
|
|
|
|
|
|
|
|
|
|
}else if (e.which === 13){
|
|
|
let username = outer.playground.root.settings.username;
|
|
|
let text = outer.$input.val();
|
|
|
if(text){
|
|
|
outer.$input.val("");
|
|
|
|
|
|
outer.add_message(username,text);
|
|
|
outer.playground.mps.send_message(text);
|
|
|
}
|
|
|
return false;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
show_history(){
|
|
|
let outer = this;
|
|
|
|
|
|
this.$history.fadeIn();
|
|
|
if(this.function_id){
|
|
|
|
|
|
clearTimeout(this.function_id);
|
|
|
|
|
|
}
|
|
|
this.function_id = setTimeout(function(){
|
|
|
outer.$history.fadeOut();
|
|
|
outer.function_id = null;
|
|
|
|
|
|
},3000);
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
show_input(){
|
|
|
this.show_history();
|
|
|
|
|
|
|
|
|
this.$input.show();
|
|
|
this.$input.focus();
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
hide_input(){
|
|
|
this.$input.hide();
|
|
|
this.playground.game_map.$canvas.focus();
|
|
|
|
|
|
}
|
|
|
add_message(username,text){
|
|
|
this.show_history();
|
|
|
|
|
|
let message = `[${username}]${text}`
|
|
|
this.$history.append(this.render_message(message));
|
|
|
this.$history.scrollTop(this.$history[0].scrollHeight);
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
render_message(message){
|
|
|
return $(`<div>${message}</div>`);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
class GameMap extends AcGameObject{
|
|
|
constructor(playground){
|
|
|
super();
|
|
|
this.playground=playground;
|
|
|
this.$canvas = $(`<canvas tabindex = 0></canvas>`);
|
|
|
this.ctx = this.$canvas[0].getContext('2d');
|
|
|
this.ctx.canvas.width = this.playground.width;
|
|
|
this.ctx.canvas.height = this.playground.height;
|
|
|
this.playground.$playground.append(this.$canvas);
|
|
|
|
|
|
}
|
|
|
start(){
|
|
|
this.$canvas.focus();
|
|
|
|
|
|
}
|
|
|
|
|
|
resize(){
|
|
|
this.ctx.canvas.width = this.playground.width;
|
|
|
this.ctx.canvas.height = this.playground.height;
|
|
|
this.ctx.fillStyle = "rgba(0,0,0)";
|
|
|
this.ctx.fillRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
|
|
|
|
|
|
}
|
|
|
update(){
|
|
|
this.render();
|
|
|
}
|
|
|
|
|
|
render(){
|
|
|
this.ctx.fillStyle = "rgba(0,0,0,0.2)";
|
|
|
this.ctx.fillRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
|
|
|
}
|
|
|
}
|
|
|
class NoticeBoard extends AcGameObject {
|
|
|
constructor(playground) {
|
|
|
super();
|
|
|
|
|
|
this.playground = playground;
|
|
|
this.ctx = this.playground.game_map.ctx;
|
|
|
this.text = "已就绪：0人";
|
|
|
}
|
|
|
|
|
|
start() {
|
|
|
}
|
|
|
|
|
|
write(text) {
|
|
|
this.text = text;
|
|
|
}
|
|
|
|
|
|
update() {
|
|
|
this.render();
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
this.ctx.font = "20px serif";
|
|
|
this.ctx.fillStyle = "white";
|
|
|
this.ctx.textAlign = "center";
|
|
|
this.ctx.fillText(this.text, this.playground.width / 2, 20);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class Particle extends AcGameObject{
|
|
|
constructor(playground,x,y,radius,vx,vy,color,speed,move_length){
|
|
|
super();
|
|
|
this.playground = playground;
|
|
|
this.x = x;
|
|
|
this.y = y;
|
|
|
this.radius = radius;
|
|
|
this.vx= vx;
|
|
|
this.vy = vy;
|
|
|
this.color = color;
|
|
|
this.speed = speed;
|
|
|
this.ctx = this.playground.game_map.ctx;
|
|
|
this.fraction = 0.9;
|
|
|
this.eps = 0.01;
|
|
|
this.move_length = move_length;
|
|
|
}
|
|
|
start(){
|
|
|
|
|
|
}
|
|
|
|
|
|
update(){
|
|
|
if(this.move_length< this.eps||this.speed< this.eps){
|
|
|
this.destroy();
|
|
|
return false;
|
|
|
|
|
|
}
|
|
|
let moved = Math.min(this.move_length,this.speed*this.timedelta/1000);
|
|
|
this.x += this.vx*moved;
|
|
|
this.y += this.vy*moved;
|
|
|
this.speed *= this.fraction;
|
|
|
this.move_length -= moved;
|
|
|
this.render();
|
|
|
}
|
|
|
|
|
|
render(){
|
|
|
let scale = this.playground.scale;
|
|
|
this.ctx.beginPath();
|
|
|
this.ctx.arc(this.x * scale,this.y * scale,this.radius * scale,0,Math.PI * 2,false);
|
|
|
this.ctx.fillStyle = this.color;
|
|
|
this.ctx.fill();
|
|
|
}
|
|
|
}
|
|
|
class Player extends AcGameObject {
|
|
|
constructor(playground, x, y, radius, color, speed, character, username, photo) {
|
|
|
super();
|
|
|
this.playground = playground;
|
|
|
this.ctx = this.playground.game_map.ctx;
|
|
|
this.x = x;
|
|
|
this.y = y;
|
|
|
this.vx = 0;
|
|
|
this.vy = 0;
|
|
|
this.damage_x = 0;
|
|
|
this.damage_y = 0;
|
|
|
this.damage_speed = 0;
|
|
|
this.move_length = 0;
|
|
|
this.radius = radius;
|
|
|
this.color = color;
|
|
|
this.speed = speed;
|
|
|
this.character = character;
|
|
|
this.username = username;
|
|
|
this.photo = photo;
|
|
|
this.eps = 0.01;
|
|
|
this.friction = 0.9;
|
|
|
this.spent_time = 0;
|
|
|
this.fireballs = [];
|
|
|
|
|
|
this.cur_skill = null;
|
|
|
|
|
|
if (this.character !== "robot") {
|
|
|
this.img = new Image();
|
|
|
this.img.src = this.photo;
|
|
|
}
|
|
|
|
|
|
if (this.character === "me") {
|
|
|
this.fireball_coldtime = 3; // 单位：秒
|
|
|
this.fireball_img = new Image();
|
|
|
this.fireball_img.src = "https://cdn.acwing.com/media/article/image/2021/12/02/1_9340c86053-fireball.png";
|
|
|
|
|
|
this.blink_coldtime = 5; // 单位：秒
|
|
|
this.blink_img = new Image();
|
|
|
this.blink_img.src = "https://cdn.acwing.com/media/article/image/2021/12/02/1_daccabdc53-blink.png";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
start() {
|
|
|
this.playground.player_count ++ ;
|
|
|
console.log(this.playground.player_count);
|
|
|
|
|
|
this.playground.notice_board.write("匹配中");
|
|
|
|
|
|
if (this.playground.player_count >= 3) {
|
|
|
this.playground.state = "fighting";
|
|
|
this.playground.notice_board.write("Fighting");
|
|
|
}
|
|
|
|
|
|
if (this.character === "me") {
|
|
|
this.add_listening_events();
|
|
|
} else if (this.character === "robot") {
|
|
|
let tx = Math.random() * this.playground.width / this.playground.scale;
|
|
|
let ty = Math.random() * this.playground.height / this.playground.scale;
|
|
|
this.move_to(tx, ty);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
add_listening_events() {
|
|
|
let outer = this;
|
|
|
this.playground.game_map.$canvas.on("contextmenu", function() {
|
|
|
return false;
|
|
|
});
|
|
|
this.playground.game_map.$canvas.mousedown(function(e) {
|
|
|
|
|
|
|
|
|
if (outer.playground.state !== "fighting")
|
|
|
return true;
|
|
|
|
|
|
const rect = outer.ctx.canvas.getBoundingClientRect();
|
|
|
if (e.which === 3) {
|
|
|
let tx = (e.clientX - rect.left) / outer.playground.scale;
|
|
|
let ty = (e.clientY - rect.top) / outer.playground.scale;
|
|
|
outer.move_to(tx, ty);
|
|
|
|
|
|
if (outer.playground.mode === "multi mode") {
|
|
|
outer.playground.mps.send_move_to(tx, ty);
|
|
|
}
|
|
|
} else if (e.which === 1) {
|
|
|
let tx = (e.clientX - rect.left) / outer.playground.scale;
|
|
|
let ty = (e.clientY - rect.top) / outer.playground.scale;
|
|
|
if (outer.cur_skill === "fireball") {
|
|
|
if (outer.fireball_coldtime > outer.eps)
|
|
|
return false;
|
|
|
|
|
|
let fireball = outer.shoot_fireball(tx, ty);
|
|
|
|
|
|
if (outer.playground.mode === "multi mode") {
|
|
|
outer.playground.mps.send_shoot_fireball(tx, ty, fireball.uuid);
|
|
|
}
|
|
|
} else if (outer.cur_skill === "blink") {
|
|
|
if (outer.blink_coldtime > outer.eps)
|
|
|
return false;
|
|
|
|
|
|
outer.blink(tx, ty);
|
|
|
|
|
|
if (outer.playground.mode === "multi mode") {
|
|
|
outer.playground.mps.send_blink(tx, ty);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
outer.cur_skill = null;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
this.playground.game_map.$canvas.keydown(function(e) {
|
|
|
console.log(e.which);
|
|
|
if(e.which === 13){
|
|
|
if(outer.playground.mode === "multi mode")
|
|
|
outer.playground.chat_field.show_input();//打开了聊天框
|
|
|
|
|
|
|
|
|
|
|
|
} else if (e.which === 27){
|
|
|
if(outer.playground.mode === "multi mode"){
|
|
|
outer.playground.chat_field.hide_input();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (outer.playground.state !== "fighting")
|
|
|
return true;
|
|
|
|
|
|
if (e.which === 81) { // q
|
|
|
if (outer.fireball_coldtime > outer.eps)
|
|
|
return true;
|
|
|
|
|
|
outer.cur_skill = "fireball";
|
|
|
return false;
|
|
|
} else if (e.which === 70) { // f
|
|
|
if (outer.blink_coldtime > outer.eps)
|
|
|
return true;
|
|
|
|
|
|
outer.cur_skill = "blink";
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
shoot_fireball(tx, ty) {
|
|
|
let x = this.x, y = this.y;
|
|
|
let radius = 0.01;
|
|
|
let angle = Math.atan2(ty - this.y, tx - this.x);
|
|
|
let vx = Math.cos(angle), vy = Math.sin(angle);
|
|
|
let color = "orange";
|
|
|
let speed = 0.5;
|
|
|
let move_length = 1;
|
|
|
let fireball = new FireBall(this.playground, this, x, y, radius, vx, vy, color, speed, move_length, 0.01);
|
|
|
this.fireballs.push(fireball);
|
|
|
|
|
|
this.fireball_coldtime = 3;
|
|
|
|
|
|
return fireball;
|
|
|
}
|
|
|
|
|
|
destroy_fireball(uuid) {
|
|
|
for (let i = 0; i < this.fireballs.length; i ++ ) {
|
|
|
let fireball = this.fireballs[i];
|
|
|
if (fireball.uuid === uuid) {
|
|
|
fireball.destroy();
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
blink(tx, ty) {
|
|
|
let d = this.get_dist(this.x, this.y, tx, ty);
|
|
|
d = Math.min(d, 0.8);
|
|
|
let angle = Math.atan2(ty - this.y, tx - this.x);
|
|
|
this.x += d * Math.cos(angle);
|
|
|
this.y += d * Math.sin(angle);
|
|
|
|
|
|
this.blink_coldtime = 5;
|
|
|
this.move_length = 0; // 闪现完停下来
|
|
|
}
|
|
|
|
|
|
get_dist(x1, y1, x2, y2) {
|
|
|
let dx = x1 - x2;
|
|
|
let dy = y1 - y2;
|
|
|
return Math.sqrt(dx * dx + dy * dy);
|
|
|
}
|
|
|
|
|
|
move_to(tx, ty) {
|
|
|
this.move_length = this.get_dist(this.x, this.y, tx, ty);
|
|
|
let angle = Math.atan2(ty - this.y, tx - this.x);
|
|
|
this.vx = Math.cos(angle);
|
|
|
this.vy = Math.sin(angle);
|
|
|
}
|
|
|
|
|
|
is_attacked(angle, damage) {
|
|
|
for (let i = 0; i < 20 + Math.random() * 10; i ++ ) {
|
|
|
let x = this.x, y = this.y;
|
|
|
let radius = this.radius * Math.random() * 0.1;
|
|
|
let angle = Math.PI * 2 * Math.random();
|
|
|
let vx = Math.cos(angle), vy = Math.sin(angle);
|
|
|
let color = this.color;
|
|
|
let speed = this.speed * 10;
|
|
|
let move_length = this.radius * Math.random() * 5;
|
|
|
new Particle(this.playground, x, y, radius, vx, vy, color, speed, move_length);
|
|
|
}
|
|
|
this.radius -= damage;
|
|
|
if (this.radius < this.eps) {
|
|
|
this.destroy();
|
|
|
return false;
|
|
|
}
|
|
|
this.damage_x = Math.cos(angle);
|
|
|
this.damage_y = Math.sin(angle);
|
|
|
this.damage_speed = damage * 100;
|
|
|
this.speed *= 0.8;
|
|
|
}
|
|
|
|
|
|
receive_attack(x, y, angle, damage, ball_uuid, attacker) {
|
|
|
attacker.destroy_fireball(ball_uuid);
|
|
|
this.x = x;
|
|
|
this.y = y;
|
|
|
this.is_attacked(angle, damage);
|
|
|
}
|
|
|
|
|
|
update() {
|
|
|
this.spent_time += this.timedelta / 1000;
|
|
|
this.update_win();
|
|
|
|
|
|
if (this.character === "me" && this.playground.state === "fighting") {
|
|
|
this.update_coldtime();
|
|
|
}
|
|
|
this.update_move();
|
|
|
|
|
|
this.render();
|
|
|
}
|
|
|
|
|
|
update_win(){
|
|
|
if(this.playground.state === "fighting" && this.character === "me" && this.playground.players.length === 1){
|
|
|
this.state = "over";
|
|
|
this.playground.score_board.win();
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
update_coldtime() {
|
|
|
this.fireball_coldtime -= this.timedelta / 1000;
|
|
|
this.fireball_coldtime = Math.max(this.fireball_coldtime, 0);
|
|
|
|
|
|
this.blink_coldtime -= this.timedelta / 1000;
|
|
|
this.blink_coldtime = Math.max(this.blink_coldtime, 0);
|
|
|
}
|
|
|
|
|
|
update_move() { // 更新玩家移动
|
|
|
if (this.character === "robot" && this.spent_time > 4 && Math.random() < 1 / 300.0) {
|
|
|
let player = this.playground.players[Math.floor(Math.random() * this.playground.players.length)];
|
|
|
let tx = player.x + player.speed * this.vx * this.timedelta / 1000 * 0.3;
|
|
|
let ty = player.y + player.speed * this.vy * this.timedelta / 1000 * 0.3;
|
|
|
this.shoot_fireball(tx, ty);
|
|
|
}
|
|
|
|
|
|
if (this.damage_speed > this.eps) {
|
|
|
this.vx = this.vy = 0;
|
|
|
this.move_length = 0;
|
|
|
this.x += this.damage_x * this.damage_speed * this.timedelta / 1000;
|
|
|
this.y += this.damage_y * this.damage_speed * this.timedelta / 1000;
|
|
|
this.damage_speed *= this.friction;
|
|
|
} else {
|
|
|
if (this.move_length < this.eps) {
|
|
|
this.move_length = 0;
|
|
|
this.vx = this.vy = 0;
|
|
|
if (this.character === "robot") {
|
|
|
let tx = Math.random() * this.playground.width / this.playground.scale;
|
|
|
let ty = Math.random() * this.playground.height / this.playground.scale;
|
|
|
this.move_to(tx, ty);
|
|
|
}
|
|
|
} else {
|
|
|
let moved = Math.min(this.move_length, this.speed * this.timedelta / 1000);
|
|
|
this.x += this.vx * moved;
|
|
|
this.y += this.vy * moved;
|
|
|
this.move_length -= moved;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
let scale = this.playground.scale;
|
|
|
if (this.character !== "robot") {
|
|
|
this.ctx.save();
|
|
|
this.ctx.beginPath();
|
|
|
this.ctx.arc(this.x * scale, this.y * scale, this.radius * scale, 0, Math.PI * 2, false);
|
|
|
this.ctx.stroke();
|
|
|
this.ctx.clip();
|
|
|
this.ctx.drawImage(this.img, (this.x - this.radius) * scale, (this.y - this.radius) * scale, this.radius * 2 * scale, this.radius * 2 * scale);
|
|
|
this.ctx.restore();
|
|
|
} else {
|
|
|
this.ctx.beginPath();
|
|
|
this.ctx.arc(this.x * scale, this.y * scale, this.radius * scale, 0, Math.PI * 2, false);
|
|
|
this.ctx.fillStyle = this.color;
|
|
|
this.ctx.fill();
|
|
|
}
|
|
|
|
|
|
if (this.character === "me" && this.playground.state === "fighting") {
|
|
|
this.render_skill_coldtime();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
render_skill_coldtime() {
|
|
|
let scale = this.playground.scale;
|
|
|
let x = 1.5, y = 0.9, r = 0.04;
|
|
|
|
|
|
this.ctx.save();
|
|
|
this.ctx.beginPath();
|
|
|
this.ctx.arc(x * scale, y * scale, r * scale, 0, Math.PI * 2, false);
|
|
|
this.ctx.stroke();
|
|
|
this.ctx.clip();
|
|
|
this.ctx.drawImage(this.fireball_img, (x - r) * scale, (y - r) * scale, r * 2 * scale, r * 2 * scale);
|
|
|
this.ctx.restore();
|
|
|
|
|
|
if (this.fireball_coldtime > 0) {
|
|
|
this.ctx.beginPath();
|
|
|
this.ctx.moveTo(x * scale, y * scale);
|
|
|
this.ctx.arc(x * scale, y * scale, r * scale, 0 - Math.PI / 2, Math.PI * 2 * (1 - this.fireball_coldtime / 3) - Math.PI / 2, true);
|
|
|
this.ctx.lineTo(x * scale, y * scale);
|
|
|
this.ctx.fillStyle = "rgba(0, 0, 255, 0.6)";
|
|
|
this.ctx.fill();
|
|
|
}
|
|
|
|
|
|
x = 1.62, y = 0.9, r = 0.04;
|
|
|
this.ctx.save();
|
|
|
this.ctx.beginPath();
|
|
|
this.ctx.arc(x * scale, y * scale, r * scale, 0, Math.PI * 2, false);
|
|
|
this.ctx.stroke();
|
|
|
this.ctx.clip();
|
|
|
this.ctx.drawImage(this.blink_img, (x - r) * scale, (y - r) * scale, r * 2 * scale, r * 2 * scale);
|
|
|
this.ctx.restore();
|
|
|
|
|
|
if (this.blink_coldtime > 0) {
|
|
|
this.ctx.beginPath();
|
|
|
this.ctx.moveTo(x * scale, y * scale);
|
|
|
this.ctx.arc(x * scale, y * scale, r * scale, 0 - Math.PI / 2, Math.PI * 2 * (1 - this.blink_coldtime / 5) - Math.PI / 2, true);
|
|
|
this.ctx.lineTo(x * scale, y * scale);
|
|
|
this.ctx.fillStyle = "rgba(0, 0, 255, 0.6)";
|
|
|
this.ctx.fill();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
on_destroy() {
|
|
|
if (this.character === "me"){
|
|
|
if(this.playground.state === "fighting"){
|
|
|
this.playground.state = "over";
|
|
|
this.playground.score_board.lose();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
for (let i = 0; i < this.playground.players.length; i ++ ) {
|
|
|
if (this.playground.players[i] === this) {
|
|
|
this.playground.players.splice(i, 1);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
class ScoreBoard extends AcGameObject {
|
|
|
constructor(playground) {
|
|
|
super();
|
|
|
this.playground = playground;
|
|
|
this.ctx = this.playground.game_map.ctx;
|
|
|
|
|
|
this.state = null; // win: 胜利，lose：失败
|
|
|
|
|
|
this.win_img = new Image();
|
|
|
this.win_img.src = "https://cdn.acwing.com/media/article/image/2021/12/17/1_8f58341a5e-win.png";
|
|
|
|
|
|
this.lose_img = new Image();
|
|
|
this.lose_img.src = "https://cdn.acwing.com/media/article/image/2021/12/17/1_9254b5f95e-lose.png";
|
|
|
}
|
|
|
|
|
|
start() {
|
|
|
}
|
|
|
|
|
|
add_listening_events() {
|
|
|
let outer = this;
|
|
|
if(this.playground.game_map === null)
|
|
|
return;
|
|
|
let $canvas = this.playground.game_map.$canvas;
|
|
|
|
|
|
$canvas.on('click', function() {
|
|
|
outer.playground.hide();
|
|
|
outer.playground.root.menu.show();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
win() {
|
|
|
this.state = "win";
|
|
|
|
|
|
let outer = this;
|
|
|
setTimeout(function() {
|
|
|
outer.add_listening_events();
|
|
|
}, 1000);
|
|
|
}
|
|
|
|
|
|
lose() {
|
|
|
this.state = "lose";
|
|
|
|
|
|
let outer = this;
|
|
|
setTimeout(function() {
|
|
|
outer.add_listening_events();
|
|
|
}, 1000);
|
|
|
}
|
|
|
|
|
|
late_update() {
|
|
|
this.render();
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
let len = this.playground.height / 2;
|
|
|
if (this.state === "win") {
|
|
|
this.ctx.drawImage(this.win_img, this.playground.width / 2 - len / 2, this.playground.height / 2 - len / 2, len, len);
|
|
|
} else if (this.state === "lose") {
|
|
|
this.ctx.drawImage(this.lose_img, this.playground.width / 2 - len / 2, this.playground.height / 2 - len / 2, len, len);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class FireBall extends AcGameObject {
|
|
|
constructor(playground,player,x,y,radius,vx,vy,color,speed,move_length,damage){
|
|
|
super();
|
|
|
this.playground=playground;
|
|
|
this.ctx = this.playground.game_map.ctx;
|
|
|
this.player = player;
|
|
|
this.x = x;
|
|
|
this.y = y;
|
|
|
this.radius = radius;
|
|
|
this.vx = vx;
|
|
|
this.vy = vy;
|
|
|
this.color = color;
|
|
|
this.speed = speed ;
|
|
|
this.move_length = move_length;
|
|
|
this.eps = 0.01;
|
|
|
this.damage = damage;
|
|
|
|
|
|
}
|
|
|
start(){
|
|
|
}
|
|
|
|
|
|
update(){
|
|
|
if(this.move_length < this.eps){
|
|
|
this.destroy();
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
this.update_move();
|
|
|
if(this.player.charactr !== "enemy"){
|
|
|
this.update_attack();
|
|
|
}
|
|
|
this.render();
|
|
|
}
|
|
|
update_move(){
|
|
|
let moved = Math.min(this.move_length,this.speed * this.timedelta / 1000);
|
|
|
this.x += this.vx * moved;
|
|
|
this.y += this.vy * moved;
|
|
|
this.move_length -= moved;
|
|
|
}
|
|
|
|
|
|
update_attack(){
|
|
|
for ( let i=0;i<this.playground.players.length; i++ ){
|
|
|
let player = this.playground.players[i];
|
|
|
|
|
|
if(this.player !== player && this.is_collision(player)){
|
|
|
this.attack(player);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
get_dist(x1,y1,x2,y2){
|
|
|
let dx= x1-x2;
|
|
|
let dy = y1-y2;
|
|
|
return Math.sqrt(dx*dx + dy*dy);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
is_collision(obj){
|
|
|
let distance = this.get_dist(this.x,this.y,obj.x,obj.y);
|
|
|
if(distance < this.radius + obj.radius)
|
|
|
return true;
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
|
|
|
attack(player){
|
|
|
let angle = Math.atan2(player.y - this.y,player.x-this.x);
|
|
|
|
|
|
player.is_attacked(angle,this.damage);
|
|
|
if (this.playground.mode === "multi mode"){
|
|
|
|
|
|
console.log(this.damage);
|
|
|
this.playground.mps.send_attack(player.uuid,player.x,player.y,angle,this.damage,this.uuid);
|
|
|
|
|
|
}
|
|
|
this.destroy();
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
render(){
|
|
|
let scale = this.playground.scale
|
|
|
this.ctx.beginPath();
|
|
|
this.ctx.arc(this.x * scale, this.y * scale, this.radius * scale, 0,
|
|
|
Math.PI * 2, false); this.ctx.fillStyle = this.color;
|
|
|
this.ctx.fill(); }
|
|
|
on_destroy() {
|
|
|
let fireballs = this.player.fireballs;
|
|
|
for(let i=0;i<fireballs.length;i++)
|
|
|
if(fireballs[i] === this){
|
|
|
fireballs.splice(i,1);
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
class MultiPlayerSocket {
|
|
|
constructor(playground) {
|
|
|
this.playground = playground;
|
|
|
|
|
|
this.ws = new WebSocket("wss://app6641.acapp.acwing.com.cn/wss/multiplayer/?token=" + playground.root.access);
|
|
|
|
|
|
this.start();
|
|
|
}
|
|
|
|
|
|
start() {
|
|
|
this.receive();
|
|
|
}
|
|
|
|
|
|
receive () {
|
|
|
let outer = this;
|
|
|
|
|
|
this.ws.onmessage = function(e) {
|
|
|
let data = JSON.parse(e.data);
|
|
|
let uuid = data.uuid;
|
|
|
if (uuid === outer.uuid) return false;
|
|
|
|
|
|
let event = data.event;
|
|
|
if (event === "create_player") {
|
|
|
outer.receive_create_player(uuid, data.username, data.photo);
|
|
|
} else if (event === "move_to") {
|
|
|
outer.receive_move_to(uuid, data.tx, data.ty);
|
|
|
} else if (event === "shoot_fireball") {
|
|
|
outer.receive_shoot_fireball(uuid, data.tx, data.ty, data.ball_uuid);
|
|
|
} else if (event === "attack") {
|
|
|
outer.receive_attack(uuid, data.attackee_uuid, data.x, data.y, data.angle, data.damage, data.ball_uuid);
|
|
|
} else if (event === "blink") {
|
|
|
outer.receive_blink(uuid, data.tx, data.ty);
|
|
|
} else if(event === "message"){
|
|
|
outer.receive_message(uuid,data.text);
|
|
|
|
|
|
}
|
|
|
};
|
|
|
}
|
|
|
|
|
|
send_create_player(username, photo) {
|
|
|
let outer = this;
|
|
|
this.ws.send(JSON.stringify({
|
|
|
'event': "create_player",
|
|
|
'uuid': outer.uuid,
|
|
|
'username': username,
|
|
|
'photo': photo,
|
|
|
}));
|
|
|
}
|
|
|
|
|
|
get_player(uuid) {
|
|
|
let players = this.playground.players;
|
|
|
for (let i = 0; i < players.length; i ++ ) {
|
|
|
let player = players[i];
|
|
|
if (player.uuid === uuid)
|
|
|
return player;
|
|
|
}
|
|
|
|
|
|
return null;
|
|
|
}
|
|
|
|
|
|
receive_create_player(uuid, username, photo) {
|
|
|
let player = new Player(
|
|
|
this.playground,
|
|
|
this.playground.width / 2 / this.playground.scale,
|
|
|
0.5,
|
|
|
0.05,
|
|
|
"white",
|
|
|
0.15,
|
|
|
"enemy",
|
|
|
username,
|
|
|
photo,
|
|
|
);
|
|
|
|
|
|
player.uuid = uuid;
|
|
|
this.playground.players.push(player);
|
|
|
}
|
|
|
|
|
|
send_move_to(tx, ty) {
|
|
|
let outer = this;
|
|
|
this.ws.send(JSON.stringify({
|
|
|
'event': "move_to",
|
|
|
'uuid': outer.uuid,
|
|
|
'tx': tx,
|
|
|
'ty': ty,
|
|
|
}));
|
|
|
}
|
|
|
|
|
|
receive_move_to(uuid, tx, ty) {
|
|
|
let player = this.get_player(uuid);
|
|
|
|
|
|
if (player) {
|
|
|
player.move_to(tx, ty);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
send_shoot_fireball(tx, ty, ball_uuid) {
|
|
|
let outer = this;
|
|
|
this.ws.send(JSON.stringify({
|
|
|
'event': "shoot_fireball",
|
|
|
'uuid': outer.uuid,
|
|
|
'tx': tx,
|
|
|
'ty': ty,
|
|
|
'ball_uuid': ball_uuid,
|
|
|
}));
|
|
|
}
|
|
|
|
|
|
receive_shoot_fireball(uuid, tx, ty, ball_uuid) {
|
|
|
let player = this.get_player(uuid);
|
|
|
if (player) {
|
|
|
let fireball = player.shoot_fireball(tx, ty);
|
|
|
fireball.uuid = ball_uuid;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
send_attack(attackee_uuid, x, y, angle, damage, ball_uuid) {
|
|
|
let outer = this;
|
|
|
this.ws.send(JSON.stringify({
|
|
|
'event': "attack",
|
|
|
'uuid': outer.uuid,
|
|
|
'attackee_uuid': attackee_uuid,
|
|
|
'x': x,
|
|
|
'y': y,
|
|
|
'angle': angle,
|
|
|
'damage': damage,
|
|
|
'ball_uuid': ball_uuid,
|
|
|
}));
|
|
|
}
|
|
|
|
|
|
receive_attack(uuid, attackee_uuid, x, y, angle, damage, ball_uuid) {
|
|
|
let attacker = this.get_player(uuid);
|
|
|
let attackee = this.get_player(attackee_uuid);
|
|
|
|
|
|
if (attacker && attackee) {
|
|
|
attackee.receive_attack(x, y, angle, damage, ball_uuid, attacker);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
send_blink(tx, ty) {
|
|
|
let outer = this;
|
|
|
this.ws.send(JSON.stringify({
|
|
|
'event': "blink",
|
|
|
'uuid': outer.uuid,
|
|
|
'tx': tx,
|
|
|
'ty': ty,
|
|
|
}));
|
|
|
}
|
|
|
|
|
|
receive_blink(uuid, tx, ty) {
|
|
|
let player = this.get_player(uuid);
|
|
|
if (player) {
|
|
|
player.blink(tx, ty);
|
|
|
}
|
|
|
}
|
|
|
send_message(text){
|
|
|
|
|
|
let outer = this;
|
|
|
this.ws.send(JSON.stringify({
|
|
|
'event':"message",
|
|
|
'uuid':outer.uuid,
|
|
|
'text':text,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}));
|
|
|
|
|
|
}
|
|
|
receive_message(uuid,text){
|
|
|
let player = this.get_player(uuid);
|
|
|
if(player){
|
|
|
player.playground.chat_field.add_message(player.username,text);
|
|
|
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class AcGamePlayground {
|
|
|
constructor(root){
|
|
|
this.root=root;
|
|
|
this.$playground = $(`<div class="ac-game-playground"></div>`);
|
|
|
this.hide();
|
|
|
|
|
|
this.root.$ac_game.append(this.$playground);
|
|
|
this.start();
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
get_random_color(){
|
|
|
let colors = ["blue","red","green","pink","grey"];
|
|
|
return colors[Math.floor(Math.random()*5)];
|
|
|
}
|
|
|
|
|
|
start(){
|
|
|
let outer=this;
|
|
|
let uuid = this.create_uuid();
|
|
|
|
|
|
$(window).on(`resize.${uuid}`,function(){
|
|
|
outer.resize();
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
if(this.root.AcWingOS){
|
|
|
this.root.AcWingOS.api.window.on_close(function(){
|
|
|
$(window).off(`resize.${uuid}`);
|
|
|
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
create_uuid() {
|
|
|
let res = "";
|
|
|
for(let i = 0;i < 8 ; i++){
|
|
|
let x = parseInt(Math.floor(Math.random()*10));
|
|
|
res += x;
|
|
|
}
|
|
|
return res;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
resize(){
|
|
|
this.width = this.$playground.width();
|
|
|
this.height = this.$playground.height();
|
|
|
this.unit= Math.min(this.width/16,this.height/9);
|
|
|
this.width = this.unit * 16;
|
|
|
this.height = this.unit*9;
|
|
|
this.scale = this.height;
|
|
|
if(this.game_map)this.game_map.resize();
|
|
|
}
|
|
|
|
|
|
|
|
|
update(){
|
|
|
|
|
|
}
|
|
|
|
|
|
show(mode){
|
|
|
let outer = this;
|
|
|
this.$playground.show();
|
|
|
this.$playground.resize();
|
|
|
this.width= this.$playground.width();
|
|
|
this.height = this.$playground.height();
|
|
|
this.game_map = new GameMap(this);
|
|
|
this.resize();
|
|
|
this.players = [];
|
|
|
this.players.push(new Player(this,this.width/2/this.scale,0.5,0.05,"white",0.15,"me",this.root.settings.username,this.root.settings.photo));
|
|
|
this.mode = mode;
|
|
|
this.state = "waiting";
|
|
|
this.notice_board = new NoticeBoard(this);
|
|
|
this.score_board = new ScoreBoard(this);
|
|
|
this.player_count = 0;
|
|
|
|
|
|
if(mode === "single mode")
|
|
|
for (let i = 0; i < 5; i ++ ) {
|
|
|
this.players.push(new Player(this, this.width / 2/this.scale, 0.5, 0.05, this.get_random_color(), 0.15, "robot"));
|
|
|
} else if(mode === "multi mode"){
|
|
|
this.chat_field = new ChatField(this);
|
|
|
|
|
|
this.mps = new MultiPlayerSocket(this);
|
|
|
this.mps.uuid = this.players[0].uuid;
|
|
|
this.mps.ws.onopen = function(){
|
|
|
outer.mps.send_create_player(outer.root.settings.username,outer.root.settings.photo);
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
hide(){
|
|
|
|
|
|
while(this.players && this.players.length > 0){
|
|
|
this.players[0].destroy();
|
|
|
|
|
|
}
|
|
|
|
|
|
if(this.game_map){
|
|
|
this.game_map.destroy();
|
|
|
this.game_map = null;
|
|
|
|
|
|
}
|
|
|
|
|
|
if(this.notice_board){
|
|
|
this.notice_board.destroy();
|
|
|
this.notice_board = null;
|
|
|
|
|
|
|
|
|
}
|
|
|
if(this.score_board){
|
|
|
this.score_board.destroy();
|
|
|
this.score_board = null;
|
|
|
|
|
|
}
|
|
|
|
|
|
this.$playground.empty();
|
|
|
|
|
|
|
|
|
|
|
|
this.$playground.hide();
|
|
|
}
|
|
|
}
|
|
|
class Settings{
|
|
|
constructor(root){
|
|
|
this.root = root;
|
|
|
this.platform = "WEB";
|
|
|
if(this.root.AcWingOS) this.platform = "ACAPP";
|
|
|
this.username = "";
|
|
|
this.photo = "https://cdn.acwing.com/media/user/profile/photo/355448_sm_2015d90652.jpg";
|
|
|
this.$settings = $(`
|
|
|
<div class="ac-game-settings">
|
|
|
<div class="ac-game-settings-login">
|
|
|
<div class="ac-game-settings-title">
|
|
|
登录
|
|
|
</div>
|
|
|
<div class="ac-game-settings-username">
|
|
|
<div class="ac-game-settings-item">
|
|
|
<input type="text" placeholder="用户名">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ac-game-settings-password">
|
|
|
<div class="ac-game-settings-item">
|
|
|
<input type="password" placeholder="密码">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ac-game-settings-submit">
|
|
|
<div class="ac-game-settings-item">
|
|
|
<button>登录</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ac-game-settings-error-message">
|
|
|
</div>
|
|
|
<br>
|
|
|
<br>
|
|
|
<div class="ac-game-settings-option">
|
|
|
注册
|
|
|
</div>
|
|
|
<br>
|
|
|
<div class="ac-game-settings-acwing">
|
|
|
<img width="30" src="https://app165.acapp.acwing.com.cn/static/image/settings/acwing_logo.png">
|
|
|
<br>
|
|
|
<br>
|
|
|
<div>
|
|
|
AcWing一键登录
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ac-game-settings-register">
|
|
|
<div class="ac-game-settings-title">
|
|
|
注册
|
|
|
</div>
|
|
|
<div class="ac-game-settings-username">
|
|
|
<div class="ac-game-settings-item">
|
|
|
<input type="text" placeholder="用户名">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ac-game-settings-password ac-game-settings-password-first">
|
|
|
<div class="ac-game-settings-item">
|
|
|
<input type="password" placeholder="密码">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ac-game-settings-password ac-game-settings-password-second">
|
|
|
<div class="ac-game-settings-item">
|
|
|
<input type="password" placeholder="确认密码">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ac-game-settings-submit">
|
|
|
<div class="ac-game-settings-item">
|
|
|
<button>注册</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ac-game-settings-error-message">
|
|
|
</div>
|
|
|
<br>
|
|
|
<br>
|
|
|
<div class="ac-game-settings-option">
|
|
|
登录
|
|
|
</div>
|
|
|
<div class="ac-game-settings-acwing">
|
|
|
<img width="30" src="https://app165.acapp.acwing.com.cn/static/image/settings/acwing_logo.png">
|
|
|
<br>
|
|
|
<br>
|
|
|
<div>
|
|
|
AcWing一键登录
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
`);
|
|
|
this.$login = this.$settings.find(".ac-game-settings-login");
|
|
|
this.$login_username = this.$login.find(".ac-game-settings-username input");
|
|
|
this.$login_password = this.$login.find(".ac-game-settings-password input");
|
|
|
this.$login_submit = this.$login.find(".ac-game-settings-submit button");
|
|
|
this.$login_error_message = this.$login.find(".ac-game-settings-error-message");
|
|
|
this.$login_register = this.$login.find(".ac-game-settings-option");
|
|
|
|
|
|
this.$login.hide();
|
|
|
|
|
|
this.$register = this.$settings.find(".ac-game-settings-register");
|
|
|
this.$register_username = this.$register.find(".ac-game-settings-username input");
|
|
|
this.$register_password = this.$register.find(".ac-game-settings-password-first input");
|
|
|
this.$register_password_confirm = this.$register.find(".ac-game-settings-password-second input");
|
|
|
this.$register_submit = this.$register.find(".ac-game-settings-submit button");
|
|
|
this.$register_error_message = this.$register.find(".ac-game-settings-error-message");
|
|
|
this.$register_login = this.$register.find(".ac-game-settings-option");
|
|
|
|
|
|
|
|
|
this.$register.hide();
|
|
|
this.$acwing_login = this.$settings.find(".ac-game-settings-acwing img");
|
|
|
|
|
|
this.root.$ac_game.append(this.$settings);
|
|
|
this.start();
|
|
|
}
|
|
|
start(){
|
|
|
if (this.platform === "ACAPP"){
|
|
|
this.getinfo_acapp();
|
|
|
|
|
|
}else{
|
|
|
if(this.root.access){
|
|
|
this.getinfo_web();
|
|
|
this.refresh_jwt_token();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.login();
|
|
|
|
|
|
}
|
|
|
|
|
|
this.add_listening_events();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
refresh_jwt_token(){
|
|
|
setInterval(() => {
|
|
|
$.ajax({
|
|
|
url:"https://app6641.acapp.acwing.com.cn/settings/token/refresh/",
|
|
|
type:"post",
|
|
|
data:{
|
|
|
refresh:this.root.refresh,
|
|
|
},
|
|
|
success: resp => {
|
|
|
this.root.access = resp.access;
|
|
|
|
|
|
}
|
|
|
});
|
|
|
},4.5*60*1000);
|
|
|
|
|
|
setTimeout(() => {
|
|
|
$.ajax({
|
|
|
url:"https://app6641.acapp.acwing.com.cn/settings/ranklist/",
|
|
|
type:"GET",
|
|
|
headers:{
|
|
|
'Authorization': "Bearer "+ this.root.access,
|
|
|
|
|
|
},
|
|
|
success: resp => {
|
|
|
console.log(resp);
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},5000);
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
add_listening_events(){
|
|
|
let outer = this;
|
|
|
this.add_listening_events_login();
|
|
|
this.add_listening_events_register();
|
|
|
this.$acwing_login.click(function(){
|
|
|
outer.acwing_login();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
add_listening_events_login(){
|
|
|
let outer =this;
|
|
|
this.$login_register.click(function(){
|
|
|
outer.register();
|
|
|
});
|
|
|
this.$login_submit.click(function(){
|
|
|
outer.login_on_remote();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
add_listening_events_register(){
|
|
|
let outer = this;
|
|
|
this.$register_login.click(function(){
|
|
|
outer.login();
|
|
|
});
|
|
|
this.$register_submit.click(function() {
|
|
|
outer.register_on_remote();
|
|
|
});
|
|
|
|
|
|
|
|
|
}
|
|
|
acwing_login() {
|
|
|
$.ajax({
|
|
|
url: "https://app6641.acapp.acwing.com.cn/settings/acwing/web/apply_code/",
|
|
|
type: "GET",
|
|
|
success: function(resp) {
|
|
|
if (resp.result === "success") {
|
|
|
window.location.replace(resp.apply_code_url);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
login_on_remote(username , password) {
|
|
|
let outer = this;
|
|
|
username = username || this.$login_username.val();
|
|
|
password = password || this.$login_password.val();
|
|
|
this.$login_error_message.empty();
|
|
|
|
|
|
$.ajax({
|
|
|
url: "https://app6641.acapp.acwing.com.cn/settings/token/",
|
|
|
type: "post",
|
|
|
data: {
|
|
|
username: username,
|
|
|
password: password,
|
|
|
|
|
|
},
|
|
|
success: resp =>{
|
|
|
|
|
|
|
|
|
this.root.access = resp.access;
|
|
|
this.root.refresh = resp.refresh;
|
|
|
this.refresh_jwt_token();
|
|
|
|
|
|
this.getinfo_web();
|
|
|
|
|
|
},
|
|
|
error:() => {
|
|
|
this.$login_error_message.html("用户名密码错误");
|
|
|
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
register_on_remote(){
|
|
|
let outer = this;
|
|
|
let username = this.$register_username.val();
|
|
|
let password = this.$register_password.val();
|
|
|
let password_confirm = this.$register_password_confirm.val();
|
|
|
this.$register_error_message.empty();
|
|
|
|
|
|
$.ajax({
|
|
|
url: "https://app6641.acapp.acwing.com.cn/settings/register/",
|
|
|
type: "POST",
|
|
|
data: {
|
|
|
username: username,
|
|
|
password: password,
|
|
|
password_confirm:password_confirm,
|
|
|
|
|
|
},
|
|
|
success: resp =>{
|
|
|
if(resp.result === "success"){
|
|
|
this.login_on_remote(username,password);
|
|
|
|
|
|
} else {
|
|
|
this.$register_error_message.html(resp.result);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
logout_on_remote(){
|
|
|
if(this.platform === "ACAPP") {
|
|
|
this.root.AcWingOS.api.window.close();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.root.access = "";
|
|
|
this.root.refresh = "";
|
|
|
location.href = "/";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
login(){//打开登陆界面
|
|
|
this.$register.hide();
|
|
|
this.$login.show();
|
|
|
}
|
|
|
|
|
|
|
|
|
register(){// 打开注册界面
|
|
|
this.$login.hide();
|
|
|
this.$register.show();
|
|
|
|
|
|
}
|
|
|
|
|
|
acapp_login(appid, redirect_uri, scope, state) {
|
|
|
let outer = this;
|
|
|
|
|
|
this.root.AcWingOS.api.oauth2.authorize(appid, redirect_uri, scope, state, function(resp) {
|
|
|
if (resp.result === "success") {
|
|
|
outer.username = resp.username;
|
|
|
outer.photo = resp.photo;
|
|
|
outer.hide();
|
|
|
outer.root.menu.show();
|
|
|
outer.root.access = resp.access;
|
|
|
outer.root.refresh = resp.refresh;
|
|
|
outer.refresh_jwt_token();
|
|
|
|
|
|
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
getinfo_acapp(){
|
|
|
let outer = this;
|
|
|
$.ajax({
|
|
|
url: "https://app6641.acapp.acwing.com.cn/settings/acwing/acapp/receive_code/",
|
|
|
type:"GET",
|
|
|
success: function(resp){
|
|
|
if(resp.result === "success"){
|
|
|
outer.acapp_login(resp.appid,resp.redirect_uri,resp.scope,resp.state);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
getinfo_acapp() {
|
|
|
let outer = this;
|
|
|
|
|
|
$.ajax({
|
|
|
url: "https://app6641.acapp.acwing.com.cn/settings/acwing/acapp/apply_code/",
|
|
|
type: "GET",
|
|
|
success: function(resp) {
|
|
|
if (resp.result === "success") {
|
|
|
outer.acapp_login(resp.appid, resp.redirect_uri, resp.scope, resp.state);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getinfo_web(){
|
|
|
let outer = this;
|
|
|
$.ajax({
|
|
|
url:"https://app6641.acapp.acwing.com.cn/settings/getinfo/",
|
|
|
type:"get",
|
|
|
data:{
|
|
|
platform:outer.platform,
|
|
|
|
|
|
},
|
|
|
headers:{
|
|
|
'authorization':"Bearer "+this.root.access,
|
|
|
|
|
|
},
|
|
|
success:function(resp){
|
|
|
console.log(resp);
|
|
|
if(resp.result === "success"){
|
|
|
outer.username = resp.username;
|
|
|
outer.photo = resp.photo;
|
|
|
outer.hide();
|
|
|
outer.root.menu.show();
|
|
|
} else {
|
|
|
outer.login();
|
|
|
|
|
|
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
hide(){
|
|
|
this.$settings.hide();
|
|
|
}
|
|
|
|
|
|
show(){
|
|
|
this.$settings.show();
|
|
|
}
|
|
|
|
|
|
}
|
|
|
export class AcGame {
|
|
|
constructor(id, AcWingOS, access, refresh) {
|
|
|
this.id = id;
|
|
|
this.$ac_game = $('#' + id);
|
|
|
this.AcWingOS = AcWingOS;
|
|
|
this.access = access;
|
|
|
this.refresh = refresh;
|
|
|
|
|
|
this.settings = new Settings(this);
|
|
|
this.menu = new AcGameMenu(this);
|
|
|
this.playground = new AcGamePlayground(this);
|
|
|
|
|
|
this.start();
|
|
|
}
|
|
|
|
|
|
start() {
|
|
|
}
|
|
|
}
|
|
|
|
