菜单

打造属于你的游戏帝国

2020年3月30日 - 首页

轻松易行的JS俄罗丝四方游戏源码,先给大家突显下效果图,若是大家认为不错,请参见实现代码,

纯JS达成俄罗丝方块,塑造归于您的玩耍帝国

俄罗丝方块能够说是流行全球,老少皆知的一款游戏,
那么我们作为web开垦是不是能够动用代码简单完毕这几个小游戏呢?

 

  html代码部分:

 

  

 1 <!doctype html>
 2 <html>
 3 <head>
 4 </head>
 5 <body>
 6     <h2 style="background-color:yellow;">博客园:请叫我头头哥</h2>
 7     <div id="box"></div>
 8     <div id="info">
 9         NEXT:
10         <div id="next"></div>
11         <div id="text"></div>
12     </div>
13 </body>
14 </html>

 

 

  css部分:

 

  

 

 

body {
        background: blue;
        font: 25px / 25px ËÎÌå;
    }

    #box {
        float: left;
        width: 252px;
        border: #999 20px ridge;
        color: #9f9;
        text-shadow: 2px 3px 1px #0f0;
    }

    #info {
        float: left;
        color: #cfc;
        padding: 24px;
    }

    #next {
        padding: 8px;
        width: 105px;
        color: #9f9;
        text-shadow: 2px 3px 1px #0f0;
    }

 

  js部分:

 

  

 

 

 1 var map = eval("[" + Array(23).join("0x801,") + "0xfff]");
 2     var tatris = [[0x6600], [0x2222, 0xf00], [0xc600, 0x2640], [0x6c00, 0x4620], [0x4460, 0x2e0, 0x6220, 0x740], [0x2260, 0xe20, 0x6440, 0x4700], [0x2620, 0x720, 0x2320, 0x2700]];
 3     var char = { x: "u3000", s: "u25a0", t: "u25a1" };
 4     var keycom = { "38": "rotate(1)", "40": "down()", "37": "move(2,1)", "39": "move(0.5,-1)", "32": "0;pause=!pause" };
 5     var dia, pos, bak, run, next, pause = false, info = { speed: 1, lines: 0, score: 0 };
 6 
 7     // 开始时间
 8     function start() {
 9         dia = next.d;
10         bak = pos = {
11             fk: [],
12             y: 0,
13             x: 4,
14             s: next.s
15         };
16         nextdia();
17         document.getElementById("next").innerHTML = (next.d[next.s % next.d.length] | 0x10000).toString(2).slice(-16).replace(/..../g, "$&<br/>").replace(/1/g, char.t).replace(/0/g, char.x);
18         document.getElementById("text").innerHTML = "SCORE:" + info.score + "<br/><br/>LINES:" + info.lines + "<br/><br/>SPEED:" + info.speed;
19         rotate(0);
20         run = setInterval("pause||down()", ~ ~(Math.pow(1.3, 12 - info.speed) * 30 + 20));
21     }
22 
23     // 游戏结束时事件
24     function over() {
25         document.onkeydown = null;
26 
27         // confirm, 是否再来一局
28         var end = confirm("游戏结束, 是再来一局");
29         if (end) {
30             window.location.href = window.location.href;
31         } else {
32             alert("骚年,自制力不错!");
33         }
34     }
35 
36     function nextdia() {
37         next = { d: tatris[~ ~(Math.random() * 7)], s: ~ ~(Math.random() * 4) };
38     }
39 
40     function update(t) {
41         bak = { fk: pos.fk.slice(0), y: pos.y, x: pos.x, s: pos.s };
42         if (t) return;
43         for (var i = 0, a2 = ""; i < 22; i++) a2 += map[i].toString(2).slice(1, -1) + "<br/>";
44         for (var i = 0, n; i < 4; i++)
45             if (/([^0]+)/.test(bak.fk[i].toString(2).replace(/1/g, char.t)))
46                 a2 = a2.substr(0, n = (bak.y + i + 1) * 15 - RegExp.$_.length - 4) + RegExp.$1 + a2.slice(n + RegExp.$1.length);
47         document.getElementById("box").innerHTML = a2.replace(/1/g, char.s).replace(/0/g, char.x);
48     }
49 
50     function is() {
51         for (var i = 0; i < 4; i++)
52             if ((pos.fk[i] & map[pos.y + i]) != 0)
53                 return pos = bak;
54     }
55 
56     function rotate(r) {
57         var f = dia[pos.s = (pos.s + r) % dia.length];
58         for (var i = 0; i < 4; i++)
59             pos.fk[i] = (f >> (12 - i * 4) & 15) << pos.x;
60         update(is());
61     }
62 
63     function down() {
64         ++pos.y;
65         if (is()) {
66             for (var i = 0, r = 0; i < 4 && pos.y + i < 22; i++)
67                 if ((map[pos.y + i] |= pos.fk[i]) == 0xfff) {
68                     map.splice(pos.y + i, 1), map.unshift(0x801);
69                     ++info.lines % 20 == 0 && info.speed++, r++;
70                 }
71             clearInterval(run);
72             if (map[1] != 0x801)
73                 return over();
74             info.score += ~ ~(Math.pow(r, 1.5) * 10) + 2;
75             start();
76         }
77         update();
78     }
79 
80     function move(t, k) {
81         pos.x += k;
82         for (var i = 0; i < 4; i++)
83             pos.fk[i] *= t;
84         update(is());
85     }
86 
87     document.onkeydown = function (e) {
88         eval("pause||" + keycom[(e ? e : event).keyCode]);
89     };
90     nextdia();
91     start();

 

俄罗丝方块能够说是风靡全世界,老少皆知的一款游戏,
那么大家作为web开垦是或不是足以接纳代…

代码如下,复制就可以使用:

使用JS实现俄罗斯方块游戏 .MainFrame { border: 1px solid burlywood; margin: 10px auto; position: relative; background-color: silver; } .MainFramediv { float: left; margin: 1px; position: absolute; /*z-index: -1;*/ } .smallDiv { margin: 1px; position: absolute; } .smallDivblack { /*float: left;*/ margin: 1px; /*margin: 1px;*/ position: absolute; /*z-index: 2;*/ } #tetris{ width: 50%; margin: 0 auto; padding: 0; /*border: 1px solid silver;*/ } #tetris:after{ content: ""; Display: block; Clear: both; } #control{ float: left; border: 1px solid silver; width: 150px; height: 578px; margin-top: 10px; margin-left: 20px; padding-top: 30px; font-size: 24px; font-weight: 400; color: blue; text-align: center; } #level,#regame{ width: 100px; height: 30px; border: 1px solid blue; font-size: 16px; color: red; font-weight: 300; } #control p{ margin-top: 200px; } #regame{ margin-top: 100px; font-weight: 600; background-color: azure; } #TFrime{ float: left; } #info{ float: left; border: 1px solid silver; width: 150px; height: 578px; margin: 10px auto; padding-top: 30px; text-align: center; color: blue; font-size: 24px; font-weight: 400; } #nextfigure{ width: 100px; height: 100px; background-color: silver; margin: 0 auto; margin-bottom: 100px; position: relative; } .drawdiv{ background-color: red; margin: 1px; border: 1px solid silver; position: absolute; }  难度:  简单 一般 困难    ↑:变换
 ←:左移
 →:右移
 ↓:加速
     下一个图形:   分数:0 适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

GameFrame.js

function GameFrame{ //单位的像素 this.unit = unit; //横向单位个数 this.row = row; //纵向单位个数 this.col =col; //保存页面创建div容器的属性 this.Content; //小图形 this.samlldiv; //定时器id this.intervalid; //速度 this.speed =document.getElementById.value; //速度是否改变 this.ChangeSped=0; //记录每个位置是否有div this.datas=[]; //记录消除行数相应的分数 this.score=[0,100,300,600,1000] //记录当前的图形的下标 this.now; //记录下一个图形的下标 this.next; //记录当前的图形的颜色 this.nowcolor; //记录下一个图形的颜色 this.nextcolor; //保存7种图形相对坐标的数组 this.arr = "0,1,0,2,1,2,2,2;0,1,1,1,1,2,2,2;0,1,0,2,1,1,2,1;0,2,1,1,1,2,2,1;1,0,1,1,1,2,1,3;1,1,1,2,2,1,2,2;1,1,2,0,2,1,2,2".split; //保存小方块的颜色 this.color=["red","blue","green","yellow","#00FFFF","#930093","#F80000","#984B4B"]; //初始化容器div this.init = function() { //创建div var div = document.createElement; //设置div的宽度 div.style.width = +"px"; //设置div的高度 div.style.height=+"px"; //设置div的样式 div.className="MainFrame"; div.; //加入到body中 document.getElementById.appendChild; this.Content =div; //保存div的引用 //初始化数组 for(var i=0;ifunction Graph { //保存7种图形相对坐标的数组// var arr = "0,1,0,2,1,2,2,2;0,1,1,1,1,2,2,2;0,1,0,2,1,1,2,1;0,2,1,1,1,2,2,1;1,0,1,1,1,2,1,3;1,1,1,2,2,1,2,2;1,1,2,0,2,1,2,2".split; //保存4个小图形的数组 this.divs = []; //外部容器div的数组 this.parentFrame = frame; //图形横纵偏移 this.x = 0; this.y = 0; //记录图形的坐标数组 this.zb = []; //记录消除的行数 this.line=0; //初始化小图形的方法 this.init = function { //计算图形其实坐标的单位 var startleft = (this.parentFrame.row - 4) / 2; this.x = startleft; //随机生成图形数组下标// var rand = Math.floor * arr.length); //分解图形的坐标 var smallarr = this.parentFrame.arr[rand].split; this.zb = smallarr; //循环设置小div的 left和top for (var i = 0; i < 8; i += 2) { //创建小div var smalldiv = document.createElement; //设置样式 smalldiv.className = "smallDiv"; //设置颜色 smalldiv.style.backgroundColor=color; //定义高宽 smalldiv.style.width = (this.parentFrame.unit - 2) + "px"; smalldiv.style.height = (this.parentFrame.unit - 2) + "px"; //设置小div的top smalldiv.style.top =  * this.parentFrame.unit) + "px"; //设置小div的left smalldiv.style.left = ( + startleft) * this.parentFrame.unit) + "px"; //保存小div的引用 this.divs.push; //加入到外部容器 document.getElementById.appendChild; } //执行自动向下移动 //this.parentFrame.intervalid = setInterval(autoMoveDown, this.parentFrame.speed); } //左移动 this.moveleft = function() { // var canmove = true; // //判断能否左移动 // // for(var i=0;i=parseInt(this.parentFrame.Content.style.width)) // { // canmove = false; // break; // } // } var temp = canMove(this.zb, this.x, this.y, this.parentFrame, 1);// alert; console.log; if (canMove(this.zb, this.x, this.y, this.parentFrame, 1)) { this.x += 1; for (var i = 0; i < this.divs.length; i++) { var left = parseInt(this.divs[i].style.left); this.divs[i].style.left = (left + this.parentFrame.unit) + "px"; } } } //变形 this.change = function() { //变形的公式 //小div的2个相对坐标点改变 x = y ; y= 3-x; 比如  变化之后 就是 x=1,y=3-0 ->  //循环4个小div if (!canMove(this.zb, this.x, this.y, this.parentFrame, 4)) { if  { this.x += 1; } else { this.x -= 1; } } for (var i = 0; i < this.divs.length; i++) { //根据公式改变每个div的相对偏移量,2个一改 var temp = this.zb[i * 2] this.zb[i * 2] = this.zb[i * 2 + 1]; this.zb[i * 2 + 1] = 3 - temp; //根据改变后的偏移量计算图形的当前left和top this.divs[i].style.top = ((this.y + parseInt * this.parentFrame.unit) + "px"; this.divs[i].style.left = ((this.x + parseInt * this.parentFrame.unit) + "px"; } } this.movedown = function() { var $this = this =="window" ? this.frame.samlldiv : this; if (canMove($this.zb, $this.x, $this.y, $this.parentFrame, 3)) { $this.y += 1; for (var i = 0; i < $this.divs.length; i++) { var top = parseInt($this.divs[i].style.top); $this.divs[i].style.top = (top + $this.parentFrame.unit) + "px"; } return false; } else { clearInterval($this.parentFrame.intervalid);// var temp = $this.parentFrame.Content.getElementsByTagName; for (var i=0;i= f.row) { return false; }else if(f.datas[ + x + 1)+*f.row] !=0) { return false; } } break; case 2: for (var i = 0; i < zb.length; i += 2) { if  + x - 1 < 0 ) { return false; }else if(f.datas[ + x - 1)+*f.row] !=0) { return false; } } break; case 3: for (var i = 0; i < zb.length; i += 2) { if  + y + 1 >= f.col || f.datas[ + x)+ + y+1)*f.row] !=0) { return false; } } break; case 4: for (var i = 0; i < zb.length; i += 2) { var temp = 3 - zb[i]; if (temp + x < 0 || temp + x >= f.row) { return false; } } break; } return true; } this.rescore=function(){ var gamescore=document.getElementById; gamescore.innerHTML=parseInt+this.parentFrame.score[this.line]; }}

var frame;function initGame(){ frame = new GameFrame; frame.init(); document.body.addEventListener("keydown",MoveOrChange)}function changespeed(){ frame.changespeed{ location.reload();}function MoveOrChange(){ switch { case 38: //变形; break; case 37: //左移动 frame.MoveLeft(); break; case 39://右移动 frame.MoveRight(); break; case 40: //向下 frame.MoveDown(); break; }}

总结

如上所述是笔者给大家介绍的选拔JS代码完结俄罗丝四方游戏,希望对我们全数利于,借使大家有其余疑问请给自家留言,小编会及时回复大家的。在这里也特别多谢大家对台本之家网址的支撑!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图