jquery 기반 gamequery 플러그인을 사용하여 JS 탁구 game_jquery 만들기

먼저 기본적인 JS를 배운 다음 jquery를 배우면 새로운 것을 더 잘 받아들일 수 있을 것입니다. 오늘은 제가 가지고 있는 고전적인 js 게임인 탁구 게임을 만들어 보겠습니다. 가장 많이 만들었습니다. 저는 xna, flash, js를 사용하여 동일한 것을 만들었습니다. 먼저 스크린샷을 업로드하세요. 그렇지 않으면 그것이 무엇인지 알 수 없습니다.
데모 주소는 http://www.lovewebgames.com/demo/gamepingbang/
사용된 기술은 jquery gamequery입니다. jquery가 무엇인지는 누구나 알고 있습니다. 이 기사는 gamequery에 초점을 맞췄습니다. Gamequery의 공식 웹사이트는
http://gamequery.onaluf.org/입니다. JS 게임 개발을 더 쉽게 만들어 보세요. The King of Fighters의 JS 버전을 포함하여 많은 사례가 있습니다.
언어 정리 능력이 좀 형편없어서 더 말하지 않겠습니다. 코딩 시작해 볼까요!

코드 복사 코드는 다음과 같습니다.

var game=function(){
var private={};
private.PLAYGROUND_WIDTH=300;
private.PLAYGROUND_HEIGHT=400;
private.status=-1;
private.speed=30;
var get=function(key){
return private[key];
}
var set=function(key,val){
private[key]=val;
}
var 놀이터;
반환{
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 solid #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', { animation:$.gameQuery.Animation( { imageURL:"./blank.gif" } ), 너비:10, 높이:10 });
$('#ball').get(0).gameQuery.velX = 4;
$('#ball').get(0).gameQuery.velY = 4;
$("#ball").css("top", get('PLAYGROUND_HEIGHT')-20)
$("#ball").css("왼쪽", (get('PLAYGROUND_WIDTH') -10)/2)
},
initPlayer:function(){
$("#player").remove();
playground.addSprite("player",{ animation:$.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('왼쪽', ballPosition.left);
if (ballPosition.top $('#ball').get(0).gameQuery.velY = -$('#ball').get(0).gameQuery. 블리;
}
if(ballPosition.left=PLAYGROUND_WIDTH){
$('#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('status',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.moveStaus) {
this.moveStaus = window.setInterval( function() { thisObj.movePlayer('#player', -4); }, 20);
}
휴식;
사례 39:
if (! this.moveStaus) {
this.moveStaus = window.setInterval( function() { thisObj.movePlayer('#player', 4); }, 20);
}
휴식;
}
},
keyUpHandler:function(evt){
window.clearInterval(this.moveStaus);
this.moveStaus=null;
},
movePlayer:function(player, dir){
if (get('status') == 1) {
var pos = $(player).position();
var newPos = pos.left dir;
if (newPos > 0 && newPos $(player).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는 게임 장면에 스프라이트를 추가하는 것입니다. 이 게임은 주로 작은 공과 보드입니다. 이렇게 하면 게임이 절반 완성됩니다. 그런 다음 Sprite에 속도를 추가하고 jquery 개체의 gameQuery.obj를 사용합니다. 여기에 작성된 내용은 $().gameQuery.velX를 호출하고 공을 이동합니다. 그런 다음 버튼을 모니터링하여 보드의 움직임을 제어하고 마지막으로 충돌을 감지합니다.
공과 보드의 충돌, 공과 벽의 충돌, gamequery는 다음과 같은 충돌(필터)을 감지하는 방법을 제공합니다.

코드 복사 코드는 다음과 같습니다.

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

여기서 충돌 후 Y축 방향이 변경됩니다.


http:/ /gamequery.onaluf.org/api.php
여기서 API를 볼 수 있습니다. 기본적으로 게임이 갖춰야 할 모든 것을 갖추고 있습니다. 예제를 보시면 이해가 되실 겁니다. 이 내용은 몇 년 전에 만들어진 내용이라 명확하게 설명할 수는 없지만 관심이 있으시면 검색해 보시기 바랍니다. 여기에 튜토리얼도 있습니다: http://gamequery.onaluf.org/tutorials/1/