如何實現一個簡單的跑酷遊戲？（代碼詳解）-H5教程-PHP中文網

首頁

web前端

H5教程

如何實現一個簡單的跑酷遊戲？（代碼詳解）

青灯夜游

Oct 26, 2018 pm 03:57 PM

這篇文章帶給大家的內容是介紹如何實現一個簡單的跑酷遊戲？（代碼詳解）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

採用的實體引擎是：Phaser.js

官網位址：http://phaser.io/

#在這裡對此引擎不做過多介紹（因為我也是小白，嘿嘿）

效果展示：

##原始碼（詳細原始碼圖片資源存取：https://github.com/ProsperLee）

1.創建遊戲舞台

 var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 400,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {
                y: 300
            },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config); // 创建游戏

登入後複製

2.載入資源

function preload() {
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
     5      6     this.load.spritesheet('dude', 'assets/dude.png', {
        frameWidth: 32,
        frameHeight: 48
    });
}

登入後複製

3.將資源建立到舞台上

 var distanceText; // 路程文本
var distance = 0; // 路程
var platforms; // 地面
var player; // 玩家
var enemy; // 敌人
var enemys; // 敌人们
var enemyTimer; // 敌人计时器
var distanceTimer; // 路程计时器

function create() {
    // 添加画布背景
    this.add.image(400, 200, 'sky');
    // 添加分数文本
    distanceText = this.add.text(16, 16, 'Distance: 0m', {
        fontSize: '20px',
        fill: '#000'
    });
    // 添加地面
    platforms = this.physics.add.staticGroup();
    platforms.create(400, 400, 'ground').setScale(3).refreshBody();
    // 添加玩家（精灵）
    player = this.physics.add.sprite(100, 300, 'dude');
    player.setBounce(0); // 设置阻力
    player.setCollideWorldBounds(true); // 禁止玩家走出世界

    // 敌人
    enemys = this.physics.add.group();
    enemys.children.iterate(function (child) {
        child.setCollideWorldBounds(false);
    });
    // 动态创建敌人
    enemyTimer = setInterval(function () {
        enemy = enemys.create(1000, 300, 'dude');
        enemy.setTint(getColor());
        enemy.anims.play('left', true);
        enemy.setVelocityX(Phaser.Math.Between(-300, -100));
    }, Phaser.Math.Between(4000, 8000))

    distanceTimer = setInterval(function () {
        distance += 1;
        distanceText.setText('Distance: ' + distance + 'm');
    }, 1000)

    this.physics.add.collider(player, platforms); //玩家在地面上
    this.physics.add.collider(enemys, platforms); //敌人在地面上
    this.physics.add.collider(player, enemys, hitBomb, null, this);
}

登入後複製

4.在建立場景過程中寫鍵盤監聽事件

var cursors; // 按键
    // 事件
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', {
            start: 0,
            end: 3
        }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('dude', {
            start: 5,
            end: 8
        }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'turn',
        frames: [{
            key: 'dude',
            frame: 4
        }],
        frameRate: 20
    });

    cursors = this.input.keyboard.createCursorKeys();

登入後複製

5.寫入碰撞函數（當玩家與敵人碰撞的結果）

var gameOver = false; // 游戏结束
function hitBomb(player, enemys) {
    this.physics.pause();
    clearInterval(enemyTimer);
    clearInterval(distanceTimer);
    player.setTint(0xff0000);
    gameOver = true;
    alert('游戏结束,您跑了' + distance + 'm');
}

登入後複製

6.在update函數中寫時間的執行（須注意的是此函數每一幀都在執行，1幀≠1秒）

 function update() {
    if (cursors.up.isDown && player.body.touching.down) {
        player.setVelocityY(-220);
    } else {
        player.anims.play('right', true);
    }
    if (gameOver) {
        player.setVelocityX(0);
        player.anims.play('turn');
        return;
    }
}

登入後複製

這裡我給敵人上了顏色的，隨機16進位顏色

function getColor() {
    var color = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"].sort(function(){
        return Math.random() - 0.5
    }).join("").substr(0,6);
    
    return "0x" + color;
}

登入後複製

#整個原始碼奉上（建議去github上自己clone）：#

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 400,
    physics: {
        default: &#39;arcade&#39;,
        arcade: {
            gravity: {
                y: 300
            },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config); // 创建游戏

var distanceText; // 路程文本
var distance = 0; // 路程
var platforms; // 地面
var player; // 玩家
var enemy; // 敌人
var enemys; // 敌人们
var gameOver = false; // 游戏结束
var enemyTimer; // 敌人计时器
var distanceTimer; // 路程计时器

var cursors; // 按键 
// 载入资源
function preload() {
    this.load.image(&#39;sky&#39;, &#39;assets/sky.png&#39;);
    this.load.image(&#39;ground&#39;, &#39;assets/platform.png&#39;);
     39      40     this.load.spritesheet(&#39;dude&#39;, &#39;assets/dude.png&#39;, {
        frameWidth: 32,
        frameHeight: 48
    });
}

// 将资源展示到画布创建资源
function create() {
    // 添加画布背景
    this.add.image(400, 200, &#39;sky&#39;);
    // 添加分数文本
    distanceText = this.add.text(16, 16, &#39;Distance: 0m&#39;, {
        fontSize: &#39;20px&#39;,
        fill: &#39;#000&#39;
    });
    // 添加地面
    platforms = this.physics.add.staticGroup();
    platforms.create(400, 400, &#39;ground&#39;).setScale(3).refreshBody();
    // 添加玩家（精灵）
    player = this.physics.add.sprite(100, 300, &#39;dude&#39;);
    player.setBounce(0); // 设置阻力
    player.setCollideWorldBounds(true); // 禁止玩家走出世界

    // 敌人
    enemys = this.physics.add.group();
    enemys.children.iterate(function (child) {

        child.setCollideWorldBounds(false);
    });

    // 事件
    this.anims.create({
        key: &#39;left&#39;,
        frames: this.anims.generateFrameNumbers(&#39;dude&#39;, {
            start: 0,
            end: 3
        }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: &#39;right&#39;,
        frames: this.anims.generateFrameNumbers(&#39;dude&#39;, {
            start: 5,
            end: 8
        }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: &#39;turn&#39;,
        frames: [{
            key: &#39;dude&#39;,
            frame: 4
        }],
        frameRate: 20
    });

    cursors = this.input.keyboard.createCursorKeys();

    // 动态创建敌人
    enemyTimer = setInterval(function () {
        enemy = enemys.create(1000, 300, &#39;dude&#39;);
        enemy.setTint(getColor());
        enemy.anims.play(&#39;left&#39;, true);
        enemy.setVelocityX(Phaser.Math.Between(-300, -100));
    }, Phaser.Math.Between(4000, 8000))

    distanceTimer = setInterval(function () {
        distance += 1;
        distanceText.setText(&#39;Distance: &#39; + distance + &#39;m&#39;);
    }, 1000)



    this.physics.add.collider(player, platforms); //玩家在地面上
    this.physics.add.collider(enemys, platforms);
    this.physics.add.collider(player, enemys, hitBomb, null, this);

}
// 一直执行
function update() {
    if (cursors.up.isDown && player.body.touching.down) {
        player.setVelocityY(-220);
    } else {
        player.anims.play(&#39;right&#39;, true);
    }
    if (gameOver) {
        player.setVelocityX(0);
        player.anims.play(&#39;turn&#39;);
        return;
    }
}

function hitBomb(player, enemys) {
    this.physics.pause();
    clearInterval(enemyTimer);
    clearInterval(distanceTimer);
    player.setTint(0xff0000);
    gameOver = true;
    alert(&#39;游戏结束,您跑了&#39; + distance + &#39;m&#39;);
}

function getColor() {
    var color = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"].sort(function(){
        return Math.random() - 0.5
    }).join("").substr(0,6);
    
    return "0x" + color;
}

登入後複製

以上是如何實現一個簡單的跑酷遊戲？（代碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

h5是指什麼 Aug 02, 2023 pm 01:52 PM

H5是指HTML5，是HTML的最新版本，H5是一個功能強大的標記語言，為開發者提供了更多的選擇和創造空間，它的出現推動了Web技術的發展，使得網頁的交互和效果更加出色，隨著H5技術的逐漸成熟和普及，相信它將在互聯網的世界中發揮越來越重要的作用。

如何區分H5,WEB前端,大前端,WEB全端? Aug 03, 2022 pm 04:00 PM

本文帶你快速區分H5、WEB前端、大前端、WEB全棧，希望對需要的朋友有幫助！

h5怎麼實現web端向上滑動載入下一頁 Mar 11, 2024 am 10:26 AM

實現步驟：1、監聽頁面的滾動事件；2、判斷捲動至頁面底部；3、載入下一頁資料；4、更新頁面捲動位置即可。

h5如何使用position Dec 26, 2023 pm 01:39 PM

在H5中使用position屬性可以透過CSS控制元素的定位方式：1、相對定位relative，語法為「style="position: relative;」；2、絕對定位absolute，語法為「style="position: absolute; 」；3、固定定位fixed，語法為「style="position: fixed;」等等。

vue3怎麼實作H5表單驗證元件 Jun 03, 2023 pm 02:09 PM

效果圖描述基於vue.js，不依賴其他外掛程式或函式庫實作；基礎功能使用保持和element-ui一致，內部實作做了一些行動裝置差異的調整。目前建置平台使用uni-app官方腳手架構建，因為當下行動端大多情況就h6和微信小程式兩種，所以一套程式碼跑多端十分適合技術選型。實作思路核心api：使用provide和inject，對應和。在元件中，內部用一個變數（陣列）去將所有實例儲存起來，同時把要傳遞的資料透過provide暴露出去；元件則在內部用inject去接收父元件提供過來的數據，最後把自身的屬性和方法提交

H5指的是什麼？探索上下文 Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5與HTML5相同嗎？ Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的，但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準，包含新標籤和API。 2."h5"通常是HTML5的簡稱，但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5代碼：可訪問性和語義HTML Apr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構，提高SEO。 2.ARIA屬性如aria-label增強可訪問性，輔助技術用戶可順利使用網頁。

See all articles

如何實現一個簡單的跑酷遊戲？（代碼詳解）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

如何實現一個簡單的跑酷遊戲？ （代碼詳解）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

如何實現一個簡單的跑酷遊戲？（代碼詳解）