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

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

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

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

Шаг 1. HTML

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

<html lang="en" >
 <head>
 <meta charset="utf-8" />
 <title>Block breaker: мини-игра с помощью HTML5 | Демонстрация для сайта RUDEBOX</title>
 <link href="css/main.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery-1.5.2.min.js"></script>
 <script src="js/script.js"></script>
 </head>
 <body>
 <div class="container">
 <canvas id="scene" width="800" height="600"></canvas>
 </div>
 </body>
</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;
}

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, зададим цветовую гамму для полосок, скорость анимации шарика и манипуляций мышью.

// 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

    oBricks.objs = new Array(oBricks.r); // fill-in bricks
    for (i=0; i < oBricks.r; i++) {
        oBricks.objs[i] = new Array(oBricks.c);
        for (j=0; j < oBricks.c; j++) {
            oBricks.objs[i][j] = 1;
        }
    }

    aSounds[0] = new Audio('media/snd1.wav');
    aSounds[0].volume = 0.9;
    aSounds[1] = new Audio('media/snd2.wav');
    aSounds[1].volume = 0.9;
    aSounds[2] = new Audio('media/snd3.wav');
    aSounds[2].volume = 0.9;

    iStart = setInterval(drawScene, 10); // loop drawScene
    iGameTimer = setInterval(countTimer, 1000); // inner game timer

    // HTML5 Local storage - get values
    sLastTime = localStorage.getItem('last-time');
    sLastPoints = localStorage.getItem('last-points');

    $(window).keydown(function(event){ // keyboard-down alerts
        switch (event.keyCode) {
            case 37: // 'Left' key
                bLeftBut = true;
                break;
            case 39: // 'Right' key
                bRightBut = true;
                break;
        }
    });
    $(window).keyup(function(event){ // keyboard-up alerts
        switch (event.keyCode) {
            case 37: // 'Left' key
                bLeftBut = false;
                break;
            case 39: // 'Right' key
                bRightBut = false;
                break;
        }
    });

    var iCanvX1 = $(canvas).offset().left;
    var iCanvX2 = iCanvX1 + width;
    $('#scene').mousemove(function(e) { // binding mousemove event
        if (e.pageX > iCanvX1 && e.pageX < iCanvX2) {
            oPadd.x = Math.max(e.pageX - iCanvX1 - (oPadd.w/2), 0);
            oPadd.x = Math.min(ctx.canvas.width - oPadd.w, oPadd.x);
        }
    });
});

function countTimer() {
    iElapsed++;
}

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

oBricks.objs = new Array(oBricks.r); // fill-in bricks

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

oBricks.objs[i] = new Array(oBricks.c);

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

oBricks.objs[i][j] = 1;

}

aSounds[0] = new Audio('media/snd1.wav');

aSounds[0].volume = 0.9;

aSounds[1] = new Audio('media/snd2.wav');

aSounds[1].volume = 0.9;

aSounds[2] = new Audio('media/snd3.wav');

aSounds[2].volume = 0.9;

iStart = setInterval(drawScene, 10); // loop drawScene

iGameTimer = setInterval(countTimer, 1000); // inner game timer

// HTML5 Local storage - get values

sLastTime = localStorage.getItem('last-time');

sLastPoints = localStorage.getItem('last-points');

$(window).keydown(function(event){ // keyboard-down alerts

switch (event.keyCode) {

case 37: // 'Left' key

bLeftBut = true;

break;

case 39: // 'Right' key

bRightBut = true;

break;

}

});

$(window).keyup(function(event){ // keyboard-up alerts

switch (event.keyCode) {

case 37: // 'Left' key

bLeftBut = false;

break;

case 39: // 'Right' key

bRightBut = false;

break;

}

});

var iCanvX1 = $(canvas).offset().left;

var iCanvX2 = iCanvX1 + width;

$('#scene').mousemove(function(e) { // binding mousemove event

if (e.pageX > iCanvX1 && e.pageX < iCanvX2) {

oPadd.x = Math.max(e.pageX - iCanvX1 - (oPadd.w/2), 0);

oPadd.x = Math.min(ctx.canvas.width - oPadd.w, oPadd.x);

}

});

function countTimer() {

iElapsed++;

}

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

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

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JavaScript

Вот и все. Готово!

Читайте также:

Интересно:

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи

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

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JavaScript

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи