I suggest that you learn some basic JS first, and then learn jquery, so that you can accept new things better. Today we are going to try to make a classic js game, a table tennis game. This game is probably the one I have made the most. Times, I have used xna, flash, and js to make the same one. First upload a screenshot, otherwise you won’t know what it is. 
The demo address is: http://www.lovewebgames.com/demo/gamepingbang/
The technology used is jquery gamequery. Everyone knows what jquery is. This article focuses on gamequery. Gamequery is a jquery plug-in. Its official website is:
http://gamequery.onaluf.org/. Its function It is to make it easier to develop JS games. You can go to its website to take a look. There are many cases, including the JS version of The King of Fighters.
The language organization ability is a bit poor, so I won’t say more, let’s start coding!
<script> <br>var game=function(){ <br>var private={}; <br>private.PLAYGROUND_WIDTH=300; <br>private.PLAYGROUND_HEIGHT=400; <br>private.status=-1; <br>private.speed=30; <br>var get=function(key){ <br>return private[key]; <br>} <br>var set=function(key,val){ <br>private[key]=val; <br>} <br>var playground; <br>return{ <br>init:function(){ <br>$("#gradeinfo").remove(); <br>playground=$("#playground").playground({height:get("PLAYGROUND_HEIGHT"),width:get("PLAYGROUND_WIDTH"),RefreshRate:get("speed") }); <br>$('#playground').css('width', get('PLAYGROUND_WIDTH')); <br>$('#playground').css('height', get('PLAYGROUND_HEIGHT')); <br>$('#playground').css('position', 'relative'); <br>$('#playground').css('border', '1px solid #ccc'); <br>this.initBall(); <br>this.initPlayer(); <br>$("#sceengraph").css("visibility","visible"); <br>$('#player').get(0).gameQuery.score = 0; <br>var classObj = this; <br>$().playground().registerCallback(function(){ <br>var status = get('status'); <br>if (status > 0) { <br>classObj.renderBall(); <br>} <br>},get("speed")); <br>}, <br>initBall:function(){ <br>$("#ball").remove(); <br>playground.addSprite('ball', { animation:$.gameQuery.Animation( { imageURL:"./blank.gif" } ), width:10, height:10 }); <br>$('#ball').get(0).gameQuery.velX = 4; <br>$('#ball').get(0).gameQuery.velY = 4; <br>$("#ball").css("top", get('PLAYGROUND_HEIGHT')-20) <br>$("#ball").css("left", (get('PLAYGROUND_WIDTH')-10)/2) <br>}, <br>initPlayer:function(){ <br>$("#player").remove(); <br>playground.addSprite("player",{ animation:$.gameQuery.Animation( { imageURL:"./blank.gif" } ),width:50, height:8,posx:(get('PLAYGROUND_WIDTH')-50)/2,posy:get('PLAYGROUND_HEIGHT')-10}); <br>$("#player").addClass("player"); <br>}, <br>renderBall:function(){ <br>var ballPosition = $('#ball').position(); <br>var PLAYGROUND_WIDTH = get('PLAYGROUND_WIDTH'); <br>var PLAYGROUND_HEIGHT = get('PLAYGROUND_HEIGHT'); <br>ballPosition.top-=$('#ball').get(0).gameQuery.velY; <br>ballPosition.left =$('#ball').get(0).gameQuery.velX; <br>$('#ball').css('top', ballPosition.top); <br>$('#ball').css('left', ballPosition.left); <br>if (ballPosition.top <= 0) { <BR>$('#ball').get(0).gameQuery.velY = -$('#ball').get(0).gameQuery.velY; <BR>} <BR>if(ballPosition.left<=0 || ballPosition.left $('#ball').width()>=PLAYGROUND_WIDTH){ <br>$('#ball').get(0).gameQuery.velX = -$('#ball').get(0).gameQuery.velX; <br>} <br>$("#ball").collision("#player").each(function(){ <br>$('#ball').get(0).gameQuery.velY = -$('#ball').get(0).gameQuery.velY; <br>$('#player').get(0).gameQuery.score ; <br>}); <br>if(ballPosition.top $('#ball').height() >= PLAYGROUND_HEIGHT){ <br>playground.addSprite("gradeinfo",{width:100,height:80,posx:100,posy:100}); <br>$("#gradeinfo").html("游戏结束!<br/>得分：" $('#player').get(0).gameQuery.score); <br>set('status', -1); <br>} <br>}, <br>pause:function(){ <br>if(get('status')==0){ <br>set('status',1); <br>}else{ <br>set('status',0); <br>} <br>}, <br>keyDownHandler: function(evt) { <br>// console.log(evt); <br>var thisObj = this; <br>switch(evt.keyCode) { <br>case 13: <br>if (get('status') == -1) { <br>this.start(); <br>} else { <br>this.pause(); <br>} <br>break; <br>case 37: <br>if (! this.moveStaus) { <br>this.moveStaus = window.setInterval( function() { thisObj.movePlayer('#player', -4); }, 20); <br>} <br>break; <br>case 39: <br>if (! this.moveStaus) { <br>this.moveStaus = window.setInterval( function() { thisObj.movePlayer('#player', 4); }, 20); <br>} <br>break; <br>} <br>}, <br>keyUpHandler:function(evt){ <br>window.clearInterval(this.moveStaus); <br>this.moveStaus=null; <br>}, <br>movePlayer:function(player, dir){ <br>if (get('status') == 1) { <br>var pos = $(player).position(); <br>var newPos = pos.left dir; <br>if (newPos > 0 && newPos $(player).width() < get('PLAYGROUND_WIDTH')) { <BR>$(player).css('left', newPos); <BR>} <BR>} <BR>}, <BR>start:function(){ <BR>if (get('status') == -1) { <BR>set('status', 1); <BR>$().playground().startGame(function(){ <BR>$("#welcome").remove(); <BR>}); <BR>} <BR>} <BR>} <BR>}() <BR>$(function(){ <BR>game.init(); <BR>$(document).keydown(function(evt){ <BR>game.keyDownHandler(evt); <BR>}); <BR>$(document).keyup(function(evt){ <BR>game.keyUpHandler(evt); <BR>}); <BR>}); <BR></script>
Then let’s start the explanation:
First is the playground. This function definition is used to display the game div. The definition here is 300*400. The third parameter is the refresh rate. The default is 30.
playground.addSprite is to add sprites to the game scene. This game is mainly a small ball and a board. In this way, the game is half completed. Then add speed to the sprite and use the gameQuery.obj of the jquery object. What is written here is $().gameQuery.velX, and then call renderBall to move the ball, and then monitor the buttons. Control the movement of the board, and finally detect collisions.
The collision between the ball and the board, the collision between the ball and the wall, gamequery provides a method to detect collision (filter), such as:
$("#ball").collision("#player").each(function(){
$(' #ball').get(0).gameQuery.velY = -$('#ball').get(0).gameQuery.velY;
$('#player').get(0).gameQuery. score ;
});
After the collision here, the direction of the Y axis is changed.
http://gamequery.onaluf.org/api.php
Here, you can see its API. Basically, it has everything a game should have. You will understand after looking at the example. Isn’t it very simple? Since this thing was made a few years ago, I can't explain it clearly. If you are interested, you can research it. There are also tutorials here: http://gamequery.onaluf.org/tutorials/1/
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
