html俄罗斯方块

最新推荐文章于 2024-08-21 13:57:41 发布
最新推荐文章于 2024-08-21 13:57:41 发布
阅读量107 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/u/1861097/blog/414095
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>俄罗斯方块</title>
    <style>
        body{padding:0;margin:0;}
        .gamediv{width: 250px;height: 420px;}
        #maindiv{width:250px;height:400px;border:1px solid #95a0aa;}
        #tableid{borderColor:white;width:100%; height:100%; border-collapse: collapse;}
        #tableid td{ border: solid white 1px;}
    </style>
</head>
<body>
<div id="maindiv"><table id="tableid"></table><span id="fensId">0分</span></div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>

//---------------------------------------生成地图--------------------------------
var tablee = document.getElementById("tableid");
for(var tr =0;tr<18;tr++){
   var tre=document.createElement("tr");
   for(var td=0;td<12;td++){
       tre.appendChild(document.createElement("td"));
   }
    tablee.appendChild(tre);
}

//--------------------------------图形库---------------------------------------
var icon=[
    [{x:0,y:5},{x:1,y:5},{x:2,y:5},{x:3,y:5}],   //0:  |
    [{x:0,y:4},{x:0,y:5},{x:0,y:6},{x:0,y:7}],   //1:   ---
    [{x:0,y:5},{x:0,y:6},{x:1,y:5},{x:1,y:6}],   //2:  田
    [{x:0,y:5},{x:1,y:5},{x:2,y:5},{x:2,y:6}],   //3:  L
    [{x:0,y:5},{x:0,y:6},{x:1,y:6},{x:2,y:6}],   //4:  7
    [{x:0,y:4},{x:1,y:4},{x:1,y:5},{x:1,y:6}],   //5:L__
    [{x:0,y:4},{x:0,y:5},{x:1,y:5},{x:1,y:6}],   //6:z
    [{x:0,y:5},{x:1,y:5},{x:1,y:6},{x:2,y:6}],   //7:L7
    [{x:2,y:5},{x:1,y:5},{x:1,y:6},{x:0,y:6}]    //8:s
];
//-----------------------------游戏配置参数---------------------------------------
var ii=0;   //图形号；
var i=0;     //下落的最初数
var j=0;     //左右偏移的数
var score=0;
var Frequency =100;    //游戏检测频率
var bottomnumber = 17;  //探测是否到最低
var mainThread =setInterval(mainGame,Frequency);   //启动游戏
var dropThread  =setInterval(dropFunction,1000);  //下落线程
var safeChange=true;
var gamelife=true;
var goon = false;
var dx001,dx002,dx003,dx004, dy001,dy002,dy003,dy004;
//------------------------------------------游  戏  主  程   序-------------------------

function mainGame(){
    safeChange=true;
    dx001 = icon[ii][0].x+i;   //行 往下移！
    dx002 = icon[ii][1].x+i;
    dx003 = icon[ii][2].x+i;
    dx004 = icon[ii][3].x+i;

    dy001 = icon[ii][0].y+j;    //列 键盘控制左右！
    dy002 = icon[ii][1].y+j;
    dy003 = icon[ii][2].y+j;
    dy004 = icon[ii][3].y+j;

    if(safeChange){
        $(".vigour").removeAttr("class").css("background","transparent");
        $($("tr")[dx001]).find("td").eq(dy001).attr("class","vigour").css("background","red");
        $($("tr")[dx002]).find("td").eq(dy002).attr("class","vigour").css("background","red");
        $($("tr")[dx003]).find("td").eq(dy003).attr("class","vigour").css("background","red");
        $($("tr")[dx004]).find("td").eq(dy004).attr("class","vigour").css("background","red");
    }
    if(dx001>bottomnumber-1 || dx002>bottomnumber-1 || dx003>bottomnumber-1 || dx004>bottomnumber-1 ){
        if(gamelife)nowicon();
        return false;
    }
    if(($($("tr")[dx001+1]).find("td").eq(dy001).attr("class")=="none") ||($($("tr")[dx002+1]).find("td").eq(dy002).attr("class")=="none")||($($("tr")[dx003+1]).find("td").eq(dy003).attr("class")=="none")||($($("tr")[dx004+1]).find("td").eq(dy004).attr("class")=="none")){
        if(gamelife)nowicon();
        return false;
    }

};


//---------------------------下落后检查是否有消除----------------

function downloadcheck(){
    $("tr").each(function(e){
        var number = 0;
        $($("tr")[e]).find("td").each(function(){
            if($(this).attr("class")=="none"){
                if(e!=0){
                    number++;
                }else{
gamelife=false;
clearInterval(dropThread);
clearInterval(mainThread);
$(".vigour").attr("class","none").css("background","#95a0aa");
                    alert("Game Over!");
alert("键盘失效，请用鼠标刷新");
                    return false;
                }

            }
        });
        if(number==12){
            $($("tr")[e]).remove();
            var tre="<tr>";
            for(var td=0;td<12;td++){
                tre+="<td></td>"
            }
            $("tr").eq(0).before(tre+"</tr>");
            $("#fensId").html(++score+"分");
        }

    });
}

//------------------------------下降频率线程-----------------------
 function  dropFunction(){
    if(i>bottomnumber){
        nowicon();
    }else{
        i++;
    }
}
//---------------------------方块停止后的事件------------------------
function nowicon(){
    safeChange=false;
    clearInterval(mainThread);
    $(".vigour").attr("class","none").css("background","#95a0aa");
    downloadcheck();
    ii=Math.floor(Math.random()*(icon.length));
    i=0;
    j=0;
    mainThread =setInterval(mainGame,Frequency);
}

//------------------------------键盘事件-------------------------
    $(document).keydown(function(e){
        if(!gamelife)return false;
        switch(e.keyCode){
            case  37://左
               if(($($("tr")[dx001]).find("td").eq(dy001-1).attr("class")=="none")||($($("tr")[dx002]).find("td").eq(dy002-1).attr("class")=="none")||($($("tr")[dx003]).find("td").eq(dy003-1).attr("class")=="none")||($($("tr")[dx004]).find("td").eq(dy004-1).attr("class")=="none")){
               }else{
                   var y001 = icon[ii][0].y+j;
                   var y002 = icon[ii][1].y+j;
                   var y003 = icon[ii][2].y+j;
                   var y004 = icon[ii][3].y+j;
                   if(y001>0 && y002>0 && y003>0 && y004>0 ){
                       --j;
                   }
               }
                break;
            case  38://上
                    if(ii==0){
                        ii=1;
                    }else if(ii==1){
                        ii=0;
                    }else if(ii==3){
                        ii=4;
                    }else if(ii==4){
                        ii=5;
                    }else if(ii==5){
                        ii=3;
                    }else if(ii==6){
                        ii=7;
                    }else if(ii==7){
                        ii=8;
                    }else if(ii==8){
                        ii=6;
                    }
                leftBoundary();
                rightBoundary();

                break;
            case  39://右
             if(($($("tr")[dx001]).find("td").eq(dy001+1).attr("class")=="none")||($($("tr")[dx002]).find("td").eq(dy002+1).attr("class")=="none")||($($("tr")[dx003]).find("td").eq(dy003+1).attr("class")=="none")||($($("tr")[dx004]).find("td").eq(dy004+1).attr("class")=="none")){
             }else{
                 var y001 = icon[ii][0].y+j;
                 var y002 = icon[ii][1].y+j;
                 var y003 = icon[ii][2].y+j;
                 var y004 = icon[ii][3].y+j;
                 if(y001<11 && y002<11 && y003<11 && y004<11 ){
                     ++j;
                 }
            }
                break;
            case  40://下
                if(($($("tr")[dx001+1]).find("td").eq(dy001).attr("class")=="none") ||($($("tr")[dx002+1]).find("td").eq(dy002).attr("class")=="none")||($($("tr")[dx003+1]).find("td").eq(dy003).attr("class")=="none")||($($("tr")[dx004+1]).find("td").eq(dy004).attr("class")=="none")){
                    nowicon();
                }else if(i<bottomnumber){
                    clearInterval(mainThread);
                    i++;
                    mainGame();
                    mainThread =setInterval(mainGame,Frequency)
                }
                break;
        }

    });

//防止变换的时候越界(左边)
function leftBoundary(){

    var y001 = icon[ii][0].y+j;
    var y002 = icon[ii][1].y+j;
    var y003 = icon[ii][2].y+j;
    var y004 = icon[ii][3].y+j;

    if(y001<0 || y002<0 || y003<0 || y004<0 ){
        y001  ++;
        y002  ++;
        y003  ++;
        y004  ++;
        safeChange=false;
        j++;
        dy001=y001;
        dy002=y002;
        dy003=y003;
        dy004=y004;
        leftBoundary();
    }

}

//防止变换的时候越界(右边)
function rightBoundary(){
    var y001 = icon[ii][0].y+j;
    var y002 = icon[ii][1].y+j;
    var y003 = icon[ii][2].y+j;
    var y004 = icon[ii][3].y+j;

    if(y001>11 || y002>11 || y003>11 || y004>11 ){
        y001  --;
        y002  --;
        y003  --;
        y004  --;
        safeChange=false;
        j--;
        dy001=y001;
        dy002=y002;
        dy003=y003;
        dy004=y004;
        rightBoundary();
    }
}

</script>
</body>
</html>


转载于:https://my.oschina.net/u/1861097/blog/414095

weixin_33872566
关注
html的俄罗斯方块
12-14
此页面简单的描述了html和script的用法。望能给大伙带来用处.....
俄罗斯方块.html
10-31
童年时代的一个经典游戏，俄罗斯方块，由简单的html代码构成，在浏览器可以直接游戏。开发工具可以使用VS和DW。
HTML实现俄罗斯方块
最新发布
m0_65134936的博客
08-21 1178
这段代码展示了如何用JavaScript实现一个基础的俄罗斯方块游戏，支持基本的方块操作、行消除和游戏状态控制。可以在此基础上添加更多功能，比如计分系统、关卡设计等。这段代码使用HTML、CSS和JavaScript实现了一个简单的俄罗斯方块游戏，包含基本的游戏逻辑、行消除功能以及暂停和继续游戏的控制。对于编程新手或正在学习新知识的程序员，可以使用ChatGPT来做助手，减少出错性和重复性代码的时间。本篇文章有用到ChatGPT-4o代码纠错，国内可稳定使用，感兴趣的大佬试试。
俄罗斯方块（html）
08-01
用Html写的一个简单的俄罗斯方块，拿出来跟大家分享。
HTML5-俄罗斯方块
梧桐下的四叶草
10-15 6608
这个游戏主要分为三部份，HTML5+CSS+JAVASCRIPT来完成的。在这里详细讲一下js的代码。因为这个游戏的主要部分其实就是js。大多数都是靠js来完成的。 完成后的效果如下： HTML代码： <body> <div class="wrap"> <div class="play_wrap"> ...
HTML游戏之俄罗斯方块
fei
12-21 716
HTML游戏之俄罗斯方块，由Steven Lambert创作 代码搬运如下： <!DOCTYPE html> <html> <head> <title></title> <style> html, body { height: 100%; margin: 0; } body { b...
HTML俄罗斯方块小游戏特效代码
03-20
HTML俄罗斯方块小游戏特效代码是一种基于HTML的网页版游戏实现，它通过JavaScript或者CSS3等技术来模拟经典的俄罗斯方块游戏。这个游戏界面简洁，玩家可以选择不同的难度级别，包括简单、一般和困难，使得游戏体验...
学习的一个HTML俄罗斯方块游戏.zip
03-17
学习的一个HTML俄罗斯方块游戏.zip学习的一个HTML俄罗斯方块游戏.zip 学习的一个HTML俄罗斯方块游戏.zip学习的一个HTML俄罗斯方块游戏.zip 学习的一个HTML俄罗斯方块游戏.zip学习的一个HTML俄罗斯方块游戏.zip 学习...
eluosi.rar_html俄罗斯方块
09-14
【标题】"eluosi.rar_html俄罗斯方块"指的是一个基于HTML5技术实现的俄罗斯方块游戏，这个压缩包中包含了游戏的源代码和可能的相关文档。 【描述】中提到，这是一个使用HTML5编写的俄罗斯方块程序。HTML5是超文本...
HTML俄罗斯方块小游戏代码.zip
05-25
HTML俄罗斯方块小游戏是一款利用HTML、CSS和JavaScript技术开发的在线娱乐项目，它展示了Web前端开发的基本原理和实践。这个游戏的界面设计简洁，提供不同难度级别（简单、一般、困难），用户可以通过键盘进行操作，...
前端技术搭建俄罗斯方块（内含源码）
热门推荐
官方推荐
06-05 2万+
通过前端基础HTML、CSS、JS来搭建一个俄罗斯方块小游戏，内附源码直接拷贝即可运行！
HTML5 俄罗斯方块
10-23
HTML5 俄罗斯方块HTML5 俄罗斯方块HTML5 俄罗斯方块HTML5 俄罗斯方块HTML5 俄罗斯方块HTML5 俄罗斯方块HTML5 俄罗斯方块
HTML+Javascript俄罗斯方块
05-29
本文介绍了用HTML+JavaScript技术制作俄罗斯方块的demo，包含了核心的板块，比较详细易懂，记分功能和闯关功能有兴趣的可以尝试 我还有这方面的代码可以分享
HTML5俄罗斯方块游戏
03-30
html5游戏源文件源码下载,游戏源文件源码html5,html5游戏源文件源码,游戏源文件html5源码下载，俄罗斯方块游戏相信大家都玩过，的确是堪称一款古老却又经典的游戏了。今天要介绍的这款正是用HTML5技术重写的俄罗斯方块游戏，HTML5真的非常强大。
HTML5俄罗斯方块
ThornBird313的专栏
04-24 179
以前做的俄罗斯方块，在Chrome下运行。 好像Chrome 17以上版本运行会有问题，提示：cross-origin image load denied by cross-origin resource sharing policy 。加--allow-file-access-from-files参数运行Chrome.exe就可以了，比如："C:\Documents and Settings\...
纯html的俄罗斯方块
qq_31077047的博客
11-01 401
上个月刚学前端，自己写了一个俄罗斯方块，毕竟是下时候常玩的游戏，基于bootstrap 框架，但是为了让这个文件可以单独运行，我把框架直接拷到代码的最下方了。 值得一提的是，没有参考网上任何同类游戏代码，都是自己想的，主要用了学过的定时器和框架的一些基本语句，只是实现了功能，页面没有做优化，分享给有兴趣的人 页面链接 ...
HTML5的俄罗斯方块
Vicc_Lee
01-17 2850
运用HTML5/CSS3/JavaScript开发一个小游戏：俄罗斯方块。 三个文件：tetris.html、tetris.css、tetris.js （完整的js代码在文末）
html 小游戏 俄罗斯方块
IT_arookie的博客
09-01 3768
样式如下： 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
html俄罗斯方块代码
06-01
以下是 HTML 实现俄罗斯方块的基本代码，包括游戏界面和基本逻辑： ```html <!DOCTYPE html> <html> <head> <title>Tetris</title> <style> #container { width: 300px; height: 600px; border: 1px solid black; position: relative; } .block { width: 30px; height: 30px; border: 1px solid black; position: absolute; } </style> </head> <body onload="startGame()"> <div id="container"></div> <script> var container = document.getElementById("container"); var blocks = []; var currentBlock = null; var currentInterval = null; var blockTypes = [ [[0, 0], [0, 1], [1, 0], [1, 1]], [[0, 0], [0, 1], [0, 2], [0, 3]], [[0, 0], [0, 1], [0, 2], [1, 2]], [[0, 0], [1, 0], [1, 1], [2, 1]], [[0, 1], [1, 0], [1, 1], [2, 0]], [[0, 0], [1, 0], [2, 0], [2, 1]], [[0, 1], [1, 1], [2, 0], [2, 1]] ]; function createBlock() { var type = Math.floor(Math.random() * 7); var shape = blockTypes[type]; var block = []; for (var i = 0; i < shape.length; i++) { var x = shape[i][0]; var y = shape[i][1]; var div = document.createElement("div"); div.className = "block"; div.style.left = (x * 30) + "px"; div.style.top = (y * 30) + "px"; container.appendChild(div); block.push(div); } return block; } function moveBlock() { for (var i = 0; i < currentBlock.length; i++) { var div = currentBlock[i]; var x = parseInt(div.style.left); var y = parseInt(div.style.top); div.style.top = (y + 30) + "px"; } } function checkCollision() { for (var i = 0; i < currentBlock.length; i++) { var div = currentBlock[i]; var x = parseInt(div.style.left); var y = parseInt(div.style.top); if (y >= 570) { return true; } for (var j = 0; j < blocks.length; j++) { var block = blocks[j]; for (var k = 0; k < block.length; k++) { var b = block[k]; var bx = parseInt(b.style.left); var by = parseInt(b.style.top); if (x == bx && y + 30 == by) { return true; } } } } return false; } function addBlock() { for (var i = 0; i < currentBlock.length; i++) { var div = currentBlock[i]; blocks.push(currentBlock); } currentBlock = null; } function checkRows() { for (var i = 0; i < 20; i++) { var row = []; for (var j = 0; j < blocks.length; j++) { var block = blocks[j]; for (var k = 0; k < block.length; k++) { var b = block[k]; var x = parseInt(b.style.left); var y = parseInt(b.style.top); if (y == i * 30) { row.push(b); } } } if (row.length == 10) { for (var j = 0; j < row.length; j++) { container.removeChild(row[j]); } blocks = blocks.filter(function(block) { return row.indexOf(block) == -1; }); for (var j = 0; j < blocks.length; j++) { var block = blocks[j]; for (var k = 0; k < block.length; k++) { var b = block[k]; var x = parseInt(b.style.left); var y = parseInt(b.style.top); if (y < i * 30) { b.style.top = (y + 30) + "px"; } } } i--; } } } function startGame() { currentBlock = createBlock(); currentInterval = setInterval(function() { if (!checkCollision()) { moveBlock(); } else { clearInterval(currentInterval); addBlock(); checkRows(); startGame(); } }, 500); } </script> </body> </html> ``` 该代码利用 HTML 和 JavaScript 实现了一个基本的俄罗斯方块游戏，包括随机生成方块、方块下落、碰撞检测、方块消除等基本功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值