首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS+Canvas实现的俄罗斯方块游戏完整实例

Posted in Javascript onDecember 12, 2016

本文实例讲述了JS+Canvas实现的俄罗斯方块游戏。分享给大家供大家参考，具体如下：

试玩（没有考虑兼容低版本浏览器）：

JS+Canvas实现的俄罗斯方块游戏完整实例

**********************************************************************
9月3日更新：
修复了隐藏的比较深的BUG
加上暂停、再来一次功能
速度随分数增高而递减
添加log日志
*********************************************************************

通过写这个游戏收获几点：

1、canvas的isPointInPath方法不支持fillRect、strokeRect的上下文。

2、canvas有内边距（padding）时，传入isPointInPath方法的坐标需要减去padding值。

3、通过json的方法JSON.parse(JSON.stringify(Object))可以快速克隆Object对象，但是要注意：当Object对象里有方法时，克隆过来依然是引用关系。

源码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas版俄罗斯方块</title>
  <style>
  #canvas{
    background: #272822;
    display: block;
    margin: 0 auto;
  }
  </style>
</head>
<body>
<p style="text-align: center;">操作：↑变形；↓下移；←左移；→右移</p>
<canvas id="canvas" width="640" height="600">
  您的浏览器不支持canvas！
</canvas>
<script>
/****************************
作者：王美建 2015年9月3日20:30:35
*后续可添加怪异变形，类似于L可变成Z
*积分随关卡递增
*初始化部分historyBlock
****************************/
var tetris = {
  canvas : document.getElementById("canvas"),
  ctx : this.canvas.getContext("2d"),
  width : 481,
  height : 600,
  logLen: 8,
  mapColor: "#464741",
  logColor: "green",
  status: 'ready',
  unit : 30,
  curText : "开始",
  blockData : function(index, row, col){
    var r = row || 1,
      c = col || Math.floor((this.col - 3)/2) + 2,
      block = [
        [
          {color: 'red', status: 1, data: [{x: r, y:c-1}, {x: r+1, y:c-1}, {x: r+1, y:c}, {x: r+1, y:c+1}], center: {x: r, y: c}},
          {color: 'red', status: 2, data: [{x: r-1, y:c-1}, {x: r-1, y:c}, {x: r, y:c-1}, {x: r+1, y:c-1}], center: {x: r, y: c}},
          {color: 'red', status: 3, data: [{x: r-1, y:c-1}, {x: r-1, y:c}, {x: r-1, y:c+1}, {x: r, y:c+1}], center: {x: r, y: c}},
          {color: 'red', status: 4, data: [{x: r-1, y:c+1}, {x: r, y:c+1}, {x: r+1, y:c+1}, {x: r+1, y:c}], center: {x: r, y: c}}
        ],
        [
          {color: 'green', status: 1, center: {x: r, y:c}, data: [{x: r, y:c+1}, {x: r+1, y:c-1}, {x: r+1, y:c}, {x: r+1, y:c+1}]},
          {color: 'green', status: 2, center: {x: r, y:c}, data: [{x: r-1, y:c-1}, {x: r, y:c-1}, {x: r+1, y:c-1}, {x: r+1, y:c}]},
          {color: 'green', status: 3, center: {x: r, y:c}, data: [{x: r, y:c-1}, {x: r-1, y:c-1}, {x: r-1, y:c}, {x: r-1, y:c+1}]},
          {color: 'green', status: 4, center: {x: r, y:c}, data: [{x: r-1, y:c}, {x: r-1, y:c+1}, {x: r, y:c+1}, {x: r+1, y:c+1}]}
        ],
        [
          {color: 'blue', status: 1, center: {x: r, y:c}, data: [{x: r, y:c-1}, {x: r, y:c}, {x: r+1, y:c}, {x: r+1, y:c+1}]},
          {color: 'blue', status: 2, center: {x: r, y:c}, data: [{x: r+1, y:c-1}, {x: r, y:c-1}, {x: r, y:c}, {x: r-1, y:c}]}
        ],
        [
          {color: 'orange', status: 1, center: {x: r, y:c}, data: [{x: r+1, y:c-1}, {x: r+1, y:c}, {x: r, y:c}, {x: r, y:c+1}]},
          {color: 'orange', status: 2, center: {x: r, y:c}, data: [{x: r-1, y:c}, {x: r, y:c}, {x: r, y:c+1}, {x: r+1, y:c+1}]}
        ],
        [
          {color: 'yellow', status: 1, center: {x: r, y:c}, data: [{x: r, y:c-1}, {x: r, y:c}, {x: r+1, y:c-1}, {x: r+1, y:c}]}
        ],
        [
          {color: 'aqua', status: 1, center: {x: r, y:c}, data: [{x: r, y:c-1}, {x: r, y:c}, {x: r, y:c+1}, {x: r-1, y:c}]},
          {color: 'aqua', status: 2, center: {x: r, y:c}, data: [{x: r+1, y:c}, {x: r, y:c}, {x: r, y:c+1}, {x: r-1, y:c}]},
          {color: 'aqua', status: 3, center: {x: r, y:c}, data: [{x: r, y:c-1}, {x: r, y:c}, {x: r, y:c+1}, {x: r+1, y:c}]},
          {color: 'aqua', status: 4, center: {x: r, y:c}, data: [{x: r, y:c-1}, {x: r, y:c}, {x: r+1, y:c}, {x: r-1, y:c}]}
        ],
        [
          {color: 'indigo', status: 1, center: {x: r, y:c}, data: [{x: r, y:c-1}, {x: r, y:c}, {x: r, y:c+1}, {x: r, y:c+2}]},
          {color: 'indigo', status: 2, center: {x: r, y:c}, data: [{x: r-2, y:c}, {x: r-1, y:c}, {x: r, y:c}, {x: r+1, y:c}]}
        ]
      ]
    return block[index];
  },
  init : function(){
    var self = this;
    self.reset();
    self.addEvent("keydown", window, function(ev){
      var ev = ev || window.event,
        code = ev.keycode || ev.which;
      if(self.handle[code] && self.status === "play"){
        self.handle[code].call(self);
        self.createMap();
        ev.preventDefault();
      }
    })
    self.addEvent("click", document, function(ev){
      self.createMap(ev);
    })
    return this;
  },
  reset: function(){
    var self = this;
    self.score = 0;
    self.speed = 1000;
    self.log = [];
    self.historyBlock = [];
    self.row = Math.floor(self.height/self.unit);
    self.col = Math.floor(self.width/self.unit);
    self.curBlockIndex = Math.round(Math.random()*6);
    self.curBlocks = self.blockData(self.curBlockIndex);
    self.curBlock = self.curBlocks[0];
    self.createNext().createMap();
    return this;
  },
  createNext: function(){
    var self = this;
    self.nextBlockIndex = self.status === "ready" ? self.curBlockIndex : Math.round(Math.random()*6);
    self.nextBlocks = self.blockData(self.nextBlockIndex, 4, self.col+3);
    self.nextBlock = self.nextBlocks[0];
    return this;
  },
  addEvent : function(ev, ele, callback){
    if( ele.addEventListener ){
      ele.addEventListener(ev,callback,false);
    }else{
      ele.attachEvent("on"+ev, callback);
    }
  },
  createMap : function(ev){
    var self = this,
      ctx = self.ctx;
    ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
    for (var i = 0; i < self.col; i++) {
      for (var j = 0; j < self.row; j++) {
        ctx.save();
        ctx.strokeStyle = self.mapColor;
        ctx.strokeRect(i*self.unit, j*self.unit, self.unit, self.unit);
        ctx.stroke();
        ctx.restore();
      };
    };
    self.showText(ev).createBlock().createLog();
    if(self.status !== "ready"){
      self.drawRect(self.curBlock.data);
    }
    return this;
  },
  createBlock : function(){
    var self = this,
      block = self.curBlock.data;
    self.drawRect(self.historyBlock);
    if(self.collide(40, true)){
      block.map(function(val){
        val.x--;
      })
      setTimeout(function(){
        clearInterval(self.timer);
        if(localStorage.getItem("score") === null){
          localStorage.setItem("score", self.score);
        }else if(localStorage.getItem("score") - self.score < 0 ){
          localStorage.setItem("score", self.score);
          alert("新纪录！"+self.score+"分！");
          self.printLog({log:"新纪录！"+self.score+"分！", color: 'red'});
          return;
        }
        self.status = "over";
        self.curText = "重来";
        self.showText();
        self.printLog({log:"GAME OVER", color: 'red'});
      },10)
    }
    return this;
  },
  drawRect : function(block){
    var self = this;
    for (var i = 0; i < block.length; i++) {
      self.ctx.save();
      self.ctx.fillStyle = block[i].color || self.curBlock.color;
      self.ctx.strokeStyle = self.mapColor;
      self.ctx.fillRect((block[i].y - 1)*self.unit, (block[i].x - 1)*self.unit, self.unit, self.unit );
      self.ctx.strokeRect((block[i].y - 1)*self.unit, (block[i].x - 1)*self.unit, self.unit, self.unit );
      self.ctx.restore();
    };
  },
  move : function(){
    var self = this;
    clearInterval(self.timer);
    self.timer = setInterval(function(){
      // 实时刷新数据 大坑！
      var curBlock = self.curBlock,
        data = self.curBlock.data;
      if( self.collide() || data.some(function(val){
        return val.x + 1 > self.row;
      }) ){
        clearInterval(self.timer);
        self.historyBlock.push.apply(self.historyBlock, data.map(function(val){
            val.color = curBlock.color;
            return val;
        }));
        self.remove();
        self.curBlockIndex = self.nextBlockIndex;
        self.curBlocks = self.blockData(self.curBlockIndex);
        self.curBlock = self.curBlocks[0];
        self.createNext().createMap().move();
        return false;
      }
      for (var i = 0; i < data.length; i++) {
        data[i].x++;
      };
      self.curBlock.center.x++;
      self.createMap();
    }, self.speed)
    return this;
  },
  remove : function(){
    var self = this,
      count = {},
      n = 0,
      maxRow = 0,
      delArr = [],
      block = self.historyBlock;
    for (var i = 0; i < block.length; i++) {
      if(count[block[i].x]){
        count[block[i].x].length += 1;
      }else{
        count[block[i].x] = [1];
      }
    };
    console.log( count )
    for (var attr in count) {
      if(count[attr].length === self.col){
        n++;
        //maxRow = attr > maxRow ? attr : maxRow;
        for (var i = 0; i < block.length; i++) {
          if(block[i].x == attr){
            delArr = block.splice(i, 1);
            i--;
          }
        };
        count[attr].length = 0;
        block.forEach(function(val){
          val.x < attr && (val.x += 1);
        })
      }
    };
    // 边消除边下降会死循环
    if(n > 0){
      self.score += n*100;
      self.printLog("得分+"+n*100);
      // 一次消除3行奖励100分
      if(n === 3){
        self.score += 100;
        self.printLog("奖励"+100+"分~");
      }
      // 一次消除4行奖励200分
      if(n === 4){
        self.score += 200;
        self.printLog("奖励"+200+"分~");
      }
      /*block.forEach(function(val){
        val.x < maxRow && (val.x += n);
      })*/
      self.changeSpeed();
    }
  },
  changeSpeed: function(){
    var self = this;
    if( self.score >= 3000 && self.score < 5000 ){
      self.speed = 800;
    }else if( self.score >= 5000 && self.score < 10000 ){
      self.speed = 600;
      self.score += 100;
    }else if( self.score >= 10000 && self.score < 20000 ){
      self.speed = 400;
      self.score += 150;
    }else if( self.score >= 20000 && self.score < 40000 ){
      self.speed = 200;
      self.score += 200;
    }else if( self.score >= 40000 ){
      self.speed = 100;
      self.score += 300;
    }
    return this;
  },
  collide : function(direction, isCreate){
    var block = JSON.parse(JSON.stringify(this.curBlock)),
      result = false,
      self = this;
    direction = direction || 40;
    // direction:碰撞方向，默认下方
    if(direction === 37){
      self.mLeft(block);
    }else if(direction === 38){
      block = self.distortion(block);
    }else if(direction === 39){
      self.mRight(block);
    }else if(direction === 40 && !isCreate){
      // 非新增方块则往下移动一格
      block.data.forEach(function(val){
        val.x++;
      })
    }
    result = block.data.some(function(val){
      return (val.x > self.row || val.y < 1 || val.y > self.col);
    })
    if(result){
      return result;
    }else{
      return block.data.some(function(val){
        return self.historyBlock.some(function(value){
          return (value.x === val.x && value.y === val.y);
        })
      })
    }
  },
  mLeft : function(block){
    if(block.data.every(function(val){
      return val.y - 1 >= 1;
    })){
      block.data.forEach(function(val){
        val.y--;
      })
      block.center.y--;
    }
  },
  mRight : function(block){
    var self = this;
    if(block.data.every(function(val){
      return val.y + 1 <= self.col;
    })){
      block.data.forEach(function(val){
        val.y++;
      })
      block.center.y++;
    }
  },
  distortion : function(block){
    var self = this,
      curRow = block.center.x,
      curCol = block.center.y,
      status = block.status + 1 > self.curBlocks.length ? 1 : block.status + 1;
    self.curBlocks = self.blockData(self.curBlockIndex, block.center.x, block.center.y);
    return self.curBlocks[status-1];
  },
  // 控制：上（变形）、右（右移）、下（下移）、左（左移）
  handle : {
    // 左键 code 37
    37: function(){
      var self = this;
      if(!self.collide(37)){
        self.mLeft(self.curBlock);
      }
    },
    // 上键 code 38
    38: function(){
      var self = this;
      if(!self.collide(38)){
        self.curBlock = self.distortion(self.curBlock);
      }
    },
    // 右键 code 39
    39: function(){
      var self = this;
      if(!self.collide(39)){
        self.mRight(self.curBlock);
      }
    },
    // 下键 code 40
    40: function(){
      var self = this;
      if(!self.collide()){
        self.curBlock.data.forEach(function(val){
          val.x++;
        })
        self.curBlock.center.x++;
      }
    }
  },
  showText: function(ev){
    var self = this,
      ctx = self.ctx;
    ctx.clearRect(self.width, 0, self.canvas.width - self.width, self.height);
    ctx.save();
    ctx.beginPath();
    ctx.font = "20px Verdana";
    ctx.fillStyle = "green";
    ctx.fillText("下一个:", self.width+10, 30);
    ctx.fillText("分数:", self.width+10, 200);
    ctx.fillText("速度:", self.width+10, 260);
    ctx.fillText("作者:王美建", self.width+10, 580);
    ctx.fillStyle = "red";
    ctx.fillText(self.score, self.width+10, 230);
    ctx.fillText(self.speed + "毫秒", self.width+10, 290);
    ctx.fillStyle = "green";
    ctx.fillRect(self.width + 30, 320, 100, 40);
    // isPointInPath对fillRect()兼容不好 又一个大坑！
    ctx.rect(self.width + 30, 320, 100, 40);
    if( ev && ctx.isPointInPath(ev.layerX, ev.layerY) ){
      switch(self.status){
        case "ready":
        self.status = "play";
        self.curText = "暂停";
        self.log = ["开始游戏."];
        self.createNext().move();
        break;
        case "play":
        self.status = "paush";
        self.curText = "继续";
        clearInterval(self.timer);
        self.printLog("暂停.");
        break;
        case "paush":
        self.status = "play";
        self.curText = "暂停";
        self.printLog("继续游戏~");
        self.move();
        break;
        case "over":
        self.status = "play";
        self.curText = "暂停";
        self.reset().move();
        self.printLog("开始游戏~");
        break;
      }
    }
    ctx.fillStyle = "black";
    ctx.fillText(self.curText, self.width+60, 350);
    ctx.restore();
    ctx.closePath();
    self.nextBlock.data.forEach(function(val){
      val.color = self.nextBlock.color;
    })
    self.drawRect(self.nextBlock.data);
    return this;
  },
  printLog: function(log){
    var self = this;
    if(log){
      self.log.unshift(log);
      self.log.length > self.logLen && (self.log.length = self.logLen);
    }
    self.createLog();
    return this;
  },
  createLog: function(){
    var self = this,
      ctx = self.ctx;
    // 清除log
    ctx.clearRect(self.width+10, 380, 136, 170);
    self.log.forEach(function(val, index){
      if(val){
        ctx.save();
        ctx.font = "16px Verdana";
        ctx.fillStyle = val.color || self.logColor,
        ctx.fillText(val.log || val, self.width+10, 400+index*22);
        ctx.restore();
      }
    })
    return this;
  }
}
tetris.init();
</script>
</body>
</html>

持续优化中……

希望本文所述对大家JavaScript程序设计有所帮助。

JS+Canvas实现的俄罗斯方块游戏完整实例

- Author -

wangmeijian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript html 静态页面传参数
Apr 10 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
AngularJS中的$watch()，$digest()和$apply()区分
Apr 04 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 #Javascript
jQuery Ajax File Upload实例源码
Dec 12 #Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 #Javascript
layer实现弹窗提交信息
Dec 12 #Javascript
详解Javascript数据类型的转换规则
Dec 12 #Javascript
设置jquery UI 控件的大小方法
Dec 12 #Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 #Javascript
虚拟机(3) XML(1) Hash(1) Vmware(3) RabbitMQ(3) html5+(1) 触发器(3) Geospatial(1) 入门基础(1) 数据类型(8)
You might like
php面向对象全攻略 （十一）__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
教你用一行Python代码实现并行任务（附代码）
2018/02/02 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
python下载的库包存放路径
2020/07/27 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
全球最大最受欢迎的旅游社区：Tripadvisor
2017/11/03 全球购物
马云北大演讲完整版：真心话，什么才是阿里的核心竞争力？
2014/04/04 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
golang 比较浮点数的大小方式
2021/05/02 Golang
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
详细分析PHP7与PHP5区别
2021/06/26 PHP