【譯】HTML5 遊戲入門

時間  2019-11-07
標籤 html5 html 遊戲 入門 欄目 HTML5 简体版
原文   原文鏈接

原文連接javascript

譯文來自個人博客html

簡介

若是你想用canvas作個遊戲，那麼來對地方了。html5

可是可是你至少知道javascript怎麼拼寫(╯‵□′)╯︵┻━┻java

既然沒問題，那先來玩一下或者下載jquery

建立canvas標籤

廢話很少說，咱們必須建立一個canvas標籤，簡單起見，用一下不喜歡的jQuerygit

var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;

var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
                      "' height='" + CANVAS_HEIGHT + "'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');

遊戲循環

爲了可以讓遊戲平滑動畫，咱們用30幀的頻率。github

var FPS = 30;
setInterval(function() {
  update();
  draw();
}, 1000/FPS);

如今咱們能夠先給這兩個函數放置play，重要的是setInterval函數會按期照顧他們的。canvas

hello world

如今咱們有了這個循環，讓咱們開始畫東西吧~數組

function draw() {
  canvas.fillStyle = "#000"; // Set color to black
  canvas.fillText("Sup Bro!", 50, 50);
}

注意：確認修改以後刷新一下，萬一哪裏不對，代碼變的少還能看出哪裏不對。app

若是沒錯，那麼顯示的是靜止的字母，雖然好看，但咱們已經有了動畫循環，因此咱們應該很容易讓他動起來。

var textX = 50;
var textY = 50;

function update() {
  textX += 1;
  textY += 1;
}

function draw() {
  canvas.fillStyle = "#000";
  canvas.fillText("Sup Bro!", textX, textY);
}

如今若是沒出錯，那麼字母應該在移動，可是有殘影出現。想一想爲何會這樣，由於咱們沒有清除以前的畫面呢，so 咱們加點清除畫布的代碼。

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  canvas.fillStyle = "#000";
  canvas.fillText("Sup Bro!", textX, textY);
}

如今能夠看到字母在屏幕上移動了，恭喜你，你已經快入門了。讓咱們繼續。

建立玩家

接下來建立一個物體用來給玩家控制，咱們建立了一個簡單的object：

var player = {
  color: "#00A",
  x: 220,
  y: 270,
  width: 32,
  height: 32,
  draw: function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  }
};

咱們簡單地着色了這個物體，當咱們清除畫布的時候，畫上這個物體。

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  player.draw();
}

鍵盤控制

使用jQuery HotKeys

使用jQuery HotKeys，這個插件提供了簡單的鍵盤輸入檢測
咱們能夠這麼綁定事件

$(document).bind("keydown", "left", function() { ... });

不用想哪一個按鍵是哪一個號碼真舒服，咱們剛纔實現了「當玩家按上的時候，作一些事情」，碉堡的插件！

玩家的移動

鍵盤輸入檢測已經完成了，但咱們還要處理鍵盤輸入以後要作什麼。
你可能會想使用事件驅動的方式去處理鍵盤輸入，可是這樣作系統不一，按鍵效果不同，並且脫離了動畫循環呢，這樣作就能夠跨系統了，保證了一致性，也讓遊戲更平滑了。

有一個好消息,咱們有一個key_status.js的文件，提供了相似keydown.left等等。去下載的文件裏找

如今咱們能夠去查詢是否有按鍵了,而後咱們就這麼寫：

function update() {
  if (keydown.left) {
    player.x -= 2;
  }

  if (keydown.right) {
    player.x += 2;
  }
}

這樣玩家能夠控制了。

你可能注意到玩家能夠跑出屏幕，讓咱們限制一下玩家的位置，並且彷佛控制速度有點慢，咱們順便加加速。

function update() {
  if (keydown.left) {
    player.x -= 5;
  }

  if (keydown.right) {
    player.x += 5;
  }

  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}

clamp這個函數能夠在下載的util.js裏看到

而後咱們加點炮彈進去。

function update() {
  if (keydown.space) {
    player.shoot();
  }

  if (keydown.left) {
    player.x -= 5;
  }

  if (keydown.right) {
    player.x += 5;
  }

  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}

player.shoot = function() {
  console.log("Pew pew");
  // :) Well at least adding the key binding was easy...
};

添加更多物體

子彈
咱們須要一個數組放子彈

var playerBullets = [];

接下來咱們建立一個子彈原型

function Bullet(I) {
  I.active = true;

  I.xVelocity = 0;
  I.yVelocity = -I.speed;
  I.width = 3;
  I.height = 3;
  I.color = "#000";

  I.inBounds = function() {
    return I.x >= 0 && I.x <= CANVAS_WIDTH &&
      I.y >= 0 && I.y <= CANVAS_HEIGHT;
  };

  I.draw = function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  };

  I.update = function() {
    I.x += I.xVelocity;
    I.y += I.yVelocity;

    I.active = I.active && I.inBounds();
  };

  return I;
}

但玩家射擊時,咱們應該實例子彈,而後添加到子彈數組中.

player.shoot = function() {
  var bulletPosition = this.midpoint();

  playerBullets.push(Bullet({
    speed: 5,
    x: bulletPosition.x,
    y: bulletPosition.y
  }));
};

player.midpoint = function() {
  return {
    x: this.x + this.width/2,
    y: this.y + this.height/2
  };
};

咱們須要把子彈的動畫添加到沒幀的動畫裏,爲了能讓子彈變成無限的效果,咱們過濾了子彈數組,只保留了激活的子彈.同時刪除了已經撞到敵人的子彈.

function update() {
  ...
  playerBullets.forEach(function(bullet) {
    bullet.update();
  });

  playerBullets = playerBullets.filter(function(bullet) {
    return bullet.active;
  });
}

最後一步就是畫子彈了.

function draw() {
  ...
  playerBullets.forEach(function(bullet) {
    bullet.draw();
  });
}

敵人
如今咱們要像添加子彈同樣添加敵人.

enemies = [];

function Enemy(I) {
  I = I || {};

  I.active = true;
  I.age = Math.floor(Math.random() * 128);

  I.color = "#A2B";

  I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
  I.y = 0;
  I.xVelocity = 0
  I.yVelocity = 2;

  I.width = 32;
  I.height = 32;

  I.inBounds = function() {
    return I.x >= 0 && I.x <= CANVAS_WIDTH &&
      I.y >= 0 && I.y <= CANVAS_HEIGHT;
  };

  I.draw = function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  };

  I.update = function() {
    I.x += I.xVelocity;
    I.y += I.yVelocity;

    I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);

    I.age++;

    I.active = I.active && I.inBounds();
  };

  return I;
};

function update() {
  ...

  enemies.forEach(function(enemy) {
    enemy.update();
  });

  enemies = enemies.filter(function(enemy) {
    return enemy.active;
  });

  if(Math.random() < 0.1) {
    enemies.push(Enemy());
  }
};

function draw() {
  ...

  enemies.forEach(function(enemy) {
    enemy.draw();
  });
}

加載和添加圖片

雖然目前這些方塊飛來飛去看起來很酷，但有圖片就更酷了。咱們使用了一個叫sprite.js的文件，能夠從下載的文件裏看到。

player.sprite = Sprite("player");

player.draw = function() {
  this.sprite.draw(canvas, this.x, this.y);
};

function Enemy(I) {
  ...

  I.sprite = Sprite("enemy");

  I.draw = function() {
    this.sprite.draw(canvas, this.x, this.y);
  };

  ...
}

碰撞檢測

咱們已經有了不少敵人飛來飛去了,但他們沒有交互呢mb打不到他們,咱們是時候加點碰撞檢測了.
讓咱們使用一個簡單的方法檢測:

function collides(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}

咱們須要檢測以下兩種碰撞:

  1. 玩家子彈和敵方飛船

  2. 玩家和敵方飛船

讓咱們給update加入處理碰撞以後的處理

function handleCollisions() {
  playerBullets.forEach(function(bullet) {
    enemies.forEach(function(enemy) {
      if (collides(bullet, enemy)) {
        enemy.explode();
        bullet.active = false;
      }
    });
  });

  enemies.forEach(function(enemy) {
    if (collides(enemy, player)) {
      enemy.explode();
      player.explode();
    }
  });
}

function update() {
  ...
  handleCollisions();
}

如今咱們須要給敵方飛船和玩家添加爆炸效果,爆炸的同時會移除

function Enemy(I) {
  ...

  I.explode = function() {
    this.active = false;
    // Extra Credit: Add an explosion graphic
  };

  return I;
};

player.explode = function() {
  this.active = false;
  // Extra Credit: Add an explosion graphic and then end the game
};

聲音

爲了可玩性,咱們將要添加聲音效果進去,咱們用到sound.js這個文件，讓事情變得很是簡單。

player.shoot = function() {
  Sound.play("shoot");
  ...
}

function Enemy(I) {
  ...

  I.explode = function() {
    Sound.play("explode");
    ...
  }
}

使用這些API就能很快地完成一個簡單的遊戲.

告別

再說一下遊戲地址,也能夠下載

well,我但願你開始喜歡用js和html5寫簡單的遊戲，隨着學習的深刻,未來會有更多地挑戰呢.

參考文獻

HTML5 Canvas Cheat Sheet

HTML5 Game EnginesSF怎麼自動讀取gist的信息。。我在SF刪了這個連接

譯後感

第一次完整的翻譯一篇文章,真蛋疼有些句子感受很差翻,就隨便糊弄一下,BTW,我也按這個教程寫了例子,好像寫完還有不少問題呢(逃

順便吐槽一下,SF編輯器怎麼沒有刪除線,╭(╯^╰)╮

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程