Javascript JS函数不是';t执行
我已经试了好几个小时想找出我的错误,但是我找不到。没有出现错误,这让我更加不安Javascript JS函数不是';t执行,javascript,Javascript,我已经试了好几个小时想找出我的错误,但是我找不到。没有出现错误,这让我更加不安 /*常数*/ //颜色 var EMPTY_COLOR=“000000”; var接地颜色=“663300”; var STONE_COLOR=“33FF33”; var PLAYER_COLOR=“66CCFF”; var TARGET_COLOR=“FFFFFF”; //以像素为单位的大小 var BLOCK_HEIGHT=“20”; 变量块_WIDTH=“20”; //地图的栅格大小(以块为单位) var M
/*常数*/
//颜色
var EMPTY_COLOR=“000000”;
var接地颜色=“663300”;
var STONE_COLOR=“33FF33”;
var PLAYER_COLOR=“66CCFF”;
var TARGET_COLOR=“FFFFFF”;
//以像素为单位的大小
var BLOCK_HEIGHT=“20”;
变量块_WIDTH=“20”;
//地图的栅格大小(以块为单位)
var MAP_宽度=42;
var MAP_高度=22;
//绘制地图的元素
var MAP_ID=“MAP”;
/*端部接触*/
/*助手*/
String.prototype.repeat=函数(次){
返回(新数组(次+1)).join(此);
}
函数点2D(r,c){
该行=r;
这个Col=c;
}
函数颜色(十六进制){
this.Color='#'+hex;
}
var CreateType={
地面:函数(){返回新地面();},
目标:函数(){返回新目标();},
Stone:function(){returnnewstone();},
Player:function(){returnnewplayer();}
};
//[0]=地面,[1]=目标,[2]=石头,[3]=玩家
var CreateTypeByDigit=[
CreateType.Ground,
CreateType.Target,
CreateType.Stone,
CreateType.Player,
];
变量方向={
左:新点2D(-1,0),
右:新的点2D(1,0),
向上:新的点2D(0,1),
向下:新点2D(0,-1)
};
/*终端助手*/
/*主要对象*/
函数映射(){
这个.Blocks=null;
this.HTML_元素=null;
this.map\u string=“0”。重复(map\u高度*map\u宽度);
this.createAt=函数(r,c,elem){
var cell=document.createElement('div');
this.Blocks[r][c]=CreateTypeByDigit[parseInt(this.map_字符串[r*map_高度+c]);
this.Blocks[r][c].HTML_元素=b;
这个.Blocks[r][c].Position=新的点2d(r,c);
子元素(细胞);
};
this.Create=函数(){
警惕(“我们做到了”);
this.Blocks=新数组(映射高度);
对于(var r=0;r
#Game
{
width: 882px;
height: 509px;
border: 2px solid black;
}
#Game div#Stats
{
padding: 15px;
}
#Game div#Stats div
{
font-weight: bold;
display: inline;
}
#Game div#Stats #Right
{
float: right;
font-weight: normal;
}
#Game div#Stats #Right div
{
margin-left: 10px;
}
#Game #Map
{
width: 882px;
height: 462px;
}
#Game #Map div
{
width: 20px;
height: 20px;
border-top: 1px solid #333;
border-right: 1px solid #333;
display: inline-block;
}
/* Constants */
// Colors
var EMPTY_COLOR = "000000";
var GROUND_COLOR = "663300";
var STONE_COLOR = "33FF33";
var PLAYER_COLOR = "66CCFF";
var TARGET_COLOR = "FFFFFF";
// Size in pixels
var BLOCK_HEIGHT = "20";
var BLOCK_WIDTH = "20";
// Map's grid size in Blocks
var MAP_WIDTH = 42;
var MAP_HEIGHT = 22;
// Element the map will be drawed on
var MAP_ID = "Map";
/* END Contants */
/* Helpers */
String.prototype.repeat = function (times) {
return (new Array(times + 1)).join(this);
}
function Point2D(r, c) {
this.Row = r;
this.Col = c;
}
function Color(hex) {
this.Color = '#' + hex;
}
var CreateType = {
Ground: function () { return new Ground(); },
Target: function () { return new Target(); },
Stone: function () { return new Stone(); },
Player: function () { return new Player(); }
};
// [0] = GROUND, [1] = TARGET, [2] = STONE, [3] = PLAYER
var CreateTypeByDigit = [
CreateType.Ground,
CreateType.Target,
CreateType.Stone,
CreateType.Player,
];
var Direction = {
Left: new Point2D(-1, 0),
Right: new Point2D(1, 0),
Up: new Point2D(0, 1),
Down: new Point2D(0, -1)
};
/* END Helpers */
/* Main Objects */
function Map() {
this.Blocks = null;
this.HTML_Element = null;
this.map_string = "0".repeat(MAP_HEIGHT * MAP_WIDTH);
this.createAt = function (r, c, elem) {
var cell = document.createElement('div');
this.Blocks[r][c] = CreateTypeByDigit[parseInt(this.map_string[r * MAP_HEIGHT + c])];
this.Blocks[r][c].HTML_Element = b;
this.Blocks[r][c].Position = new Point2D(r, c);
elem.appendChild(cell);
};
this.Create = function () {
alert('WE DID IT');
this.Blocks = new Array(MAP_HEIGHT);
for (var r = 0; r < MAP_HEIGHT; r++) {
this.Blocks[r] = new Array(MAP_WIDTH);
}
alert('WE DID IT');
this.HTML_Element = document.getElementById(MAP_ID);
if (this.HTML_Element == null)
alert('Was unable to find the map element');
for (var r = 0; r < MAP_HEIGHT; r++) {
for (var c = 0; c < MAP_WIDTH; c++) {
this.createAt(r, c, this.HTML_Element);
}
}
};
}
function AbstractBlock() {
// Instance variables
var Position;
var Color;
var HTML_Element;
// Static variables
AbstractBlock.Width = BLOCK_WIDTH;
AbstractBlock.Height = BLOCK_HEIGHT;
}
function Ground() {
// Inherit AbstractBlock
AbstractBlock.apply(this, arguments);
// Define the color of this block
this.Color = new Color(GROUND_COLOR);
}
function Target() {
// Inherit Ground
Ground.apply(this, arguments);
// Define the color of this block
this.Color = new Color(TARGET_COLOR);
}
function Stone() {
// Inherit AbstractBlock
AbstractBlock.apply(this, arguments);
// Define the color of this block
this.Color = new Color(STONE_COLOR);
}
function Player() {
// Inherit AbstractBlock
AbstractBlock.apply(this, arguments);
// Define the color of this block
this.Color = new Color(PLAYER_COLOR);
// Move player, while switching it's last position
this.MovePlayer = function (x2, y2) {
var r = this.Position.Row;
var c = this.Position.Col;
Blocks[r, c] = Blocks[r + y2, c + x2];
Blocks[r, c].ApplyStyle();
r += x2;
c += y2;
Blocks[r, c] = this;
Blocks[r, c].ApplyStyle();
};
// Check if a move is valid. If so, execute it.
this.Move = function (dir) {
var r = this.Position.Row;
var c = this.Position.Col;
if (Map.Blocks[r + dir.Row][c + dir.Col] instanceof Ground)
{
this.Move(dir.Col, 0);
}
else if (Map.Blocks[r + dir.Row][c + dir.Col] instanceof Stone && Map.Blocks[r + dir.Row * 2][c + dir.Col * 2] instanceof Ground)
{
this.MovePlayer(dir.Row, dir.Col);
Blocks[r + dir.Row][c + dir.Col].Move(dir.Row, dir.Col);
}
};
this.MoveLeft = function () { Move(Direction.Left); };
this.MoveRight = function () { Move(Direction.Right); };
this.MoveUp = function () { Move(Direction.Up); };
this.MoveDown = function () { Move(Direction.MoveDown); };
function ApplyStyle(mapInstance) {
mapInstance.ApplyStyle(this.Position.X, this.Position.Y, PLAYER_COLOR);
}
}
function Map() {
this.Blocks = null;
this.HTML_Element = null;
this.map_string = "0".repeat(MAP_HEIGHT * MAP_WIDTH);
this.createAt = function (r, c, elem) {
var cell = document.createElement('div');
this.Blocks[r][c] = CreateTypeByDigit[parseInt(this.map_string[r * MAP_HEIGHT + c])];
this.Blocks[r][c].HTML_Element = b;
this.Blocks[r][c].Position = new Point2D(r, c);
elem.appendChild(cell);
};
this.Create = function () {
this.Blocks = new Array(MAP_HEIGHT);
for (var i = 0; i < MAP_HEIGHT; i++) {
this.Blocks[i] = new Array(MAP_WIDTH);
}
this.HTML_Element = document.getElementById(MAP_ID);
if (this.HTML_Element == null)
alert('Was unable to find the map element');
for (var r = 0; i < MAP_HEIGHT; i++) {
for (var c = 0; j < MAP_WIDTH; j++) {
this.createAt(r, c, this.HTML_Element);
}
}
};
}
function AbstractBlock() {
// Instance variables
var Position;
var Color;
var HTML_Element;
// Static variables
AbstractBlock.Width = BLOCK_WIDTH;
AbstractBlock.Height = BLOCK_HEIGHT;
}
function Ground() {
// Inherit AbstractBlock
AbstractBlock.apply(this, arguments);
// Define the color of this block
this.Color = new Color(GROUND_COLOR);
}
function Target() {
// Inherit Ground
Ground.apply(this, arguments);
// Define the color of this block
this.Color = new Color(TARGET_COLOR);
}
function Stone() {
// Inherit AbstractBlock
AbstractBlock.apply(this, arguments);
// Define the color of this block
this.Color = new Color(STONE_COLOR);
}
function Player() {
// Inherit AbstractBlock
AbstractBlock.apply(this, arguments);
// Define the color of this block
this.Color = new Color(PLAYER_COLOR);
// Move player, while switching it's last position
this.MovePlayer = function (x2, y2) {
var r = this.Position.Row;
var c = this.Position.Col;
Blocks[r, c] = Blocks[r + y2, c + x2];
Blocks[r, c].ApplyStyle();
r += x2;
c += y2;
Blocks[r, c] = this;
Blocks[r, c].ApplyStyle();
};
// Check if a move is valid. If so, execute it.
this.Move = function (dir) {
var r = this.Position.Row;
var c = this.Position.Col;
if (Map.Blocks[r + dir.Row][c + dir.Col] instanceof Ground) {
this.Move(dir.Col, 0);
}
else if (Map.Blocks[r + dir.Row][c + dir.Col] instanceof Stone && Map.Blocks[r + dir.Row * 2][c + dir.Col * 2] instanceof Ground) {
this.MovePlayer(dir.Row, dir.Col);
Blocks[r + dir.Row][c + dir.Col].Move(dir.Row, dir.Col);
}
};
this.MoveLeft = function () { Move(Direction.Left); };
this.MoveRight = function () { Move(Direction.Right); };
this.MoveUp = function () { Move(Direction.Up); };
this.MoveDown = function () { Move(Direction.MoveDown); };
function ApplyStyle(mapInstance) {
mapInstance.ApplyStyle(this.Position.X, this.Position.Y, PLAYER_COLOR);
}
}
/* Main Script */
function Game() {
this.oMap = null;
this.oSettings = null;
this.oPlayer = null;
this.ToString = "Game";
this.Init = function () {
this.oMap = new Map();
this.oMap.Create();
this.Log('Map Initialized');
this.oSettings = new Settings();
this.oPlayer = new Player();
};
this.Start = function () {
this.SetSettings();
this.Log('Controls are binded');
};
this.SetSettings = function () {
this.oSettings.Add(37, this.oPlayer.MoveLeft);
this.oSettings.Add(39, this.oPlayer.MoveRight);
this.oSettings.Add(38, this.oPlayer.MoveUp);
this.oSettings.Add(40, this.oPlayer.MoveDown);
document.onkeypress = function (e) {
this.oSettings.Binds[e.keyCode] && this.oSettings.Binds[e.keyCode]();
}
};
this.UpdateStats = function () {
};
this.Log = function (msg) {
console.log(this.ToString + ': ' + msg);
};
}
function Settings() {
this.Binds = {};
this.Add = function (keycode, callback) {
this.Binds[keycode] = callback;
};
}
window.log = console.log.bind(console);
window.onload = function () {
var g = new Game();
g.Init();
g.Start();
};