HTML5（17）
&!DOCTYPE HTML&
&canvas id=&Tetris_canvas& width=&100px& height=&150px& /&
&script type=&text/javascript&&
function BackGround()
var init = function()
var obj = document.getElementById(&Tetris_canvas&);
var cxt = obj.getContext(&2d&);
cxt.fillStyle = &#E8FFFF&;
cxt.strokeStyle = &#000000&;
cxt.fillRect(0,0,obj.width,obj.height);
cxt.strokeRect(0,0,obj.width,obj.height);
function Tetris()
var self =
var g_arCurPoint = new Array();
var g_arGame = [
/********0,1,2,3,4,5,6,7,8,9 */
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0
this.makeGarph = function(){
var n = parseInt(Math.random()*6);
self.curGraph =
var flag = 0;
switch(n){
case 0:{//横条 4格
//记录图形所占区域位置
if(g_arGame[3]==1 || g_arGame[4]==1 || g_arGame[5]==1 || g_arGame[6]==1 )flag=1;
g_arCurPoint[0] = 3;
g_arCurPoint[1] = 4;
g_arCurPoint[2] = 5;
g_arCurPoint[3] = 6;
case 1:{//一点 1格
if(g_arGame[5]==1)flag=1;
g_arCurPoint[1] = 5;
g_arCurPoint[0] = -1;
g_arCurPoint[2] = -1;
g_arCurPoint[3] = -1;
case 2:{//1+3组合(轴对称)
if(g_arGame[5]==1 || g_arGame[14]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1;
g_arCurPoint[0] = 5;
g_arCurPoint[1] = 15;
g_arCurPoint[2] = 14;
g_arCurPoint[3] = 16;
case 3:{//1+3组合(非对称) 4格
if(g_arGame[4]==1 || g_arGame[14]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1;
g_arCurPoint[0] = 4;
g_arCurPoint[1] = 14;
g_arCurPoint[2] = 15;
g_arCurPoint[3] = 16;
case 4:{//1+3 (点对称)
if(g_arGame[4]==1 || g_arGame[5]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1;
g_arCurPoint[0] = 4;
g_arCurPoint[1] = 5;
g_arCurPoint[2] = 15;
g_arCurPoint[3] = 16;
case 5:{//2+2 (点对称)
if(g_arGame[5]==1 || g_arGame[6]==1 || g_arGame[15]==1 || g_arGame[16]==1 )flag=1;
g_arCurPoint[0] = 5;
g_arCurPoint[1] = 6;
g_arCurPoint[2] = 15;
g_arCurPoint[3] = 16;
if(flag == 1){
alert(&游戏结束&);
window.clearInterval(self.id);
this.moveLeft = function(){
var minLeft = 9;
for(var i=0;i&g_arCurPoint.i++){
var temp = parseInt(g_arCurPoint[i]%10);
if(temp & minLeft)minLeft =
if(minLeft == 0)
for(var i=0;i&4;i++){
if(g_arCurPoint[i] != -1)g_arCurPoint[i] = g_arCurPoint[i]-1;
this.moveRight = function(){
var maxRight = 0;
for(var i=0;i&4;i++){
if(g_arCurPoint[i] != -1){
var temp = parseInt(g_arCurPoint[i]%10);
if(temp & maxRight)maxRight =
if(maxRight == 9)
for(var i=0;i&4;i++){
if(g_arCurPoint[i] != -1)g_arCurPoint[i]++;
this.moveDown = function(){
var flag = 0;
for(var i=0;i&4;i++){
if(g_arCurPoint[i] != -1){
var nx = parseInt(g_arCurPoint[i]%10);
var ny = parseInt(g_arCurPoint[i]/10);
if(g_arGame[(ny+1)*10+nx] == 1 || ny == 14){
if(flag == 0){//向下移动
for(var i=0;i&4;i++){
if(g_arCurPoint[i] != -1){
var nx = parseInt(g_arCurPoint[i]%10);
var ny = parseInt(g_arCurPoint[i]/10);
g_arCurPoint[i] = (ny+1)*10+
}else{//停止移动了
for(var i=0;i&4;i++){
if(g_arCurPoint[i] != -1){
g_arGame[g_arCurPoint[i]] = 1;
//消除已经完成的行
self.clear();
//新物体出现
self.makeGarph();
//绘制图形
var obj=document.getElementById(&Tetris_canvas&);
var cxt = obj.getContext(&2d&);
for(var i=0;i&g_arGame.i++){
var x = parseInt(i%10);
var y = parseInt(i/10);
if(g_arGame[i] == 1){
cxt.fillStyle = &#00FF00&;
cxt.strokeStyle = &#000000&;
cxt.fillStyle = &#E8FFFF&;
cxt.strokeStyle = &#E8FFFF&;
cxt.fillRect(x*10,y*10,10,10);
cxt.strokeRect(x*10,y*10,10,10);
cxt.strokeStyle = &#000000&;
cxt.strokeRect(0,0,obj.width,obj.height);
for(var i=0;i&4;i++){
if(g_arCurPoint[i] != -1){
var nx = parseInt(g_arCurPoint[i]%10);
var ny = parseInt(g_arCurPoint[i]/10);
cxt.fillStyle = &#FF0000&;
cxt.strokeStyle = &#000000&;
cxt.fillRect(nx*10,ny*10,10,10);
cxt.strokeRect(nx*10,ny*10,10,10);
window.onkeydown = function(event){
var code = event.keyC
switch(code){
case 37:self.moveLeft();
case 39:self.moveRight();
case 40:self.moveDown();
case 38:self.turn();
this.clear = function(){
for(var i=15;i&=1;){
var count = 0;
for(var j=0;j&10;j++){
if(g_arGame[i*10+j] == 1)count++;
if(count == 10){
for(var k=i;k&=1;k--){
for(var s=0;s&10;s++){
g_arGame[k*10+s] = g_arGame[(k-1)*10+s];
this.turn = function(){
var maxRight = 0;
var minLeft = 9;
for(var i=0;i&4;i++){
if(g_arCurPoint[i] != -1){
var temp = parseInt(g_arCurPoint[i]%10);
if(temp & maxRight)maxRight =
for(var i=0;i&g_arCurPoint.i++){
var temp = parseInt(g_arCurPoint[i]%10);
if(temp & minLeft)minLeft =
if(maxRight == 9 || minLeft == 0)
switch(self.curGraph){
case 0:{//横条
var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标
var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标
if(g_arCurPoint[0]%10 == g_arCurPoint[1]%10)bY =
if(bY){//竖向
if(nx & 2 || ny & 1)
for(var i=0;i&4;i++){
if(g_arCurPoint[i] != -1)
g_arGame[g_arCurPoint[i]] = 0;
g_arCurPoint[0] = ny*10 + nx-1;
g_arCurPoint[1] = ny*10 +
g_arCurPoint[2] = ny*10 + nx+1;
g_arCurPoint[3] = ny*10 + nx+2;
g_arGame[ny*10 + nx-1] = 2;
g_arGame[ny*10 + nx]
g_arGame[ny*10 + nx+1] = 2;
g_arGame[ny*10 + nx+2] = 2;
}else{//横向
for(var i=-1;i&=2;i++){
for(var j=-1;j&=2;j++){
if(g_arGame[(ny+i)*10+nx+j] == 1)
g_arCurPoint[0] = (ny-1)*10 +
g_arCurPoint[1] = ny*10 +
g_arCurPoint[2] = (ny+1)*10 +
g_arCurPoint[3] = (ny+2)*10 +
case 2:{//1+3 轴对称
var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标
var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标
for(var i=-1;i&2;i++){
for(var j=-1;j&2;j++){
if(g_arGame[(ny+j)*10+(nx+i)]==1)
if(g_arCurPoint[0]%10 == g_arCurPoint[1]%10){
if(g_arCurPoint[0]/10 & g_arCurPoint[1]/10)y=ny-1;
else y=ny+1;
if(g_arCurPoint[0]%10 & g_arCurPoint[1]%10)x=nx-1;
else x=nx+1;
var temp = g_arCurPoint[0];
g_arCurPoint[0] = g_arCurPoint[3];
g_arCurPoint[1] = g_arCurPoint[1];
g_arCurPoint[2] =
g_arCurPoint[3] = y*10+x;
case 3:{//1+3
var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标
var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标
for(var i=-2;i&=2;i++){
for(var j=-2;j&=2;j++){
if(g_arGame[(ny+j)*10+(nx+i)]==1)
var x,y,x1,y1;
if(g_arCurPoint[1]%10 == g_arCurPoint[0]%10){
if(g_arCurPoint[1]/10 & g_arCurPoint[0]/10){
y1 = ny+2;
y1 = ny-2;
if(g_arCurPoint[1]%10 & g_arCurPoint[0]%10){
x1 = nx+2;
x1 = nx-2;
g_arCurPoint[0] = g_arCurPoint[2];
g_arCurPoint[1] = g_arCurPoint[1];
g_arCurPoint[2] = (y*10+x);
g_arCurPoint[3] = (y1*10+x1);
if(minLeft == 1)
var nx = parseInt(g_arCurPoint[1]%10);//第二点X坐标
var ny = parseInt(g_arCurPoint[1]/10);//第二点Y坐标
for(var i=-1;i&2;i++){
for(var j=-1;j&2;j++){
if(g_arGame[(ny+j)*10+(nx+i)]==1)
var x1,y1,x2,y2,x3,y3;
if(g_arCurPoint[0]%10 == g_arCurPoint[1]%10){
if(g_arCurPoint[1]/10 & g_arCurPoint[0]/10){
x1 = nx+1;
x2 = nx-1;
y2 = ny-1;
x1 = nx-1;
x2 = nx+1;
y2 = ny+1;
if(g_arCurPoint[1]%10 & g_arCurPoint[0]%10){
x2 = nx-1;
y1 = ny-1;
y2 = ny+1;
x2 = nx+1;
y1 = ny+1;
y2 = ny-1;
g_arCurPoint[2] = g_arCurPoint[0]
g_arCurPoint[0] = (y1*10+x1);
g_arCurPoint[1] = g_arCurPoint[1];
g_arCurPoint[3] = (y2*10+x2);
self.makeGarph();
this.id = setInterval(self.moveDown,500);
var bk = new BackGround();
var TetRis = new Tetris();
//setInterval(TetRis.moveDown(),500);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：15021次
排名：千里之外
原创：18篇最近一直在学习html5 Canvas，而且网上已经有很多成熟的使用canvas写的游戏，比如与割绳子，他们都是本来在手机与PC上就比较火的游戏，而在线的html5版也已经和客户端版的体验几乎没有差距，包括声音，图像，以及流畅性。
但我却担心canvas的某些问题，会给他的应用带来一些麻烦，特别是游戏方面。
一个完整的游戏，通常包括音频，图片以及代码，游戏越复杂，则这些素材的数量越多。我曾经尝试下载过html5版宝石迷阵的源码，虽然最终没有成功（也没指望会成功），但让我对他里面的文件数量倒是有了个初步认识。
其中大量的图片就不说了，而且有几个体积不小的主代码文件，都是JS文件，且都在几百KB上下。那个Bejeweled_min.js，别看是个min，但体积却有700KB…
由此看来，开发游戏始终是个不容易的过程。
说到这里我又要提flash了，因为flash几乎一直是开发小游戏的不二之选，所以我列举一些canvas开发游戏与flash的不同。
1，文件的碎片化
相同的一个游戏，分别用flash与html5来开发，那最终我们这些玩家可能会得到两个东西，要么是一个.swf的单文件，要么是一个包含所有游戏文件的文件夹，后者就是html5版的。
如果放到网站上去给玩家玩，那么flash玩家最终会下载一个文件——即前面的swf；而html5玩家则只能无奈的下载一个个单独小文件，如图片，各种音效，代码等。
这就是html5开发游戏的首要弊端，就是文件的碎片化。
这种情况使得游戏资源很容易被盗用，但更重要的是，文件的碎片化导致整个游戏很难下载成功——比如我们在大陆访问那个宝石迷阵，会觉得载入挺慢的，虽然网速原因占了大半，但太多的文件发起的太多的http请求也是一个方面。
只要有一个文件没有下载成功，那么整个游戏就算下载失败了，要么重新下载该文件，要么玩一个有莫名bug的游戏。
2，文件的无加密无压缩
一个swf文件，可以包含代码，图片，声音，而所有的这些都包含在一个文件中，既可以防止盗用的可能，又通过压缩减小了整个游戏的体积。
而一个html5游戏，除了代码可以使用某些工具压缩一下之外，所有的图片，音频，都不能进行压缩——除非你通过牺牲品质来达到减小体积的目的。
这也导致玩家下载了更多的东西，却得到了一个相同的游戏。
3，功能的缺失
canvas只能实现图形的呈现，而其他方面如音频——鼠标指到某处就播放特定的音频——canvas则没法过问，只有通过js将canvas与音频进行相应的关联。
说到音频，又回到“文件一多导致很容易加载失败”这个问题上来了，宝石迷阵里面的音频貌似比图片数量还多。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
设想将来，要是能把所有的文件打成一个包（类似ZIP），然后通过JS代码直接从包里面读取需要的文件，那该多好啊，那样在载入的时候就只需要下载这整个包即可，而不用下载一堆零散的文件了。
关于十年灯
Javascript工程师。好想转Nodejs，好想用es6用canvas做游戏 在前端行业技术处在什么水平_问答_ThinkSAAS
用canvas做游戏 在前端行业技术处在什么水平
用canvas做游戏 在前端行业技术处在什么水平
用canvas做游戏 在前端行业技术处在什么水平 求各位大牛告知
PhoneGap 大法好。灵活运用 PhoneGap，可以满足你的一切需求。就算是基本是 native 写的 app 只有一小部分嵌入 HTML，也都可以使用 PhoneGap，提供很多便利。
有趣的是 PhoneGap 在 iOS、Android、Windows Phone 等等一堆平台上上使用的都是不同的交互实现。
貌似有的平台是 localhost 架设了个 server，通过 XHR 来交互。有的平台是用浏览器的 window.prompt交互。还有的平台直接提供了原生交互方案。
phonegap不行？
国内的egret引擎速度是phonegap的30倍
1，JS 使用了两种方式来与 Objective-C 通信，一种是使用 XMLHttpRequest 发起请求的方式，NSURLProtocol 的子类来检查每个请求，如果地址是自定义的协议头，拦截之；另一种则是通过设置透明的 iframe 的 src 属性，JS 端创建一个透明的 iframe，设置这个 ifame 的 src 为自定义的协议，而 ifame 的 src 更改时，UIWebView 会先回调其 delegate 的 webView:shouldStartLoadWithRequest:navigationType: 方法。
2，Objective-C 跟 JS 通信，使用UIWebView 的方法 stringByEvaluatingJavaScriptFromString:。
没问道点子上。
所谓的Canvas小游戏，基本都是指 Canvas 2D 小游戏，目前在手机领域应用较广，尤其是微信营销领域，比如著名的神经猫。
此外还有比较酷炫的3D Web Render，WebGL，使用的也是 Canvas，只不过跟2D是完全不一样的两个东西，且目前也没有得到很好的浏览器支持。
如果题主想要了解 Canvas 游戏的市场份额的话，我只能说，不高，主要应用在手机端较多，往往PC上还是Flash多些。
一個維度才能比較，而前端是多維度的，不同維度之間自然沒有可比性。
但「掌握維度的多少」，是個一維的，可以比較~ 所以，如果你只會 canvas，你的維數就是 1。。。在非負整數中，只有 0 小於 1 吧。。。
&canvas&？
你用的是 2D context，还是 WebGL？WebGL 的话是 2D，2.5D 还是全 3D？
什么信息也不给，你让人怎么说？
对现在来说是一个坑，用DOM做游戏开发的份额感觉都比canvas的多。canvas做游戏的门槛说实话比写div要高不少，但主要问题还是性能和兼容。canvas游戏现在在微信上还不少，但没有做3D，都是像神经猫这样的2D小游戏。就现在来说的话，雷声大雨点小，因为问题实在太多了。
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信商品名称：
评价得分：
第一次再京东买奢侈品，还是相信自营是真货的，但是包还是有点瑕疵，里面还有断落的商标。希望认真检查货品
来自京东iPhone客户端
还可以输入120字
多品类齐全，轻松购物
快多仓直发，极速配送
好正品行货，精致服务
省天天低价，畅选无忧}