溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

實(shí)現(xiàn)跑酷游戲的方法是什么

發(fā)布時(shí)間：2020-08-31 13:51:29 來源：億速云 閱讀：163 作者：小新 欄目：web開發(fā)

小編給大家分享一下實(shí)現(xiàn)跑酷游戲的方法是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

采用的物理引擎是：Phaser.js

官網(wǎng)地址：http://phaser.io/

在這里對(duì)此引擎不做過多介紹（因?yàn)槲乙彩切“?，嘿嘿?/strong>

效果展示：

1.創(chuàng)建游戲舞臺(tái)

 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); // 創(chuàng)建游戲

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.將資源創(chuàng)建到舞臺(tái)上

 var distanceText; // 路程文本
var distance = 0; // 路程
var platforms; // 地面
var player; // 玩家
var enemy; // 敵人
var enemys; // 敵人們
var enemyTimer; // 敵人計(jì)時(shí)器
var distanceTimer; // 路程計(jì)時(shí)器

function create() {
    // 添加畫布背景
    this.add.image(400, 200, 'sky');
    // 添加分?jǐn)?shù)文本
    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); // 設(shè)置阻力
    player.setCollideWorldBounds(true); // 禁止玩家走出世界

    // 敵人
    enemys = this.physics.add.group();
    enemys.children.iterate(function (child) {
        child.setCollideWorldBounds(false);
    });
    // 動(dòng)態(tài)創(chuàng)建敵人
    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.在創(chuàng)建場(chǎng)景過程中寫鍵盤監(jiān)聽事件

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.寫碰撞函數(shù)（當(dāng)玩家與敵人碰撞的結(jié)果）

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

6.在update函數(shù)中寫時(shí)間的執(zhí)行（須注意的是此函數(shù)每一幀都在執(zhí)行，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;
    }
}

這里我給敵人上了顏色的，隨機(jī)16進(jìn)制顏色

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;
}

整個(gè)源碼奉上（建議去github上自己clone）：

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); // 創(chuàng)建游戲

var distanceText; // 路程文本
var distance = 0; // 路程
var platforms; // 地面
var player; // 玩家
var enemy; // 敵人
var enemys; // 敵人們
var gameOver = false; // 游戲結(jié)束
var enemyTimer; // 敵人計(jì)時(shí)器
var distanceTimer; // 路程計(jì)時(shí)器

var cursors; // 按鍵 
// 載入資源
function preload() {
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
     39      40     this.load.spritesheet('dude', 'assets/dude.png', {
        frameWidth: 32,
        frameHeight: 48
    });
}

// 將資源展示到畫布創(chuàng)建資源
function create() {
    // 添加畫布背景
    this.add.image(400, 200, 'sky');
    // 添加分?jǐn)?shù)文本
    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); // 設(shè)置阻力
    player.setCollideWorldBounds(true); // 禁止玩家走出世界

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

        child.setCollideWorldBounds(false);
    });

    // 事件
    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();

    // 動(dòng)態(tài)創(chuàng)建敵人
    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);

}
// 一直執(zhí)行
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;
    }
}

function hitBomb(player, enemys) {
    this.physics.pause();
    clearInterval(enemyTimer);
    clearInterval(distanceTimer);
    player.setTint(0xff0000);
    gameOver = true;
    alert('游戲結(jié)束,您跑了' + distance + 'm');
}

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;
}

以上是實(shí)現(xiàn)跑酷游戲的方法是什么的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

h5
AI
助
手