虽然也是用JS写的。但是毕竟用的是HTML5的绘图API
感觉不够利索..
也可能是本人对HTML5的2d绘图接口还不name了解。
这次不上传附件了，直接贴代码吧
感觉不够利索..
也可能是本人对HTML5的2d绘图接口还不name了解。
这次不上传附件了，直接贴代码吧
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tetris</title>
<script type="text/javascript">
<!--
//全局变量
var row = 18; //行
var col = 10; //列
var size = 20; //每格宽度
var isOver = false; //结束标志
var shapes = ["0,1,1,1,2,1,3,1","1,0,1,1,1,2,1,3",
"1,0,1,1,1,2,2,2","0,2,1,2,2,2,2,1","2,3,2,2,2,1,1,1","3,1,2,1,1,1,1,2",
"2,0,2,1,2,2,1,2","0,1,1,1,2,1,2,2","1,3,1,2,1,1,2,1","3,2,2,2,1,2,1,1",
"0,1,1,1,1,2,2,2","1,3,1,2,2,2,2,1",
"3,1,2,1,2,2,1,2","1,0,1,1,2,1,2,2",
"1,1,2,1,2,2,1,2",
"1,1,0,2,1,2,2,2","1,2,2,3,2,2,2,1","2,2,3,1,2,1,1,1","2,1,1,0,1,1,1,2"]; //共19个图像，包括各个图像的各个方向
var colors = ['#af0000','#007900','#578eff','#707070']; //存储颜色值
var graph; //图形化对象
var canvas; //canvas容器对象
var context; //context绘图对象
var actiion; //动作事件对象
var tetris; //方块对象
var clock; //定时器对象
//图形化类
function Graph()
{
//填充色彩
this.rect = function(x,y,width,height,context,color){
context.fillStyle = color;
context.fillRect(x,y,width,height);
}
//绘制边框 由于不是绝对的像素化，此方法未被使用，但是放在这里备用
this.stroke = function(x,y,width,height,context,color){
context.strokeStyle = color;
context.lineWidth = 1;
context.strokeRect(x,y,width,height);
}
//创建方块
/*
this.createBlock = function(){
if(canvas == null) return;
var block = canvas.getContext('2d');
return block;
}
*/
//创建游戏画布
this.createPanel = function(){
var ele = document.createElement('canvas');
ele.id = 'canvas';
ele.width = 500;
ele.height = 500;
document.body.appendChild(ele);
return ele;
}
//绘制游戏区域
this.gameArea = function(){
if(canvas == null) return;
this.rect(0,0,500,500,context,'#eeeeee');
this.rect(5,5,213,373,context,'#333333');
this.rect(6,6,211,371,context,'#eeeeee');
this.rect(10,10,203,363,context,'#333333');
this.rect(11,11,201,361,context,'#cccccc');
}
}
//方块类 主要操作方块的各种运动
function Tetris(left,top,shape,color)
{
this.action = null; //调用游戏事件对象
//生成四个方块context对象
this.blocks = [1,1,1,1];
this.fresh = function(){
//随机指定颜色
var rNum = Math.floor(Math.random() * 10 % 3);
this.color = color?color:colors[rNum];
//初始位移值 这步很重要
this.left = (typeof(left)!='undefined')?left:3;
this.top = (typeof(top)!='undefined')?top:0;
//随机出现图形
this.shape = shape?shape:shapes[Math.floor(Math.random()*19 - 0.000000001)].split(',');
//判断出现的时候是否会达成游戏结束条件，若达不到结束条件，显示方块
if(this.action && !this.action.check(left,top,this.shape))
{
isOver = true;
window.clearTimeout(clock);
alert('Game Over!')
}
else
{
this.show();
}
}
this.show = function(){
if(canvas == null) return;
for(var i in this.blocks)
{
//计算方块坐标
var bleft = (this.shape[i*2]- -this.left)*size +12;
var btop = (this.shape[i*2+1]- -this.top)*size +12;
//重新绘制方块
graph.rect(bleft,btop,size-1,size-1,context,this.color);
}
}
//水平运动
this.hMove = function(num){
if(this.action.check(this.left- -num,this.top,this.shape))
{
this.clear();
this.left = this.left- -num;
this.show();
}
}
//垂直运动
this.vMove = function(num){
if(this.action.check(this.left,this.top- -num,this.shape))
{
this.clear();
this.top = this.top- -num;
this.show();
}
else
{
this.action.fixShape(this.left,this.top,this.shape);
this.action.findFull();
this.fresh();
}
}
//旋转方块
this.rotate = function(){
var newshape = [this.shape[1],3-this.shape[0],this.shape[3],3-this.shape[2],this.shape[5],3-this.shape[4],this.shape[7],3-this.shape[6]];
if(this.action.check(this.left,this.top,newshape))
{
this.clear();
this.shape = newshape;
this.show();
}
}
//清除上一次画面
this.clear = function(){
if(canvas == null) return;
for(var i in this.blocks)
{
//计算方块坐标
var bleft = (this.shape[i*2]- -this.left)*size +12;
var btop = (this.shape[i*2+1]- -this.top)*size +12;
//重新绘制方块
graph.rect(bleft,btop,size-1,size-1,context,'#cccccc');
}
}
//刷新画面
this.fresh();
}
//游戏事件类
function Action()
{
//碰撞检测 边界检测
this.check = function(left,top,shape){
var leftMost = col; //记录最左边的方块坐标
var rightMost = 0; //记录最右边的方块坐标
var bottomMost = 0; //记录最下面的方块坐标
var flag = false; //到达边界标志，为true则已经到了边界
for(var i=0;i<shape.length;i= i+2)
{
//记录最左边的方块坐标
if(shape[i] < leftMost)
{
leftMost = shape[i];
}
//记录最右边的方块坐标
if(shape[i] > rightMost)
{
rightMost = shape[i];
}
//记录最下面的方块坐标
if(shape[i+1] > bottomMost)
{
bottomMost = shape[i+1]
}
//检测是否到达边界
if(this[(shape[i+1]- -top)*100- -(shape[i]- -left)])
{
flag = true;
}
}
//判断是否已经到达极限高度 （即：方块是否已经快堆到顶了）
for(var m=0;m<3;m++)
{
for(var n=0; n<col;n++)
{
if(this[m*100+n])
{
flag = true;
}
}
}
//进行综合判断
if((leftMost- -left)<0 || (rightMost- -left+1)>col || (bottomMost- -top+1)>row || flag)
{
return false;
}
return true;
}
//填充 并存入this数组
this.fixShape = function(left,top,shape){
var gray = new Tetris(left,top,shape,colors[3]);
for(var i=0;i<8;i+=2)
{
this[(shape[i+1]- -top)*100- -(shape[i]- -left)] = gray.blocks[i/2];
}
}
//找到整行，并移除
this.findFull = function(){
for(var m=0;m<row;m++)
{
var count = 0;
for(var n=0;n<col;n++)
{
if(this[m*100 +n])
{
count++;
}
}
if(count == col)
{
this.removeLine(m);
}
}
}
//消除整行
this.removeLine = function(m){
if(canvas == null) return;
graph.rect(12,12+m*20,size*col,size-1,context,'#cccccc');
for(var i=m;i>=0;i--)
{
for(var j=0; j<col;j++)
{
this[i*100+j] = this[(i-1)*100+j];
if(this[i*100+j])
{
graph.rect(12+j*20,12+i*20,size-1,size-1,context,colors[3]);
}
else
{
graph.rect(12+j*20,12+i*20,size-1,size-1,context,'#cccccc');
}
}
}
}
}
//初始化数据，并开始游戏
function ini()
{
//新建图形化对象
graph = new Graph();
//获得总画布对象
canvas = graph.createPanel();
context = canvas.getContext('2d');
//在画布上绘制游戏区域
graph.gameArea();
//新建方块对象
tetris = new Tetris();
action = new Action();
tetris.action = action;
document.onkeydown = function(e){
if(isOver) return;
var e = window.event?window.event:e;
switch(e.keyCode)
{
case 38:
tetris.rotate();
break;
case 40: //down
tetris.vMove(1);
break;
case 37: //left
tetris.hMove(-1);
break;
case 39: //right
tetris.hMove(1);
break;
}
}
clock = setInterval("if(!isOver) tetris.vMove(1)",500);
}
-->
</script>
</head>
<body onLoad="ini()">
</body>
</html>
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
