```<!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);
}
//下落
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. Entity Framework Code First属性映射约定

Entity Framework Code First与数据表之间的映射方式有两种实现:Data Annotation和Fluent API.本文中采用创建Product类为例来说明tity Fram ...

2. UVA 11817 Tunnelling the Earth --球面距离公式

题意: 给出两点的经纬度,求两点的球面距离与直线距离之差. 解法: 我们先算出球面距离,然后可以根据球面距离算出直线距离. 球面距离公式: R*acos(sin(W1)*sin(W2)+cos(W1) ...

3. UDP模式聊天

//client (前台) import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.InetAd ...

4. gcc参数-l传递顺序错误导致`undefined reference&#39;的一点小结

5. svn update 每更新一项就输出一行信息，使用首字符来报告执行的动作 这些字符的含义是:

A 已添加 D 已删除 U 已更新 C 合并冲突 G 合并成功 例子: [root@ok 资料库]# svn ci -m "" Sending 资料库/简历 Transmittin ...

6. BIOS

转自BIOS BIOS(Basic Input/Output System的缩写.中文:基本输入输出系统),在IBM PC兼容机上,是一种业界标准的固件接口.BIOS这个字眼是在1975第一次由CP/ ...

/** * @Title: TxtAndCsvUtils.java * @Package cn.com.qmhd.tools * @Description: TODO(读取txt和CSV文档) * @ ...

8. Python urllib和urllib2模块学习(二)

一.urllib其它函数 前面介绍了 urllib 模块,以及它常用的 urlopen() 和 urlretrieve()函数的使用介绍.当然 urllib 还有一些其它很有用的辅助方法,比如对 ur ...

9. iOS9 适配网络请求，适配分享失败，适配无法正常跳转到客户端

问题描述:在iOS9下,系统默认会拦截对http协议接口的访问,因此无法获取http协议接口的数据.对ShareSDK来说,具体表现可能是,无法授权.分享.获取用户信息等. 还可能造成我们的编辑界面里 ...

10. element-项目用到偏门方法~

开发项目的时候,组件库的使用有时会为我们节省开发时间,提高开发效率,但组件库样式有时与我们的设计图出入很大,还有的方法也很偏门,主要官方文档有时候对于一些方法和属性介绍的也比较少,以下是我在工作中总结 ...