بخش مقالات آکادمی | Articles
آخرین آموزش ها

بازی سازی با HTML – بخش هشتم :

در قسمت های قبل از سری مقالات بازی سازی با HTML شما با یکسری از توابع و عملکرد ها آشنا شدید و تا الان شاید تونسته باشید یک بازی در محیط وب ایجاد کنید. در قسمت هفتم باهم نحوه قرار دادن یک تصویر در بازی رو باهم مرور کردیم. در بازی سازی با HTML – بخش هشتم به محیط بازی خودمون صدا اضافه کنیم تا بازی جذاب تر بشه. پس مارو تا پایان مقاله همراهی کنین.

نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

افزودن صدا:

با استفاده از عنصر <audio> در HTML5 میتونیم در محیط بازی صدا و موزیک اضافه کنیم. برای اسنفاده از اشیاء صدا ما یک سازنده جدید ایجاد میکنیم:

function sound(src) {
 this.sound = document.createElement(“audio”);
  this.sound.src = src;
  this.sound.setAttribute(“preload”,”auto”);
  this.sound.setAttribute(“controls”,”none”);
  this.sound.style.display =”none”;
  document.body.appendChild(this.sound);
  this.play = function(){
  this.sound.play();
}
  this.stop = function(){
     this.sound.pause();
   }
}

ما یک شیئ صدای جدید با استفاده از سازنده صدا ایجاد میکنیم تا وقتی مربع قرمزمون با مانع برخورد کرد،صدای اون پخش بشه.

var myGamePiece;
var myObstacles = [];
var mySound;

function startGame() {
    myGamePiece = new component(30,30, “red”, 10, 120);
    mySound = newsound(“bounce.mp3”);
    myGameArea.start();

}
function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if(myGamePiece.crashWith(myObstacles[i])) {
            mySound.play();
            myGameArea.stop();

            return;
        }
    }

}

موسیقی پس زمینه:

برای افزودن یک موسیقی پس زمینه به بازیمون، یک شیئ صدای جدید اضافه میکنیم تا هروقت بازی شروع شد اون هم پخش بشه.

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload=”startGame()”>
<script>
var myGamePiece;
var myObstacles = [];
var mySound;
var myMusic;
function startGame() {
myGamePiece = new component(30, 30, “red”, 10, 120);
mySound = new sound(“bounce.mp3”);
myMusic = new sound(“gametheme.mp3”);
myMusic.play();
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement(“canvas”),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext(“2d”);
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
stop : function() {
clearInterval(this.interval);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;

this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
mySound.play();
myMusic.stop();
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, “green”, x, 0));
myObstacles.push(new component(10, x – height – gap, “green”, x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x -= 1;
myObstacles[i].update();
}
myGamePiece.newPos();
myGamePiece.update();
}
function sound(src)
this.sound = document.createElement(“audio”);
this.sound.src = src;
this.sound.setAttribute(“preload”, “auto”);
this.sound.setAttribute(“controls”, “none”);
this.sound.style.display = “none”;
document.body.appendChild(this.sound);
this.play = function(){
this.sound.play();
}
this.stop = function(){
this.sound.pause();
}
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
function moveup() {
myGamePiece.speedY = -1;
}
function movedown() {
myGamePiece.speedY = 1;
}
function moveleft() {
myGamePiece.speedX = -1;
}

function moveright() {
myGamePiece.speedX = 1;
}
function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>

<div style=”text-align:center;width:480px;”>
<button onmousedown=”moveup()” onmouseup=”clearmove()” ontouchstart=”moveup()”>UP</button><br><br>
<button onmousedown=”moveleft()” onmouseup=”clearmove()” ontouchstart=”moveleft()”>LEFT</button>
<button onmousedown=”moveright()” onmouseup=”clearmove()” ontouchstart=”moveright()”>RIGHT</button><br><br>
<button onmousedown=”movedown()” onmouseup=”clearmove()” ontouchstart=”movedown()”>DOWN</button>
</div>
</body>
</html>

امیدوارم این مقاله بدردتون خورده باشه. همچنان از همراهیتون ممنونیم.

تاریخ ارسال
2 خرداد 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.