|
Сообщение от SpiriKoN
|
|
Не знаю как написать движок арканоида.
|
подружись с гуглом и начни с
малого
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 8px;
cursor: none !important;
}
#field {
width: 322px;
height: 270px;
padding-top: 30px;
border: 1px solid #ccc;
font-size: 0;
position: relative;
}
.brick,
.removed {
width: 28px;
height: 10px;
margin: 1px;
display: inline-block;
border: 1px solid;
}
.brick {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdd), color-stop(100%, #777));
background: -webkit-linear-gradient(top, #cdd 0%, #777 100%);
background: linear-gradient(to bottom, #cdd 0%, #777 100%);
border-color: #777 #777 #000 #000;
border-radius: 3px;
}
.brick:nth-child(2n) {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #777));
background: -webkit-linear-gradient(top, #ccc 0%, #777 100%);
background: linear-gradient(to bottom, #ccc 0%, #777 100%);
}
.brick:nth-child(5n) {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #008));
background: -webkit-linear-gradient(top, #ccc 0%, #008 100%);
background: linear-gradient(to bottom, #ccc 0%, #008 100%);
}
.brick:nth-child(3n) {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #080));
background: -webkit-linear-gradient(top, #ccc 0%, #080 100%);
background: linear-gradient(to bottom, #ccc 0%, #080 100%);
}
.brick:nth-child(7n) {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #808));
background: -webkit-linear-gradient(top, #ccc 0%, #808 100%);
background: linear-gradient(to bottom, #ccc 0%, #808 100%);
}
.brick:nth-child(11n) {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #880));
background: -webkit-linear-gradient(top, #ccc 0%, #880 100%);
background: linear-gradient(to bottom, #ccc 0%, #880 100%);
}
.removed {
border-color: transparent;
}
#paddle {
width: 62px;
height: 5px;
border: 1px solid #777;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdd), color-stop(100%, #777));
background: -webkit-linear-gradient(top, #cdd 0%, #777 100%);
background: linear-gradient(to bottom, #cdd 0%, #777 100%);
position: absolute;
left: 128px;
top: 270px;
border-radius: 3px;
}
#ball {
width: 10px;
height: 10px;
border: 1px solid #955;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdd), color-stop(100%, #500));
background: -webkit-linear-gradient(top, #fdd 0%, #500 100%);
background: linear-gradient(to bottom, #fdd 0%, #500 100%);
border-radius: 50%;
position: absolute;
}
#lifesNode,
#scoreNode {
position: absolute;
right: -85px;
font: 14px arial, helvetica, sans-serif;
border: 1px solid #ccc;
border-radius: 4px;
padding: 1px 0;
width: 75px;
text-align: center;
}
#lifesNode {
top: 20px;
}
#lifesNode:before {
content: 'lifes: ';
}
#scoreNode {
top: 50px;
}
#scoreNode:before {
content: 'score: ';
}
</style>
<div id="field">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div id="paddle"></div>
<div id="ball" style="left: 154px; top: 258px;"></div>
<div id="lifesNode">3</div>
<div id="scoreNode">0</div>
</div>
<script>
(function (fld, pF, px, dx, dy, lifes, score) {
var cycle = setInterval(function () {
var bx = pF(ball.style.left = pF(ball.style.left) + dx + 'px') | 0,
by = pF(ball.style.top = pF(ball.style.top) + dy + 'px') | 0,
row = ((by - 30) / 14) | 0, col = (bx / 32) | 0;
if (bx < 0 && dx < 0 || bx >= 314 && dx > 0) dx *= -1;
if (bx + 6 >= px && bx <= px + 58 && by >= 259 && by <= 264) {
dy *= -1;
if (bx <= px + 15) dx = -6;
else if (bx >= px + 37) dx = 6;
else if (Math.abs(dx) === 6) dx = (dx * 2 / 3) | 0;
}
if (by < 0) dy *= -1;
if (by >= 288 && !--lifes) clearInterval(cycle), alert('Game over!');
if (by >= 288 && lifes) dy *= -1, lifesNode.innerHTML = lifes;
if (by >= 18 && by <= 100 && fld[row * 10 + col].className != 'removed') {
dy *= -1, fld[row * 10 + col].className = 'removed';
if (dx < 0 && (bx % 32 < 10 || bx % 32 > 22)) dx *= -1;
if (dx > 0 && ((bx + 12) % 32 < 10 || (bx + 12) % 32 > 22)) dx *= -1;
scoreNode.innerHTML = ++score;
if (score == 50) clearInterval(cycle), alert('Victory!');
}
}, 1000 / 60);
document.addEventListener('mousemove', function (e) {
px = (e.pageX > 40) ? ((e.pageX < 290) ? e.pageX - 40 : 256) : 0;
paddle.style.left = px + 'px';
}, false);
}(field.children, parseFloat, 129, -4, -4, 3, 0));
</script>
PS: за час прошёл, прикол этой игры в том, что шарику бывает пох на твою ракетку и кирпичи
