热门关键字:
jquery > jquery教程 > javascript > 原生javascript实现俄罗斯方块游戏源码

原生javascript实现俄罗斯方块游戏源码

2231
作者:管理员
发布时间:2013/10/26 11:05:01
评论数:1
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=356
var over = false, shapes = ("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2")
		.split(";");
function create(tag, css) {
	var elm = document.createElement(tag);
	elm.className = css;
	document.getElementById("body").appendChild(elm);
	return elm;
}
function Tetris(c, t, x, y) {
	var c = c ? c : "c";
	this.divs = [ create("div", c), create("div", c), create("div", c),
			create("div", c) ];
	this.reset = function() {
		this.x = typeof x != 'undefined' ? x : 3;
		this.y = typeof y != 'undefined' ? y : 0;
		//shape有八个数字
		this.shape = t ? t
				: shapes[Math.floor(Math.random() * (shapes.length))]
						.split(",");
		this.show();
		if (this.field
				&& this.field.check(this.shape, this.x, this.y, 'v') == 'D') {
			over = true;
			this.field.fixShape(this.shape, this.x, this.y);
			alert('game over');
		}
	}
	this.show = function() {
		for ( var i in this.divs) {
			//alert(i);
			//alert(this.x);
			//alert(this.y);
			this.divs[i].style.left = (this.shape[i * 2] * 1 + this.x) * 20 + 'px';
			this.divs[i].style.top = (this.shape[i * 2 + 1] * 1 + this.y) * 20 + 'px';
		}
	}
	this.field = null;
	this.hMove = function(step) {
		var r = this.field.check(this.shape, this.x - -step, this.y, 'h');
		if (r != 'N' && r == 0) {
			this.x -= -step;
			this.show();
		}
	}
	this.vMove = function() {
		if (this.field.check(this.shape, this.x, this.y - -1, 'v') == 'N') {
			this.y++;
			this.show();
		} else {
			this.field.fixShape(this.shape, this.x, this.y);
			this.field.findFull();
			this.reset();
		}
	}
	this.rotate = function() {
		var s = this.shape;
		var newShape = [ 3 - s[1], s[0], 3 - s[3], s[2], 3 - s[5], s[4],
				3 - s[7], s[6] ];
		var r = this.field.check(newShape, this.x, this.y, 'h');
		if (r == 'D')
			return;
		if (r == 0) {
			this.shape = newShape;
			this.show();
		} else if (this.field.check(newShape, this.x - r, this.y, 'h') == 0) {
			this.x -= r;
			this.shape = newShape;
			this.show();
		}
	}
	this.reset();
}
function Field(w, h) {
	this.width = w ? w : 10;
	this.height = h ? h : 20;
	this.show = function() {
		var f = create("div", "f")
		f.style.width = this.width * 20 + 'px';
		f.style.height = this.height * 20 + 'px';
	}
	this.findFull = function() {
		for ( var l = 0; l < this.height; l++) {
			var s = 0;
			for ( var i = 0; i < this.width; i++) {
				s += this[l * this.width + i] ? 1 : 0;
			}
			if (s == this.width) {
				this.removeLine(l);
			}
		}
	}
	this.removeLine = function(line) {
		for ( var i = 0; i < this.width; i++) {
			document.body.removeChild(this[line * this.width + i]);
		}
		for ( var l = line; l > 0; l--) {
			for ( var i = 0; i < this.width; i++) {
				this[l * this.width - -i] = this[(l - 1) * this.width - -i];
				if (this[l * this.width - -i])
					this[l * this.width - -i].style.top = l * 20 + 'px';
			}
		}
	}
	this.check = function(shape, x, y, d) {
		var r1 = 0, r2 = 'N';
		for ( var i = 0; i < 8; i += 2) {
			if (shape[i] - -x < 0 && shape[i] - -x < r1) {
				r1 = shape[i] - -x;
			} else if (shape[i] - -x >= this.width && shape[i] - -x > r1) {
				r1 = shape[i] - -x;
			}
			if (shape[i + 1] - -y >= this.height
					|| this[shape[i] - -x - -(shape[i + 1] - -y) * this.width]) {
				r2 = 'D'
			}
		}
		if (d == 'h' && r2 == 'N')
			return r1 > 0 ? r1 - this.width - -1 : r1;
		else
			return r2;
	}
	this.fixShape = function(shape, x, y) {
		var d = new Tetris("d", shape, x, y);
		d.show();
		for ( var i = 0; i < 8; i += 2) {
			this[shape[i] - -x - -(shape[i + 1] - -y) * this.width] = d.divs[i / 2];
		}
	}
}
var f = new Field();
f.show();
var s = new Tetris();
s.field = f;
s.show();
window.setInterval("if(!over)s.vMove();", 1000);
document.onkeydown = function(e) {
	if (over)
		return;
	var e = window.event ? window.event : e;
	switch (e.keyCode) {
	case 38: //up
		s.rotate();
		break;
	case 40: //down
		s.vMove();
		break;
	case 37: //left
		s.hMove(-1);
		break;
	case 39: //right
		s.hMove(1);
		break;
	}
}

网友czqn8分享jquery实现图片翻牌旋转特效网友czqn8分享jquery实现图片翻牌旋转特效





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:javascript 俄罗斯方块 小游戏 游戏源码
友荐云推荐