使用JS寫的第一個游戲[俄羅斯方塊]

效果预览：

       以下乃本人寫的第一款游戲....因以前沒有寫過游戲的東東，所以這款游戲的構思純屬於自己亂想的......希望各位游戲達人能指點一下.......

       之所以寫這款游戲，是因為在CSDN上面看到有人使用JS的OO思想寫了個蛇吃小方塊的游戲.里面有人回復要是有人使用JS的OO思想寫個俄羅斯方塊才行，呵呵....本人因一時興起就試著寫了個......沒想到還真被我瞎弄出來了...

先說一下游戲的構思

1. 定義圖形(圖形是由一個一個的單元格組成的)

圖形的作用：移動, 變形

2. 定個一個背景(這個背景有點像表格，由行組成，行又由單元格組成).

       背景的作用：當圖形固定下來後，背景中的單元格跟圖形的單元格如果重疊在一起的話,就將背景的單元格的顏色改為跟圖形一樣...且將背景單元格的狀態設為1...當背景行中的所有單元格都為1時(表示這一行已經被圖形填滿了),刪除這一行,再在背景的頂部添加一新行(為了是背景大不一致，刪除一行後要添加一新行，且在頂部。這樣圖形才會看到是下掉的效果了)

3. 定義游戲

關口的設定：每一關都是由圖形下降的速度與這一關顯示的圖形數確定的...如:

JavaScript复制代码

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

下一圖形的設定：隨機產生的

JavaScript复制代码

var index = parseInt(Math.random() * 18)
var img = eval("new ImageCategory" + index.toString() + "(this.Parent)");
return img;

下一關的設定：當前關口的圖形完部顯示完成後，直接進入下一關...

4. 圖形控制

下移圖形控制：當前圖形中的單元格下邊界與已經變色的背景單元格的上邊界進行比較，如果相似，則表示達到了其它圖形的上面，當前圖形固定，開始下一圖形

左移圖形控制：當前圖形中的單元格左邊界與已經變色的背景單元格的右邊界進行比較，如果相似，則表圾達到的其它圖形的右邊不能左移
右移圖形的控制：類似於左移

5. 使用方法

JavaScript复制代码

var game = new Game(document.getElementById("labPanel")); // 創建游戲對象
game.Width = 10; // 設定游戲水平方向的單元格數
game.Height = 13; // 設定游戲豎直方向的單元格數
game.Init(); // 初使化游戲
game.Start(); // 開始游戲

是不是看起來很簡單了

6. 游戲代碼：

a. 背景類

展开JavaScript复制代码

// 容器
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. 圖形類

展开JavaScript复制代码

// 圖形基類
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);
}

打包下载

上一篇：jquery判断对象是否存在

下一篇：使用js打印局部页面

留下脚印压缩包密码:sosuo8

全部评论:

土豆	2010-7-27 12:00:00
哥，你犀利了

申明:本站部分文章来自网络,由于各种原因对文章的来源无从考究,如果您是“ 使用JS寫的第一個游戲[俄羅斯方塊] ”的原作者，若侵犯您的版权,请与我联系!在此请您原谅我的幼稚和无知!联系方法：email:ahuinan@21cn.com QQ:106494262

感谢以下网友对网站提出的建议：
1、感谢“蓝树叶kiss”网友发现一个评论漏洞。(2009-2-28)
2、感谢“陈臣”对程序优化和seo方面的建议。(2009-3-18)

文章档案

作者：冷风
来源：冷风's blog
日期：2009-8-8 12:33:00
点击：430

网友投票(您觉得这篇文章怎样？)

请稍侯......

实用文章总结

文章阅读排行

随便看看

最新评论