使用JS寫的第一個游戲[俄羅斯方塊]
下載地址：http://files.cnblogs.com/helimin19/Tetris.rar
以下乃本人寫的第一款游戲....因以前沒有寫過游戲的東東，所以這款游戲的構思純屬於自己亂想的......希望各位游戲達人能指點一下.......
之所以寫這款游戲，是因為在CSDN上面看到有人使用JS的OO思想寫了個蛇吃小方塊的游戲.里面有人回復要是有人使用JS的OO思想寫個俄羅斯方塊才行，呵呵....本人因一時興起就試著寫了個......沒想到還真被我瞎弄出來了...
先說一下游戲的構思
1. 定義圖形(圖形是由一個一個的單元格組成的)
圖形的作用： 移動, 變形
2. 定個一個背景(這個背景有點像表格，由行組成，行又由單元格組成).
背景的作用：當圖形固定下來後，背景中的單元格跟圖形的單元格如果重疊在一起的話,就將背景的單元格的顏色改為跟圖形一樣...且將背景單元格的狀態設為1...當背景行中的所有單元格都為1時(表示這一行已經被圖形填滿了),刪除這一行,再在背景的頂部添加一新行(為了是背景大不一致，刪除一行後要添加一新行，且在頂部。這樣圖形才會看到是下掉的效果了)
3. 定義游戲
關口的設定：每一關都是由圖形下降的速度與這一關顯示的圖形數確定的...如:
this.Levels.push(new GameLevel(1, 800, 10)); // 表示第一關，速度800，顯示10個圖形
this.Levels.push(new GameLevel(2, 600, 20));
this.Levels.push(new GameLevel(3, 400, 30));
this.Levels.push(new GameLevel(4, 200, 40));
this.Levels.push(new GameLevel(5, 100, 50));
下一圖形的設定：隨機產生的
var index = parseInt(Math.random() * 18)
var img = ev
return img;
下一關的設定：當前關口的圖形完部顯示完成後，直接進入下一關...
4. 圖形控制
下移圖形控制：當前圖形中的單元格下邊界與已經變色的背景單元格的上邊界進行比較，如果相似，則表示達到了其它圖形的上面，當前圖形固定，開始下一圖形
左移圖形控制：當前圖形中的單元格左邊界與已經變色的背景單元格的右邊界進行比較，如果相似，則表圾達到的其它圖形的右邊不能左移
右移圖形的控制：類似於左移
5. 使用方法
var game = new Game(document.getElementById("labPanel")); // 創建游戲對象
game.Width = 10; // 設定游戲水平方向的單元格數
game.Height = 13; // 設定游戲豎直方向的單元格數
game.Init(); // 初使化游戲
game.Start(); // 開始游戲
是不是看起來很簡單了
6. 游戲代碼：
a. 背景類
// 容器
function GameTable(p, celCount, rowCount) {
this.RowCount = rowCount; // 有多少行，即豎直有多少格
this.CelCount = celCount; // 有多少列，即橫向有多少格
this.m_Index = 0;
//this.Rows = new Array();
this.Rows = new Dictionary();
this.Panel = p;
}
GameTable.prototype.Render = function() {
var count = this.Rows.length;
this.Panel.style.width = GameCell.Width * this.CelCount + 2;
this.Panel.style.height = GameCell.Height * this.RowCount + 2;
this.Panel.style.verticalAlign = "bottom";
for (var i = 0; i < this.RowCount; i++) {
this.AddRow();
}
}
GameTable.prototype.AddRow = function() { // 添加一新行
var row = new GameRow(this, this.m_Index, this.CelCount);
row.Render();
this.Rows.Add(this.m_Index.toString(), row);
//this.Rows.push(row);
this.m_Index++;
}
GameTable.prototype.RemoveRow = function(index) { // 刪除行
this.Panel.removeChild(this.Rows.Item(index.toString()).Panel);
this.Rows.Remove(index.toString());
//this.Rows.Remove(index);
this.AddRow(); // 添加一新行來填滿容器
}
GameTable.prototype.FinishRow = function(row) { // 當行填滿時，觸發的事件
this.RemoveRow(row.Index);
}
// 容器行
function GameRow(p,index, celNumber) {
this.Cels = new Array(celNumber);
this.Index = index;
this.Table = p;
this.Status = 0; // 單元行狀態
this.Panel = null;
}
GameRow.prototype =
{
Render: function() {
var count = this.Cels.length;
var left = 0;
var top = 0;
var width = GameCell.Width * count;
var height = GameCell.Height;
var html = "<div style='position:relative;z-index:10;left:{0}px;top:{1}px;width:{2}px;height:{3}px;'></div>";
html = html.Format(left, top, width, height);
this.Panel = document.createElement(html);
//this.Panel.innerHTML = this.Index.toString();
this.Table.Panel.insertBefore(this.Panel, this.Table.Panel.firstChild);
//this.Table.Panel.appendChild(this.Panel);
this.CreateCells();
},
CreateCells: function() {
var count = this.Cels.length;
for (var i = 0; i < count; i++) {
this.Cels[i] = new GameCell(this, i);
this.Cels[i].Render();
}
},
SetCellStatus: function(index, value) { // 設定指定單元格的狀態
this.Cels[index].Status = value;
var rowStatus = 1; // 行狀態
for (var i = 0; i < this.Cels.length; i++) {
if (this.Cels[i].Status == 0) {
rowStatus = 0;
break;
}
}
this.Status = rowStatus;
if(this.Status==1) this.Table.FinishRow(this);
}
}
// 容器列
function GameCell(p, index) {
this.Status = 0; // 單元格狀態
this.Index = index;
this.Row = p;
this.Panel = null;
this.Render = function() {
var left = this.Index * GameCell.Width;
var top = 0;
var width = GameCell.Width;
var height = GameCell.Height;
var html = "<div style='position:absolute;z-index:100;left:{0}px;top:{1}px;width:{2}px;height:{3}px;'></div>"; //FILTER:alpha(opacity=30);
html = html.Format(left, top, width, height); // 因為有邊界，所以實際單元格的大小多了2px
this.Panel = document.createElement(html);
this.SetBorder("dashed 1px #666666");
this.SetBackGround("#ebebeb");
this.Row.Panel.appendChild(this.Panel);
}
}
GameCell.prototype.SetStatus = function(value) { // 設定單元格的狀態
this.Row.SetCellStatus(this.Index, value);
}
GameCell.prototype.SetBorder = function(value) { // 設定背景色
this.Panel.style.border = value;
}
GameCell.prototype.SetBackGround = function(value) { // 設定背景色
this.Panel.style.background = value;
}
GameCell.Width = 20
GameCell.Height = 20
b. 圖形類
// 圖形基類
function BaseImage(parent,type) {
this.Left = 0;
this.Top = 0;
this.Width = GameCell.Width;
this.Height = GameCell.Height;
this.ImageBorder = "solid 1px blue";
this.ImageBGround = "green";
this.Parent = parent;
this.Panel = null;
this.Type = type;
this.Childs = new Array(); // 子圖形
this.ParentPoint = GetPosition(this.Parent);
}
BaseImage.prototype =
{
Init: function() { // 初使化圖形[粗象方向需重寫]
},
Render: function() { // 輸出圖形[粗象方向需重寫]
},
MoveLeft: function() { // 左移圖形
if (this.Left > this.ParentPoint.x) { // 圖形不能超出容器
if (this.EventBeginMoveLeft()) {
this.Left = parseInt(this.Panel.style.left) - GameCell.Width;
this.Panel.style.left = this.Left;
if (this.Left > this.ParentPoint.x) {
this.EventEndMoveLeft(0);
} else {
this.EventEndMoveLeft(1);
}
}
}
else {
this.EventEndMoveLeft(2);
}
},
MoveRight: function() { // 右移圖形
if ((this.Left + this.Width + 4) < (this.ParentPoint.x + this.ParentPoint.width)) { // 圖形不能超出容器
if (this.EventBeginMoveRight()) {
this.Left = parseInt(this.Panel.style.left) + GameCell.Width;
this.Panel.style.left = this.Left;
if ((this.Left + this.Width + 4) < (this.ParentPoint.x + this.ParentPoint.width)) {
this.EventEndMoveRight(0);
} else {
this.EventEndMoveRight(1);
}
}
}
else {
this.EventEndMoveRight(2);
}
},
MoveDown: function() { // 下移圖形
if ((this.ParentPoint.x + this.Top + this.Height) < (this.ParentPoint.x + this.ParentPoint.height)) { // 圖形不能超出容器
if (this.EvnetBeginMoveDown()) {
this.Top = parseInt(this.Panel.style.top) + GameCell.Height;
this.Panel.style.top = this.Top;
if ((this.ParentPoint.x + this.Top + this.Height) < (this.ParentPoint.x + this.ParentPoint.height)) {
this.EvnetEndMoveDown(0);
} else {
this.EvnetEndMoveDown(1);
}
}
}
else {
this.EvnetEndMoveDown(2);
}
},
Deformation: function() { // 變形
this.NextType();
this.Parent.removeChild(this.Panel);
this.Init();
this.Render();
this.SetBorder(this.ImageBorder);
this.SetBackGround(this.ImageBGround);
},
NextType: function() { // 下一圖形狀態[粗象方向需重寫]
},
EventBeginMoveLeft: function(status) { // 左移事件前
return true;
},
EventEndMoveLeft: function(status) { // 左移事件後
},
EventBeginMoveRight: function(status) { // 右移事件前
return true;
},
EventEndMoveRight: function(status) { // 右移事件後
},
EvnetBeginMoveDown: function() { // 下移事件前
return true;
},
EvnetEndMoveDown: function(status) { // 下移事件後
},
SetBorder: function(value) { // 設置子圖形的邊框
this.ImageBorder = value;
for (var i = 0; i < this.Childs.length; i++) {
this.Childs[i].style.border = value;
}
},
SetBackGround: function(value) { //設置子圖形的背景
this.ImageBGround = value;
for (var i = 0; i < this.Childs.length; i++) {
this.Childs[i].style.background = value;
}
}
}
// 圖形種類基類
// 0~3：七字形圖
// 4~7：反七字形圖
// 8~11：山字形圖
// 12~13：Z字形圖
// 14~15：反Z字形圖
// 16~17：一字形圖
/// 18：正方形圖
function ImageCategory(parent, type) {
this.HCount = 2; // 水平方向的格數
this.VCount = 3; // 豎直方賂的格數
BaseImage.call(this, parent, type);
}
ImageCategory.prototype = new BaseImage();
ImageCategory.prototype.Init = function() {
switch (this.Type) {
case 1:
case 3:
case 5:
case 7:
case 9:
case 11:
case 13:
case 15:
this.HCount = 3;
this.VCount = 2;
break;
case 16:
this.HCount = 4;
this.VCount = 1;
break;
case 17:
this.HCount = 1;
this.VCount = 4;
break;
case 18:
this.HCount = 2;
this.VCount = 2;
break;
default:
this.HCount = 2;
this.VCount = 3;
break;
}
this.Width = GameCell.Width * this.HCount;
this.Height = GameCell.Height * this.VCount;
}
ImageCategory.prototype.Render = function() {
var html = "<div style='position:absolute;z-index:1000;left:{0}px;top:{1}px;width:{2}px;height:{3}px;'></div>";
html = html.Format(this.Left, this.Top, this.Width, this.Height);
this.Panel = document.createElement(html);
this.Parent.appendChild(this.Panel);
this.Create();
}
ImageCategory.prototype.Create = function() {
for (var i = 0; i < this.VCount; i++) {
var html = "<div style='position:absolute;z-index:1001;left:{0}px;top:{1}px;width:{2}px;height:{3}px;'></div>";
html = html.Format(0, i * GameCell.Height, this.Width, GameCell.Height);
var row = document.createElement(html);
this.Panel.appendChild(row);
this.CreateCells(row,i);
}
}
ImageCategory.prototype.CreateCells = function(row, index) {
switch (this.Type) {
case 0:
if (index == 0) {
this.CreateFullCells(row);
}
else {
this.CreateBox(row, GameCell.Width, 0);
}
break;
case 1:
if (index == 0) {
this.CreateBox(row, GameCell.Width * (this.HCount - 1), 0);
}
else {
this.CreateFullCells(row);
}
break;
case 2:
if (index == this.VCount - 1) {
this.CreateFullCells(row);
}
else {
this.CreateBox(row, 0, 0);
}
break;
case 3:
if (index == this.VCount - 1) {
this.CreateBox(row, 0, 0);
}
else {
this.CreateFullCells(row);
}
break;
case 4:
if (index == 0) {
this.CreateFullCells(row);
}
else {
this.CreateBox(row, 0, 0);
}
break;
case 5:
if (index == 0) {
this.CreateFullCells(row);
}
else {
this.CreateBox(row, GameCell.Width * (this.HCount - 1), 0);
}
break;
case 6:
if (index == this.VCount - 1) {
this.CreateFullCells(row);
}
else {
this.CreateBox(row, GameCell.Width, 0);
}
break;
case 7:
if (index == 0) {
this.CreateBox(row, 0, 0);
}
else {
this.CreateFullCells(row);
}
break;
case 8:
if (index == this.VCount - 2) {
this.CreateFullCells(row);
}
else {
this.CreateBox(row, GameCell.Width, 0);
}
break;
case 9:
if (index == this.VCount - 1) {
this.CreateFullCells(row);
}
else {
this.CreateBox(row, GameCell.Width, 0);
}
break;
case 10:
if (index == this.VCount - 2) {
this.CreateFullCells(row);
}
else {
this.CreateBox(row, 0, 0);
}
break;
case 11:
if (index == 0) {
this.CreateFullCells(row);
}
else {
this.CreateBox(row, GameCell.Width, 0);
}
break;
case 12:
if (index == 0) {
this.CreateBox(row, GameCell.Width, 0);
}
else if (index == 1) {
this.CreateFullCells(row);
}
else {
this.CreateBox(row, 0, 0);
}
break;
case 13:
if (index == 0) {
this.CreateBox(row, 0, 0);
this.CreateBox(row, GameCell.Width, 0);
}
else {
this.CreateBox(row, GameCell.Width, 0);
this.CreateBox(row, GameCell.Width*2, 0);
}
break;
case 14:
if (index == 0) {
this.CreateBox(row, 0, 0);
}
else if (index == 1) {
this.CreateFullCells(row);
}
else {
this.CreateBox(row, GameCell.Width, 0);
}
break;
case 15:
if (index == 0) {
this.CreateBox(row, GameCell.Width, 0);
this.CreateBox(row, GameCell.Width * 2, 0);
}
else {
this.CreateBox(row, 0, 0);
this.CreateBox(row, GameCell.Width, 0);
}
break;
default:
this.CreateFullCells(row);
break;
}
}
ImageCategory.prototype.CreateFullCells = function(row) {
for (var i = 0; i < this.HCount; i++) {
this.CreateBox(row, i * GameCell.Width, 0);
}
}
ImageCategory.prototype.CreateBox = function(row, x, y) {
var box = new Box();
box.style.left = x;
box.style.top = y;
row.appendChild(box);
this.Childs.push(box);
}
ImageCategory.prototype.NextType = function() {
if (this.Type < 4) {
if (this.Type == 3) this.Type = 0;
else this.Type++;
}
else if (this.Type < 8) {
if (this.Type == 7) this.Type = 4;
else this.Type++;
}
else if (this.Type < 12) {
if (this.Type == 11) this.Type = 8;
else this.Type++;
}
else if (this.Type < 14) {
if (this.Type == 13) this.Type = 12;
else this.Type++;
}
else if (this.Type < 16) {
if (this.Type == 15) this.Type = 14;
else this.Type++;
}
else if (this.Type < 18) {
if (this.Type == 17) this.Type = 16;
else this.Type++;
}
}
function ImageCategory0(parent) {
ImageCategory.call(this, parent, 0);
}
ImageCategory0.prototype = new ImageCategory();
function ImageCategory1(parent) {
ImageCategory.call(this, parent, 1);
}
ImageCategory1.prototype = new ImageCategory();
function ImageCategory2(parent) {
ImageCategory.call(this, parent, 2);
}
ImageCategory2.prototype = new ImageCategory();
function ImageCategory3(parent) {
ImageCategory.call(this, parent, 3);
}
ImageCategory3.prototype = new ImageCategory();
function ImageCategory4(parent) {
ImageCategory.call(this, parent, 4);
}
ImageCategory4.prototype = new ImageCategory();
function ImageCategory5(parent) {
ImageCategory.call(this, parent, 5);
}
ImageCategory5.prototype = new ImageCategory();
function ImageCategory6(parent) {
ImageCategory.call(this, parent, 6);
}
ImageCategory6.prototype = new ImageCategory();
function ImageCategory7(parent) {
ImageCategory.call(this, parent, 7);
}
ImageCategory7.prototype = new ImageCategory();
function ImageCategory8(parent) {
ImageCategory.call(this, parent, 8);
}
ImageCategory8.prototype = new ImageCategory();
function ImageCategory9(parent) {
ImageCategory.call(this, parent, 9);
}
ImageCategory9.prototype = new ImageCategory();
function ImageCategory10(parent) {
ImageCategory.call(this, parent, 10);
}
ImageCategory10.prototype = new ImageCategory();
function ImageCategory11(parent) {
ImageCategory.call(this, parent, 11);
}
ImageCategory11.prototype = new ImageCategory();
function ImageCategory12(parent) {
ImageCategory.call(this, parent, 12);
}
ImageCategory12.prototype = new ImageCategory();
function ImageCategory13(parent) {
ImageCategory.call(this, parent, 13);
}
ImageCategory13.prototype = new ImageCategory();
function ImageCategory14(parent) {
ImageCategory.call(this, parent, 14);
}
ImageCategory14.prototype = new ImageCategory();
function ImageCategory15(parent) {
ImageCategory.call(this, parent, 15);
}
ImageCategory15.prototype = new ImageCategory();
function ImageCategory16(parent) {
ImageCategory.call(this, parent, 16);
}
ImageCategory16.prototype = new ImageCategory();
function ImageCategory17(parent) {
ImageCategory.call(this, parent, 17);
}
ImageCategory17.prototype = new ImageCategory();
function ImageCategory18(parent) {
ImageCategory.call(this, parent, 18);
}
ImageCategory18.prototype = new ImageCategory();
// Box
function Box()
{
var html = "<div style='position:absolute;z-index:1009;width:{0}px;height:{1}px;'></div>";
html = html.Format(GameCell.Width, GameCell.Height);
return document.createElement(html);
}
c. 游戲類
// 游戲類
function Game(parent) {
this.Parent = parent;
this.Width = 10; // 橫向格子數
this.Height = 10; // 豎向格子數
this.Speed = 600; // 游戲速度
this.CurrnetProgress = null; // 當前進程
this.ImageBorder = "solid 1px blue"; // 游戲圖形的邊框
this.ImageBGround = "#FF00FF"; // 游戲圖形的背景
this.ParentPoint = GetPosition(parent);
this.CurrentImage = null; // 當前圖形
this.Table = null; // 背景表格
this.LoadImageNumber = 0; // 當前關口已經顯示的圖形數
this.CurrentLevel = null; // 當前游戲關口
this.Levels = new Array(); // 游戲關口
this.LevelIndex = 0; // 當前關口序號
}
Game.prototype =
{
Init: function() { // 加載背景
// 設定游戲界面大小
//this.Parent.style.width = GameCell.Width * this.Width + 2;
//this.Parent.style.height = GameCell.Height * this.Height + 2;
this.Levels.push(new GameLevel(1, 800, 10));
this.Levels.push(new GameLevel(2, 600, 20));
this.Levels.push(new GameLevel(3, 400, 30));
this.Levels.push(new GameLevel(4, 200, 40));
this.Levels.push(new GameLevel(5, 100, 50));
this.Table = new GameTable(this.Parent, this.Width, this.Height);
this.Table.Render();
},
Start: function() { // 開始游戲
this.NextLevel();
var sender = this;
//this.Parent.on
document.body.on
sender.EventKey();
}
},
NextLevel: function() { // 下一關游戲
if (this.LevelIndex >= this.Levels.length) {
alert("您已經過了總關了!");
this.ResetTableCellStatus();
return;
}
alert("第" + (this.LevelIndex + 1).toString() + "關");
this.CurrentLevel = this.Levels[this.LevelIndex];
this.LoadImageNumber = 0; // 清空當前關口加載的圖形數
this.Execute();
this.LevelIndex++;
},
LoadNewImage: function() { // 加載新圖形
window.clearInterval(this.CurrnetProgress);
this.SetTableCellStatus(); // 開始新的圖形之前，先設定背景表格單元格的狀態
this.Parent.removeChild(this.CurrentImage.Panel); //開始新的圖形之前，刪除原來的圖形
this.CurrentImage = null;
if (this.LoadImageNumber >= this.CurrentLevel.Number) { // 當前關口的圖形加載完成後，進去下一關
this.NextLevel();
return;
}
else {
this.Execute();
}
},
NextImage: function() { // 下一圖形
this.LoadImageNumber++;
var index = parseInt(Math.random() * 18)
var img = ev
return img;
},
Progress: function() { // 進度
var img = this.CurrentImage;
this.CurrnetProgress = window.setInterval(ProgressSpeed, this.CurrentLevel.Speed);
function ProgressSpeed() {
img.MoveDown();
}
},
Execute: function() { // 執行游戲
this.CurrentImage = this.NextImage();
this.CurrentImage.Init();
this.CurrentImage.Left = this.ParentPoint.x + ((this.Width / 2 - 1) * GameCell.Width);
this.CurrentImage.Top = this.ParentPoint.y;
this.CurrentImage.Render();
this.CurrentImage.SetBorder(this.ImageBorder);
this.CurrentImage.SetBackGround(this.ImageBGround);
if (this.CheckImageDownBorder()) { // Game Over
alert("Game Over");
this.Parent.removeChild(this.CurrentImage.Panel); //刪除當前的圖形
this.CurrentImage = null;
this.ResetTableCellStatus();
return;
}
var sender = this;
this.CurrentImage.EvnetEndMoveDown = function(status) { // 當前圖形向下移動後
if (status == 2) { // 圖形到達底部後
sender.LoadNewImage();
}
else { // 圖形在半路時,比較當前圖形與已經加載的圖形是否存在相同的邊界
if (sender.CheckImageDownBorder()) {
sender.LoadNewImage();
}
}
}
this.CurrentImage.EventBeginMoveLeft = function(status) { // 當前圖形向左移動前
// 比較當前圖形的左邊界與已經加載圖形的右邊界是否存在相同的邊界
if (sender.CheckImageLeftBorder()) {
return false;
}
return true;
}
this.CurrentImage.EventBeginMoveRight = function(status) { // 當前圖形向右移動前
// 比較當前圖形的右邊界與已經加載圖形的左邊界是否存在相同的邊界
if (sender.CheckImageRightBorder()) {
return false;
}
return true;
}
this.Progress();
},
CheckImageDownBorder: function() { //檢測當前圖形與已經加載的圖形是否存在相同的邊界
// 取得當前圖形的下邊界集合
var curBorders = new Array();
for (var i = 0; i < this.CurrentImage.Childs.length; i++) {
var border = this.GetDownBorder(this.CurrentImage.Childs[i]);
curBorders.push(border);
}
var statusBoxs = this.GetBoxStatus();
for (var i = 0; i < statusBoxs.length; i++) {
var border = this.GetUpBorder(statusBoxs[i]);
for (var k = 0; k < curBorders.length; k++) {
if (this.ComparisonBorder(curBorders[k], border)) {
return true;
}
}
}
return false;
},
CheckImageLeftBorder: function() { // 比較當前圖形的左邊界與已經加載圖形的右邊界是否存在相同的邊界
// 取得當前圖形的左邊界集合
var curBorders = new Array();
for (var i = 0; i < this.CurrentImage.Childs.length; i++) {
var border = this.GetLeftBorder(this.CurrentImage.Childs[i]);
curBorders.push(border);
}
var statusBoxs = this.GetBoxStatus();
for (var i = 0; i < statusBoxs.length; i++) {
var border = this.GetRightBorder(statusBoxs[i]);
for (var k = 0; k < curBorders.length; k++) {
if (this.ComparisonBorder(curBorders[k], border)) {
return true;
}
}
}
return false;
},
CheckImageRightBorder: function() { // 比較當前圖形的右邊界與已經加載圖形的左邊界是否存在相同的邊界
// 取得當前圖形的右邊界集合
var curBorders = new Array();
for (var i = 0; i < this.CurrentImage.Childs.length; i++) {
var border = this.GetRightBorder(this.CurrentImage.Childs[i]);
curBorders.push(border);
}
var statusBoxs = this.GetBoxStatus();
for (var i = 0; i < statusBoxs.length; i++) {
var border = this.GetLeftBorder(statusBoxs[i]);
for (var k = 0; k < curBorders.length; k++) {
if (this.ComparisonBorder(curBorders[k], border)) {
return true;
}
}
}
return false;
},
GetDownBorder: function(img) { // 取得圖形的下邊界
var point = GetPosition(img);
return {
x1: point.x,
y1: point.y + point.height,
x2: point.x + point.width,
y2: point.y + point.height
}
},
GetUpBorder: function(img) { //取得圖形的上邊界
var point = GetPosition(img);
return {
x1: point.x,
y1: point.y,
x2: point.x + point.width,
y2: point.y
}
},
GetLeftBorder: function(img) { // 取得圖形的左邊界
var point = GetPosition(img);
return {
x1: point.x,
y1: point.y,
x2: point.x,
y2: point.y + point.height
}
},
GetRightBorder: function(img) { // 取得圖形的右邊界
var point = GetPosition(img);
return {
x1: point.x + point.width,
y1: point.y,
x2: point.x + point.width,
y2: point.y + point.height
}
},
ComparisonBorder: function(border1, border2) { // 比較兩邊界是否相等
var offset = 5; // 因為有border所以有點誤差了
if (border1.x1 >= border2.x1 - offset && border1.x1 <= border2.x1 + offset) {
if (border1.y1 >= border2.y1 - offset && border1.y1 <= border2.y1 + offset) {
if (border1.x2 >= border2.x2 - offset && border1.x2 <= border2.x2 + offset) {
if (border1.y2 >= border2.y2 - offset && border1.y2 <= border2.y2 + offset) {
return true;
}
}
}
}
return false;
},
EventKey: function() { // 按鈕事件
switch (event.keyCode) {
case 37: // Left
this.CurrentImage.MoveLeft();
break;
case 38: // Up
/*var maxValue = this.CurrentImage.Height;
if (maxValue < this.CurrentImage.Width) maxValue = this.CurrentImage.Width;
if ((this.ParentPoint.x + this.CurrentImage.Top + maxValue) > (this.ParentPoint.x + this.ParentPoint.height + 4)) {
this.CurrentImage.Top = this.CurrentImage.Top - GameCell.Height;
}
*/
this.CurrentImage.Deformation();
break;
case 39: // Right
this.CurrentImage.MoveRight();
break;
case 40: // Down
this.CurrentImage.MoveDown();
break;
}
},
SetLoadImageBoxs: function() // 將當前圖形的基本Box添加到數組中
{
for (var i = 0; i < this.CurrentImage.Childs.length; i++) {
this.LoadImageBoxs.push(this.CurrentImage.Childs[i]);
}
},
SetTableCellStatus: function() { // 設定背景中的單元格狀態
var curBoxs = new Array();
for (var i = 0; i < this.CurrentImage.Childs.length; i++) {
var box = this.CurrentImage.Childs[i];
//var boxPosition = GetPosition(box);
curBoxs.push(box);
}
var celstatus = new Array(); // 將要設定狀態的單元格
// 以下這種算法在背景單元格N多的時候，至使游戲在執行的時候到底底邊時會等一下
for (var k = 0; k < this.Table.Rows.Keys().length; k++) {
var row = this.Table.Rows.Item(this.Table.Rows.Keys()[k]);
for (var j = 0; j < row.Cels.length; j++) {
var cel = row.Cels[j];
if (cel.Status == 0) { // 狀態為0時才比較
var celBox = cel.Panel;
for (var i = 0; i < curBoxs.length; i++) {
var box = curBoxs[i];
if (this.ComparisonBorder(this.GetUpBorder(box), this.GetUpBorder(celBox)) && this.ComparisonBorder(this.GetDownBorder(box), this.GetDownBorder(celBox))) {
// 當兩個圖形的上邊界與下邊界都相等時，兩個圖形在一起
celstatus.push(cel);
// 設定Box的背景色
cel.SetBorder(this.ImageBorder);
cel.SetBackGround(this.ImageBGround);
}
}
}
}
}
for (var i = 0; i < celstatus.length; i++) {
var cel = celstatus[i];
cel.SetStatus(1);
}
},
ResetTableCellStatus: function() { // 還原背景中的單元格狀態
for (var k = 0; k < this.Table.Rows.Keys().length; k++) {
var row = this.Table.Rows.Item(this.Table.Rows.Keys()[k]);
for (var j = 0; j < row.Cels.length; j++) {
var cel = row.Cels[j];
if (cel.Status == 1) {
cel.SetStatus(0);
// 設定Box的背景色
cel.SetBorder("dashed 1px #666666");
cel.SetBackGround("#ebebeb");
}
}
}
},
GetBoxStatus: function() { // 取得背景中所有狀態為1的Box
var result = new Array();
for (var k = 0; k < this.Table.Rows.Keys().length; k++) {
var row = this.Table.Rows.Item(this.Table.Rows.Keys()[k]);
for (var j = 0; j < row.Cels.length; j++) {
var cel = row.Cels[j];
if (cel.Status == 1) {
result.push(cel.Panel);
}
}
}
return result;
}
}
// 游戲關口類
function GameLevel(index, speed, number) {
this.Index = index; // 第幾關
this.Speed = speed; // 速度
this.Number = number; // 顯示圖形數
}
d. 共用函數
/// *******************
/// 取得對象的位置
/// element：對象
/// 返回：對象(x:y:width:height)
/// *******************
function GetPosition(element)
{
if (arguments.length != 1 || element == null )
{
return null;
}
/*
if(element.style.position == 'absolute')
{
return {
x:element.style.left,
y:element.style.top
}
}*/
var offsetLeft = element.offsetLeft;
var offsetTop = element.offsetTop;
var offsetWidth = element.offsetWidth;
var offsetHeight = element.offsetHeight;
while(element = element.offsetParent ) {
/*
if ( element.style.position == 'absolute' || element.style.position == 'relative'
|| ( element.style.overflow != 'visible' && element.style.overflow != '' ) )
{
break;
} */
offsetLeft += element.offsetLeft;
offsetTop += element.offsetTop;
}
return {
x:offsetLeft,
y:offsetTop,
width:offsetWidth,
height:offsetHeight
};
}
// 格式化字符串
String.prototype.Format = function() {
var str = this;
for (var i = 0; i < arguments.length; i++) {
str = str.replace("{" + i.toString() + "}", arguments[i].toString());
}
return str;
}