zoukankan      html  css  js  c++  java
  • javascript俄罗斯方块游戏

    在线试玩:http://keleyi.com/game/5/

    操作指南:
    键盘方向键←→控制左右移动,↑键变形,↓键快速下落。

    别看这段js代码只有短短的100多行,效果却非常不错,用键盘的方向键操作,向上键是变形,赶紧试试。

    把下面代码保存到html文件,打开就可以。

      1 <html><head><title>俄罗斯方块-柯乐义</title>
      2 <link href="http://keleyi.com/game/5/index/keleyielsfk.css" type="text/css" rel="Stylesheet" /></head>
      3 <body><a href="http://keleyi.com/a/bjac/600xsi0s.htm">原文</a></body></html>
      4 <script>
      5 var over = false, shapes = ("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";");
      6 function create(tag, css) {
      7 var elm = document.createElement(tag);
      8 elm.className = css;
      9 document.body.appendChild(elm);
     10 return elm;
     11 }
     12 function Tetris(c, t, x, y) {
     13 var c = c ? c : "c";
     14 this.divs = [create("div", c), create("div", c), create("div", c), create("div", c)];
     15 this.reset = function () {
     16 this.x = typeof x != 'undefined' ? x : 3;
     17 this.y = typeof y != 'undefined' ? y : 0;
     18 this.shape = t ? t : shapes[Math.floor(Math.random() * (shapes.length - 0.00001))].split(",");
     19 this.show();
     20 if (this.field && this.field.check(this.shape, this.x, this.y, 'v') == 'D') {
     21 over = true;
     22 this.field.fixShape(this.shape, this.x, this.y);
     23 alert('游戏结束。http://keleyi.com/game/5/');
     24 } 
     25 }
     26 this.show = function () {
     27 for (var i in this.divs) {
     28 this.divs[i].style.left = (this.shape[i * 2] * 1 + this.x) * 20 + 'px';
     29 this.divs[i].style.top = (this.shape[i * 2 + 1] * 1 + this.y) * 20 + 'px';
     30 } 
     31 }
     32 this.field = null;
     33 this.hMove = function (step) {
     34 var r = this.field.check(this.shape, this.x - -step, this.y, 'h');
     35 if (r != 'N' && r == 0) {
     36 this.x -= -step;
     37 this.show();
     38 } 
     39 }
     40 this.vMove = function () {
     41 if (this.field.check(this.shape, this.x, this.y - -1, 'v') == 'N') {
     42 this.y++;
     43 this.show();
     44 }
     45 else {
     46 this.field.fixShape(this.shape, this.x, this.y);
     47 this.field.findFull();
     48 this.reset();
     49 } 
     50 }
     51 this.rotate = function () {
     52 var s = this.shape;
     53 var newShape = [3 - s[1], s[0], 3 - s[3], s[2], 3 - s[5], s[4], 3 - s[7], s[6]];
     54 var r = this.field.check(newShape, this.x, this.y, 'h');
     55 if (r == 'D') return;
     56 if (r == 0) {
     57 this.shape = newShape;
     58 this.show();
     59 }
     60 else if (this.field.check(newShape, this.x - r, this.y, 'h') == 0) {
     61 this.x -= r;
     62 this.shape = newShape;
     63 this.show();
     64 } 
     65 }
     66 this.reset();
     67 }
     68 function Field(w, h) {
     69 this.width = w ? w : 10;
     70 this.height = h ? h : 20;
     71 this.show = function () {
     72 var f = create("div", "f")
     73 f.style.width = this.width * 20 + 'px';
     74 f.style.height = this.height * 20 + 'px';
     75 }
     76 this.findFull = function () {
     77 for (var l = 0; l < this.height; l++) {
     78 var s = 0;
     79 for (var i = 0; i < this.width; i++) {
     80 s += this[l * this.width + i] ? 1 : 0;
     81 }
     82 if (s == this.width) {
     83 this.removeLine(l);
     84 } 
     85 } 
     86 }
     87 this.removeLine = function (line) {
     88 for (var i = 0; i < this.width; i++) {
     89 document.body.removeChild(this[line * this.width + i]);
     90 }
     91 for (var l = line; l > 0; l--) {
     92 for (var i = 0; i < this.width; i++) {
     93 this[l * this.width - -i] = this[(l - 1) * this.width - -i];
     94 if (this[l * this.width - -i]) this[l * this.width - -i].style.top = l * 20 + 'px';
     95 } 
     96 } 
     97 }
     98 this.check = function (shape, x, y, d) {
     99 var r1 = 0, r2 = 'N';
    100 for (var i = 0; i < 8; i += 2) {
    101 if (shape[i] - -x < 0 && shape[i] - -x < r1)
    102 { r1 = shape[i] - -x; }
    103 else if (shape[i] - -x >= this.width && shape[i] - -x > r1)
    104 { r1 = shape[i] - -x; }
    105 if (shape[i + 1] - -y >= this.height || this[shape[i] - -x - -(shape[i + 1] - -y) * this.width])
    106 { r2 = 'D' } 
    107 }
    108 if (d == 'h' && r2 == 'N') return r1 > 0 ? r1 - this.width - -1 : r1;
    109 else return r2;
    110 }
    111 this.fixShape = function (shape, x, y) {
    112 var d = new Tetris("d", shape, x, y);
    113 d.show();
    114 for (var i = 0; i < 8; i += 2) {
    115 this[shape[i] - -x - -(shape[i + 1] - -y) * this.width] = d.divs[i / 2];
    116 } 
    117 } 
    118 }
    119 var f = new Field();
    120 f.show();
    121 var s = new Tetris();
    122 s.field = f;
    123 s.show();
    124 window.setInterval("if(!over)s.vMove();", 500);
    125 document.onkeydown = function (e) {
    126 if (over) return;
    127 var e = window.event ? window.event : e;
    128 switch (e.keyCode) {
    129 case 38: //up keleyi.com
    130 s.rotate();
    131 break;
    132 case 40: //down
    133 s.vMove();
    134 break;
    135 case 37: //left
    136 s.hMove(-1);
    137 break;
    138 case 39: //right
    139 s.hMove(1);
    140 break;
    141 } 
    142 }
    143 </script>

    原文: http://keleyi.com/a/bjac/600xsi0s.htm

    web前端:http://www.cnblogs.com/jihua/p/webfront.html

  • 相关阅读:
    CSS选择器之伪类选择器(元素)
    CSS选择器之基本选择器+属性选择器
    bugku 点击1000000次
    bugku web 5
    bugku 矛盾 30
    bugku 域名解析题 50
    bugku 好多压缩包
    六子冲 模拟棋盘
    poj3126 Prime Path(c语言)
    poj1426 Find The Multiple(c语言巧解)
  • 原文地址:https://www.cnblogs.com/jihua/p/jselsfk.html
Copyright © 2011-2022 走看看