Category Archives: jquery

「HTML5開発」画像処理、衝突検出処理、音の追加処理サンプルコードまとめ

1.画像を利用する場合

player.sprite = Sprite(“player”);
player.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
};
function Enemy(I) {


I.sprite = Sprite(“enemy”);
I.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
};

}
2.衝突検出処理
function collides(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;

}

function handleCollisions() {
playerBullets.forEach(function(bullet) {
enemies.forEach(function(enemy) {
if (collides(bullet, enemy)) {
enemy.explode();
bullet.active = false;
}
});
});
enemies.forEach(function(enemy) {

if (collides(enemy, player)) {

enemy.explode();

player.explode();

}

});

}
function update() {

handleCollisions();

}

function Enemy(I) {


I.explode = function() {

this.active = false;

// Extra Credit: Add an explosion graphic

};
return I;

};

player.explode = function() {

this.active = false;

// Extra Credit: Add an explosion graphic and then end the game

};

3.音処理の追加
function Enemy(I) {

I.explode = function() {
this.active = false;
// Extra Credit: Add an explosion graphic
};
return I;
};

player.explode = function() {
this.active = false;
// Extra Credit: Add an explosion graphic and then end the game
};

「HTML5開発」爆弾を構成、追加、攻撃する処理方法

1.爆弾を構成:
var playerBullets = [];
function Bullet(I) {
I.active = true;
I.xVelocity = 0;
I.yVelocity = -I.speed;
I.width = 3;
I.height = 3;
I.color = “#000”;
I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
};
I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
};
I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity;
I.active = I.active && I.inBounds();
};
return I;
}
2.爆弾を追加
player.shoot = function() {
var bulletPosition = this.midpoint();
playerBullets.push(Bullet({
speed: 5,
x: bulletPosition.x,
y: bulletPosition.y
}));

};

player.midpoint = function() {
return {
x: this.x + this.width/2,
y: this.y + this.height/2
};
};
3.攻撃を実現するためにupdateとdrawメソッドを修正
function update() {

playerBullets.forEach(function(bullet) {
bullet.update();
});
playerBullets = playerBullets.filter(function(bullet) {
return bullet.active;
});
}
function draw() {

playerBullets.forEach(function(bullet) {
bullet.draw();
});
}

4.敵側の処理
enemies = [];
function Enemy(I) {
I = I || {};
I.active = true;
I.age = Math.floor(Math.random() * 128);
I.color = “#A2B”;
I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
I.y = 0;
I.xVelocity = 0
I.yVelocity = 2;
I.width = 32;
I.height = 32;
I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
};
I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
};
I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity;
I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);
I.age++;
I.active = I.active && I.inBounds();
};
return I;

};

function update() {

enemies.forEach(function(enemy) {
enemy.update();
});
enemies = enemies.filter(function(enemy) {
return enemy.active;
});
if(Math.random() < 0.1) {
enemies.push(Enemy());
}
};
function draw() {

enemies.forEach(function(enemy) {
enemy.draw();
});
}

「HTML5開発」playerを作成、キーボードをコントロールする

処理コード:
1.playerを作成
var player = {
color: “#00A”,
x: 220,
y: 270,
width: 32,
height: 32,
draw: function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
}
};
2.keyboardをコントロールする

function update() {
if (keydown.left) {
player.x -= 5;
}
if (keydown.right) {

player.x += 5;

}

player.x = player.x.clamp(0, CANVAS_WIDTH – player.width);

}

「HTML5開発」ゲームループをコントロールする

処理コード:
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);

var textX = 50;

var textY = 50;

function update() {

textX += 1;

textY += 1;

}

function draw() {

canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

canvas.fillStyle = “#000”;

canvas.fillText(“東京!”, textX, textY);

}

HTML5ゲーム開発—キャンバス(CANVAS)を作成

コード:

var CANVAS_WIDTH = 470;
var CANVAS_HEIGHT = 310;
var canvasElement = $(“<canvas width='” + CANVAS_WIDTH +

“‘ height='” + CANVAS_HEIGHT + “‘></canvas>”);
var canvas = canvasElement.get(0).getContext(“2d”);
canvasElement.appendTo(‘body’);

「jQuery入門」要素の属性を設定する方法

①属性の現在値を取得する
$(‘#cft’).attr(‘width’);

②既存の属性を削除する
// width属性を削除
$(‘#cft’).removeAttr(‘width’);

// 属性を削除
$(‘#cft’).removeAttr(‘width height’);

「jQuery入門」$(document).tooltip()でhtmlのコンテンツをajaxで取得する

サンプル:
$(function(){
$(document).tooltip({
items : “[class]”,
content : “xxxxxx”,
open : function(){
testFun($(this));
}
});
});

function testFun($target){
var result = “”;
$.post(
“getInfo.php”,
{
//some code
},
function(gg, dt){
$target.tooltip(“option”, “content”, gg);
},
“html”
);
return result;
}

「jQuery入門」eq()で複数の要素を取得するサンプル

①htmlコード
<ul><li>dataAA</li>
<li>dataBB</li>
<li>dataCC</li>
</ul>
②JSコード
$(function() {
var len = $(‘li’).length;
for (var i=0; i<len; i++) {
var cc = $(‘li’).eq(i).text();
console.log(cc);
}
});

「jQuery入門」選択されているセレクトボックス項目の削除、追加方法

1.htmlコード
<select id=”cftLst”>
<option value=”data1″>テストデータAA</option>
<option value=”data2″>テストデータBB</option>
<option value=”data3″>テストデータCC</option>
</select>

<button id=”cftBtn”>選択</button>

2.選択されている項目の削除
$(document).ready(function(){
$(“#cftBtn”).click( function(){
$(‘#cftLst > option:selected’).remove();
});
});

3.項目の追加
$(document).ready(function(){
$(“#cftBtn”).click( function(){
$(‘#cftLst’).append($(‘<option>’).html(“テストデータ4”).val(“testDD”));
});
});

「jQuery入門」ツールチップを実装するサンプル

サンプルコード
$(function(){
$(document).tooltip({
items : “[class]”,
content : “<div class=\”tooltip-content\”>test data</div>”
});
});