> 웹 프론트엔드 > JS 튜토리얼 > JS 미니게임 Speed ​​Run_javascript 스킬의 소스코드에 대한 자세한 설명

JS 미니게임 Speed ​​Run_javascript 스킬의 소스코드에 대한 자세한 설명

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2016-05-16 16:35:40
원래의
1622명이 탐색했습니다.

이 글의 예시는 JS 미니게임의 빠른 실행 소스 코드를 설명하고 참고용으로 모든 사람에게 공유됩니다. 세부 내용은 다음과 같습니다.

게임이 실행되면 아래와 같습니다.

코드의 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

/** 极速快跑

* Author: fdipzone

* Date: 2012-07-15

* Ver: 1.0

*/

 

var gameimg = ['images/start.png', 'images/start_over.png', 'images/go.png', 'images/go_over.png', 'images/running.gif', 'images/run_start1.gif', 'images/run_start2.gif', 'images/run_start3.gif'];

var speed_obj = new SpeedClass();

 

window.onload = function(){

 var callback = function(){

 speed_obj.init();

 }

 img_preload(gameimg, callback);

}

 

// Speed Class

function SpeedClass(){

 this.levelset = [8,5,8,12]; // 难度参数

 this.playerlist = null; // 选手列表

 this.player = 0;  // 选中的选手

 this.level = 2;  // 难度

 this.lock = 0;  // 锁定

 this.isstart = 0;  // 是否开始

 this.isover = 0;  // 是否结束

}

 

// init

SpeedClass.prototype.init = function(){

 this.reset();

 this.create_player();

 this.create_event();

}

 

// reset

SpeedClass.prototype.reset = function(){

 this.player = 0;

 this.level = $('level').value; // level

 this.playerlist = $_tag('li', 'playerlist');

 for(var i=0; i<this.playerlist.length; i++){

 this.playerlist[i].className = '';

 }

 disp('start_btn', 'show', 'start_btn');

 disp('go_btn', 'hide', 'go_btn');

 this.lock = 0; // unlock

 this.isstart = 0; // unstart

 this.isover = 0; // unover

}

 

// create player

SpeedClass.prototype.create_player = function(){

 var runway = [];

 var playerlist = [];

 for(var i=1; i<=8; i++){

 runway[i] = '<li><div id="player' + (9-i) + '" class="run_status1"></div></li>';

 playerlist[i] = '<li>' + i + '</li>';

 }

 $('runway').innerHTML = runway.join('');

 $('playerlist').innerHTML = playerlist.join('');

 runway = null;

 playerlist = null;

}

 

// create event

SpeedClass.prototype.create_event = function(){

 var self = this;

 this.playerlist = $_tag('li', 'playerlist');

 for(var i=0; i<this.playerlist.length; i++){

 this.playerlist[i].onmouseover = function(){

  if(this.className!='on'){

  this.className = 'over';

  }

 }

 this.playerlist[i].onmouseout = function(){

  if(this.className!='on'){

  this.className = '';

  }

 }

 this.playerlist[i].onclick = function(o,c){

  return function(){

  if(self.lock==0){

   o.playerlist[c].className = 'on';

   if(o.player!=0 && o.player!=c+1){ // 不等於0且不等於自己

   o.playerlist[o.player-1].className = '';

   }

   o.player = c + 1;

  }

  }

 }(self, i);

 }

 

 $('start_btn').onmouseover = function(){

 this.className = 'start_over_btn';

 }

 $('start_btn').onmouseout = function(){

 this.className = 'start_btn';

 }

 $('start_btn').onclick = function(){

 if(self.player==0){

  return alert('请选择要支持的选手');

 }else{

  self.lock = 1; // locked

  disp('start_btn','hide');

  disp('go_btn','show');

  for(var i=1; i<=8; i++){

  self.start(i);

  }

 }

 }

 

 $('go_btn').onmouseover = function(){

 this.className = 'go_over_btn';

 }

 $('go_btn').onmouseout = function(){

 this.className = 'go_btn';

 }

 $('go_btn').onclick = function(){

 self.go();

 }

}

 

// start game

SpeedClass.prototype.start = function(c){

 var o = $('player' + c);

 var step = 1;

 var self = this;

 var exert = 0;

 

 o.style.marginLeft = '62px'; // init

  

 var et = setInterval(function(){

 if(step<4){ // step 1-3 is ready

  o.className = 'run_status' + step;

 }else{

  // run

  if(o.className!='running'){

  o.className = 'running';

  }

  // start can go

  if(self.isstart==0){

  self.isstart = 1;

  }

  // 已有一名选手到达终点

  if(self.isover==1){

  clearInterval(et);

  }else{

  if(self.player!=c){ // 其他选手

   exert = Math.floor(Math.random()* self.levelset[self.level])+3; // 根据level调整

  }

  o.style.marginLeft = parseInt(o.style.marginLeft) + Math.floor(Math.random()*8)+4 + exert + 'px';

  // 到达终点

  if(parseInt(o.style.marginLeft)>=745){

   clearInterval(et);

   self.isover = 1;

   self.gameover(o.id);

  }

  }

 }

 step ++;

 }, 350)

}

 

// go

SpeedClass.prototype.go = function(){

 if(this.isstart==1 && this.isover==0){

 var o = $('player' + this.player);

 var exert = Math.floor(Math.random()*3)+2; // 2-5

 o.style.marginLeft = parseInt(o.style.marginLeft) + exert + 'px';

 }

 return false;

}

 

// gameover

SpeedClass.prototype.gameover = function(id){

 id = id.replace('player','');

 var self = this;

 var msg = '';

 if(id==this.player){

 msg = "恭喜你,你支持的选手获得胜利\n\n";

 }else{

 msg = "很遗憾,你支持的选手没有获得胜利,获胜的是" + id + "号选

\n";

 }

 if(confirm(msg + '是否重新开始&#63;')==true){

 setTimeout(function(){

  self.init();

 },1000);

 }else{

 return false;

 }

}

 

/** common function */

 

// get document.getElementBy(id)

function $(id){

 this.id = id;

 return document.getElementById(id);

}

 

// get document.getElementsByTagName

function $_tag(name, id){

 if(typeof(id)!='undefined'){

 return $(id).getElementsByTagName(name);

 }else{

 return document.getElementsByTagName(name);

 }

}

 

/* div show and hide

* @param id dom id

* @param handle show or hide

* @param classname

*/

function disp(id, handle, classname){

 if(handle=='show'){

 $(id).style.display = 'block';

 }else{

 $(id).style.display = 'none';

 }

 if(typeof(classname)!='undefined'){

 $(id).className = classname;

 }

}

 

/* img preload

* @param img 要加载的图片数组

* @param callback 图片加载成功后回调方法

*/

function img_preload(img, callback){

 var onload_img = 0;

 var tmp_img = [];

 for(var i=0,imgnum=img.length; i<imgnum; i++){

 tmp_img[i] = new Image();

 tmp_img[i].src = img[i];

 if(tmp_img[i].complete){

  onload_img ++;

 }else{

  tmp_img[i].onload = function(){

  onload_img ++;

  }

 }

 }

 var et = setInterval(

 function(){

  if(onload_img==img.length){ // 定时器,判断图片完全加载后调用callback

  clearInterval(et);

  callback();

  }

 },200);

}

로그인 후 복사

전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.

저는 이 기사에 설명된 내용이 모든 사람의 JavaScript 게임 디자인에 대한 특정 참고 가치를 가지고 있다고 믿습니다.

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿