avant-propos
"Page d'accueil de l'auteur" : Sprite Youbai Bubbles
"Site personnel" : Site personnel de Sprite
"Colonne de recommandation" :
★ Service Java à guichet unique ★
★ Réagissez de l'entrée à la maîtrise ★
★ Partage de code frontal sympa ★
★ De 0 à héros, la route vers Vue devenant un dieu ★
★ uniapp - de la construction à la promotion ★
★ De 0 à héros, Vue devient un dieu Road ★
★ Une colonne suffit pour résoudre l'algorithme ★
★ Parlons de l'architecture à partir de 0 ★
★ La manière exquise de la circulation des données ★
★ La route vers le backend avancé ★
Annuaire d'articles
Apprenez à connaître inscode
Le dernier service Inscode de CSDN est un outil de programmation en ligne conçu pour fournir aux développeurs un environnement pratique pour écrire, exécuter et partager du code, permettant aux développeurs d'écrire et d'exécuter rapidement du code sans créer d'environnement de programmation localement.
Inscode prend en charge plusieurs langages de programmation, notamment Java, Python, C++, etc., et prend également en charge l'écriture de codes HTML, CSS et JavaScript. Il fournit un environnement d'exploitation complet, permettant au code de s'exécuter directement sur la page Web et de produire les résultats, un débogage en temps réel, pratique et rapide. Dans le même temps, Inscode fournit également une fonction de partage, qui peut facilement partager le code avec d'autres.
Pour utiliser Inscode, il suffit de visiter son site Web https://inscode.csdn.net/
page d'accueil personnelle : why_does_it_work
Premier coup d'œil à l'effet de course
Ici, vous pouvez voir directement le contenu du code source , rafraîchir , et le dernier consiste à zoomer et à accéder à la page Web
Afficher le contenu du code source
obtenir l'article
structuration du projet
Le premier fichier de script est " quark.base-1.0.0.alpha.min.js ", qui est le fichier principal d'un framework JavaScript nommé " quark ". Ce framework fournit quelques fonctions et outils de base pour faciliter le développement d'applications Web pour les développeurs.
Le prochain fichier de script à introduire est " R.js ", qui peut être un fichier JavaScript personnalisé utilisé pour gérer les ressources du jeu, telles que les fichiers image et son. Ce fichier peut définir un objet " R " qui contient des références à toutes les ressources utilisées dans le jeu.
" Utils.js " est un fichier JavaScript personnalisé, qui peut contenir des fonctions générales ou des fonctions utilitaires pour la mise en œuvre du jeu. Ces fonctions peuvent inclure des calculs mathématiques courants, la détection de collision et d'autres fonctions.
" fishjoy.js " est le fichier de code logique principal du jeu. Il peut contenir les paramètres d'initialisation du jeu, la logique de la boucle principale, le traitement de l'interaction de l'utilisateur, etc. Ce fichier définit probablement un objet appelé " FishJoy " qui contient diverses logiques et états pour le jeu.
" FishManager.js " est un fichier JavaScript personnalisé qui peut être utilisé pour gérer et contrôler les objets poisson dans le jeu. Un objet nommé " FishManager " peut être défini dans ce fichier , qui est utilisé pour créer, mettre à jour et détruire des objets poisson dans le jeu.
" FishGroup.js " est un fichier JavaScript personnalisé qui peut être utilisé pour créer et gérer des bancs de poissons dans le jeu. Un objet nommé " FishGroup " peut être défini dans ce fichier , qui est utilisé pour créer, mettre à jour et détruire les bancs de poissons dans le jeu.
" Fish.js " est un fichier de vue qui peut définir une classe de vue nommée " Fish " pour afficher les objets poisson dans le jeu. Cette classe peut contenir des méthodes et des propriétés pour contrôler le mouvement et l'animation du poisson.
" Cannon.js " est un fichier de vue qui peut définir une classe de vue nommée " Cannon " pour afficher les objets canon dans le jeu. Cette classe peut contenir des méthodes et des propriétés permettant de contrôler l'angle de la tourelle et de tirer des balles.
" Bullet.js " est un fichier de vue qui peut définir une classe de vue nommée " Bullet " pour afficher les objets bullet dans le jeu. Cette classe peut contenir des méthodes et des propriétés pour contrôler le mouvement des balles et la détection des collisions.
« Num.js » est un fichier de vue, qui peut définir une classe de vue nommée « Num », qui est utilisée pour afficher des informations telles que les scores et les nombres dans le jeu. Cette classe peut contenir des méthodes et des propriétés pour mettre à jour et afficher les scores.
" Player.js " est un fichier de vue, qui peut définir une classe de vue nommée " Player ", qui est utilisée pour afficher les informations du joueur dans le jeu. Cette classe peut contenir des méthodes et des propriétés pour mettre à jour et afficher les informations sur les joueurs.
Logique de base fishjoy.js
code spécifique
(function(){
window.onload = function()
{
setTimeout(function()
{
game.load();
}, 10);
};
var ns = Q.use("fish");
var game = ns.game =
{
container: null,
width: 480,
height: 320,
fps: 60,
frames: 0,
params: null,
events: Q.supportTouch ? ["touchstart", "touchend"] : ["mousedown", "mouseup"],
fireInterval: 30,
fireCount: 0
};
game.load = function(container)
{
//获取URL参数设置
var params = this.params = Q.getUrlParams();
if(params.mode == undefined) params.mode = 2;
if(params.fps) this.fps = params.fps;
this.fireInterval = this.fps*0.5;
if(Q.isIpod || Q.isIphone)
{
this.width = 980;
this.height = 545;
Q.addMeta({
name:"viewport", content:"user-scalable=no"});
}else
{
Q.addMeta({
name:"viewport", content:"user-scalable=no, initial-scale=1.0, minimum-scale=1, maximum-scale=1"});
this.width = Math.min(1024, window.innerWidth);
this.height = Math.min(768, window.innerHeight);
}
if(params.width) this.width = Number(params.width) || this.width;
if(params.height) this.height = Number(params.height) || this.height;
//初始化容器设置
this.container = container || Q.getDOM("container");
this.container.style.overflow = "hidden";
this.container.style.width = this.width + "px";
this.container.style.height = this.height + "px";
this.screenWidth = window.innerWidth;
this.screenHeight = window.innerHeight;
//load info
var div = Q.createDOM("div", {
innerHTML: "正在加载资源中，请稍候...<br>", style:
{
id: "loader",
position: "absolute",
width: this.width + "px",
left: "0px",
top: (this.height >> 1) + "px",
textAlign: "center",
color: "#fff",
font: Q.isMobile ? 'bold 16px 黑体' : 'bold 16px 宋体',
textShadow: "0 2px 2px #111"
}});
this.container.appendChild(div);
this.loader = div;
//hide nav bar
this.hideNavBar();
if(Q.supportOrientation)
{
window.onorientationchange = function(e)
{
game.hideNavBar();
if(game.stage) game.stage.updatePosition();
};
}
//start load image
var imgLoader = new Q.ImageLoader();
imgLoader.addEventListener("loaded", Q.delegate(this.onLoadLoaded, this));
imgLoader.addEventListener("complete", Q.delegate(this.onLoadComplete, this));
imgLoader.load(ns.R.sources);
};
game.onLoadLoaded = function(e)
{
var content = "正在加载资源中，请稍候...<br>(" + Math.round(e.target.getLoadedSize()/e.target.getTotalSize()*100) + "%)";
this.loader.innerHTML = content;
};
game.onLoadComplete = function(e)
{
e.target.removeAllEventListeners();
this.init(e.images);
};
game.init = function(images)
{
ns.R.init(images);
this.startup();
};
game.startup = function()
{
var me = this;
this.container.removeChild(this.loader);
this.loader = null;
//手持设备的特殊webkit设置
if(Q.isWebKit && !Q.supportTouch)
{
document.body.style.webkitTouchCallout = "none";
document.body.style.webkitUserSelect = "none";
document.body.style.webkitTextSizeAdjust = "none";
document.body.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
}
var context = null;
if(this.params.mode == 1)
{
var canvas = Q.createDOM("canvas", {
id:"canvas", width:this.width, height:this.height, style:{
position:"absolute"}});
this.container.appendChild(canvas);
this.context = new Q.CanvasContext({
canvas:canvas});
}else
{
this.context = new Q.DOMContext({
canvas:this.container});
}
this.stage = new Q.Stage({
width:this.width, height:this.height, context:this.context, update:Q.delegate(this.update, this)});
var em = this.evtManager = new Q.EventManager();
em.registerStage(this.stage, this.events, true, true);
this.initUI();
this.initPlayer();
//this.testFish();
//this.testFishDirection();
//this.testFishALL();
this.fishManager = new ns.FishManager(this.fishContainer);
this.fishManager.makeFish();
var timer = this.timer = new Q.Timer(1000 / this.fps);
timer.addListener(this.stage);
timer.addListener(Q.Tween);
timer.start();
this.showFPS();
};
game.initUI = function()
{
this.bg = new Q.Bitmap({
id:"bg", image:ns.R.mainbg, transformEnabled:false});
this.fishContainer = new Q.DisplayObjectContainer({
id:"fishContainer", width:this.width, height:this.height, eventChildren:false, transformEnabled:false});
this.fishContainer.onEvent = function(e)
{
if(e.type == game.events[0] && game.fireCount >= game.fireInterval)
{
game.fireCount = 0;
game.player.fire({
x:e.eventX, y:e.eventY});
}
};
this.bottom = new Q.Bitmap(ns.R.bottombar);
this.bottom.id = "bottom";
this.bottom.x = this.width - this.bottom.width >> 1;
this.bottom.y = this.height - this.bottom.height + 2;
this.bottom.transformEnabled = false;
this.stage.addChild(this.bg, this.fishContainer, this.bottom);
};
game.initPlayer = function()
{
var coin = Number(this.params.coin) || 10000;
this.player = new ns.Player({
id:"quark", coin:coin});
};
game.update = function(timeInfo)
{
this.frames++;
this.fireCount++;
this.fishManager.update();
};
game.testFish = function()
{
var num = this.params.num || 50, len = ns.R.fishTypes.length;
for(var i = 0; i < num; i++)
{
var chance = Math.random() * (len - 1) >> 0;
var index = Math.random() * chance + 1 >> 0;
var type = ns.R.fishTypes[index];
var fish = new ns.Fish(type);
fish.x = Math.random()*this.width >> 0;
fish.y = Math.random()*this.height >> 0;
fish.moving = true;
fish.rotation = Math.random() * 360 >> 0;
fish.init();
this.fishContainer.addChild(fish);
}
};
game.testFishDirection = function()
{
var dirs = [0, 45, 90, 135, 180, 225, 270, 315];
for(var i = 0; i < 8; i++)
{
var fish = new ns.Fish(ns.R.fishTypes[1]);
fish.x = this.width >> 1;
fish.y = this.height >> 1;
fish.speed = 0.5;
fish.setDirection(dirs[i]);
fish.moving = true;
this.stage.addChild(fish);
}
};
game.testFishALL = function()
{
var sx = 100, sy = 50, y = 0, len = ns.R.fishTypes.length;
for(var i = 0; i < len - 1; i++)
{
var type = ns.R.fishTypes[i+1];
var fish = new ns.Fish(type);
if(i == 9) fish.x = sx;
else fish.x = sx + Math.floor(i/5)*200;
if(i == 9) y = sy + 320;
else if(i%5 == 0) y = sy;
fish.y = y + (i%5) * 20;
y += fish.height;
fish.update = function(){
};
this.stage.addChild(fish);
}
};
game.showFPS = function()
{
var me = this, fpsContainer = Quark.getDOM("fps");
if(fpsContainer)
{
setInterval(function()
{
fpsContainer.innerHTML = "FPS:" + me.frames;
me.frames = 0;
}, 1000);
}
};
game.hideNavBar = function()
{
window.scrollTo(0, 1);
};
})();
Ce code est une fonction d'exécution immédiate, principalement utilisée pour initialiser un objet nommé jeu, définir les paramètres du jeu et charger des ressources et d'autres opérations.
- Dans la fonction de rappel d'événement window.onload, appelez la méthode game.load() pour charger les ressources du jeu.
- Définissez un espace de noms ns et affectez-le à un attribut de l'objet de jeu.
- Initialisez certaines propriétés de l'objet de jeu, telles que le conteneur (conteneur du jeu), la largeur (largeur du jeu), la hauteur (hauteur du jeu), le fps (fréquence d'images), etc.
- La méthode game.load() est utilisée pour charger les ressources du jeu, qui utilise la classe ImageLoader dans le moteur Q.js.
- La méthode game.onLoadLoaded() est appelée pendant le chargement des ressources pour afficher la progression du chargement.
- La méthode game.onLoadComplete() est appelée après le chargement des ressources pour initialiser le jeu.
- La méthode game.init() est utilisée pour initialiser le jeu, créer une scène, ajouter des écouteurs d'événements, initialiser l'interface utilisateur et d'autres opérations.
- La méthode game.initUI() est utilisée pour initialiser les éléments de l'interface du jeu, y compris l'image d'arrière-plan, le conteneur de poisson, la barre d'outils inférieure, etc.
- La méthode game.initPlayer() est utilisée pour initialiser l'objet joueur.
- La méthode game.update() met à jour le jeu à chaque image, y compris en mettant à jour le nombre d'images et la position du poisson.
- La méthode game.testFish() est utilisée pour tester la création de poissons.
- La méthode game.testFishDirection() est utilisée pour tester la création de poissons avec différentes directions.
- La méthode game.testFishALL() est utilisée pour tester la création de tous les types de poissons.
- La méthode game.showFPS() est utilisée pour afficher la fréquence d'images.
- La méthode game.hideNavBar() est utilisée pour masquer la barre de navigation.
résumé
Fishing Master est un jeu occasionnel très populaire. Le mini-jeu Fishing Master écrit en HTML permet aux joueurs de découvrir le plaisir de pêcher dans un navigateur.
Le jeu comprend principalement les points suivants :
Conception de l'interface de jeu : via HTML et CSS, l'interface de jeu peut être conçue, y compris les zones de pêche, le fond de l'océan, les bancs de poissons et d'autres éléments. Vous pouvez utiliser des balises HTML div pour créer des fermes piscicoles et des filets, et utiliser des images d'arrière-plan pour ajouter un impact visuel.
Génération de poissons : vous pouvez utiliser la balise HTML img pour insérer une image d'un poisson et définir son effet d'animation pour faire bouger le poisson dans la pêcherie. Le frai et le mouvement des poissons peuvent être contrôlés à l'aide de JavaScript pour leur permettre de nager librement dans la pisciculture.
Opération de pêche : vous pouvez utiliser la balise HTML canvas pour créer un canevas, obtenir l'événement de clic de souris via JavaScript et créer un filet de pêche à l'endroit où vous avez cliqué. Après avoir cliqué, il peut calculer la relation de position entre le poisson et le filet de pêche, juger si le poisson est attrapé et donner au joueur des points bonus ou déduire des points en fonction du succès ou de l'échec de la pêche.
Statistiques de score : JavaScript peut être utilisé pour réaliser les statistiques et l'affichage des scores. Après chaque pêche réussie, les scores peuvent être mis à jour et affichés sur l'interface du jeu.
En utilisant HTML, CSS et JavaScript pour écrire le jeu de pêche, les joueurs peuvent jouer au jeu de pêche dans le navigateur, offrant une expérience de jeu simple, pratique et intéressante.
