HTML+CSS+JS 俄罗斯方块小游戏 参考教材练习

最新推荐文章于 2021-05-30 21:20:09 发布
最新推荐文章于 2021-05-30 21:20:09 发布
阅读量1.4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bingo_12345/article/details/47788523
版权
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TETRIS</title>
<script type="text/javascript" src = "tetris.js"></script>
<style type="text/css">
body>div {
font-size:13pt;
padding-bottom:8px;
}
span{
font-size:20pt;
color:green;
}
</style>
</head>
<body >
<h2>TETRIS</h2>
<div style="width:384px;border:1px solid black;background:#ff9;">&nbsp;
<div style="float:left;">SPEED:<span id="curSpeedEle"></span>
SCORE:<span id="curScoreEle"></span></div>
<div style="float:right;">MAXSCORE:<span id="maxScoreEle"></span></div>
</div>
</body>

</html>


.../tetris.js                      //JS脚本

var TETRIS_ROWS = 20;
var TETRIS_COLS = 16;
var CELL_SIZE = 24;
var NO_BLOCK = 0;
var colors = ["#ffffff","#FF3E96","#EE2C2C","#CDAD00","#A020F0","#8B3A3A","#0000FF","00ffff"];
var isPlaying = true;                    
window.onload = function()
{
 


createCanvas(TETRIS_ROWS ,TETRIS_COLS , CELL_SIZE , CELL_SIZE);
document.body.appendChild(tetris_canvas);
//alert(typeof(tetris_ctx));
   //createTetrisstatus();
    //chushihua();
curScoreEle = document.getElementById("curScoreEle");
curSpeedEle = document.getElementById("curSpeedEle");
maxScoreEle = document.getElementById("maxScoreEle");

var temStatus = localStorage.getItem("tetris_status");
tetris_status = temStatus == null ? tetris_status : JSON.parse(temStatus);

drawBlock();

curScore = localStorage.getItem("curScore");
curScore = curScore == null ? 0 :parseInt(curScore);
curScoreEle.innerHTML = curScore;

maxScore = localStorage.getItem("maxScore");
maxScore = maxScore == null ? 0 :parseInt(maxScore);
maxScoreEle.innerHTML = maxScore;

curSpeed = localStorage.getItem("curSpeed");
curSpeed = curSpeed == null ? 1 :parseInt(curSpeed);
curSpeedEle.innerHTML = curSpeed;

    

initBlock();
//moveDown();
curTimer = setInterval("moveDown()", 500 / curSpeed);
}






var tetris_status = new Array();
    for(var i = 0;i < TETRIS_ROWS;i++)
{
tetris_status[i]= new Array();
for(var j = 0;j < TETRIS_COLS;j++)
{
tetris_status[i][j] = NO_BLOCK;
}
};


var createCanvas = function(rows,cols,cellWidth,cellHeight)
{
tetris_canvas = document.createElement("canvas");


tetris_canvas.width = cols * cellWidth;
tetris_canvas.height = rows * cellHeight;


tetris_canvas.style.border = "1px solid black"; 


tetris_ctx = tetris_canvas.getContext('2d');


tetris_ctx.beginPath();


for(var i = 1; i<TETRIS_ROWS;i++)
{
tetris_ctx.moveTo(0,i * CELL_SIZE);
tetris_ctx.lineTo(TETRIS_COLS * CELL_SIZE,i * CELL_SIZE);
}


for(var i = 1; i<TETRIS_COLS;i++)
{
tetris_ctx.moveTo(i * CELL_SIZE,0);
tetris_ctx.lineTo(i * CELL_SIZE,TETRIS_ROWS * CELL_SIZE);
}
tetris_ctx.closePath();


tetris_ctx.strokeStyle = "#aaa";


tetris_ctx.lineWidth = 0.3;


tetris_ctx.stroke();


}




var blockArr = [
                //Z
                [
                 {x:TETRIS_COLS / 2 - 1 , y:0 , color:1},
                 {x:TETRIS_COLS / 2 , y:0 , color:1},
                 {x:TETRIS_COLS / 2 , y:1 , color:1},
                 {x:TETRIS_COLS / 2 + 1 , y:1 , color:1}
                 ],
                 //Z
                 [
                 {x:TETRIS_COLS / 2 + 1 , y:0 , color:2},
                 {x:TETRIS_COLS / 2 , y:0 , color:2},
                 {x:TETRIS_COLS / 2 , y:1 , color:2},
                 {x:TETRIS_COLS / 2 - 1 , y:1 , color:2}
                 ],
                 [
                 {x:TETRIS_COLS / 2 - 1 , y:0 , color:3},
                 {x:TETRIS_COLS / 2 , y:0 , color:3},
                 {x:TETRIS_COLS / 2 - 1 , y:1 , color:3},
                 {x:TETRIS_COLS / 2 , y:1 , color:3}
                  ],
                 [
                 {x:TETRIS_COLS / 2 - 1 , y:0 , color:4},
                 {x:TETRIS_COLS / 2 - 1 , y:1 , color:4},
                 {x:TETRIS_COLS / 2 - 1 , y:2 , color:4},
                 {x:TETRIS_COLS / 2 , y:2 , color:4}
                  ],
                 [
                 {x:TETRIS_COLS / 2 , y:0 , color:5},
                 {x:TETRIS_COLS / 2 , y:1 , color:5},
                 {x:TETRIS_COLS / 2 , y:2 , color:5},
                 {x:TETRIS_COLS / 2 - 1, y:2 , color:5}
                  ],
                 [
                 {x:TETRIS_COLS / 2 , y:0 , color:6},
                 {x:TETRIS_COLS / 2 , y:1 , color:6},
                 {x:TETRIS_COLS / 2 , y:2 , color:6},
                 {x:TETRIS_COLS / 2 , y:3 , color:6}
                  ],
                 [
                 {x:TETRIS_COLS / 2 , y:0 , color:7},
                 {x:TETRIS_COLS / 2 - 1, y:1 , color:7},
                 {x:TETRIS_COLS / 2 , y:1 , color:7},
                 {x:TETRIS_COLS / 2 + 1, y:1 , color:7}
                  ] 
        ];


//var currentFall = [];
var initBlock = function()
{
var rand = Math.floor(Math.random() * blockArr.length);

currentFall = [
               {x:blockArr[rand][0].x , y:blockArr[rand][0].y , 
                color:blockArr[rand][0].color},
               {x:blockArr[rand][1].x , y:blockArr[rand][1].y , 
               color:blockArr[rand][1].color},
           {x:blockArr[rand][2].x , y:blockArr[rand][2].y , 
               color:blockArr[rand][2].color},
           {x:blockArr[rand][3].x , y:blockArr[rand][3].y , 
               color:blockArr[rand][3].color}    
               ];
}


var moveDown = function()
{
     var canDown = true;
     for(var i = 0;i < currentFall.length;i++)
      {
      if(currentFall[i].y >= TETRIS_ROWS - 1)
      {
      canDown = false;
      break;
      }
      if(tetris_status[currentFall[i].y + 1][currentFall[i].x] != NO_BLOCK)
      {
      canDown = false;
      break;
      }
      }
     if(canDown)
      {
      for(var i = 0;i < currentFall.length;i++)
      {
      var cur = currentFall[i];
      tetris_ctx.fillStyle = "white";
      tetris_ctx.fillRect(cur.x * CELL_SIZE +1 , 
      cur.y * CELL_SIZE +1,CELL_SIZE - 2,CELL_SIZE - 2);
      }
      for(var i = 0;i < currentFall.length;i++)
      {
      var cur = currentFall[i];
      cur.y++;
      }
      for(var i = 0;i < currentFall.length;i++)
      {
      var cur = currentFall[i];
      tetris_ctx.fillStyle = colors[cur.color];
      tetris_ctx.fillRect(cur.x * CELL_SIZE +1 , 
      cur.y * CELL_SIZE +1,CELL_SIZE - 2,CELL_SIZE - 2);
      }
         }
     else
      {
      for(var i = 0;i < currentFall.length;i++)
      {
      var cur = currentFall[i];
      if(cur.y < 2)
      {
      localStorage.removeItem("curScore");
      localStorage.removeItem("tetris_status");
      localStorage.removeItem("curSpeed");
      if(confirm("Fill!Do you want take your turn?"))
      {
      maxScore = localStorage.getItem("maxScore");
      maxScore = maxScore == null ? 0 : maxScore;
      if(curScore >= maxScore)
      {
      localStorage.setItem("maxScore",curScore);
      }
      }
          isPlaying = false;
          clearInterval(curTimer);
          return;
      }
      tetris_status[cur.y][cur.x] = cur.color;    
      }
      lineFull();
      localStorage.setItem("tetris_status", JSON.stringify(tetris_status));
      initBlock();
      }
}


var lineFull = function()
{
for(var i = 0; i < TETRIS_ROWS;i++)
{
var flag = true;
for(var j = 0; j < TETRIS_COLS;j++)
{
if(tetris_status[i][j] == NO_BLOCK)
{
flag = false;
break;
}
}
if(flag)
{
curScoreEle.innerHTML = curScore+=100;
localStorage.setItem("curScore",curScore);
if(curScore >= curSpeed * curSpeed * 500)
{
curSpeedEle.innerHTML = curSpeed += 1;
localStorage.setItem("curSpeed",curSpeed);
clearInterval(curTimer);
curTimer = setInterval("moveDown()" , 500 / curSpeed);
}
for(var k = i;k > 0;k-- )
{
for(var l = 0;l < TETRIS_COLS;l++)
{
tetris_status[k][l] = tetris_status[k-1][l];
}
}
drawBlock();
}
}
}


var drawBlock = function()
{


     for(var i = 0;i < TETRIS_ROWS;i++)
      {
      for(var j = 0;j < TETRIS_COLS;j++)
      {
      if(tetris_status[i][j] != NO_BLOCK)
      {
      tetris_ctx.fillStyle = colors[tetris_status[i][j]];
      tetris_ctx.fillRect(j * CELL_SIZE + 1 , i * CELL_SIZE + 1
      , CELL_SIZE - 2 , CELL_SIZE - 2);
      }
      else
      {
      tetris_ctx.fillStyle = "white";
      tetris_ctx.fillRect(j * CELL_SIZE + 1 , i * CELL_SIZE + 1
      , CELL_SIZE - 2 , CELL_SIZE - 2);
      }
    
      }
      }
}


window.onkeydown = function(evt)
{
  switch(evt.keyCode)
  {
  case 40:
  if(!isPlaying)
  return;
  moveDown();
  break;
  case 37:
  if(!isPlaying)
  return;
   moveLeft();
  break;
  case 39:
  if(!isPlaying)
  return;
  moveRight();
  break;
  case 38:
  if(!isPlaying)
  return;
  rotate();
  break;
  }
}


var moveLeft = function()
{
  var canLeft = true;
    for(var i = 0;i < currentFall.length;i++)
 {
 if(currentFall[i].x <= 0)
 {
 canLeft = false;
 break;
 }
 if(tetris_status[currentFall[i].y ][currentFall[i].x - 1] != NO_BLOCK)
 {
 canLeft = false;
 break;
 }
 }
if(canLeft)
 {
 for(var i = 0;i < currentFall.length;i++)
 {
 var cur = currentFall[i];
 tetris_ctx.fillStyle = "white";
 tetris_ctx.fillRect(cur.x * CELL_SIZE +1 , 
 cur.y * CELL_SIZE +1,CELL_SIZE - 2,CELL_SIZE - 2);
 }
 for(var i = 0;i < currentFall.length;i++)
 {
 var cur = currentFall[i];
 cur.x--;
 }
 for(var i = 0;i < currentFall.length;i++)
 {
 var cur = currentFall[i];
 tetris_ctx.fillStyle = colors[cur.color];
 tetris_ctx.fillRect(cur.x * CELL_SIZE +1 , 
 cur.y * CELL_SIZE +1,CELL_SIZE - 2,CELL_SIZE - 2);
 }
    }
}




var moveRight = function()
{
  var canRight = true;
    for(var i = 0;i < currentFall.length;i++)
 {
 if(currentFall[i].x >= TETRIS_COLS - 1)
 {
 canRight = false;
 break;
 }
 if(tetris_status[currentFall[i].y ][currentFall[i].x + 1] != NO_BLOCK)
 {
 canRight = false;
 break;
 }
 }
if(canRight)
 {
 for(var i = 0;i < currentFall.length;i++)
 {
 var cur = currentFall[i];
 tetris_ctx.fillStyle = "white";
 tetris_ctx.fillRect(cur.x * CELL_SIZE +1 , 
 cur.y * CELL_SIZE +1,CELL_SIZE - 2,CELL_SIZE - 2);
 }
 for(var i = 0;i < currentFall.length;i++)
 {
 var cur = currentFall[i];
 cur.x++;
 }
 for(var i = 0;i < currentFall.length;i++)
 {
 var cur = currentFall[i];
 tetris_ctx.fillStyle = colors[cur.color];
 tetris_ctx.fillRect(cur.x * CELL_SIZE +1 , 
 cur.y * CELL_SIZE +1,CELL_SIZE - 2,CELL_SIZE - 2);
 }
    }
}




var rotate = function()
{
var canRotate = true;
for(var i = 0;i < currentFall.length;i++)
{
var preX = currentFall[i].x;
var preY = currentFall[i].y;

if(i != 2)
{
var afterRotateX = currentFall[2].x + preY - currentFall[2].y;
var afterRotateY = currentFall[2].y - preX + currentFall[2].x;

if(tetris_status[afterRotateY ][afterRotateX] != NO_BLOCK)
 {
 canRotate = false;
 break;
 }
if(afterRotateX < 0 || 
tetris_status[afterRotateY - 1][afterRotateX] != NO_BLOCK)
{
moveRight();
afterRotateX = currentFall[2].x + preY - currentFall[2].y;
afterRotateY = currentFall[2].y - preX + currentFall[2].x;
break;
}
if(afterRotateX >= TETRIS_COLS - 1 || 
tetris_status[afterRotateY][afterRotateX + 1] != NO_BLOCK)
{
moveLeft();
afterRotateX = currentFall[2].x + preY - currentFall[2].y;
afterRotateY = currentFall[2].y - preX + currentFall[2].x;
break;
}
}
}
if(canRotate)
{
for(var i = 0;i < currentFall.length;i++)
 {
 var cur = currentFall[i];
 tetris_ctx.fillStyle = "white";
 tetris_ctx.fillRect(cur.x * CELL_SIZE +1 , 
 cur.y * CELL_SIZE +1,CELL_SIZE - 2,CELL_SIZE - 2);
 }
for(var i = 0;i < currentFall.length;i++)
{
var preX = currentFall[i].x;
var preY = currentFall[i].y;
if(i != 2)
{
currentFall[i].x = currentFall[2].x + preY - currentFall[2].y;
currentFall[i].y = currentFall[2].y - preX + currentFall[2].x;
}
}
 for(var i = 0;i < currentFall.length;i++)
 {
 var cur = currentFall[i];
 tetris_ctx.fillStyle = colors[cur.color];
 tetris_ctx.fillRect(cur.x * CELL_SIZE +1 , 
 cur.y * CELL_SIZE +1,CELL_SIZE - 2,CELL_SIZE - 2);
 }
}
}



Bingo_12345
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端HTML、css、JavaScript实现俄罗斯方块
06-19
前端HTML、css、JavaScript实现俄罗斯方块，适合刚开始接触前端开发的新朋友 啊
html+css+js实现俄罗斯方块
wanshuai12138的博客
12-21 1122
html部分 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title> </ti
CSS+js打造的网页版俄罗斯方块游戏
weixin_30528371的博客
11-10 70
<HTML> <SCRIPT> parent.moveTo((screen.width-775)/2,(screen.height-540)/2); parent.resizeTo(775,540) </SCRIPT> <HEAD> <META NAME="Title" CONTE...
俄罗斯方块html js
yingmengxuepingbao的专栏
02-27 2138
大家好： 最近想写小游戏，但发现这个算术问题，实在是不会啊，从网上找了些，从中找了一个体验效果还不错的，修改了一下，备份下！ 尊重原创，发下参考文章：https://jingyan.baidu.com/article/f3ad7d0f3c495a09c3345b01.html 但这还不是我想要的，后期我会继续优化的。谢谢大家！ &lt;!DOCTYPE html&gt; &lt;html...
俄罗斯方块Tetris (javascript+HTML+CSS)
鞠培中的专栏
01-28 1636
贪吃蛇倒是编写过很多次，但却是第一次编写俄罗斯方块。我没有参考任何其他代码，写了120行左右。 Tetris .dot{width:23px;height:23px;margin:1px;border-radius:2px;float:left;} .row{clear:both;width:250px;height:25px;} #game_area{wid
基于html+css+js开发的俄罗斯方块前端游戏【100013109】
07-27
本项目总体分为四个文件夹:html,css,js,img。...controller.js执行了游戏的具体逻辑，如控制方块下落，方块变体，是否得分，游戏是否结束等等。view.js负责游戏区与下一方块区表格的动态生成以及游戏方块的绘制等等。
HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip
最新发布
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip
10-27
【标题】中的“基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏”表明这是一个使用Web技术实现的在线版俄罗斯方块游戏。这个项目利用了三种基础的前端技术：HTML（HyperText Markup Language）、CSS（Cascading...
基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏 .zip
09-06
网页俄罗斯方块小游戏是利用前端三大核心技术——HTML、CSS和JavaScript构建的一款经典游戏。这个项目展示了如何将这些语言结合起来创建动态、交互式的用户体验。 **HTML（HyperText Markup Language）** 是网页的...
HTML+Javascript俄罗斯方块
05-29
本文介绍了用HTML+JavaScript技术制作俄罗斯方块的demo，包含了核心的板块，比较详细易懂，记分功能和闯关功能有兴趣的可以尝试 我还有这方面的代码可以分享
html5 俄罗斯方块
10-14
用html5 实现的俄罗斯方块，有源代码，我个人觉得不错。。。分享给大家学习学习。。。
Html5+js实现俄罗斯方块
01-14
代码测试地址测试 使用的知识点 需要实现的功能 分析功能实现
这是一款使用htmljavascript和css制作的经典俄罗斯方块小游戏
08-10
这是一款使用html、javascript和css制作的经典俄罗斯方块小游戏。该俄罗斯方块小游戏功能齐全，可以正常旋转方块，消行，快速下落等
html5在线俄罗斯方块,HTML5+JS实现俄罗斯方块
weixin_34696080的博客
05-30 363
HTML俄罗斯方块@font-face{font-family:tmb;src:url("DS-DIGIB.TTF") format("TrueType");}body>div {font-size:13pt;padding-bottom:8px;}span{font-family:tmb;font-size:20pt;color:green;}俄罗斯方块速度:当前积分:最高积分:js...
html5俄罗斯方块
you are sherlocked by me!
03-23 1687
游戏介绍:   实现简单的俄罗斯方块的游戏，调整整个网页布局.会用到html5/css3/js相关知识，适合前端初学者练手 建议阅读时间: 1 hour github address: 源代码 效果图: 部分代码: 有需要自己github下载 index.html <!DOCTYPE html> <html lang="en"> <head> ...
HTML5+JS实现俄罗斯方块
Sunny_QY的专栏
11-29 1390
本文转载自朴石网    www.pustone.com     本游戏实现的基本原理: 游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为10单位，heght为6个单位(canvas 的绝对单位是固定的，非像素)。 创建RusBlock类包含相应的数据和行为，创建二维数组aState[21][25]记录游戏区域中被标记的矩形。 俄罗斯方块有7个部件，
HTML5+CSS简单的俄罗斯方块
zssssjdhdh的博客
07-19 335
HTML代码 </head> <body> <div id="bc"> <div class="f1"> </div> <div class="f1" style=" top: 325px;left: 150px;"> </div> <div class...
html 小游戏 俄罗斯方块
IT_arookie的博客
09-01 3703
样式如下： html代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>俄罗斯方块</title> <style> body, div, dl, dt, dd, ul, ol
利用js和css实现俄罗斯方块
m0_38038767的博客
08-10 521
之前就想着试着开发一个“俄罗斯方块”的简单游戏，但是一直没有动手，主要之前只是光想没动手的缘故，导致一直拖延着这个想法。事实证明能动手就不用按喇叭。 下面就是在下开发后的一些想法。 1、预览 俄罗斯方块这个游戏基本都是有一个预览的功能，就是可以在游戏界面上看到下一块出现的方块是什么。 所以需要一个相当于预览的功能，这个预览功能里面会是一个随机 cubeReady () { let random = parseInt(Math.random() * 5); this.cubeReadyType
用html+css+js写一个俄罗斯方块3d版
07-12
当然可以！以下是一个简单的 HTML、CSS 和 JavaScript 实现的俄罗斯方块 3D 版的示例代码： HTML: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="game"> <div id="tetris"></div> </div> <script src="script.js"></script> </body> </html> ``` CSS (style.css): ```css .game { width: 300px; height: 600px; perspective: 800px; perspective-origin: 50% 50%; } #tetris { width: 100%; height: 100%; transform-style: preserve-3d; } ``` JavaScript (script.js): ```javascript const tetris = document.getElementById("tetris"); // 创建方块 function createBlock() { const block = document.createElement("div"); block.classList.add("block"); return block; } // 初始化游戏区域 function init() { for (let i = 0; i < 20; i++) { for (let j = 0; j < 10; j++) { const block = createBlock(); block.style.transform = `translateZ(${i * 30}px) translateX(${j * 30}px)`; tetris.appendChild(block); } } } init(); ``` 上述代码创建了一个简单的俄罗斯方块游戏区域，使用 CSS 的 `perspective` 和 `transform` 属性实现了 3D 效果。你可以根据自己的需求进一步完善游戏逻辑和样式。注意，这只是一个基本示例，还没有包括方块的移动、旋转等操作。你可以根据需要添加相应的 JavaScript 代码来实现这些功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值