<!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. javascript 写职责链

    我认为职责链最大的目的在于解决对一个对象的加工过程问题.并且如何通过filter在什么时机截止操作流程 /** * by JackChen 2016-3-14 15.16.53 * 职责链 * 看马士 ...

  2. php练习6——面向对象编程（打印乘法表）

    要求:编写一个成员函数,从键盘输入一个数(0—9),打印出对应的乘法表 程序:viewChengFB.html chengFB.class.php printChengFB.php   结果  

  3. CI源码学习 一步一步重写 CodeIgniter 框架

    文章:http://www.cnblogs.com/zhenyu-whu/archive/2013/08.html

  4. php中mysqli 处理查询结果集的几个方法

    最近对php查询mysql处理结果集的几个方法不太明白的地方查阅了资料,在此整理记下 Php使用mysqli_result类处理结果集有以下几种方法 fetch_all() 抓取所有的结果行并且以关联 ...

  5. Python深入学习笔记（一）

    写在前面的话 从08年接触Python到现在,断断续续地使用,到如今Python已经成为日常事物处理.科研实验,甚至工程项目的主力语言,主要因为其敏捷性和快速实现的能力.虽然看了一些Python的教程 ...

  6. hdu 4714

    一个树形dp的题,又是一个涉及不深的领域  = =: 不过在网上看到了大神用很巧的思路解决了这个题: 大神的思路就是: 从树的底部往上看:如果一棵子树拥有两个及以上的叶子节点,可以将这棵子树与大树分离 ...

  7. 网络安装CentOS 5.3

    转自网络安装CentOS 5.3 0. 基本要求 (1) 需要使用至少两台服务器:其中一台没有操作系统,是我们即将安装的服务器;另外一台是已经安装好操作系统的服务器,我们用来存储CentOS的安装文件 ...

  8. 关于键盘冲突那点事（3键冲突/7键冲突/PS2/USB的各种原理）

    转自关于键盘冲突那点事(3键冲突/7键冲突/PS2/USB的各种原理) 最近闲得无聊,正好看到有人发帖提问,于是就来详细说说所谓键位冲突和无冲突的各种原理--基本上这也是个老生常谈的话题了,但相关的技 ...

  9. 系统调用与API的区别

    整理自系统调用与API的区别 1.为什么用户程序不能直接访问系统内核模式提供的服务? 答:在linux中,将程序的运行空间分为内核与用户空间(内核态和用户态),在逻辑上它们之间是相互隔离的,因此用户程 ...

  10. UESTC 1425 Another LCIS

    也是一个求最长连续单调区间的问题,不同于HDU 3308LCIS的是,单点更新变成了区间成段增加,没关系同样的方法可破之.由于是成段更新,所以比更新区间小的区间是最大连续区间长度是不变的,所以更新su ...