async function load_hit_order(url) {
try {
const response = await fetch(url);
const data = await response.text();
console.log(data);
/*const data_after_mid = data.split("\r\n");
var data_after_end;
data_after_end = data_after_mid[0]
for(var i=1; i<data_after_mid.length;i++)
{
data_after_end = data_after_end.concat(","+data_after_mid[i]);
}
*/
seq_load[url]=data.split("\r\n");
//注意單純上面這行這個寫法
//在載入多個文字檔時會有問題
//但基本上我們可以利用seq_load[http://localhost/hit_order_1.txt]
//可以定位出要載入的文件要對應到哪個陣列索引
//所以我們要載入的文件名稱,最好具有數值上的順序
console.log(seq_load);
const regex = new RegExp(/\t/g);
for(var i=0; i<seq_load[url].length; i++)
{
if(regex.test(seq_load[url][i]))
{
regex.lastIndex=0;
seq_load[url][i] = seq_load[url][i].replace(/\t/g, "");
}
}
const regex_png = new RegExp(/.png/g);
for(var i=0; i<seq_load[url].length; i++)
{
if(regex_png.test(seq_load[url][i]))
{
regex.lastIndex=0;
seq_load[url][i] = seq_load[url][i].replace(/.png/g, "");
}
}
seq_load[url] = seq_load[url].filter(item => item)
console.log(seq_load[url]);
for(var i=0; i<seq_load[url].length; i++)
{
document.write(seq_load[url][i]);
document.write("<br>");
}
} catch (err) {
console.error(err);
}
}
load_hit_order("http://localhost:5173/祝福_文字敘述.txt");
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<html lang="zh-Hant" type="text/html; charset=UTF-8">
<title>仿星穹鐵道─模擬宇宙</title>
<body>
<script src="jquery-3.7.1.js" type="application/javascript" ></script>
<canvas id="myCanvas" width="1600" height="900"></canvas>
<script type="application/javascript" charset="UTF-8">
async function loadFileAndPrintToConsole(url) {
try {
const response = await fetch(url);
const data = await response.text();
console.log(data);
} catch (err) {
console.error(err);
}
}
var our_hit_order=[];
var seq_load=[];
async function load_hit_order(url) {
try {
const response = await fetch(url);
const data = await response.text();
console.log(data);
/*const data_after_mid = data.split("\r\n");
var data_after_end;
data_after_end = data_after_mid[0]
for(var i=1; i<data_after_mid.length;i++)
{
data_after_end = data_after_end.concat(","+data_after_mid[i]);
}
*/
seq_load[url]=data.split(",");
our_hit_order[0]=seq_load[url];
//注意單純上面這行這個寫法
//在載入多個文字檔時會有問題
//但基本上我們可以利用seq_load[http://localhost/hit_order_1.txt]
//可以定位出要載入的文件要對應到哪個陣列索引
//所以我們要載入的文件名稱,最好具有數值上的順序
console.log(seq_load);
} catch (err) {
console.error(err);
}
}
var c=document.getElementById("myCanvas");
var canvas_2 = document.createElement("canvas");
//canvas_2不顯示在網頁上,它用於處理非同步圖片載入順序
canvas_2.setAttribute("height",300);
canvas_2.setAttribute("width",300);
//var ctx=c.getContext("2d");
var ctx =c.getContext("2d", { willReadFrequently: true })
var ctx_2 =canvas_2.getContext("2d", { willReadFrequently: true })
ctx.fillStyle="#FFFFFF";
ctx.fillStyle="#000000";
var cell_width = 100;
var cell_height = 96;
var battle_option = new temp_design("戰鬥","battle.png",200,50,3,127,196);
var event_option = new temp_design("事件","event.png",400,50,3,127,220);
var bless_option = new temp_design("祝福","single_bless.png",30,200,3,290,432);
//戰鬥圖檔寬高 127 196
//事件圖檔寬高 127 220
var elements = [];
elements.push(battle_option,event_option,bless_option);
function temp_design(id,img,left,top,zIndex,width,height)
{
this.id=id;
//this.image = img;
this.image = new Image();
this.image.src=img;
var self=this;
this.image.onload = function(){self.draw_flag=true; re_draw();}
this.left= left;
this.top= top;
this.zIndex = zIndex;
this.width=width;
this.height=height;
this.draw_flag = false;
$(c).on('handleClick', function(e, mouse) {
console.dir(mouse);
if (self.left < mouse.x &&
self.left + self.width > mouse.x &&
self.top < mouse.y &&
self.top + self.height > mouse.y) {
self.draw_flag = false;
ctx.clearRect(0,0,c.width,c.height);
ctx.fillStyle = "#000000";
ctx.fillText("選擇了"+self.id,300,120);
ctx.font = "20px 標楷體";
if(self.id == "戰鬥")
{
ctx.fillText("戰鬥勝利,請選擇祝福",270,160);
ctx.drawImage(elements[2].image,elements[2].left, elements[2].top,290,432);
ctx.drawImage(elements[2].image,elements[2].left+320, elements[2].top,290,432);
ctx.drawImage(elements[2].image,elements[2].left+640, elements[2].top,290,432);
}
else if(self.id == "事件")
{
ctx.fillText("尼爾底斯牌",320,260);
}
}
});
}
//目前生效的祝福
//就目前遊戲來看,已擁有的祝福就是已生效的祝福
//暫時還沒把生效的祝福無效化的可能性出現
//所以其實就是記錄單局擁有的祝福這樣
var bless_list=[]; //記錄祝福
for(i=0;i<9;i++)
{
bless_list[i]=[];
}
// 0 存護
// 1 記憶
// 2 虛無
// 3 豐饒
// 4 巡獵
// 5 毀滅
// 6 歡愉
// 7 繁育
// 8 智識
// 8個基本祝福 4個2星祝福 3個衍伸2星祝福 3個三星祝福
// 4個命途迴響 2個蝗災迴響交錯 2個黃金與機械回響交錯
// 除去智識外都最高有26個祝福
// 但正常遊戲模式下,單一命途頂多拿24個祝福,因為兩個DLC的迴響不會同時在同局出現
var miracles_list=[]; //記錄奇物
var ability_tree=[]; //記錄技能樹有哪些選項生效
var room_id = 1;
function re_draw()
{
num=0;
ctx.clearRect(0,0,c.width,c.height);
ctx.fillStyle = "#000000";
ctx.fillText("房間"+ room_id , 300 , 20);
ctx.font = "20px 標楷體";
elements.forEach(function(element) {
if(element.draw_flag && num < 2)
{
ctx.drawImage(element.image,element.left, element.top,cell_width,cell_width);
num++;
}
});
}
$(c).on('click', function(e) {
var mouse= {
x: e.pageX - c.offsetLeft,
y: e.pageY - c.offsetTop
}
//fire off synthetic event containing mouse coordinate info
$(c).trigger('handleClick', [mouse]);
});
</script>
</body>
</html>
創作內容
5/4~,仿星穹鐵道─模擬宇宙,現階段戰鬥跳過,因為戰鬥系統還沒做或說沒仿
單機版網頁遊戲系列相關 (20)
