<!doctype html>

<html>

<body>

<canvas id="can" width="360px" height="630px" style="display: block;margin: 0 auto;"></canvas>

<script>

ctx=document.getElementById("can").getContext("2d");

ctx.fillStyle='black';

ctx.fillRect(30,0,300,600);

//保存键盘对应的function

var key={"38":"bian()","40":"down()","37":"move(-1)","39":"move(1)"};

//整个地图

var hh=eval("["+"1,"+new Array(11).join("0,")+"1]");

var gg=eval("["+new Array(12).join("1,")+"1]");

var map=new Array(21);

for(var i=0;i<20;i++)

map[i]=hh.slice(0);

map[20]=gg;

//canvas填充

function ff(x,y,c){

x=x*30;y=y*30;

ctx.fillStyle=c;

ctx.fillRect(x,y,28,28);

}

//随机产生方块

function tatris(){

var block = new Array(4);

var ss= ~~(Math.random()*7);

switch(ss){

case 0:{

block[0] = {x:5, y:0};

block[1] = {x:5, y:1};

block[2] = {x:6, y:0};

block[3] = {x:6, y:1};

break;

}

case 1:{

block[0] = {x:4, y:0};

block[1] = {x:5, y:0};

block[2] = {x:6, y:0};

block[3] = {x:7, y:0};

break;

}

case 2:{

block[0] = {x:6, y:0};

block[1] = {x:5, y:1};

block[2] = {x:6, y:1};

block[3] = {x:5, y:2};

break;

}

case 3:{

block[0] = {x:5, y:0};

block[1] = {x:5, y:1};

block[2] = {x:6, y:1};

block[3] = {x:6, y:2};

break;

}

case 4:{

block[0] = {x:5, y:0};

block[1] = {x:5, y:1};

block[2] = {x:6, y:1};

block[3] = {x:7, y:1};

break;

}

case 5:{

block[0] = {x:5, y:0};

block[1] = {x:5, y:1};

block[2] = {x:5, y:2};

block[3] = {x:6, y:2};

break;

}

case 6:{

block[0] = {x:6, y:0};

block[1] = {x:5, y:1};

block[2] = {x:6, y:1};

block[3] = {x:7, y:1};

break;

}

}

return block;

}

//键盘function

document.onkeydown=function(e){

eval(key[(e?e:event).keyCode]);

}

//移动

function move(t){

for(var i=0;i<4;i++)

lcblock[i].x = lcblock[i].x+t;

if(pan()) return;

xuan1();

llblock=copyBlock(lcblock);

}

//旋转变换

function bian(){

var temp=copyBlock(lcblock);

var x1=Math.round((lcblock[0].x+lcblock[1].x+lcblock[2].x+lcblock[3].x)/4);

var y1=Math.round((lcblock[0].y+lcblock[1].y+lcblock[2].y+lcblock[3].y)/4);

for(var i=0;i<4;i++){

lcblock[i].x = -y1+x1+temp[i].y;

lcblock[i].y = y1-temp[i].x+x1;

}

if(pan()) return;

xuan1();

llblock=copyBlock(lcblock);

}

//检测是否重合

function pan(){

for(var i=0;i<4;i++)

if(map[lcblock[i].y][lcblock[i].x]==1||lcblock[i].y<0)

return lcblock=copyBlock(llblock);

}

//gameover

function over(){

clearInterval(run);

alert("game ovar!");

}

//下落

function down(){

for(var i=0;i<4;i++)//下落

lcblock[i].y++;

if(pan()){

for(var g=0;g<4;g++)

map[lcblock[g].y][lcblock[g].x]=1;//重塑map地图

for(var k=0;k<20;k++){ //消行

for(var j=0;j<12;j++)

if(map[k][j]==0)

break;

if(j==12){

map.splice(k,1);

map.unshift(hh.slice(0));

}

}

for(var nn=0;nn<12;nn++)

if(map[1][nn]!=hh[nn])

break;

if(nn!=12)

return over();

start();

}

else{

xuan1();

llblock=copyBlock(lcblock);

}

}

//备份

function copyBlock(old){

var o = new Array(4);

for(var i=0; i<4; i++)

o[i] = {x:0, y:0};

for(var i=0; i<4; i++){

o[i].x = old[i].x;

o[i].y = old[i].y;

}

return o;

}

//渲染整个map地图

function xuan(){

ctx.fillStyle='black';

ctx.fillRect(30,0,300,600);

for(var i=0;i<20;i++)

for(var j=1;j<=10;j++)

if(map[i][j]==1)

ff(j,i,'Lime');

}

//渲染方块

function xuan1(){

for(var i=0;i<4;i++)

ff(llblock[i].x,llblock[i].y,'black');

for(var i=0;i<4;i++)

ff(lcblock[i].x,lcblock[i].y,'Lime');

}

//开始

function start(){

lcblock=tatris();

llblock=copyBlock(lcblock);

xuan();

xuan1();

}

start();

run=setInterval("down()",600);

</script>

</body>

</html>

canvas 俄罗斯方块的更多相关文章

  1. Canvas俄罗斯方块

    写在前面 潜水博客园多年,从未写过博客.最近才注册博客,遂将很久前写的俄罗斯方块分享出来.第一次写博客,不喜勿喷... 游戏说明 游戏操作:J向左,L向右,I旋转,K快速下降 游戏基于HTML can ...

  2. canvas实现俄罗斯方块

    好久没使用canvas了,于是通过写小游戏"俄罗斯方块"再次熟悉下canvas,如果有一定的canvas基础,要实现还是不难的.实际完成的Demo请看:canvas俄罗斯方块 . ...

  3. canvas版《俄罗斯方块》

    试玩(没有考虑兼容低版本浏览器): See the Pen Canvas俄罗斯方块 by 王美建 (@wangmeijian) on CodePen. ************************ ...

  4. H5版俄罗斯方块(2)---游戏的基本框架和实现

    前言: 上文中谈到了H5版俄罗斯方块的需求和目标, 这次要实现一个可玩的版本. 但饭要一口一口吃, 很多东西并非一蹴而就. 本文将简单实现一个可玩的俄罗斯方块版本. 下一步会引入AI, 最终采用coc ...

  5. x01.Tetris: 俄罗斯方块

    最强大脑有个小孩玩俄罗斯方块游戏神乎其技,那么,就写一个吧,玩玩而已. 由于逻辑简单,又作了一些简化,所以代码并不多. using System; using System.Collections.G ...

  6. 【自己给自己题目做】：如何在Canvas上实现魔方效果

    最终demo -> 3d魔方 体验方法: 浮动鼠标找到合适的位置,按空格键暂停 选择要翻转的3*3模块,找到相邻两个正方体,鼠标点击第一个正方体,并且一直保持鼠标按下的状态直到移到第二个正方体后 ...

  7. [原创]html5_PC游戏_图片俄罗斯方块

    PC游戏_图片俄罗斯方块 以前的了,快一年了... 使用了离线canvas复制的方法,启动预览效果需要服务器支持 另外,AC娘图片可以自己做加载功能,这样游戏图片显示更顺畅 效果: --- 代码: h ...

  8. 自己写了个H5版本的俄罗斯方块

    在实习公司做完项目后,实在无聊.就用H5写了几个游戏出来玩一下.从简单的做起,就搞了个经典的俄罗斯方块游戏. 先上效果: 上面的数字是得分,游戏没有考虑兼容性,只在chrome上测试过,不过大部分现代 ...

  9. H5实现俄罗斯方块（一）

    这几天一直忙于公司的项目,涉及到流程问题,(有时间会写成博客的)...一直没有更新... 为了更加巩固js的基础,自己封装类似于JQuery的操作库来对dom进行操作. 一:前度页面的绘制. < ...

随机推荐

  1. 使用WebBrowser的记录

    第一:新建一个类,用了获取WebBrowser元素的类 //需要引用 Interop.SHDocVw 和 Microsoft.mshtmlpublic class Element { //根据Name ...

  2. VS2015 C#.net4.6 windows的定时服务

    1.创建项目 C#->经典桌面->windows服务 2.创建定时服务 找到服务1,自动生成了 OnStart(服务开启时运行),OnStop(服务关闭时运行)两个函数,我们需要在开启时新 ...

  3. Flink 另外一个分布式流式和批量数据处理的开源平台

    Apache Flink是一个分布式流式和批量数据处理的开源平台. Flink的核心是一个流式数据流动引擎,它为数据流上面的分布式计算提供数据分发.通讯.容错.Flink包括几个使用 Flink引擎创 ...

  4. AOP和IOC理解

    在百度上看到一篇很有意思的文章,是对AOP的一种解释,如下:(摘自:百度文库的 AOP和IOC最容易理解的说明(Spring知识小计)): IOC,依赖倒置的意思, 所谓依赖,从程序的角度看,就是比如 ...

  5. AppStore IPv6-only审核被拒原因分析及解决方案-b

    自2016年6月1日起,苹果要求所有提交App Store的iOS应用必须支持IPv6-only环境,背景也是众所周知的,IPv4地址已基本分配完毕,同时IPv6比IPv4也更加高效,向IPv6过渡是 ...

  6. ［转载］做一个 App 前需要考虑的几件事

    本文转自http://limboy.me/tech/2016/07/06/starting-an-app.html ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ...

  7. hbase rowkey设计的注意事项

    充分利用有序性 1.1 如果要scan操作,且不是很频繁,可以利用rowkey的有序性将需要一起扫描的数据放到一起.例如直接用时间戳.这样就可以按时间scan了.这个只要是简单的全表扫描都行. 1.2 ...

  8. 思考 Swift 中的 MirrorType 协议

    Swift中的反射非常有限,仅允许以只读方式访问元数据的类型子集.或许 Swift 因有严格的类型检验而不需要反射.编译时已知各种类型,便不再需要进行进一步检查或区分.然后大量的 Cocoa API ...

  9. 【Xamarin挖墙脚系列：学习资料大放送】

    原文:[Xamarin挖墙脚系列:学习资料大放送] 最靠谱的还是官方的文档,英文的,借着翻译工具,硬看吧.还能学习英文........... https://developer.xamarin.com ...

  10. iOS设备下添加button的按下效果

    在触屏上, button的按下效果用:active触发, 但是我发现iOS设备上:active效果并没有生效. :active pseudo-class doesn't work in mobile ...