jqueryベースのgamequeryプラグインを使ってJS卓球をgame_jqueryにする

新しいものをよりよく受け入れられるように、最初に基本的な JS を学習してから、jquery を学習することをお勧めします。今日は、古典的な JS ゲーム、つまり、私が持っている卓球ゲームを作成してみます。私は同じものを作るのに xna、flash、js を使用したことが最も多かったです。まずスクリーンショットをアップロードしてください。そうしないと、それが何であるかわかりません。
デモのアドレスは次のとおりです: http://www.lovewebgames.com/demo/gamepingbang/
使用されているテクノロジーは jquery gamequery です。 jquery とは誰でも知っています。この記事では、gamequery について説明します。その公式 Web サイトは、
http://gamequery.onaluf.org/ です。 JS の小さなゲームの開発を容易にする Web サイトにアクセスして、The King of Fighters の JS バージョンを含む多くの事例を参照してください。
言語構成能力が少し低いので、これ以上は言いません。コーディングを始めましょう!

コードをコピー コードは次のとおりです:

<スクリプト>
var game=function(){
var private={};
プライベート.PLAYGROUND_WIDTH=300;
プライベート.PLAYGROUND_HEIGHT=400;
private.status=-1;
プライベート.スピード=30;
var get=function(key){
return private[key];
}
var set=function(key,val){
private[key]=val;
}
var 遊び場;
return{
init:function(){
$("#gradeinfo").remove();
playground=$("#playground").playground({height:get("PLAYGROUND_HEIGHT"),width:get("PLAYGROUND_WIDTH"),RefreshRate:get("speed") });
$('#playground').css('width', get('PLAYGROUND_WIDTH'));
$('#playground').css('height', get('PLAYGROUND_HEIGHT'));
$('#playground').css('位置', '相対');
$('#playground').css('border', '1px ソリッド #ccc');
this.initBall();
this.initPlayer();
$("#sceengraph").css("可視性","可視");
$('#player').get(0).gameQuery.score = 0;
var classObj = this;
$().playground().registerCallback(function(){
var status = get('status');
if (status > 0) {
classObj.renderBall();
}
},get("速度"));
},
initBall:function(){
$("#ball").remove();
playground.addSprite('ball', { anime:$.gameQuery.Animation( { imageURL:"./blank.gif" } ), width:10, height:10 });
$('#ball').get(0).gameQuery.velX = 4;
$('#ball').get(0).gameQuery.velY = 4;
$("#ball").css("top", get('PLAYGROUND_HEIGHT')-20)
$("#ball").css("left", (get('PLAYGROUND_WIDTH') -10)/2)
},
initPlayer:function(){
$("#player").remove();
playground.addSprite("player",{ anime:$.gameQuery.Animation( { imageURL:"./blank.gif" } ),width:50, height:8,posx:(get('PLAYGROUND_WIDTH') -50)/2,posy:get('PLAYGROUND_HEIGHT')-10});
$("#player").addClass("player");
},
renderBall:function(){
var ballPosition = $('#ball').position();
var PLAYGROUND_WIDTH = get('PLAYGROUND_WIDTH');
var PLAYGROUND_HEIGHT = get('PLAYGROUND_HEIGHT');
ballPosition.top-=$('#ball').get(0).gameQuery.velY;
ballPosition.left =$('#ball').get(0).gameQuery.velX;
$('#ball').css('top', ballPosition.top);
$('#ball').css('left', ballPosition.left);
if (ballPosition.top $('#ball').get(0).gameQuery.velY = -$('#ball').get(0).gameQuery.とても;
}
if(ballPosition.left$('#ball').get( 0).gameQuery.velX = -$('#ball').get(0).gameQuery.velX;
}
$("#ball").collision("#player").each(function(){
$('#ball').get(0).gameQuery.velY = - $('#ball').get(0).gameQuery.velY;
$('#player').get(0).gameQuery.score
});
if(ballPosition.top $('#ball').height() >= PLAYGROUND_HEIGHT){
playground.addSprite("gradeinfo",{width:100,height:80,posx:100,posy) :100});
$("#gradeinfo").html("游戏结束!
得分：" $('#player').get(0).gameQuery.score);
set('ステータス', -1);
}
},
pause:function(){
if(get('status')==0){
set('status',1);
}else{
set('ステータス',0);
}
},
keyDownHandler: function(evt) {
// console.log(evt);
var thisObj = this;
switch(evt.keyCode) {
ケース 13:
if (get('status') == -1) {
this.start();
} else {
this.pause();
}
休憩;
ケース 37:
if (! this.moveStatus) {
this.moveStatus = window.setInterval( function() { thisObj.movePlayer('#player', -4); }, 20);
}
休憩;
ケース 39:
if (! this.moveStatus) {
this.moveStatus = window.setInterval( function() { thisObj.movePlayer('#player', 4); }, 20);
}
休憩;
}
},
keyUpHandler:function(evt){
window.clearInterval(this.moveStatus);
this.moveStatus=null;
},
movePlayer:function(player, dir){
if (get('status') == 1) {
var pos = $(player).position();
var newPos = pos.left dir;
if (newPos > 0 && newPos $(player).width() < get('PLAYGROUND_WIDTH')) {
$(player).css('left', newPos);
}
}
},
start:function(){
if (get('status') == -1) {
set('status', 1) ;
$().playground().startGame(function(){
$("#welcome").remove();
});
}
}
}
}()
$(function(){
game.init();
$(document).keydown(function(evt) {
game.keyDownHandler(evt);
});
$(document).keyup(function(evt){
game.keyUpHandler(evt);
}); >});



それでは説明を始めましょう:
最初は、ゲームの div を表示するために使用される関数の定義です。ここでの定義は 300*400 です。デフォルトは 30 です。 🎜>

playground.addSprite はゲームシーンにスプライトを追加するものです。このゲームは主に小さなボールとボードです。これでゲームは半分完成しました。あとはスプライトに速度を付けて、jqueryオブジェクトのgameQuery.objを使って、renderBallを呼び出してボールを動かします。次に、ボタンの動きを監視し、最後に衝突を検出します。
ボールとボードの間の衝突、ボールと壁の間の衝突、gamequery は、次のような衝突 (フィルター) を検出するメソッドを提供します。

コードをコピー コードは次のとおりです:

$("#ball").collision("#player").each(function() {
$(' #ball').get(0).gameQuery.velY = -$('#ball').get(0).gameQuery.velY;
$('#player'). get(0).gameQuery.score ;
});

ここでの衝突後、


http:/ /gamequery.onaluf.org/api.php
ここでその API を確認できます。基本的に、サンプルを見れば理解できると思います。これは数年前に作られたものなので、明確に説明することはできませんが、興味のある方は調べてみてください。ここにもチュートリアルがあります: http://gamequery.onaluf.org/tutorials/1/