foreword
"Author's Homepage" : Sprite Youbai Bubbles
"Personal Website" : Sprite's personal website
"Recommendation Column" :
★ Java one-stop service ★
★ React from entry to proficiency ★
★ Cool front-end code sharing ★
★ From 0 to hero, the road to Vue becoming a god ★
★ uniapp-from construction to promotion ★
★ From 0 to hero, Vue becoming a god Road ★
★ One column is enough to solve the algorithm ★
★ Let’s talk about the architecture from 0 ★
★ The exquisite way of data circulation ★
★ The road to advanced backend ★
Article directory
Get to know inscode
CSDN's latest Inscode service is an online programming tool designed to provide developers with a convenient environment for writing, running and sharing code, allowing developers to quickly write and run code without building a local programming environment.
Inscode supports multiple programming languages, including Java, Python, C++, etc., and also supports writing HTML, CSS and JavaScript codes. It provides a complete operating environment, allowing the code to run directly on the web page and output the results, real-time debugging, convenient and fast. At the same time, Inscode also provides a sharing function, which can easily share the code with others.
To use Inscode, just visit its website https://inscode.csdn.net/
personal homepage: why_does_it_work
First look at the running effect
Here you can directly view the source code content , refresh , and the last one is to zoom in and jump to the webpage
View source code content
get item
project structure
The first script file is " quark.base-1.0.0.alpha.min.js ", which is the core file of a JavaScript framework named " quark ". This framework provides some basic functions and tools to facilitate the development of Web applications for developers.
The next script file to be introduced is " R.js ", which may be a custom JavaScript file used to manage resources in the game, such as image and sound files. This file may define an " R " object that contains references to all resources used in the game.
" Utils.js " is a custom JavaScript file, which may contain some general functions or utility functions for the implementation of the game. These functions may include some common mathematical calculations, collision detection and other functions.
" fishjoy.js " is the core logic code file of the game. It may contain the game's initialization settings, main loop logic, user interaction processing, etc. This file probably defines an object called " FishJoy " that contains various logic and states for the game.
" FishManager.js " is a custom JavaScript file that may be used to manage and control fish objects in the game. An object named " FishManager " may be defined in this file , which is used to create, update and destroy fish objects in the game.
" FishGroup.js " is a custom JavaScript file that may be used to create and manage fish schools in the game. An object named " FishGroup " may be defined in this file , which is used to create, update and destroy fish schools in the game.
" Fish.js " is a view file that may define a view class named " Fish " to display fish objects in the game. This class may contain methods and properties for controlling the movement and animation of the fish.
" Cannon.js " is a view file that may define a view class named " Cannon " for displaying cannon objects in the game. This class may contain methods and properties for controlling the angle of the turret and firing bullets.
" Bullet.js " is a view file that may define a view class named " Bullet " to display bullet objects in the game. This class may contain methods and properties for controlling bullet movement and collision detection.
" Num.js " is a view file, which may define a view class named " Num ", which is used to display information such as scores and numbers in the game. This class may contain methods and properties for updating and displaying scores.
" Player.js " is a view file, which may define a view class named " Player ", which is used to display player information in the game. This class may contain methods and properties for updating and displaying player information.
Core logic fishjoy.js
specific code
(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);
};
})();
This code is an immediate execution function, mainly used to initialize an object named game, set game parameters and load resources and other operations.
- In the window.onload event callback function, call the game.load() method to load game resources.
- Define a namespace ns and assign it to an attribute of the game object.
- Initialize some properties of the game object, such as container (game container), width (game width), height (game height), fps (frame rate), etc.
- The game.load() method is used to load game resources, which uses the ImageLoader class in the Q.js engine.
- The game.onLoadLoaded() method is called during resource loading to display the loading progress.
- The game.onLoadComplete() method is called after the resources are loaded to initialize the game.
- The game.init() method is used to initialize the game, create a stage, add event listeners, initialize the UI interface and other operations.
- The game.initUI() method is used to initialize game interface elements, including background image, fish container, bottom toolbar, etc.
- The game.initPlayer() method is used to initialize the player object.
- The game.update() method updates the game every frame, including updating the number of frames and the position of the fish.
- The game.testFish() method is used to test the creation of fish.
- The game.testFishDirection() method is used to test the creation of fish with different directions.
- The game.testFishALL() method is used to test the creation of all types of fish.
- The game.showFPS() method is used to display the frame rate.
- The game.hideNavBar() method is used to hide the navigation bar.
summary
Fishing Master is a very popular casual game. The Fishing Master mini-game written in HTML allows players to experience the fun of fishing in a browser.
The game mainly includes the following points:
Game interface design: Through HTML and CSS, the game interface can be designed, including fishing grounds, ocean background, fish schools and other elements. You can use HTML div tags to create fish farms and nets, and use background images to add visual impact.
Generation of fish: You can use the HTML img tag to insert a picture of a fish, and set its animation effect to make the fish move in the fishery. The spawning and movement of fish can be controlled using JavaScript to allow them to swim freely in the fish farm.
Fishing operation: You can use the HTML canvas tag to create a canvas, get the mouse click event through JavaScript, and create a fishing net at the clicked position. After clicking, it can calculate the positional relationship between the fish and the fishing net, judge whether the fish is caught, and give the player bonus points or deduct points according to the success or failure of fishing.
Score statistics: JavaScript can be used to realize the statistics and display of scores. After each successful fishing, the scores can be updated and displayed on the game interface.
By using HTML, CSS and JavaScript to write the fishing game, players can play the fishing game in the browser, providing a simple, convenient and interesting game experience.
