ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript_javascript スキルでの単純なテトリス実装の完全な例

JavaScript_javascript スキルでの単純なテトリス実装の完全な例

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 15:12:46
オリジナル
1423 人が閲覧しました

この記事の例では、JavaScript で単純なテトリスを実装する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

まず操作レンダリングを見てみましょう:

完全なコード例は次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>俄罗斯方块</title>

<style type="text/css">

 .c{margin:1px; width:19px; height:19px; background:red; position:absolute;}

 .d{margin:1px; width:19px; height:19px; background:gray; position:absolute;}

 .f{top:0px; left:0px; background:black; position:absolute;}

 .e{top:0px; background:#151515; position:absolute;}

 .g{width:100px; height:20px; color:white; position:absolute;}

</style>

<script type="text/javascript">

var row = 18;

var col = 10;

var announcement = 6;

var size = 20;

var isOver = false;

var 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(";");

var tetris;

var container;

function createElm(tag,css)

{

 var elm = document.createElement(tag);

 elm.className = css;

 document.body.appendChild(elm);

 return elm;

}

function Tetris(css,x,y,shape)

{

 // 创建4个div用来组合出各种方块

 var myCss = css&#63;css:"c";

 this.divs = [createElm("div",myCss),createElm("div",myCss),createElm("div",myCss),createElm("div",myCss)];

 if(!shape)

 {

  this.divs2 = [createElm("div",myCss),createElm("div",myCss),createElm("div",myCss),createElm("div",myCss)];

  this.score = createElm("div","g");

  this.score.style.top = 10*size+"px";

  this.score.style.left = (col- -1)*size+"px";

  this.score.innerHTML = "score:0";

 }

 this.container = null;

 this.refresh = function()

 {

  this.x = (typeof(x)!='undefined')&#63;x:3;

  this.y = (typeof(y)!='undefined')&#63;y:0;

  // 如果有传参,优先使用参数的,如果有预告,优先使用预告,都没有就自己生成

  if(shape)

   this.shape = shape;

  else if(this.shape2)

   this.shape = this.shape2;

  else

   this.shape = shape&#63;shape:shapes[Math.floor((Math.random()*shapes.length-0.000000001))].split(",");

  this.shape2 = shapes[Math.floor((Math.random()*shapes.length-0.000000001))].split(",");

  if(this.container && !this.container.check(this.x,this.y,this.shape))

  {

   isOver = true;

   alert("游戏结束");

  }

  else

  {

   this.show();

   this.showScore();

   this.showAnnouncement();

  }

 }

 // 显示方块

 this.show = function()

 {

  for(var i in this.divs)

  {

   this.divs[i].style.top = (this.shape[i*2+1]- -this.y)*size+"px";

   this.divs[i].style.left = (this.shape[i*2]- -this.x)*size+"px";

  }

 }

 // 显示预告

 this.showAnnouncement = function()

 {

  for(var i in this.divs2)

  {

   this.divs2[i].style.top = (this.shape2[i*2+1]- -1)*size+"px";

   this.divs2[i].style.left = (this.shape2[i*2]- -1- -col)*size+"px";

  }

 }

 // 显示分数

 this.showScore = function()

 {

  if(this.container && this.score)

  {

   this.score.innerHTML = "score:" + this.container.score;

  }

 }

 // 水平移动方块的位置

 this.hMove = function(step)

 {

  if(this.container.check(this.x- -step,this.y,this.shape))

  {

   this.x += step;

   this.show();

  }

 }

 // 垂直移动方块位置

 this.vMove = function(step)

 {

  if(this.container.check(this.x,this.y- -step,this.shape))

  {

   this.y += step;

   this.show();

  }

  else

  {

   this.container.fixShape(this.x,this.y,this.shape);

   this.container.findFull();

   this.refresh();

  }

 }

 // 旋转方块

 this.rotate = function()

 {

  var newShape = [this.shape[1],3-this.shape[0],this.shape[3],3-this.shape[2],this.shape[5],3-this.shape[4],this.shape[7],3-this.shape[6]];

  if(this.container.check(this.x,this.y,newShape))

  {

   this.shape = newShape;

   this.show();

  }

 }

 this.refresh();

}

function Container()

{

 this.init = function()

 {

  // 绘制方块所在区域

  var bgDiv = createElm("div","f");

  bgDiv.style.width = size*col+"px";

  bgDiv.style.height = size*row+"px";

  // 绘制预告所在区域

  var bgDiv = createElm("div","e");

  bgDiv.style.left = size*col+"px";

  bgDiv.style.width = size*announcement+"px";

  bgDiv.style.height = size*row+"px";

  // 清空积分

  this.score = 0;

 }

 this.check = function(x,y,shape)

 {

  // 检查边界越界

  var flag = false;

  var leftmost=col;

  var rightmost=0;

  var undermost=0;

  for(var i=0;i<8;i+=2)

  {

   // 记录最左边水平坐标

   if(shape[i]<leftmost)

    leftmost = shape[i];

   // 记录最右边水平坐标

   if(shape[i]>rightmost)

    rightmost = shape[i];

   // 记录最下边垂直坐标

   if(shape[i+1]>undermost)

    undermost = shape[i+1];

   // 判断是否碰撞

   if(this[(shape[i+1]- -y)*100- -(shape[i]- -x)])

    flag = true;

  }

  // 判断是否到达极限高度

  for(var m=0;m<3;m++)

   for(var n=0;n<col;n++)

    if(this[m*100+n])

     flag = true;

  if((rightmost- -x+1)>col || (leftmost- -x)<0 || (undermost- -y+1)>row || flag)

   return false;

  return true;

 }

 // 用灰色方块替换红色方块,并在容器中记录灰色方块的位置

 this.fixShape = function(x,y,shape)

 {

  var t = new Tetris("d",x,y,shape);

  for(var i=0;i<8;i+=2)

   this[(shape[i+1]- -y)*100- -(shape[i]- -x)] = t.divs[i/2];

 }

 // 遍历整个容器,判断是否可以消除

 this.findFull = function()

 {

  var s = 0;

  for(var m=0;m<row;m++)

  {

   var count = 0;

   for(var n=0;n<col;n++)

    if(this[m*100+n])

     count++;

   if(count==col)

   {

    s++;

    this.removeLine(m);

   }

  }

  this.score -= -this.calScore(s);

 }

 this.calScore = function(s)

 {

  if(s!=0)

   return s- -this.calScore(s-1)

  else

   return 0;

 }

 // 消除指定一行方块

 this.removeLine = function(row)

 {

  // 移除一行方块

  for(var n=0;n<col;n++)

   document.body.removeChild(this[row*100+n]);

  // 把所消除行上面所有的方块下移一行

  for(var i=row;i>0;i--)

  {

   for(var j=0;j<col;j++)

   {

    this[i*100- -j] = this[(i-1)*100- -j]

    if(this[i*100- -j])

     this[i*100- -j].style.top = i*size + "px";

   }

  }

 }

}

function init()

{

 container = new Container();

 container.init();

 tetris = new Tetris();

 tetris.container = container;

 document.onkeydown = function(e)

 {

  if(isOver) return;

  var e = window.event&#63;window.event:e;

  switch(e.keyCode)

  {

   case 38: //up

    tetris.rotate();

    break;

   case 40: //down

    tetris.vMove(1);

    break;

   case 37: //left

    tetris.hMove(-1);

    break;

   case 39: //right

    tetris.hMove(1);

    break;

  }

 }

 setInterval("if(!isOver) tetris.vMove(1)",500);

}

</script>

</head>

<body onload="init()">

</body>

</html>

ログイン後にコピー

さらに JavaScript 関連のコンテンツに興味のある読者は、このサイトの特別トピックをチェックしてください: 「JavaScript 検索アルゴリズム技術の概要」、「JavaScript アニメーションの特殊効果と技術の概要」 "、"JavaScript エラーとデバッグ手法の概要"、"JavaScript データ構造とアルゴリズム手法の概要"、"JavaScript トラバーサル アルゴリズムと手法の概要」と「JavaScript 数学の操作方法の概要

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート