我如何贏得 JSM 程式設計挑戰-js教程-PHP中文網

我如何贏得 JSM 程式設計挑戰

Linda Hamilton

發布： 2024-09-20 06:50:02

原創

722 人瀏覽過

How I Won the JSM Programming Challenge

在浩瀚的程式設計挑戰中，JSM 程式設計挑戰賽脫穎而出，成為開發人員展示技能和創造力的絕佳機會。上個月的主題「電玩遊戲」為一場激動人心的比賽奠定了基礎，推動參與者探索遊戲開發的新領域。在這篇文章中，我將分享我如何創建「宇宙探索者」的旅程，這款遊戲最終帶領我在星際編碼冒險中取得勝利。

遊戲：宇宙探索者
程式碼：GitHub

挑戰：充滿無限可能

JSM 程式設計挑戰賽為參與者提出了一個廣泛的主題：「電玩遊戲」。我們可以自由地從頭開始創建視訊遊戲、利用遊戲 API，甚至為現有遊戲建立粉絲頁面。可能性就像宇宙本身一樣無窮無盡。

選擇我的道路：宇宙探索者的誕生

在與我的女朋友（她，劇透警告，成為我在這個挑戰中的秘密武器）進行一些頭腦風暴會議之後，我們決定開始創建一款基於太空的遊戲。於是，《宇宙探索者》誕生了──一款以太空探索、從遙遠星球收集資源、與敵艦作戰為中心的遊戲。

準備旅程：學習 Phaser

我做出的最重要的決定之一是選擇 Phaser 作為我的遊戲開發庫。儘管以前從未創建過網頁遊戲，但我還是被 Phaser 的功能所吸引，並決定嘗試一下。這個決定為我在比賽期間最大的挑戰和最重要的學習經驗奠定了基礎。

// Example of initializing a Phaser game
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

登入後複製

最艱難的小行星場：掌握 Phaser

在開發遊戲的同時學習 Phaser 就像以極快的速度穿越小行星帶。學習曲線很陡峭，有時，我感覺自己迷失在太空中。然而，隨著我的進步，事情開始步入正軌。我的程式碼可能更像義大利麵條，而不是整潔的星圖，但它完成了工作。

// Example of adding a sprite in Phaser
function create() {
    this.add.image(400, 300, 'sky');
    this.player = this.physics.add.sprite(100, 450, 'player');
    this.player.setCollideWorldBounds(true);
}

登入後複製

意想不到的星雲：激烈的競爭

挑戰持續了24天，我以為我是在首次發布後5天就開始了我的旅程。這段時間，我一直以一種輕鬆的態度來對待Cosmic Explorer的開發。當我受到啟發時我就開始工作，當我需要的時候我會休息一下。這種方法讓整個過程充滿樂趣並防止倦怠。

新星座：學習與成長

透過這次挑戰，我在我的程式設計工具包中發現了一個新星座——Phaser。學習使用這個函式庫為遊戲開發開闢了一個全新的可能性，這是我以前從未探索過的。

制勝法寶：懷舊和流暢的遊戲玩法

我相信《宇宙探索者》的與眾不同之處在於它融合了令人懷舊的像素藝術（我了不起的女朋友製作了所有這些，並且肯定讓我獲勝）和現代遊戲元素。視差星空背景營造出身臨其境的體驗，動作系統也獲得了許多玩家的好評。復古風格的音效增添了另一層魅力，引起了評審和選手的共鳴。

// Example of creating a parallax background
function create() {
    this.bg1 = this.add.tileSprite(0, 0, config.width, config.height, 'background1').setOrigin(0, 0);
    this.bg2 = this.add.tileSprite(0, 0, config.width, config.height, 'background2').setOrigin(0, 0);
}

function update() {
    this.bg1.tilePosition += 0.5;
    this.bg2.tilePosition += 1;
}
// This was not my solution, but the same principle. Check out the GitHub repo for the solution :)

登入後複製