Html5 có thể chạy trò chơi không?

Run 3 là trò chơi chạy vô tận, nơi bạn cần điều hướng người ngoài hành tinh bé nhỏ của mình qua không gian. Run 3 được tạo bởi Joseph Cloutier và là phần thứ ba trong loạt trò chơi Run. Run 3 hiện có sẵn trong HTML5, vì vậy bạn có thể chơi mà không cần hỗ trợ Flash

Nhiệm vụ của bạn rất đơn giản. chạy càng xa càng tốt và đừng ngã. Trượt gạch, trượt, trượt, và nhiều hơn nữa khi bạn chuyển từ cấp độ này sang cấp độ khác. Nếu bạn vào tường, màn hình sẽ xoay. Trò chơi hành động căng thẳng và vô tận này sẽ đưa bạn vào một cuộc hành trình kinh hoàng qua một khu vực bị hạn chế rất nhiều. Bạn phải hướng dẫn người ngoài hành tinh nhỏ màu xám khi nó đi qua các vùng lãnh thổ liên tục phát triển. Di chuyển dọc theo bất kỳ bức tường nào để tìm ra con đường an toàn nhất và khám phá xem bạn có thể sống sót được bao lâu

Cách chơi Run 3?

        

                
  • Mũi tên để chuyển
  •             
  • Mũi tên lên hoặc lên để nhảy
  •             
  • R to set back
  •             
  • P để tạm dừng trò chơi
  •         
    

Tôi có thể chơi run 3 mà không cần Flash không?

Có, Run 3 ban đầu này có thể được phát trên Poki mà không cần Flash trên bất kỳ thiết bị nào

Ai đã tạo Run 3?

Chúng tôi hy vọng bạn sẽ thích trò chơi của chúng tôi, tôi cũng như chúng tôi thích cung cấp cho bạn

Tính năng ứng dụng

-Hàng ngày bổ sung trò chơi mới.
- Hỗ trợ nhiều hơn một ngôn ngữ.
- Nhanh chóng duyệt và sử dụng.
- Nó bao gồm một bộ sưu tập các trò chơi hay nhất trên Cửa hàng Google Play.
- Đăng ký tài khoản và bắt đầu thu thập điểm bằng cách chơi trò chơi, đánh giá và chia sẻ
trò chơi với bạn bè.
- Trò chơi trực tuyến và ngoại tuyến.
- Bạn có thể thêm các trò chơi yêu thích của mình vào mục yêu thích.
- Một thế giới giải trí.

Nếu bạn có bất kỳ câu hỏi hoặc ý kiến, xin vui lòng liên hệ với chúng tôi

Trân trọng,

TRÒ CHƠI HTML5

Lần cập nhật gần đây nhất

Hướng dẫn này Nhằm giúp bạn hiểu các hàm cơ bản cho phép tạo trò chơi chơi kiếm tiền trên giao thức NEAR


Chúng tôi không có mục tiêu làm cho bạn hoặc người chơi của bạn trở nên có tình cảm, nhưng cơ chế của Gần hoạt động theo cách để các giao dịch nhỏ trở nên rất hữu ích trên giao diện người dùng HTML5 đơn giản và tạo ra một


Chúng ta sẽ phân tích một hợp đồng thông minh và các tệp js/rust sau một trang game hiện có, berryclub. Nếu bạn áp dụng cùng một logic cho các ý tưởng về trò chơi của mình, bạn có thể có được các trò chơi thậm chí còn vui hơn

Để làm theo khía cạnh kỹ thuật của hướng dẫn này, chúng tôi thực sự khuyên bạn nên đọc trước Near Pathway của figment để xây dựng giao dịch và xây dựng hợp đồng thông minh đầu tiên của bạn trên Near, các khái niệm có trong hướng . Sẽ dễ dàng hơn rất nhiều khi bạn vừa đọc hướng dẫn này vừa mở một tab nguồn của liên kết đính kèm, bởi vì phần lớn mã được đề cập sẽ có tham chiếu đến số dòng trong nguồn. Repo gốc của BerryClub đã được rẽ nhánh để hướng dẫn này cho mã đơn giản mà vẫn hoạt động trên blockchain;



Frontend của Berryclub

Berryclub được xây dựng bằng React, vì vậy, đầu tiên chúng ta sẽ bước vào ứng dụng tệp. js nằm trong thư mục src của repo github, sẽ giúp chúng ta tiết kiệm thời gian phân tích hợp đồng tiết kiệm điện, cho phép tập trung vào logic hơn là phần trò chơi (Dù thực tế thì phần trò chơi thú vị hơn và được chơi bởi cộng đồng


nhập Phản ứng từ "phản ứng";

nhập BN từ “bn. js”;

nhập * dưới dạng nearAPI từ “near-api-js”;

nhập { AlphaPicker, HuePicker, GithubPicker } từ “reac-color”;

nhập Chuyển đổi từ “reac-switch”;

nhập khẩu {Vũ khí} từ “. /Vũ khí”;

nhập Hẹn giờ từ “reac-compound-timer”;



Sau khi phản ứng nhập khẩu, thư viện đầu tiên cần phải là bn. js, là một tiện ích đơn giản để quản lý số nguyên hoặc số không thập phân, có nhiều tính năng có thể sử dụng cho giao diện của bạn, trước hết được sử dụng để quản lý các giao dịch

const PixelPrice = new BN(“10000000000000000000000”);


Game berryclub dựa trên kinh tế học bất sản phẩm, có một hội đồng quản trị được quản lý bởi một phần của hợp đồng gọi là hội đồng quản trị. rs, được chia nhỏ theo pixel và mỗi pixel có một mức giá phải trả để vẽ trên đó. Cơ chế của hành động “vẽ” là cốt lõi cho khả năng Farming và Tự làm chủ của trò chơi và sẽ được phân tích sâu trong Phần hợp đồng thông minh

Như bạn có thể thấy ở đây, giá đơn pixel được khai báo là một số không đổi khi bắt đầu ứng dụng và có thể được sửa đổi bằng cách sử dụng các công cụ UI và thư viện bn. js. Nhập thứ hai là Gần sdk cho phép chúng tôi tương tác với chuỗi khối Gần, như được giải thích trong Hình ảnh gần con đường. Cách sử dụng đầu tiên của Near api là thông báo các biến hợp đồng được sử dụng và để đảm bảo rằng mainnet đang được sử dụng khi mã được chạy từ url berryclub



const IsMainnet = cửa sổ. địa điểm. tên máy chủ === "berryclub. io";

const TestNearConfig = {

mạngId. "mạng thử nghiệm",

nútUrl. "https. //rpc. mạng thử nghiệm. gần. tổ chức",

tên hợp đồng. "câu lạc bộ berry. mạng thử nghiệm",

url ví. "https. //cái ví. mạng thử nghiệm. gần. tổ chức",

};

const MainNearConfig = {

mạngId. "mạng chính",

nútUrl. "https. //rpc. mạng chính. gần. tổ chức",

tên hợp đồng. "câu lạc bộ berry. được. gần",

url ví. "https. //cái ví. gần. tổ chức",

};

const NearConfig = IsMainnet ? . TestNearConfig;


Sau đó, tôi nhập các tiện ích UI phản ứng để xây dựng giao diện và cho phép mọi người vẽ, màu phản ứng, chuyển đổi phản ứng và hẹn giờ hợp chất phản ứng. Utlititi lần đầu tiên được sử dụng là bộ đếm thời gian, nó được sử dụng để cài đặt thời gian chờ khi làm mới bảng trên dòng 62

Việc “làm mới bảng” được thực hiện bởi giao diện người dùng, hiển thị bảng trạng thái được cập nhật mới bằng cách sử dụng lệnh gọi RPC tới hợp đồng thông minh


const BatchTimeout = 500;

const RefreshBoardTimeout = 1000;

const MaxWorkTime = 10 * 60 * 1000;

const OneDayMs = 24 * 60 * 60 * 1000;


Ở đây có hai hằng số cần thiết để làm mới, và hai hằng số cuối cùng được sử dụng để canh tác các pixel sau khi vẽ chúng, đặt khoảng thời gian một ngày để tính toán phần thưởng. Các hằng số khác cũng được khai báo để quản lý Ban phù hợp với Hợp đồng thông minh. Và đây, lần đầu tiên chúng ta đến với khái niệm về dòng, rất quan trọng để hiểu về Ban quản lý và là mục có thể tái sử dụng nhiều nhất trong toàn bộ giao diện


const BoardHeight = 50;

const BoardWidth = 50;

const NumLinesPerFetch = 50;

constexpectedLineLength = 4 + 8 * BoardWidth;



Như bạn có thể thấy, sau khi chia nhỏ bảng 50x50, chúng tôi yêu cầu giao diện chỉ tìm cách tải các dòng theo hướng dẫn RefreshBoardTimeout và xem chiều dài của mỗi dòng như Boardwidth nhân với 12, kích thước của một ô


const CellWidth = 12;

const CellHeight = 12;

const MaxNumColors = 31;

const BatchOfPixels = 100;


Các điểm ảnh được xem xét theo lô, không độc lập, cả khi thao tác vẽ được gọi và khi giao diện được làm mới


Cuối cùng nhưng không mất phần quan trọng, trong quá trình nhập của chúng tôi có một thành phần giao diện người dùng tùy chỉnh, được gọi là  Weapons,js. thành phần này đã được phát triển thêm trong lịch sử của cộng đồng berryclub, để mỗi người dùng có thể tải lên và vẽ toàn bộ hình ảnh trên bảng và đúc (đúc) nó trên đó


Cơ chế DeFi

Các dòng từ 27 đến 51 là tham khảo hữu ích về cách mà Dapp này xây dựng khả năng Farming của nó thông qua một số cơ chế DeFi cơ bản sẽ được phân tích trong phần cuối của hướng dẫn này. Bây giờ chúng tôi chỉ đề cập ngắn gọn rằng, để vẽ/mua một pixel berryclub, bạn phải thực hiện một vài thao tác DeFi trên ref. tài chính bằng cách sử dụng các Token cụ thể của riêng nó, bơ (quả bơ) để mua pixel và chuối (chuối) kiếm được từ pixel bạn đã mua

Html5 có thể chạy trò chơi không?


Có một bản sao uniswap đơn giản được tạo ra để hoán đổi Gần với chuối/bơ hoạt động trên cùng một hợp đồng thông minh được xây dựng cho các Mã thông báo khác của trò chơi/nguyên mẫu này. Ngoài ra còn có một mã thông báo canh tác được tạo ra cho trò chơi, được gọi là dưa chuột (dưa chuột), nó cho phép mọi người kiếm được một phần của mã thông báo mà cả cộng đồng chơi trò chơi trả phí gas để vẽ trên bảng


Html5 có thể chạy trò chơi không?

Tài khoản hoặc cách người dùng kiếm tiền

Đây là bước đầu tiên chúng tôi thực hiện đối với mã Rust của hợp tác đồng thông minh, nhưng tôi phải nhắc bạn rằng cơ chế DeFi không phải là cách duy nhất Berryclub cho phép bạn kiếm được mã thông báo. Tài khoản có một tập tin cụ thể trong hợp đồng thông minh berryclub, chúng ta không cần phải vào xem ngay lập tức, những gì chúng ta cần biết là các thông tin cơ bản được thu thập trong đối tượng tài khoản rất quan trọng đối với cơ



  • ID tài khoản
  • accountIndex for list(vector) of the account has been touch on pixel board lần cuối
  • số dư (vectơ cho nhiều token được sở hữu)
  • number of pixel
  • dấu thời gian đã yêu cầu (nano giây, khi tài khoản yêu cầu phần thưởng cuối cùng)
  • sở thích canh tác (chuỗi hoặc dưa chuột)


Hai thông tin cuối cùng là để tính toán phần thưởng tại một thời điểm nhất định, ví dụ. nếu bạn sở hữu 5 pixel trong một ngày, bạn có 5 quả chuối. Nếu bạn mua từ người khác, thu nhập của họ giảm đi vì số lượng pixel họ sở hữu giảm đi, do đó, số tiền kiếm được sẽ được tính toán và dấu thời gian sẽ được gia hạn dựa trên số lượng pixel được sở hữu mới. Như chúng ta sẽ thấy, phần thưởng được tính dựa trên hai biến số này. Thao tác đã được áp dụng cho tài khoản chủ sở hữu trước đó khi một pixel được vẽ được gọi là "chạm" và bạn có thể tìm thấy nó trong tài khoản tệp Rust. rs. Quyền sở hữu của từng pixel là cơ sở để kiếm tiền trên berryclub và cơ chế này khá giống với giao diện đặt cược NFT có thể sử dụng, phần thưởng cho quyền sở hữu NFT


pub fn touch(&mut self) -> (Berry, Balance) {

hãy để block_timestamp = env. block_timestamp();

hãy để time_diff = block_timestamp - tự. yêu cầu_dấu thời gian;

hãy để farm_bonus = nếu tự. farm_preference == Quả mọng. Trái bơ {

1

} khác {

0

};

để farm = Số dư. từ (bản thân. num_pixels + farm_bonus)

* THĂNG BẰNG. từ(time_diff)

* REWARD_PER_PIXEL_PER_NANOSEC;

bản thân. request_timestamp = block_timestamp;

bản thân. số dư [bản thân. farm_preference as usize] += farmed;

(bản thân. farm_preference, được nuôi)

}


Chủ sở hữu ban đầu của hội đồng quản trị là 0, bản thân hợp đồng và cho dù việc tìm kiếm chủ sở hữu trước đó là không thể thực hiện được, chính hợp đồng được sử dụng như chủ sở hữu trước đó. Cuối cùng để bắt đầu trò chơi, một số mã thông báo đã được lưu trữ trong tài khoản của hợp đồng và chúng luôn được tăng lên bằng cách sử dụng giá gas được thiết lập để mọi người mua bơ và chuối, để “kho tiền” của trò chơi . Bây giờ chúng ta hãy quay lại giao diện của chúng ta



Con số Color and Back


Html5 có thể chạy trò chơi không?


Các dòng từ 67 đến 82 trên ứng dụng. js được sử dụng để giải mã các số thành màu sắc và đảo ngược, để các phần tử giao diện người dùng tương tác với bảng, hai biến không được xác định. intToColor và rgbaToInt. Để biến đổi một số nguyên thành một chuỗi màu, các phương thức được sử dụng để chia 3 số cho màu đỏ, xanh lá cây và xanh lam


const intToColor = (c) => `#${c. toString(16). padStart(6, "0")}`;

const intToColorWithAlpha = (c, a) =>

`#${c. toString(16). padStart(6, "0")}${Math. vòng(255 * a)

   . toString(16)

   . padStart(2, "0")}`;


Để đảo ngược chuỗi màu thành số nguyên, chúng ta chỉ cần áp dụng một hàm toán học. round() và sử dụng nguyên số từ kết quả


const rgbaToInt = (cr, cg, cb, ca, bgColor) => {

const bb = bgColor & 255;

const bg = (bgColor >> 8) & 255;

const br = (bgColor >> 16) & 255; . vòng(cr * ca + br * (1 - ca));

const g = Toán. vòng(cg * ca + bg * (1 - ca));

const b = Toán. vòng(cb * ca + bb * (1 - ca));

return (r << 16) + (g << 8) + b;

};


Các dòng bên dưới nói về việc tải lên và trong hình ảnh trên bảng sử dụng thành phần vũ khí và chúng tôi sẽ không xem xét chúng quá chuyên sâu. imgColorToInt và int2hsv chuyển đổi các số thành hai loại thang màu khác nhau, sau đó trong suốtColorđược xác định và một gamma cho phép hình ảnh được đưa vào tạoGamma. Trong decodeLine, chúng tôi biến bộ đệm trong một mảng pixel để được đưa vào bảng với các màu trên, lặp lại chúng với for



Hàm khởi tạo React first

In the next lines of app. js chúng tôi định nghĩa một hàm tạo để xác định các trạng thái mà chúng tôi sẽ sử dụng sau này vào giao diện người dùng của mình để tương tác với blockchain


lớp Ứng dụng mở rộng React. Thành phần {

hàm tạo (đạo cụ) {

siêu(đạo cụ);


Sử dụng constructor function và super sẽ giúp chúng ta có thể sử dụng “this. ” trong hàm tạo. Các trạng thái được định nghĩa ở đây là. color and board color are select default


Html5 có thể chạy trò chơi không?


màu const = [

"#000000",

"#666666",

"#aaaaaa",

"#FFFFFF",

"#F44E3B",

"#D33115",

"#9F0500",

"#FE9200",

"#E27300",

"#C45100",

"#FCDC00",

"#FCC400",

"#FB9E00",

"#DBDF00",

"#B0BC00",

"#808900",

"#A4DD00",

"#68BC00",

"#194D33",

"#68CCCA",

"#16A5A5",

"#0C797D",

"#73D8FF",

"#009CE0",

"#0062B1",

"#AEA1FF",

"#7B64FF",

"#653294",

"#FDA1FF",

"#FA28FF",

"#AB149E",

]. bản đồ((c) => c. toLowerCase());

// const currentColor = parseInt(colors[Math. tầng (Toán. ngẫu nhiên () * màu sắc. chiều dài)]. chuỗi con(1), 16);

const currentColor = parseInt(colors[0]. chuỗi con(1), 16);

const defaultAlpha = 0. 25;


And đối với bảng làm mới thời gian đếm


const timeMs = Ngày mới(). dành thời gian();

const freeDrawingStartMsEstimated =

thời gianMs -

((timeMs - new Date("2021-05-09")) % (7 * OneDayMs)) +

Một NgàyMs * 6;



Sau đó, các trạng thái của tài khoản người dùng được định nghĩa, quan trọng nhất là tài liệu người dùng đã đăng nhập hay chưa, và nếu có bất kỳ giao dịch nào đang chờ xử lý (được định nghĩa là đang chờ xử lý), trạng thái boardLoaded sẽ

Các trạng thái khác này hữu ích cho tài khoản kiếm tiền từ trò chơi, dựa trên pixel và dựa trên DeFi


những chủ sở hữu. [],

tài khoản. {},

đánh dấuAccountIndex. -1,

đã chọnChủ sở hữu Index. sai,

nông nghiệpChuối. sai,



Trong khi ba trạng thái cuối cùng thiết lập bộ hẹn giờ để sử dụng sau này


vẽ miễn phíBắt đầu. Ngày mới (freeDrawingStartMsEstimated),

miễn phíDrawingEnd. Ngày mới(freeDrawingStartMsEstimated + OneDayMs),

chế độ xem. sai,


Danh sách sau (dòng 203-215) định nghĩa các đối tượng và hành động sẽ tương tác với các trạng thái, tham chiếu đến phần tử DOM lần đầu tiên, bảng canvas


cái này. _buttonDown = sai;

cái này. _oldCounts = {};

cái này. _numFailedTxs = 0;

cái này. _balanceRefreshTimer = null;

cái này. canvasRef = Phản ứng. tạoRef();

cái này. _bối cảnh = sai;

cái này. _lines = sai;

cái này. _queue = [];

cái này. _pendingPixels = [];

cái này. _refreshBoardTimer = null;

cái này. _sendQueueTimer = null;

cái này. _stopRefreshTime = Ngày mới(). getTime() + MaxWorkTime;

cái này. _tài khoản = {};


Cuối cùng, chúng tôi định nghĩa một số trạng thái sau khi đăng nhập xong



cái này. _initNear(). sau đó (() => {

cái này. setState(

{

kết nối. thật,

đã đăng nhập. . cái này. _tài khoảnId,

tài khoảnId. cái này. _tài khoảnId,

ircAccountId. cái này. _accountId. thay thế(". ", "_"),

vẽ miễn phíBắt đầu. cái này. _freeDrawingStart,

miễn phíDrawingEnd. cái này. _freeDrawingEnd,

},

() => {

nếu (cửa sổ. địa điểm. băm. indexOf("watch") >= 0) {

setTimeout(() => cái này. enableWatchMode(), 500);

}

}

);

});


Các cơ bản tương tác


Bây giờ chúng ta bắt đầu mô tả các tương tác trên board/canvas, kết nối chúng với các trạng thái đã xác định trước đó. Đối với những tương tác này, chúng tôi sử dụng các chức năng. Hàm đầu tiên sẽ sử dụng tham chiếu trước đó đến phần tử canvas để tạo và hướng dẫn nó với các chi tiết về kiểu di chuyển chuột mà chúng tôi cho phép người dùng thực hiện. Trong lần nhấp đầu tiên, chúng tôi bật chế độ đồng hồ để bắt đầu hẹn giờ

nhấp const = async () => {

nếu (cái này. tiểu bang. xemMode) {

trở lại;

}


And mode render image if user want in image up board

nếu (cái này. tiểu bang. kết xuất) {

chờ đợi điều này. drawIng(cái này. tiểu bang. đã chọnCell);

} khác nếu (điều này. tiểu bang. chọnColor) {

cái này. chọn Màu (cái này. tiểu bang. đã chọnCell);

} khác {

cái này. saveColor();

chờ đợi điều này. drawPixel(cái này. tiểu bang. đã chọnCell);

}


Tiếp theo là phần quan trọng, chúng tôi xác định cách giao diện đọc chuyển động của chuột và chạm trên bảng

if ("chạm" trong e) {

nếu (e. chạm. chiều dài > 1) {

trả về đúng;

} khác {

const rect = e. Mục tiêu. getBoundingClientRect();

x = e. targetTouches[0]. clientX - trực tràng. trái;

y = e. targetTouches[0]. khách hàng - rect. hàng đầu;

}

} khác {

x = e. bùX;

y = e. offsetY;

}


Mã được sử dụng sẽ cân nhắc kỹ lưỡng cả người dùng di động, xây dựng một hàm đặc biệt để tính toán vị trí và thêm trình nghe vào canvas/board cho các sự kiện liên quan. Tranh sơn dầu. addEventListener("touchmove", mouseMove);

Sau đó, các tương tác này được sử dụng để đặt trạng thái Ô được chọn và theo dõi cả phần đầu và phần cuối của hành động chuột/chạm trên canvas cùng với chuyển động của nó trên mỗi ô

const mouseDown = async (e) => {

cái này. _buttonDown = true;

nếu (cái này. tiểu bang. ô đã chọn. == không) {

đang chờ bấm ();

}

}; . addEventListener("mousedown", mouseDown);

Tranh sơn dầu. addEventListener("touchstart", mouseDown);

cái này. setState(

{

ô đã chọn. vô giá trị,

},

() => cái này. kết xuấtCanvas()

);

};

cái này. _buttonDown = sai;

if ("chạm" trong e) {

bỏ chọnCell();

}

}; . addEventListener("mouseup", mouseUp);

Tranh sơn dầu. addEventListener("touchend", mouseUp); . addEventListener("mouseleave", unselectCell); . addEventListener("mouseenter", (e) => {

nếu (cái này. _buttonDown) {

nếu (. ("chạm" trong e) &&. (e. nút & 1)) {

cái này. _buttonDown = sai;

}

}

});


Tương tác ở đây hoạt động trên các trạng thái đã được xác định trước đó, ví dụ như công cụ chọn màu cho phép chúng ta chọn màu từ bảng và sử dụng sau đó để vẽ. Phím được bộ chọn màu sử dụng là phím alt và chúng tôi chỉ có thể tải lên và trong ảnh trên bảng chỉ khi bộ chọn màu bị tắt, vì khi đó chúng tôi sẽ kích hoạt chức năng tạo gamma. Theo cách này, hàm pickcolor(), đã được tham chiếu đến ô, sẽ được sử dụng để đặt một đơn vị pixel, thay thế toàn bộ bảng để hiển thị hình ảnh


chọnMàu(ô) {

nếu (. cái này. tiểu bang. đã đăng nhập. . cái này. _dòng. . cái này. _dòng [ô. y]) {

trở lại;

}

màu const = cái này. _dòng [ô. y][ô. x]. màu; . setState(

{

Màu hiện tại. màu,

chữ cái. 1,

bộ chọn màu. intToColorWithAlpha(màu, 1),

gam màu. tạoGamma(int2hsv(màu)[0]),

chọn màu. sai,

},

() => {

cái này. renderCanvas();

}

);

}


Bây giờ chúng ta đã đi vào cốt lõi, vì vậy hãy sẵn sàng để tìm hiểu về Hợp đồng thông minh. Chúng ta biết cách vẽ pixel trong giao diện, nhưng chúng ta cần đính kèm các giao dịch để giao diện có thể trở thành một trò chơi thực sự để kiếm tiền. Vì vậy, hãy chú ý những gì tôi sắp nói, bởi vì ngay cả khi trò chơi của bạn hoàn toàn khác thì vẫn sẽ có liên quan đấy. Tôi sẽ giải thích ở đây một cách đơn giản nhất có thể


Berryclub Smart ContractLines (các dòng)

Chúng ta đã gặp các Line ở đầu bài viết này, trong khi xem xét định nghĩa UI của các trạng thái. Các dòng là một khái niệm quan trọng của giao diện berryclub, chúng là các hàng mà bảng/canvas được chia nhỏ và mỗi pixel trong đó là một phần siêu dữ liệu (siêu dữ liệu). Chúng là một phần của giao diện người dùng tương tác với hợp đồng thông minh và chúng là đối tượng có thể tái sử dụng nhiều nhất trò chơi (ví dụ:. để tạo cấp độ trong một trò chơi phức tạp hơn), vì vậy chúng tôi sẽ dành một chút thời gian để phân tích cách sử dụng như thế nào để lưu trữ dữ liệu từ bảng và được đánh giá cao khi người dùng chơi trò chơi

Trước hết, trong bảng. rs, chúng tôi tìm thấy định nghĩa PixelLine ngay sau định nghĩa về Pixel

pub struct PixelLine(pub Vec);impl Default for PixelLine {

fn default() -> Self {

tự(vec. [Điểm ảnh. mặc định();

}

}


Một Vectơ (mảng) của dữ liệu chuỗi được chia nhỏ theo chiều rộng của bảng

Và sau đó chúng tôi định nghĩa PixelBoard dưới dạng màn hình của PixelLines theo cách này

quán rượu cấu trúc PixelBoard {

   pub lines: Vector,

   pub line_versions: Vec,

}


Vì vậy, mỗi dòng được lưu trữ trong bảng dưới dạng bản ghi duy nhất với siêu dữ liệu trường được gọi là line_versions, tăng dần mỗi khi bạn sửa đổi một dòng. Vì vậy, mỗi lần giao diện của chúng tôi tìm bảng tải, bạn sẽ nhận được 50 dòng. Nhưng cũng có một siêu dữ liệu cho mỗi dòng sẽ đại diện cho số lần dòng được cập nhật. Và khi tìm nạp siêu dữ liệu này, giao diện sẽ biết số lần dòng đã được thay đổi. Nếu dòng có thay đổi so với lần tìm nạp trước đó, thì bạn cần tìm nạp dữ liệu cho từng pixel. Ngược lại thì bạn không cần tìm nạp lại từng pixel

ngụ ý Địa điểm {

   pub fn get_lines(&self, lines: Vec) -> Vec {

dòng

           . into_iter()

           . bản đồ(. i. {

hãy để dòng = tự. Cái bảng. get_line(i);

dòng. try_to_vec(). mở gói (). vào trong()

})

           . sưu tầm()

   }    pub fn get_line_versions(&self) -> Vec {

bản thân. Cái bảng. line_versions. dòng vô tính()

}

}


Đây là một cách thông minh để lưu trữ và tìm nạp dữ liệu từ giao diện, có thể hữu ích để bạn viết các trò chơi để kiếm tiếp

Html5 có thể chạy trò chơi không?

giao dịch

Vui lòng quay lại giao diện người dùng của chúng tôi tại ứng dụng. js trong vài giây để chắc chắn rằng chúng ta hiểu cách các giao dịch được quản lý từ frontend. Đầu tiên, chúng ta cần một chức năng để kiểm tra tài khoản nếu có gì sai, và đó là

làm mới không đồng bộAllowance() {

báo động(

"Bạn đã hết quyền truy cập trợ cấp khóa. Cần đăng nhập lại để làm mới nó"

);

chờ đợi điều này. đăng xuất();

chờ đợi điều này. requestSignIn();

}


Sau đó, bạn có nhớ mảng _queue và _pendingPixels chúng ta đã định nghĩa trong hàm tạo không?

không đồng bộ _sendQueue() {

const pixel = cái này. _xếp hàng. lát (0, BatchOfPixels);

cái này. _queue = cái này. _xếp hàng. lát (BatchOfPixels);

cái này. _pendingPixels = pixel;

chờ đợi điều này. _hợp đồng. vẽ tranh(

{

điểm ảnh,

},

BN mới("75000000000000")

);

cái này. _numFailedTxs = 0;

} bắt (lỗi) {

const msg = lỗi. toString();

nếu (tin nhắn. indexOf("không có đủ số dư"). == -1) {

chờ đợi điều này. refreshAllowance();

trở lại;

}

bảng điều khiển. log("Gửi giao dịch không thành công", lỗi);

cái này. _numFailedTxs += 1;

nếu (cái này. _numFailedTxs < 3) {

cái này. _queue = cái này. _xếp hàng. concat (cái này. _pendingPixels);

cái này. _pendingPixels = [];

} khác {

cái này. _pendingPixels = [];

cái này. _queue = [];

}

}

cố gắng {

chờ đợi lời hứa. tất cả điều này. refreshBoard(true), cái này. refreshAccountStats()]);

} bắt (e) {

// phớt lờ

}

cái này. _pendingPixels. forEach((p) => {

nếu (cái này. _pending[p. y P. x] === p. màu) {

cái này. _pending[p. y P. x] = -1;

}

});

cái này. _pendingPixels = [];

}


Chờ đã, tôi chưa sẵn sàng cho mã ngăn xếp này… Đúng vậy. Nhưng hãy xem xét nó một cách thận trọng, chúng tôi tạo ra một đối tượng pixel (vector), chúng tôi đã sửa đổi đối tượng _queue để phù hợp với pixel và chúng tôi gán giá trị của nó cho đối tượng _pendPixel trong một chức năng không đồng bộ

Và rồi chuyện gì xảy ra? . rs

pub fn draw(&mut self, pixels: Vec) {

nếu pixel. is_empty() {

trở lại;

}

để tài khoản đột biến = tự. get_mut_account(env. tiền nhiệm_tài khoản_id());

hãy để new_pixels = pixel. len() là u32;

nếu ms_time() < tự. get_free_drawing_timestamp() {

hãy để chi phí = tài khoản. phí (Berry. Bơ, new_pixels);

bản thân. burn_balances[Berry. Bơ as usize] += cost;

}

hãy để mut old_owners = tự. Cái bảng. set_pixels(tài khoản. account_index, &pixels);

hãy thay thế_pixels = old_owners. xoá tài khoản. account_index). unwrap_or(0);

tài khoản. num_pixels += new_pixels - replace_pixels;

bản thân. save_account(tài khoản);

để tài khoản đột biến = tự. get_internal_account_by_index(account_index). mở gói ();

bản thân. touch(&mut tài khoản);

tài khoản. num_pixels -= num_pixels;

bản thân. save_account(tài khoản);

} bản thân. có thể_send_reward();

}


Đối với sự hợp nhất của đồng thông minh, các pixel là một màu và một id tài khoản (có Bí mật của chủ sở hữu) và đó là một trò chơi dựa trên bất động sản. vì vậy chúng ta có một chủ sở hữu cũ đã vẽ pixel trước đó và một chủ sở hữu mới đang muốn vẽ nó ngay bây giờ. Với thao tác rút thăm, chúng tôi nhận được old_owner và thay thế nó bằng tài khoản chủ sở hữu mới đang thay đổi giá trị màu của tất cả các pixel bên trong PixelRequest nhìn, sau đó chúng tôi gửi phần thưởng cho chủ sở hữu cũ trong khi tính toán . Dấu thời gian cho phần thưởng được đặt lại và bắt đầu đếm từ 0 với ít hơn một pixel cho chủ sở hữu cũ và nhiều hơn một pixel cho chủ sở hữu mới. Các hành động setPixelRequest đã được định nghĩa trong bảng tệp. rs of contract, but we go back with libs. rs

Hàm Maybe_send_rewards() có vẻ như thế nào?

ngụ ý Địa điểm {

fn có thể_send_reward(&tự tắt) {

hãy để current_time = env. block_timestamp();

hãy để next_reward_timestamp. u64 = tự. get_next_reward_timestamp(). vào trong();

nếu next_reward_timestamp > current_time {

trở lại;

}

bản thân. last_reward_timestamp = current_time;

để phần thưởng. Số dư = bản thân. get_expected_reward(). vào trong();

env. nhật ký (định dạng. ("Phần thưởng được phân phối của {}", phần thưởng). as_byte());

Lời hứa. Hình thức mới. (

"{}. {}",

FARM_CONTRACT_ID_PREFIX,

env. current_account_id()

))

       . function_call(

b"lấy_của_tôi_gần". to_vec(),

b"{}". to_vec(),

phần thưởng,

GAS_BASE_COMPUTE,

);

}

}


Xin đừng lười biếng, nếu bạn chưa hiểu, bạn có thể quay lại sau khi xem video này của tác giả trò chơi. Những lời giải thích tôi sắp viết cũng được trích dẫn từ video đó

Xác minh thời gian xác minh trên blockchain (chúng tôi không sử dụng bộ đếm thời gian trên giao diện ở đây, vì chúng tôi muốn thật sự chắc chắn. ) và sử dụng khả năng canh tác của hợp đồng trên dấu thời gian toàn cầu với hàm get_next_reward_timestamp() và last_reward_timestamp() sau đó cuối cùng gọi get_expected_reward() để tính toán phần thưởng cho tài khoản

quán rượu fn get_expected_reward(&self) -> U128 {

hãy để account_balance = env. số dư tài khoản();

hãy để storage_usage = env. storage_usage();

hãy để lock_for_storage = Số dư. từ(storage_usage) * STORAGE_PRICE_PER_BYTE + SAFETY_BAR;

nếu account_balance <= Locked_for_Storage {

trả về 0. vào trong();

}

hãy để liquid_balance = account_balance - Locked_for_storage;

hãy để phần thưởng = liquid_balance / PORTION_OF_REWARDS;

phần thưởng. vào trong()

}


Vì vậy, chúng tôi lấy số dư hiện tại từ tài khoản berryclub (bạn có nhớ trường số dư trong tài khoản không?), mức lưu trữ sử dụng, cộng với chi phí hiện tại và ngưỡng an toàn là 50 quả bơ. Nếu số dư hoàn toàn để sử dụng bộ lưu trữ chi phí bên ngoài, chúng tôi chia nó cho tỷ lệ 24 (giờ) * 60 (phút) của phần thưởng, có nghĩa là về cơ bản, bạn nhận được số dư chính xác mà bạn có . rs

const PORTION_OF_REWARDS. Số dư = 24 * 60;

const SAFETY_BAR. Số dư = 50_000000_000000_000000_000000;


Tôi cá là các bạn đang cho rằng quá trình nhận thưởng đã kết thúc. Sai lầm

Chúng ta cần phải quay lại Maybe_send_reward() để biết rằng nó gọi là một tổ hợp đồng trang trại berryclub mới để phân phối phần thưởng đặt cược, đó là. dưa chuột, ngăn xếp mã thông báo trên berryclub. )

const FARM_CONTRACT_ID_PREFIX. &str = "nông trại";


Đó không phải là nguồn phân phối thu nhập duy nhất với chức năng này, nó còn tiết kiệm chi phí khí thải mà mọi người phải trả để mua bơ và trao đổi ủy thác để thưởng cho cả cộng đồng

Sao có thể như thế được? . tập tin rs đặt lượng gas cho hợp đồng thông minh. Vâng, bạn đã đúng. Giá xăng rất thấp trong Gần và nó có thể được sử dụng để thưởng cho những người dùng tương tác với trò chơi của bạn

Để hiểu rõ hơn về cách thức hoạt động của GAS phí trên Gần, vui lòng tham khảo tài liệu chi tiết này


This direction do jilt. near and NFT Gaming project của chị ấy mang đến cho các bạn , hãy ủng hộ việc mua NFT của chị ấy