<!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. 发测试邮件或垃圾邮件node脚本

    npm install nodemailer 执行后,指定目录下会出现node_modules模块,再相同目录下,创建main.js,js代码如下: var nodemailer = require( ...

  2. 【 java版坦克大战--事件处理】 坦克动起来了

    折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ①   paint ...

  3. HTML 页面加载动画效果

    浏览器:Chrome, IE <!doctype html> <html> <head> <title>CSS transform: CSS only ...

  4. Homebrew安装php5及composer for mac教程

    安装brew 可以查看教程:mac os x 10.9.1 安装 Homebrew软件包管理工具及brew安装maven3.1.1 首先更新下brew软件库 brew update brew tap ...

  5. WIFI破解总结

    寒假回家了,由于家里没有宽带,而周围又有好多WIFI所以尝试了破解人家的WIFI,嘻嘻. 1.准备u盘一个,格式化 2.用制作工具,将cdlinux系统的镜像安装进u盘 3.用u盘启动电脑,进入cdl ...

  6. 向OC类中添加默认的协议实现(ProtocolKit)

    以forkingdog的PorotocolKit举例 举例 ProtocolKit Protocol extension for Objective-C Usage Your protocol: @p ...

  7. 3D触控简介：建立数字刻度应用及快速活动栏

    苹果公司通过 iPhone 6s 和 6s Plus 引入了与手机互动的全新方式:按压手势.你也许知道,苹果智能手表和苹果笔记本电脑早已具备这一功能,只是名称略有不同,为力感触控(Force Touc ...

  8. 【poj3734】矩阵乘法求解

    [题意] 给N个方块排成一列.现在要用红.蓝.绿.黄四种颜色的油漆给这些方块染色.求染成红色方块和染成绿色方块的个数同时为偶数的染色方案的个数,输出对10007取余后的答案.(1<=n<= ...

  9. spring初始化

    * Created by litao on 15/12/29. */@Component("initTagDataProcessor")public class InitTagDa ...

  10. Android用户界面UI组件--AdapterView及其子类(五) Spinner和SpinnerAdapter

    Spinner就是下拉框组件,可以自定义下拉布局样式,可以使用ArrayAdapter以及SpinnerAdapter适配 在Adapter中实现SpinnerAdapter,继承BaseAdapte ...