創作內容

2 GP

7/14,《離心力》小說中提到的程式(HTML檔)初版,日後有進展的話會另外再發篇文章

作者：李兒諳│2021-07-14 15:19:40│巴幣：4│人氣：109
效果
以下分隔線(-------跟------之間的區塊)內複製到記事本(Notepad.exe)
並存檔,存檔類型改為所有檔案
存成 XXXXXXXX.html即可
編碼類型建議選UTF-8,雖然在本程式中不改應該也不至於顯示錯誤

若稍微修改下程式可以達到放著自動打的效果
這部份可自行嘗試,真的不行的話再留言要我更新參考解答
之所以不做放著自動打的原因就是動畫效果顯示可能不是很理想
需要費工進行微調
------------------------------------------------------------------------------------
<!DOCTYPE>
<meta charset="utf-8">
<html>
<head>
</head>

<body>
<canvas id="canvas" width="1260" height="720" ></canvas>
<script>

var canvas_element = document.getElementById("canvas");
var ctx=canvas_element.getContext("2d");
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0, 0, canvas_element.width, canvas_element.height);

var timer = setInterval(re_draw,150);

var my_hp=100;
var my_attack=10;
var enemy_hp=200;
var enemy_attack=3;

var repeat_time=0;

var attack_flag=false;

function re_draw()
{

ctx.fillStyle="#FFFFFF";
ctx.fillRect(0, 0, canvas_element.width, canvas_element.height);



        ctx.font="40px 標楷體";
ctx.fillStyle="#000000";
        ctx.fillText("按Z鍵攻擊",40,50);
ctx.fillStyle="#16A951";
        ctx.fillText("HP:"+my_hp,100,100);
        

    ctx.fillStyle="#0000FF";
    ctx.fillText("HP:"+enemy_hp,700,100);

        if(attack_flag)
        {
ctx.fillStyle="#FF0000";
ctx.fillText("-"+enemy_attack,250,100+repeat_time*20);        ctx.fillText("-"+my_attack,850,100+repeat_time*20);
repeat_time++;
            if(repeat_time>=8)
            {
                repeat_time=0;
                attack_flag=false;
            }
    
        }
ctx.fillStyle="#000000";
        if(my_hp <= 0)
        {
            ctx.fillText("Lose",500,300)
        }

        if(enemy_hp <= 0)
        {
            ctx.fillText("Win",500,300);
        }
}

document.addEventListener("keydown",battle,false);

function battle(e)
{
    if(e.keyCode == 90) //按下z或Z鍵
    {
        attack_flag=true;
        repeat_time=0;
        my_hp -= enemy_attack;
        enemy_hp -= my_attack;
        if(my_hp <= 0 || enemy_hp <= 0)
        {
            document.removeEventListener("keydown",battle,false);
        }
    }
}

</script>
</body>
</html>
------------------------------------------------------------------------------------

檔案二,SRPG的六角形地圖(未完成,目前程式儲存方面還沒整理好,數值是將就於顯示的)
目前效果:可點擊六角格中心後填色表示有按到
該檔案需要jquery-3.5.1.js在同個目錄底下
在此下載或另存新檔

同樣是將以下分隔線(*****跟*****之間的區塊)內複製到記事本(Notepad.exe)
並存檔,存檔類型改為所有檔案
存成 XXXXXXXX.html即可

成果參考圖:

***********************************************************************
<!DOCTYPE>
<meta charset="utf-8">
<html>
<head>
</head>

<body>

<canvas id="canvas" width="1260" height="720" ></canvas>
<div id="div_test"></div>
<script src="jquery-3.5.1.js"></script>
<script>

var canvas_element = document.getElementById("canvas");
var ctx=canvas_element.getContext("2d");
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0, 0, 800, 600);

var grid_flag = true;
var fill_flag = false;
var cell_width = 20;
var hit_flag = "";
var distance = 1;

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;}
    
    this.left= left;
    this.top= top;
    this.zIndex = zIndex;
    this.width=width;
    this.height=height;
    this.draw_flag = false;
    
    $(canvas_element).on('handleClick', function(e, mouse) {

        if (self.left < mouse.x &&
            self.left + self.width > mouse.x &&
            self.top < mouse.y &&
            self.top + self.height > mouse.y) {
            hit_flag = self.id;
            ctx.fillStyle="green";
            ctx.fillRect(self.left,self.top,cell_width,cell_width*2);
    
            
        }
    });
}

var elements = [];
var pixel_cell = [];
    
var pixel_page_content = [];

for(var i=0;i<800/cell_width;i++)
{
    pixel_page_content[i] = [];
    pixel_cell[i] = [];

    for(var j=0;j<600/cell_width;j++)
    {
        pixel_page_content[i][j] = 0;
        pixel_cell[i][j] = 0;
    }
}
    
for(var i=0;i<canvas_element.height/cell_width;i+=2)
{
    for(var j=0;j<canvas_element.width/cell_width;j+=4)
    {
        pixel_cell[i][j] = new temp_design(i+","+j,"water_wave_1.png",(j+1)*cell_width,i*cell_width,0,cell_width,cell_width*2);
        elements.push(pixel_cell[i][j]);
    }
}

for(var i=1;i<canvas_element.height/cell_width;i+=2)
{
    for(var j=1;j<canvas_element.width/cell_width;j+=4)
    {
        pixel_cell[i][j] = new temp_design(i+","+j,"water_wave_1.png",(j+2)*cell_width,i*cell_width,0,cell_width,cell_width*2);
        elements.push(pixel_cell[i][j]);
    }
}

console.dir(pixel_cell);

var timer = setInterval(re_draw,150);
var tempX;
var tempY;

document.addEventListener("keydown",one_key_destory,false);

$(canvas_element).on('click', function(e) {

    var mouse= {
        x: e.pageX - canvas_element.offsetLeft,
        y: e.pageY - canvas_element.offsetTop
    }

tempX=mouse.x;
tempY=mouse.y;
         
    $(canvas_element).trigger('handleClick', [mouse]);
});

var repeat_time=0;

function re_draw()
{
    repeat_time++;
    grid_related();
    div_test.innerHTML = tempX+ "," +tempY + "," + grid_flag;
    
    ctx.fillStyle = "#000000";

    elements.forEach(function(element) {
        if(element.draw_flag)
        {
            //ctx.drawImage(element.image,(repeat_time%2)*60,0,60,40,element.left, element.top,cell_width,cell_width);
        }
    });
}

function grid_related()
{
    if(grid_flag)
    {
        if(!fill_flag)
        {
         ctx.fillStyle = "white";
         ctx.fillRect(0,0,canvas_element.width,canvas_element.height);
        
         for(var i=1;i<canvas_element.width/cell_width;i+=4)
         {
            for(var j=0;j<canvas_element.height/cell_width;j+=2)
            {
                //ctx.fillStyle = "green";
                ctx.strokeStyle = "#009900";
        
                ctx.moveTo(i*cell_width,j*cell_width);
                ctx.lineTo((i+1)*cell_width,j*cell_width);
                ctx.lineTo((i+2)*cell_width,(j+1)*cell_width);
                ctx.lineTo((i+1)*cell_width,(j+2)*cell_width);
                ctx.lineTo(i*cell_width,(j+2)*cell_width);
                ctx.lineTo((i-1)*cell_width,(j+1)*cell_width);
                //ctx.lineTo(i*cell_width,j*cell_width);
                ctx.closePath();
                ctx.stroke();
                /*ctx.font="20px 新細明體";
                ctx.fillStyle = "green";
                ctx.fillText(i+" "+j,(i+1)*cell_width,(j+1)*cell_width);*/
            }
         }

        for(var i=3;i<canvas_element.width/cell_width;i+=4)
         {
            for(var j=1;j<canvas_element.height/cell_width;j+=2)
            {
                //ctx.fillStyle = "green";
                ctx.strokeStyle = "#009900";
        
                ctx.moveTo(i*cell_width,j*cell_width);
                ctx.lineTo((i+1)*cell_width,j*cell_width);
                ctx.lineTo((i+2)*cell_width,(j+1)*cell_width);
                ctx.lineTo((i+1)*cell_width,(j+2)*cell_width);
                ctx.lineTo(i*cell_width,(j+2)*cell_width);
                ctx.lineTo((i-1)*cell_width,(j+1)*cell_width);
                //ctx.lineTo(i*cell_width,j*cell_width);
                ctx.closePath();
                ctx.stroke();
/*ctx.font="20px 新細明體";
                ctx.fillStyle = "green";
                ctx.fillText(i+" "+j,(i+1)*cell_width,(j+1)*cell_width);*/
            }
         }
        
            fill_flag = true;
        }
    }
    else
    {
        
        /*
        ctx.fillStyle = "white";
        ctx.fillRect(0,0,800,600);
        
        fill_flag = false;
        */
    }
}

function one_key_destory(e)
{
    if(e.keyCode == 71) //按下g或G鍵
    {
        grid_flag = !grid_flag;
    }
}
</script>
</body>
</html>

***********************************************************************
喜歡2 收藏 引用 留言 推上首頁 檢舉
引用網址：https://home.gamer.com.tw/TrackBack.php?sn=5207958
All rights reserved. 版權所有，保留一切權利

相關創作
繪圖風格歷史進程圖
【yotoo】240424
保守派智庫在舉辦了一場關於外交優先次序的辯論
希望的力量~ 成年光之美少女+數碼獸'23~
【CPE】2024/04/23 CPE心得

留言共 1 篇留言

：
佬

07-19 13:12

我要留言提醒：您尚未登入，請先登入再留言

2喜歡★y541258 可決定是否刪除您的留言，請勿發表違反站規文字。

前一篇：《離心力》短篇─為什麼合... 後一篇：《離心力》─如果有小孩...

追蹤私訊切換新版閱覽

作品資料夾

對於個人而言特別重要的 (40)

自編遊戲綜合考題與試答 (10)

單機版網頁遊戲系列相關 (20)
└如何改成線上版網頁遊戲系列 (7)
└自製腳本語言 (2)
└3D (1)
└格鬥遊戲 (1)
└遊戲賞析系列 (1)
└遊戲程式進展 (21)
└簡略音樂遊戲 (3)
└地水師 (6)
└多媒體素材處理 (13)
└文字型冒險遊戲 (7)
└極簡陋大富翁 (3)
└RPG迷宮與戰鬥雛形 (12)
└競技型俄羅斯方塊 (1)
└組牌遊戲 (2)
└魔喚精靈日本版─闇箏 (1)
└旋轉泡泡球(待處理) (0)
└常見網頁遊戲系統模仿 (2)
└橫版過關遊戲 (3)
└滑動式拼圖 (1)

程式語言建立自信系列 (8)

Unity相關 (6)

[問題與思考] (7)

實況、名詞、關注議題分享 (46)
└實況歌單 (1)

音樂與自動作曲相關 (11)
└聽譜練習 (12)
└自動作曲研究 (4)

玩遊戲感想 (43)
└電動日記(真的日記,不是遊戲名稱) (9)
└式姬-幽界之門 (19)
└うつしよの帳 (1)
└送帳號 (1)
└陰陽師 (3)

遊戲妄想 (14)
└偶爾正經下 (2)

對正規教育的期許 (26)

時光旅行 (4)

除去上述分類後還是跟程式語言相關 (18)

小說-離心力 片段 (46)

知乎 (35)

異國研究 (3)
└日本 (5)
└俄國 (0)
└印度 (1)
└多文化綜合比較 (6)

一行文 (11)

各領域歷史與沿革或說想法發想 (13)
└數學 (14)
└計算機(程式,電路) (4)
└語言 (3)

讀後感 (1)

未分類 (189)

Wannablesu 給 晚上好：
柴看更多我要大聲說昨天22:04


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準，可能無法使用新的應用程式來呈現網站內容，在瀏覽器支援度及網站安全性的雙重考量下，為了讓巴友們有更好的使用體驗，巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特：
。Google Chrome（推薦）
。Mozilla Firefox
。Microsoft Edge（Windows10以上的作業系統版本才可使用）

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營，請將 gamer.com.tw 加入廣告阻擋工具的白名單中，謝謝 !【教學】