CSS+js打造的网页版俄罗斯方块游戏

<HTML>
    <SCRIPT>
    parent.moveTo((screen.width-775)/2,(screen.height-540)/2);
    parent.resizeTo(775,540)
    </SCRIPT>
    <HEAD>
    <META NAME="Title" CONTENT="JScript Simple Tetris">
    <TITLE>CSS+js打造的网页版俄罗斯方块游戏丨石家庄展柜-石家庄网络公司</TITLE>
    <style>
    body {margin:0;background:black;font-size:9pt}
    td {height:20;width:20;font-size:9pt}
    #block_div {position:absolute;z-index:1;width:80;font-size:9pt}
    #table_div {position:absolute;z-index:0;width:320;font-size:9pt}
    #nblock_div {position:absolute;z-index:2;font:48 system;color:red;font-size:9pt}
    #title_div {position:absolute;left:326;top:7;font-size:22px;color:whitefont-size:9pt}
    #infobar_div {position:absolute;left:396;top:416;}
    #infobar2_div {position:absolute;left:396;top:480;font-size:14px;color:whitefont-size:9pt}
    #infobar2_div a{color:99ccff;font:system;text-decoration:none;font-size:9pt}
    </style>
    <SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
    <!--
    if (document.all){
    var n_width = 800;
    var n_height = 600;
    var n_left = Math.round( screen.width/2 ) - n_width/2;
    var n_top = Math.round( screen.height/2 ) - n_height/2;
    var n_IncStep = 20;
    var curBlcok,nextBlock;
    var arr_curBlock = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
    var curX,curY;
    var speed=1;
    var maxspeed=9;
    var clr_per_line=18;
    var pause=0;
    var gameover=0;
    var colors = new Array("#999999","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","#FF00FF","#FF0000"
    );
    var cid;
    var ncid;
    var blocks = new Array("tt_O1","tt_T2","tt_Z1","tt_S1","tt_L1","tt_J1","tt_I2");
    var bid;
    var killedlines=0;
    var tt_O1 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);
    var tt_O2 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);
    var tt_O3 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);
    var tt_O4 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);
    var tt_T1 = new Array(0,0,0,0,0,1,0,0,1,1,0,0,0,1,0,0);
    var tt_T2 = new Array(0,0,0,0,0,0,0,0,1,1,1,0,0,1,0,0);
    var tt_T3 = new Array(0,0,0,0,0,1,0,0,0,1,1,0,0,1,0,0);
    var tt_T4 = new Array(0,0,0,0,0,1,0,0,1,1,1,0,0,0,0,0);
    var tt_Z1 = new Array(0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0);
    var tt_Z2 = new Array(0,0,0,0,0,0,1,0,0,1,1,0,0,1,0,0);
    var tt_Z3 = new Array(0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0);
    var tt_Z4 = new Array(0,0,1,0,0,1,1,0,0,1,0,0,0,0,0,0);
    var tt_S1 = new Array(0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0);
    var tt_S2 = new Array(0,0,0,0,0,1,0,0,0,1,1,0,0,0,1,0);
    var tt_S3 = new Array(0,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0);
    var tt_S4 = new Array(0,1,0,0,0,1,1,0,0,0,1,0,0,0,0,0);
    var tt_L1 = new Array(0,1,0,0,0,1,0,0,0,1,1,0,0,0,0,0);
    var tt_L2 = new Array(0,0,0,0,0,0,1,0,1,1,1,0,0,0,0,0);
    var tt_L3 = new Array(0,0,0,0,0,1,1,0,0,0,1,0,0,0,1,0);
    var tt_L4 = new Array(0,0,0,0,0,1,1,1,0,1,0,0,0,0,0,0);
    var tt_J1 = new Array(0,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0);
    var tt_J2 = new Array(0,0,0,0,1,1,1,0,0,0,1,0,0,0,0,0);
    var tt_J3 = new Array(0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,0);
    var tt_J4 = new Array(0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0);
    var tt_I1 = new Array(0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0);
    var tt_I2 = new Array(0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1);
    var tt_I3 = new Array(0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0);
    var tt_I4 = new Array(0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1);
    var table = new Array(
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
    1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1)
    }
    else
    alert("You need IE4+ to play Tetris!")
    function dimension2(row,col,num){
    var i = row * num + col;
    return (this[i]);
    }
    Array.prototype.getd = dimension2;
    function ShowBlock(x,y,block_type,color){
    for (var i=0;i<block_tbl.rows.length;i++){
    for (var j=0;j<block_tbl.rows(i).cells.length;j++){
    var d2 = i * 4 + j;
    if (block_type[d2]==1){
    block_tbl.rows(i).cells(j).style.background = color;
    }
    else{
    block_tbl.rows(i).cells(j).style.background = "";
    }
    }
    }
    block_div.style.pixelLeft=x;
    block_div.style.pixelTop=y;
    }
    function ShowBlock1(x,y,block_type,color,obj_tabID,obj_divID){
    for (var i=0;i<obj_tabID.rows.length;i++){
    for (var j=0;j<obj_tabID.rows(i).cells.length;j++){
    var d2 = i * 4 + j;
    if (block_type[d2]==1){
    obj_tabID.rows(i).cells(j).style.background = color;
    }
    else{
    obj_tabID.rows(i).cells(j).style.background = "";
    }
    }
    }
    obj_divID.style.pixelLeft=x;
    obj_divID.style.pixelTop=y;
    }
    function Change(inc){
    var type = curBlock.substr(0,4);
    var num = curBlock.substr(curBlock.length-1);
    num = parseInt(num) + inc;
    if (num>4||num<1) num -= 4*inc;
    type += num;
    eval("arr_tmp = " + type + ";");
    if (CanMove(curX,curY,arr_tmp)){
    curBlock = type;
    eval("arr_curBlock = " + curBlock + ";");
    eval("ShowBlock(block_div.style.pixelLeft,block_div.style.pixelTop," + curBlock + ",colors[" + cid + "]);");
    }
    }
    function CanMove(x,y,block){
    for (i=0;i<4;i++){
    for (j=0;j<4;j++){
    if (block.getd(i,j,4)&table.getd(y/n_IncStep+i,x/n_IncStep+j,16)) return false;
    }
    }
    return true;
    }
    function NewBlock(){
    curBlock = nextBlock;
    cid = ncid;
    bid = Math.round(Math.random()*(blocks.length-1));
    ncid = Math.round(Math.random()*(colors.length-1));
    nextBlock = blocks[bid];
    eval("arr_curBlock = " + curBlock + ";");
    eval("ShowBlock(120,0," + curBlock + ",colors[" + cid + "]);");
    eval("arr_curBlock = " + curBlock + ";");
    eval("ShowBlock1(466,116," + nextBlock + ",colors[" + ncid + "],nblock_tbl,nblock_div);");
    }
    function SaveBlock(){
    for (i=0;i<4;i++){
    for (j=0;j<4;j++){
    table[(curY/n_IncStep+i)*16+curX/n_IncStep+j]|=arr_curBlock[i*4+j];
    if (arr_curBlock[i*4+j]==1)
    if ((curY/n_IncStep+i<21)&&(curX/n_IncStep+j>1)&&(curX/n_IncStep+j<14))
    table_tbl.rows(curY/n_IncStep+i).cells(curX/n_IncStep+j).style.background = colors[cid];
    if (table[(curY/n_IncStep+i)*16+curX/n_IncStep+j]!=1)
    table_tbl.rows(curY/n_IncStep+i).cells(curX/n_IncStep+j).style.background = "black";
    }
    }
    }
    function DelLine(line){
    for(i=line;i>0;i--){
    for(j=2;j<14;j++){
    table[i*16+j]=table[(i-1)*16+j];
    }
    }
    table_tbl.deleteRow(line);
    table_tbl.insertRow(0);
    for (i=0;i<16;i++){
    table_tbl.rows(0).insertCell();
    if (i<2||i>13) table_tbl.rows(0).cells(i).style.background="navy";
    }
    killedlines++;
    cll.innerText=parseInt(cll.innerText)+1;
    }
    function DelLines(){
    var c,d,i,j;
    d=0;
    curY=block_div.style.pixelTop;
    for(i=(curY/20+3);i>curY/20-1;i--){
    c=0;
    for(j=2;j<14;j++){
    if (isNaN(table[i*16+j])||i==21) break;
    c+=table[i*16+j];
    }
    if(c==12){
    DelLine(i);
    i++;
    d++;
    }
    }
    if (d>0)
    sco.innerText=parseInt(sco.innerText)+d*d*36;
    }
    function Lucifer(){
    for(var i=2;i<14;i++){
    if (table[16+i]==1) return true;
    }
    return false;
    }
    function GameOver(){
    gameover=1;
    clearInterval(gameInterval);
    block_div.innerHTML="";
    for (i=0;i<21;i++){
    for (j=2;j<14;j++){
    setTimeout("table_tbl.rows(" + i + ").cells(" + j + ").style.background = colors[Math.round(Math.random()*7)];",16*i*j);
    }
    }
    nblock_div.innerHTML = "Game Over";
    }
    function document_onkeydown() {
    if (gameover==1) return;
    with (block_div.style){
    curX = pixelLeft;
    curY = pixelTop;
    switch (event.keyCode){
    case 37:
    if (CanMove(curX-n_IncStep,curY,arr_curBlock))
    pixelLeft-=n_IncStep;
    break;
    case 38:
    Change(1);
    break;
    case 39:
    if (CanMove(curX+n_IncStep,curY,arr_curBlock))
    pixelLeft+=n_IncStep;
    break;
    case 40:
    if (CanMove(curX,curY+n_IncStep,arr_curBlock)){
    pixelTop+=n_IncStep;
    }
    else{
    SaveBlock();
    DelLines();
    if (Lucifer()){
    GameOver();
    return;
    }
    sco.innerText=parseInt(sco.innerText)+2;
    NewBlock();
    }
    break;
    case 32:
    if (pause==0){
    clearInterval(gameInterval);
    pause=1;
    }
    else{
    gameInterval=window.setInterval("Handle_Interval()",(maxspeed-speed+1)*60);
    pause=0;
    }
    break;
    case 90:
    Change(1);
    break;
    case 88:
    Change(-1);
    break;
    default:
    }
    }
    }
    function Handle_Interval(){
    curX = block_div.style.pixelLeft;
    curY = block_div.style.pixelTop;
    if (CanMove(curX,curY+n_IncStep,arr_curBlock)){
    block_div.style.pixelTop+=n_IncStep;
    }
    else{
    SaveBlock();
    DelLines();
    if (Lucifer()){
    GameOver();
    return;
    }
    sco.innerText=parseInt(sco.innerText)+2
    NewBlock();
    }
    if (killedlines>=clr_per_line){
    killedlines-=clr_per_line;
    if (speed<maxspeed)
    speed++;
    else
    speed=maxspeed;
    spd.innerText=speed;
    clearInterval(gameInterval);
    gameInterval=window.setInterval("Handle_Interval()",(maxspeed-speed+1)*60);
    }
    }
    //-->
    </SCRIPT>
    <SCRIPT LANGUAGE=javascript FOR=document EVENT=onkeydown>
    <!--
    if (document.all)
    document_onkeydown()
    //-->
    </SCRIPT>
    </HEAD>
    <BODY LANGUAGE=javascript>
    <div id=block_div style="left:60;top:0">
    <table id=block_tbl border=0 cellspacing=0 cellpadding=0>
    <script>
    if (document.all){
    for (var i=0;i<4;i++){
    document.write("<tr>");
    for (var j=0;j<4;j++){
    document.write("<td style=\"border:1 solid black;\"></td>");
    }
    document.write("</tr>");
    }
    }
    </script>
    </table>
    </div>
    <div id=nblock_div>
    <table id=nblock_tbl border=0 cellspacing=0 cellpadding=0>
    <script>
    if (document.all){
    for (var i=0;i<4;i++){
    document.write("<tr>");
    for (var j=0;j<4;j++){
    document.write("<td style=\"height:40;width:40;border:1 outset black;\"></td>");
    }
    document.write("</tr>");
    }
    }
    </script>
    </table>
    </div>
    <div id=table_div>
    <table id=table_tbl border=0 cellspacing=0 cellpadding=0>
    <script>
    if (document.all){
    for (var i=0;i<22;i++){
    document.write("<tr>");
    for (var j=0;j<16;j++){
    var d2 = i * 16 + j;
    if (table[d2]==1)
    document.write("<td bgcolor=navy></td>");
    else
    document.write("<td style=\"background:black;\"></td>");
    }
    document.write("</tr>");
    }
    }
    </script>
    </table>
    </div>
    <div id=title_div nowrap style="width: 117; height: 142;font-size:9t"> <font color="#FFFF00">input speed (1-9) to begin: <input type="text" size=8 id="speedin"> <button onClick="begintet()" id="but">Submit!</font></button></div>
    <div id=infobar_div>
    <table border=1 bordercolor=navy cellspacing=0 cellpadding=0>
    <tr align=center>
    <td style="color:99ccff;font:12 system;width:56;">Speed:</td>
    <td style="color:red;font:12 system;" id=spd>1</td>
    <td style="color:99ccff;font:12 system;width:86;">Total Score:</td>
    <td style="color:red;font:12 system;" id=sco>0</td>
    <td style="color:99ccff;font:12 system;width:96;">Cleared Lines:</td>
    <td style="color:red;font:12 system;" id=cll>0</td>
    </tr>
    </table>
    </div>
    <div id=infobar2_div>Script featured on <a href="/">Dynamic Drive</a></div>
    <SCRIPT ID=MainSection LANGUAGE=javascript>
    <!--
    if (document.all){
    ncid = Math.round(Math.random()*(colors.length-1));
    bid = Math.round(Math.random()*(blocks.length-1));
    nextBlock = blocks[bid];
    NewBlock();
    }
    function begintet(){
    document.all.speedin.disabled=true
    document.all.but.disabled=true
    speed=parseInt(document.all.speedin.value);
    if (isNaN(speed)||speed==null||speed>maxspeed||speed<1) speed=1;
    spd.innerText=speed;
    gameInterval=window.setInterval("Handle_Interval()",(maxspeed-speed+1)*60);
    }
    //-->
    </SCRIPT>
    </BODY>
    </HTML>
    <br><br><hr>
时间： 2024-10-20 21:24:07

CSS+js打造的网页版俄罗斯方块游戏的相关文章

CSS+JS打造的黑白风格网页计算器

JavaScript版网页计算器,仿Vista风格,计算器中的按钮做的想当漂亮,由此也增加了对此计算器的专业好感.鼠标移在计算器上,有响应效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3

CSS+JS打造的一款flash效果的弹性菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS+JS打造的一款flash效果的弹性

CSS+JS打造的精美放大镜效果

<!doctype html> <html> <head> <base href="http://www.CsrCode.Cn/" /> <meta charset="utf-8"/> <title>CSS+JS打造的精美放大镜效果丨梨花粉价格丨河北叉车</title> <meta http-equiv="X-UA-Compatible" content=&

Js 网页版扫雷游戏代码实现

这个游戏是自己在大约一年前联系js熟练度时做的,用的都是基础的东西,最近比较忙没时间整理.直接发给大家,有兴趣的可以看一下.欢迎大家提出建议.如果你有什么新的想法也可以提出来,或者你并不擅长编程.你想做什么东西可以告诉我.我尽量帮你实现.不要在意标点符号什么的,,哈哈 废话不说了上代码: <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>zwcai

html,css,js,贪吃蛇网页游戏

游戏效果如图: 实现代码如下: <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>贪吃蛇游戏</title> </head> <body> <h1>石健涛</h1> <div id="gameBox" style="text-align: center;&quo

HTML5/CSS3简易版俄罗斯方块游戏

在线演示 本地下载 原文地址:https://www.cnblogs.com/qixidi/p/10079619.html

21款网页版html5小游戏源码

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源码下载 jQuery flappy bird电脑版小游戏源码下载 网页版html5 3d俄罗斯方块游戏源码下载 jQuery html5迷宫游戏源码下载 html5网页游戏仿flappy

游戏——网页版别踩白块

一 项目简介 主要知识点:JavaScript.HTML.CSS这是一个主要用JS实现的网页版小游戏,游戏规则很简单,通过点击不断下落的黑块来消灭它并获取分数,如果不幸黑块掉落下来或点到了白色区域那么游戏就会终止.游戏截图如下: 二 游戏框架 整个游戏可分为以下几个步骤实现:1. HTML和CSS画出静态的游戏框架:2. DOM结构说明:游戏元素使用嵌套的div元素来实现,是一个4*4的方格地图:最外层容器main(一个) > 次外层容器container(一个) > 行容器row(四行) &

开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面

NanUI是什么 NanUI基于ChromiumFX项目进行开发,它能让你在你的Winform应用程序中使用HTML5/CSS3/Javascript等网页技术来呈现用户界面(类似Electron).同时NanUI提供了原生窗口和定制化的无标题栏无边框窗口,你能使用全部的网页技术来设计和呈现你的应用程序界面. 开源方式 NanUI基于MIT协议,所以无论你使用NanUI来开发商业项目或者开源.免费项目都将不受任何限制,只需要遵照协议文件中规定的,在你的软件中声明使用了NanUI技术即可. 系列文