<!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. Boolean 布尔类型详解

    这是最简单的类型.boolean 表达了真值,可以为 TRUE 或 FALSE.两个都不区分大小写. 要明确地将一个值转换成 boolean,用 (bool)或者 (boolean) 来强制转换.但是 ...

  2. 跨域、sql注入、xss攻击

    这几天遇到这三个问题,现在简单的记录下来. 1.跨域 如我服务器的域名是www.test1.com,我在另一个服务器www.test2.com通过ajax访问www.test1.com的数据时,就引起 ...

  3. Polygon Table - Google Chrome

    Polygon table by Pedro Amaro Santos Lisboa, Portugal posted at http://forums.cgsociety.org/showthrea ...

  4. poj 3304 Segments

    Segments 题意:给你100以内的n条线段,问你是否存在一条直线,使得题给的线段在这条直线上的“投影” 相交于一点: 思路: 1.先要将线段投影相交于一点转变为存在一条直线与所有的线段相交: 很 ...

  5. c++11的for新用法 (重新练习一下for_each)

    看到手册的代码里面有个for的很奇怪的用法,用了一把    http://www.cplusplus.com/reference/unordered_set/unordered_set/insert/ ...

  6. HttpContext.Current.Session=null问题

    启用asp.net状态服务,可以让Session持久化!

  7. 由 OR 引起的死循环

    在客商迁移测试时,程序一旦开始执行就不能自动停止.只能通过手动中断应用服务器的进程来停止.检查迁移的一个表,这个表迁移前没有数据,迁移最多会插入3w条左右数据,但是迁移过程执行2个多小时候再看,已经有 ...

  8. STM32系统时钟

    一.时钟树 STM32有4个时钟源: 1)HSE(高速外部时钟源) 外部晶振作为时钟源,范围为4~16MHz,常取为8MHz 2)HSI(高速内部时钟源) 由内部RC振荡器产生,频率为8MHz,但不稳 ...

  9. MVC引用CSS文件の正确姿势

    你的css文件目录结构: 将路径写入BundleConfig规则中: using System.Web; using System.Web.Optimization; namespace XXXX { ...

  10. 使用ajax传递及接收数据

    前端代码: <input id="txtNum1" name="txtNum1" type="text" width="13 ...