canvas 俄罗斯方块

<!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 俄罗斯方块的更多相关文章

Canvas俄罗斯方块
写在前面潜水博客园多年,从未写过博客.最近才注册博客,遂将很久前写的俄罗斯方块分享出来.第一次写博客,不喜勿喷... 游戏说明游戏操作:J向左,L向右,I旋转,K快速下降游戏基于HTML can ...
canvas实现俄罗斯方块
好久没使用canvas了,于是通过写小游戏"俄罗斯方块"再次熟悉下canvas,如果有一定的canvas基础,要实现还是不难的.实际完成的Demo请看:canvas俄罗斯方块 . ...
canvas版《俄罗斯方块》
试玩(没有考虑兼容低版本浏览器): See the Pen Canvas俄罗斯方块 by 王美建 (@wangmeijian) on CodePen. ************************ ...
H5版俄罗斯方块(2)---游戏的基本框架和实现
前言: 上文中谈到了H5版俄罗斯方块的需求和目标, 这次要实现一个可玩的版本. 但饭要一口一口吃, 很多东西并非一蹴而就. 本文将简单实现一个可玩的俄罗斯方块版本. 下一步会引入AI, 最终采用coc ...
x01.Tetris: 俄罗斯方块
最强大脑有个小孩玩俄罗斯方块游戏神乎其技,那么,就写一个吧,玩玩而已. 由于逻辑简单,又作了一些简化,所以代码并不多. using System; using System.Collections.G ...
【自己给自己题目做】：如何在Canvas上实现魔方效果
最终demo -> 3d魔方体验方法: 浮动鼠标找到合适的位置,按空格键暂停选择要翻转的3*3模块,找到相邻两个正方体,鼠标点击第一个正方体,并且一直保持鼠标按下的状态直到移到第二个正方体后 ...
[原创]html5_PC游戏_图片俄罗斯方块
PC游戏_图片俄罗斯方块以前的了,快一年了... 使用了离线canvas复制的方法,启动预览效果需要服务器支持另外,AC娘图片可以自己做加载功能,这样游戏图片显示更顺畅效果: --- 代码: h ...
自己写了个H5版本的俄罗斯方块
在实习公司做完项目后,实在无聊.就用H5写了几个游戏出来玩一下.从简单的做起,就搞了个经典的俄罗斯方块游戏. 先上效果: 上面的数字是得分,游戏没有考虑兼容性,只在chrome上测试过,不过大部分现代 ...
H5实现俄罗斯方块（一）
这几天一直忙于公司的项目,涉及到流程问题,(有时间会写成博客的)...一直没有更新... 为了更加巩固js的基础,自己封装类似于JQuery的操作库来对dom进行操作. 一:前度页面的绘制. < ...

随机推荐

C#实现JSON序列化与反序列化介绍
方法一:引入System.Web.Script.Serialization命名空间使用 JavaScriptSerializer类实现简单的序列化序列化类:Personnel public clas ...
【转】oracle PLSQL常用方法汇总
原文:http://www.cnblogs.com/luluping/archive/2010/03/10/1682885.html 在SQLPLUS下,实现中-英字符集转换alter session ...
Avoiding “will create implicit index” NOTICE
执行PgSql避免 notice 信息,执行之前加入以下语句调整报错级别即可: SET CLIENT_MIN_MESSAGES = ‘WARNING’;
Eyeshot Ultimate 学习笔记(4)
动画 Eyeshot的官方Demo中有一个功能是近期项目需要用到的,就是动画效果.其中主要运用到BlockReference类,该类下的两个方法MoveTo(Dictionary<string, ...
在windows下的mysql使用
具体可参照http://jingyan.baidu.com/article/3aed632e19b5e8701080918f.html 1.安装mysql. 直接百度搜索mysql下载.
ubuntu16.04添加开机启动任务
比如要把run-nexus.sh这个脚本制作成开机启动项. 系统工具->首选项->启动应用程序.添加该文件,即可.
Ogre实现简单地形
利用SimpleRenderable实现DirectX 9 3D 游戏设计入门中第十三章地形渲染基础的简单地形,只是简单的实现了地形的基本框架,顶点,索引,纹理等,为简单起见高度都为1,适合新手做 ...
iOS之手势滑动返回功能－b
iOS中如果不自定义UINavigationBar,通过手势向右滑是可以实现返回的,这时左边的标题文字提示的是上一个ViewController的标题,如果需要把文字改为简约风格,例如弄过箭头返回啥的 ...
underscore
http://www.byywee.com/page/M0/S819/819654.html http://www.haogongju.net/art/1127253 http://hi.baidu. ...
ECMall关于数据查询缓存的问题
刚接触Ecmall的二次开发不久,接到一个任务.很常见的任务,主要是对数据库进行一些操作,其中查询的方法我写成这样: 01 function get_order_data($goods_id) 02 ...

canvas 俄罗斯方块

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

随机推荐

热门专题