Block breaker: мини-игра с помощью HTML5

Новые технологии не стоят на месте. с каждым днем можно встретить новые, креативные подходы к выполнению той или иной задачи. Если вы еще с времен прошлого века, то наверняка помните удивительную игру которая покорила сердца миллионов, а именно block breaker, главной целью которой было сбить блоки специальным шариком, который отскакивал от стенок тем самым менял траекторию полета. Вариантов данной игры достаточно много, но еще не было варианта данной казуалки созданной с помощью html5.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

В данном уроке мы рассмотрим как создать мини-игру Block breaker при помощи html5. При помощи данной игры мы продемонстрируем возможности js и не только. И так, приступим.

Шаг 1. HTML

Для начала мы рассмотрим разметку, в которой мы подключим все необходимые скрипты и создадим контейнер с данной игрой, при этом мы зададим относительные параметры окна:

<head>

<title>Block breaker: мини-игра с помощью HTML5 | Демонстрация для сайта RUDEBOX</title>

</head>

<body>

</div>

</body>

</html>

Как вы заметили в разметке ничего сложного нет, далее мы рассмотрим стили.

Шаг 2. CSS

В них мы зададим позиционирование контейнера, да некоторые параметры для преображения вида демонстрации.

margin:0;

padding:0;

}

body {

background-color:#eee;

color:#fff;

font:14px/1.3 Arial,sans-serif;

}

header {

background-color:#212121;

box-shadow: 0 -1px 2px #111111;

display:block;

height:70px;

position:relative;

width:100%;

z-index:100;

}

header h2{

font-size:22px;

font-weight:normal;

left:50%;

margin-left:-400px;

padding:22px 0;

position:absolute;

width:540px;

}

header a.stuts,a.stuts:visited{

border:none;

text-decoration:none;

color:#fcfcfc;

font-size:14px;

left:50%;

line-height:31px;

margin:23px 0 0 110px;

position:absolute;

top:0;

}

header .stuts span {

font-size:22px;

font-weight:bold;

margin-left:5px;

}

.container {

margin: 20px auto;

overflow: hidden;

position: relative;

width: 800px;

}

Шаг 3. JavaScript

Завершающим этапом будут скрипты, в которых мы будем создать отсчет времени с помощью параметра iSec, так же зададим подписи о счете и лучшем результате с помощью ctx.fillText, зададим цветовую гамму для полосок, скорость анимации шарика и манипуляций мышью.

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

// inner variables

var canvas, ctx;

var iStart = 0;

var bRightBut = false;

var bLeftBut = false;

var oBall, oPadd, oBricks;

var aSounds = [];

var iPoints = 0;

var iGameTimer;

var iElapsed = iMin = iSec = 0;

var sLastTime, sLastPoints;

// objects :

function Ball(x, y, dx, dy, r) {

this.x = x;

this.y = y;

this.dx = dx;

this.dy = dy;

this.r = r;

}

function Padd(x, w, h, img) {

this.x = x;

this.w = w;

this.h = h;

this.img = img;

}

function Bricks(w, h, r, c, p) {

this.w = w;

this.h = h;

this.r = r; // rows

this.c = c; // cols

this.p = p; // padd

this.objs;

this.colors = ['#9d9d9d', '#f80207', '#feff01', '#0072ff', '#fc01fc', '#03fe03']; // colors for rows

}

// -------------------------------------------------------------

// draw functions :

function clear() { // clear canvas function

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

// fill background

ctx.fillStyle = '#111';

ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

}

function drawScene() { // main drawScene function

clear(); // clear canvas

// draw Ball (circle)

ctx.fillStyle = '#f66';

ctx.beginPath();

ctx.arc(oBall.x, oBall.y, oBall.r, 0, Math.PI * 2, true);

ctx.closePath();

ctx.fill();

if (bRightBut)

oPadd.x += 5;

else if (bLeftBut)

oPadd.x -= 5;

// draw Padd (rectangle)

ctx.drawImage(oPadd.img, oPadd.x, ctx.canvas.height - oPadd.h);

// draw bricks (from array of its objects)

for (i=0; i < oBricks.r; i++) {

ctx.fillStyle = oBricks.colors[i];

for (j=0; j < oBricks.c; j++) {

if (oBricks.objs[i][j] == 1) {

ctx.beginPath();

ctx.rect((j * (oBricks.w + oBricks.p)) + oBricks.p, (i * (oBricks.h + oBricks.p)) + oBricks.p, oBricks.w, oBricks.h);

ctx.closePath();

ctx.fill();

}

// collision detection

iRowH = oBricks.h + oBricks.p;

iRow = Math.floor(oBall.y / iRowH);

iCol = Math.floor(oBall.x / (oBricks.w + oBricks.p));

// mark brick as broken (empty) and reverse brick

if (oBall.y < oBricks.r * iRowH && iRow >= 0 && iCol >= 0 && oBricks.objs[iRow][iCol] == 1) {

oBricks.objs[iRow][iCol] = 0;

oBall.dy = -oBall.dy;

iPoints++;

aSounds[0].play(); // play sound

}

// reverse X position of ball

if (oBall.x + oBall.dx + oBall.r > ctx.canvas.width || oBall.x + oBall.dx - oBall.r < 0) {

oBall.dx = -oBall.dx;

}

if (oBall.y + oBall.dy - oBall.r < 0) {

oBall.dy = -oBall.dy;

} else if (oBall.y + oBall.dy + oBall.r > ctx.canvas.height - oPadd.h) {

if (oBall.x > oPadd.x && oBall.x < oPadd.x + oPadd.w) {

oBall.dx = 10 * ((oBall.x-(oPadd.x+oPadd.w/2))/oPadd.w);

oBall.dy = -oBall.dy;

aSounds[2].play(); // play sound

}

else if (oBall.y + oBall.dy + oBall.r > ctx.canvas.height) {

clearInterval(iStart);

clearInterval(iGameTimer);

// HTML5 Local storage - save values

localStorage.setItem('last-time', iMin + ':' + iSec);

localStorage.setItem('last-points', iPoints);

aSounds[1].play(); // play sound

}

oBall.x += oBall.dx;

oBall.y += oBall.dy;

ctx.font = '16px Verdana';

ctx.fillStyle = '#fff';

iMin = Math.floor(iElapsed / 60);

iSec = iElapsed % 60;

if (iMin < 10) iMin = "0" + iMin;

if (iSec < 10) iSec = "0" + iSec;

ctx.fillText('Time: ' + iMin + ':' + iSec, 600, 520);

ctx.fillText('Points: ' + iPoints, 600, 550);

if (sLastTime != null && sLastPoints != null) {

ctx.fillText('Last Time: ' + sLastTime, 600, 460);

ctx.fillText('Last Points: ' + sLastPoints, 600, 490);

}

// initialization

$(function(){

canvas = document.getElementById('scene');

ctx = canvas.getContext('2d');

var width = canvas.width;

var height = canvas.height;

var padImg = new Image();

padImg.src = 'images/padd.png';

padImg.onload = function() {};

oBall = new Ball(width / 2, 550, 0.5, -5, 10); // new ball object

oPadd = new Padd(width / 2, 120, 20, padImg); // new padd object

oBricks = new Bricks((width / <img src="http://www.script-tutorials.com/wp-includes/images/smilies/icon_cool.gif" alt="8)"> - 1, 20, 6, 8, 2); // new bricks object