虽然也是用JS写的。但是毕竟用的是HTML5的绘图API
感觉不够利索..
也可能是本人对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>
分享到：
相关推荐
《HTML5实现的俄罗斯方块》 HTML5作为现代网页开发的重要标准，为开发者提供了丰富的功能，其中之一就是能够创建互动性的游戏。"HTML5俄罗斯方块"是一个利用HTML5技术实现的经典游戏，它展示了HTML5的Canvas元素、...
在这个"HTML5 俄罗斯方块"项目中，我们看到了HTML5如何与游戏开发相结合，创造出互动性强、性能优越的在线游戏体验。 首先，HTML5的`<canvas>`元素是构建游戏画面的核心。`<canvas>`提供了一个可编程的画布，允许...
HTML5俄罗斯方块是一款利用HTML5技术开发的经典益智游戏，它继承了原版俄罗斯方块的核心玩法，玩家需要在不断下落的图形方块中进行排列，填满一行即可消除得分。这款游戏不仅展示了HTML5在游戏开发领域的潜力，也为...
HTML5俄罗斯方块游戏代码是利用现代Web技术，特别是HTML5和JavaScript，构建的一款3D版本的经典游戏。这个游戏源码的实现涉及到了多个关键的技术点，包括HTML5 Canvas的使用、CSS3动画、JavaScript编程以及可能涉及...
"HTML 5 俄罗斯方块"是一个使用这些新特性构建的经典游戏示例，它展示了HTML5在游戏开发领域的潜力。 首先，我们要了解HTML5中的核心元素，如`<canvas>`。在这个俄罗斯方块游戏中，`<canvas>`标签扮演了关键角色，...
在这个“html5俄罗斯方块源代码”项目中，开发者使用HTML5的Canvas元素、JavaScript编程语言以及可能的CSS3来实现了一款经典的电子游戏——俄罗斯方块。俄罗斯方块是一款广受欢迎的益智游戏，玩家需要操控下落的各种...
HTML5俄罗斯方块游戏是利用HTML5的Canvas API和JavaScript编程语言实现的一款经典电子游戏。Canvas是HTML5中用于绘制2D图形的元素，通过JavaScript控制，可以创建动态且交互性强的游戏界面。以下是对HTML5俄罗斯方块...
HTML5俄罗斯方块网页版是一款基于HTML5技术开发的在线小游戏，它允许用户直接在网页上体验经典的俄罗斯方块玩法。HTML5是超文本标记语言的第五次重大修订，为网页开发带来了诸多新功能和改进，使其能创建更加互动、...
【基于HTML5的俄罗斯方块】是一款利用现代Web技术实现的经典游戏，主要涉及HTML5、CSS3和JavaScript等核心技术。这个实例为初学者提供了一个很好的学习平台，通过它，你可以深入理解如何用Web技术构建交互式的网页...
HTML5俄罗斯方块是一款利用HTML5技术和JavaScript编程语言实现的经典游戏。HTML5是现代网页开发的标准，它提供了许多增强用户体验的新特性，如离线存储、拖放功能、媒体元素、Canvas画布以及SVG矢量图等。在这个项目...
HTML5俄罗斯方块2012517是一款利用HTML5和JavaScript技术构建的在线游戏，它再现了经典的俄罗斯方块玩法。HTML5是现代网页开发的重要标准，它提供了更丰富的离线存储、多媒体支持以及更好的图形处理能力，使得开发者...
HTML5经典俄罗斯方块小游戏是基于现代Web技术构建的一款轻量级在线游戏，它利用了HTML5的强大功能，包括Canvas绘图、JavaScript编程以及CSS3样式，为用户提供了一种在浏览器上直接玩俄罗斯方块的体验。这款小游戏...
**HTML5俄罗斯方块——基于KineticJS的应用开发** HTML5是现代网页开发的重要标准，它引入了许多新的特性和API，使得开发者可以构建更丰富、更动态的网页应用。在这个项目中，我们将深入探讨如何使用HTML5和...