基于HTML 5的橫版射擊游戲發布 附源碼
作者：CSON
基于HTML5的橫版射擊游戲，參考自flash游戲《雙面特工》。左右方向鍵控制移動，下方向鍵蹲下，上方向鍵跳躍，空格鍵射擊。體驗前請先關閉輸入法。
功能說明：
基于HTML5的橫版射擊游戲，參考自flash游戲《雙面特工》。左右方向鍵控制移動，下方向鍵蹲下，上方向鍵跳躍，空格鍵射擊。體驗前請先關閉輸入法。
該游戲基于自己開發的HTML5游戲框架cnGameJS。
效果預覽：
實現分析：
1.關于多層地圖。
在上一個HTML5游戲《坦克后援隊》中，所用的地圖只為簡單的單層地圖，意思是地圖中除了石頭就是空地，僅僅只有一層的地圖。但是這種單層地圖具有比較大的局限性，如果需要實現場景類的游戲(例如超級瑪麗和上面的游戲)，只有一層的地圖往往是不夠的，因為我們除了游戲主角所站的障礙物外，還有游戲背景等元素(例如后面的墻壁等)，因此我們需要為地圖對象分層，從而達到多層展示的目的。
新增的layer對象：
每個layer對象維護該層的sprite，負責更新和繪制它們，并且可以獲取指定坐標在該層的矩陣上的值。layer對象源碼如下：
- /**
- *層對象
- **/
- var layer = function(id,mapMatrix, options) {
- if (!(this instanceof arguments.callee)) {
- return new arguments.callee(id,mapMatrix, options);
- }
- this.init(id,mapMatrix, options);
- }
- layer.prototype={
- /**
- *初始化
- **/
- init: function(id,mapMatrix,options) {
- /**
- *默認對象
- **/
- var defaultObj = {
- cellSize: [32, 32], //方格寬，高
- x: 0, //layer起始x
- y: 0 //layer起始y
- };
- optionsoptions = options || {};
- options = cg.core.extend(defaultObj, options);
- this.id=options.id;
- this.mapMatrix = mapMatrix;
- this.cellSize = options.cellSize;
- this.x = options.x;
- this.y = options.y;
- this.row = mapMatrix.length; //有多少行
- thisthis.width=this.cellSize[0]* mapMatrix[0].length;
- thisthis.height=this.cellSize[1]* this.row;
- this.spriteList=new cg.SpriteList();//該層上的sprite列表
- this.imgsReference=options.imgsReference;//圖片引用字典：{"1":{src:"xxx.png",x:0,y:0},"2":{src:"xxx.png",x:1,y:1}}
- this.zIindex=options.zIndex;
- },
- /**
- *添加sprite
- **/
- addSprites:function(sprites){
- if (cg.core.isArray(sprites)) {
- for (var i = 0, len = sprites.length; i < len; i++) {
- arguments.callee.call(this, sprites[i]);
- }
- }
- else{
- this.spriteList.add(sprites);
- sprites.layer=this;
- }
- },
- /**
- *獲取特定對象在layer中處于的方格的值
- **/
- getPosValue: function(x, y) {
- if (cg.core.isObject(x)) {
- y = x.y;
- xx = x.x;
- }
- var isUndefined = cg.core.isUndefined;
- y = Math.floor(y / this.cellSize[1]);
- x = Math.floor(x / this.cellSize[0]);
- if (!isUndefined(this.mapMatrix[y]) && !isUndefined(this.mapMatrix[y][x])) {
- return this.mapMatrix[y][x];
- }
- return undefined;
- },
- /**
- *獲取特定對象在layer中處于的方格索引
- **/
- getCurrentIndex: function(x, y) {
- if (cg.core.isObject(x)) {
- y = x.y;
- xx = x.x;
- }
- return [Math.floor(x / this.cellSize[0]), Math.floor(y / this.cellSize[1])];
- },
- /**
- *獲取特定對象是否剛好與格子重合
- **/
- isMatchCell: function(x, y) {
- if (cg.core.isObject(x)) {
- y = x.y;
- xx = x.x;
- }
- return (x % this.cellSize[0] == 0) && (y % this.cellSize[1] == 0);
- },
- /**
- *設置layer對應位置的值
- **/
- setPosValue: function(x, y, value) {
- this.mapMatrix[y][x] = value;
- },
- /**
- *更新層上的sprite列表
- **/
- update:function(duration){
- this.spriteList.update(duration);
- },
- /**
- *根據layer的矩陣繪制layer和該layer上的所有sprite
- **/
- draw: function() {
- var mapMatrix = this.mapMatrix;
- var beginX = this.x;
- var beginY = this.y;
- var cellSize = this.cellSize;
- var currentRow;
- var currentCol
- var currentObj;
- var row = this.row;
- var img;
- var col;
- for (var i = beginY, ylen = beginY + row * cellSize[1]; i < ylen; i += cellSize[1]) { //根據地圖矩陣，繪制每個方格
- currentRow = (i - beginY) / cellSize[1];
- col=mapMatrix[currentRow].length;
- for (var j = beginX, xlen = beginX + col * cellSize[0]; j < xlen; j += cellSize[0]) {
- currentCol = (j - beginX) / cellSize[0];
- currentObj = this.imgsReference[mapMatrix[currentRow][currentCol]];
- if(currentObj){
- currentObjcurrentObj.x = currentObj.x || 0;
- currentObjcurrentObj.y = currentObj.y || 0;
- img = cg.loader.loadedImgs[currentObj.src];
- //繪制特定坐標的圖像
- cg.context.drawImage(img, currentObj.x, currentObj.y, cellSize[0], cellSize[1], j, i, cellSize[0], cellSize[1]);
- }
- }
- }
- //更新該layer上所有sprite
- this.spriteList.draw();
- }
- }
之后我們可以很方便地創建不同的層，并添加到地圖中：
- /* 背景矩陣 */
- var bgMatrix = [
- [1,1,1],
- [1,1,1],
- [1,1,1]
- ];
- this.map = new cnGame.Map({width:3000,height:3000});
- var newnewLayer=new cnGame.Layer("bg",bgMatrix, { cellSize: [1000, 1000], width: this.map.width, height: this.map.height });
- newLayer.imgsReference={ "1": { src: srcObj.bg }};
- this.map.addLayer(newLayer);
2.關于移動場景。
在上一次的HTML5《游戲超級瑪麗游戲demo》中，我們通過使游戲玩家的移動轉換為游戲場景的移動來實現玩家固定，場景移動的效果，但是這種實現方法有比較大的問題，因為它干涉了地圖和玩家的xy值的變化，因此會帶來很多不便。更好的實現方法是，保持玩家和地圖的xy值不變，只改變繪制它們時原點的坐標。
view對象新增的方法：applyInView：
applyInView方法的作用是在不改變地圖和玩家實際坐標的前提下，在繪制時使view固定，其他游戲元素相對于view移動，實現移動背景的效果。例如，我們需要使玩家相對于view中點固定，該map上的其他所有游戲元素相對于view移動，我們只需要在初始化時：
- this.view=new cnGame.View({map:this.map,x:0,y:0,width:cnGame.width,height:cnGame.height});
- this.view.centerElem(this.player,true);
在繪制時：
- this.view.applyInView(function(){
- map.draw();
- });
這樣map內所有元素都會相對于view而移動。
而applyInView的實現原理也非常簡單，它只是不斷使繪制的原點和view的坐標等長且相反：
- /**
- *使坐標相對于view
- **/
- applyInView:function(func){
- cg.context.save();
- cg.context.translate(-this.x, -this.y);
- func();
- cg.context.restore();
- },
這樣無論view的坐標如何變化，view在視覺上始終固定在canvas，其他元素的坐標在視覺上始終相對于view。
該游戲所有源碼下載地址：點擊下載
原文：http://www.cnblogs.com/Cson/archive/2012/03/15/2398129.html
【編輯推薦】
責任編輯：陳貽新
來源：
CSON的博客
