Using JS to implement a small game of aircraft war
|
This article example shares the specific code of JS to implement the aircraft war game for your reference. The specific content is as follows When I was a kid, the airplane wars I played were pretty magical. Today, I learned how to make one. First make the steps to be done and the background style
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var start = 0; // Starting phasevar starting = 1; // Starting loading phasevar running = 2; // Game phasevar pause = 3; // Pause phasevar gameover = 4; // End phasevar state = start; // Current statevar width = canvas.width; // Get the width of the canvasvar height = canvas.height; // Get the height of the canvasvar score = 0; // Scorevar life = 3; // My plane's life valuevar bg = new Image(); // Create a background imagebg.src = "img/background.png";
var BG = {
imgs: bg,
width: 480,
height: 852,
};
// Create a constructor to generate background images function Bg(config) { // The parameter is the BG object this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// Define two background images for animation this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
//The initial height of the second background image is placed above the background height (fixed) this.y2 = -this.height;
// Background image drawing method this.paint = function() {
//Draw two background images respectively ctx.drawImage(this.imgs, this.x1, this.y1);
ctx.drawImage(this.imgs, this.x2, this.y2);
};
// Background image movement method this.step = function() {
//Move the background image down one position, and then use the timer to animate the background image this.y1++;
this.y2++;
//Judge the critical point of the image height,
if (this.y1 == this.height) {
this.y1 = -this.height;
}
if (this.y2 == this.height) {
this.y2 = -this.height;
}
}
};
// Create background image object var sky = new Bg(BG);
// Generate game name text var logo = new Image();
logo.src = "img/start.png";
// Store the 4 pictures of the game loading process into an array var loadings = [];
loadings[0] = new Image();
loadings[0].src = "img/game_loading1.png";
loadings[1] = new Image();
loadings[1].src = "img/game_loading2.png";
loadings[2] = new Image();
loadings[2].src = "img/game_loading3.png";
loadings[3] = new Image();
loadings[3].src = "img/game_loading4.png";
var LOADING = {
images: loading,
length: loadings.length,
width: 186,
height: 38,
};
// Constructor function Loading(config) {
this.imges = config.imges;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.startIndex = 0; // Used to determine which picture needs to be displayed // Drawing method this.paint = function() {
ctx.drawImage(this.images[this.startIndex], 0, height - this.height)
};
this.time = 0; // Image switching speed during loading // Image switching method this.step = function() {
this.time++;
if (this.time % 4 === 0) {
this.startIndex++;
}
if (this.startIndex === this.length) {
// The loading phase ends and the game phase begins state = running;
}
}
};
// Create an object for the loading phase var loading = new Loading(LOADING);Making our own aircraft
// Our plane var heros = [];
heros[0] = new Image();
heros[0].src = "img/hero1.png";
heros[1] = new Image();
heros[1].src = "img/hero2.png";
heros[2] = new Image();
heros[2].src = "img/hero_blowup_n1.png";
heros[3] = new Image();
heros[3].src = "img/hero_blowup_n2.png";
heros[4] = new Image();
heros[4].src = "img/hero_blowup_n3.png";
heros[5] = new Image();
heros[5].src = "img/hero_blowup_n4.png";
var HEROS = {
imgs: heros,
length: heros.length,
width: 99,
height: 124,
frame: 2
};
// Constructor for our aircraft function Hero(config) {
this.imgs = config.imgs;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.frame = config.frame;
this.startIndex = 0; // Used to determine the current state of our aircraft // Define the position of our aircraft this.x = width / 2 - this.width / 2;
this.y = height - this.height;
// Define the flag of the plane collision, indicating that the plane was not hit this.down = false;
// Define whether the plane has exploded, indicating that the plane has not completely exploded this.candel = false;
// Drawing method this.paint = function() {
ctx.drawImage(this.imgs[this.startIndex], this.x, this.y)
};
// Our aircraft movement method this.step = function() {
if (!this.down) { // Aircraft is in normal stateif (this.startIndex === 0) {
this.startIndex = 1;
} else {
this.startIndex = 0
}
} else { // Explosion state this.startIndex++;
if (this.startIndex === this.length) { // Check if the explosion is complete // If it is complete, life -1
life--;
if (life === 0) { // Check if the game is dead state = gameover;
this.startIndex = this.length - 1;
} else { // Start a new life hero = new Hero(HEROS)
}
}
}
};
// Our plane collides this.bang = function() {
this.down = true;
};Drawing bullet state
var bullet = new Image();
bullet.src = "img/bullet1.png";
// Initialize var BULLETS = {
imgs: bullet,
width: 9,
height: 21,
};
// Create a bullet constructor function Bullet(config) {
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
// Bullet coordinates this.x = hero.x + hero.width / 2 - this.width / 2;
this.y = hero.y - this.height;
// Drawing method this.paint = function() {
ctx.drawImage(this.imgs, this.x, this.y)
};
// Movement method this.step = function() {
this.y -= 10;
};
this.candel = false; // Used to determine whether the bullet collides // Bullet collision method this.bang = function() {
this.candel = true;
}
};
// Put all new bullet objects into an array var bullets = [];
// Traverse and draw bullets function bulletdPaint() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].paint();
}
};
// Traverse and call the movement of the bullet;
function bulletdStep() {
for (var i = 0; i < bullets.length; i++) {
bullets[i].step();
}
};
//Bullet deletion function function bulletDel() {
// Delete bullets when they collide // Exceeding the height of the canvas, i.e. the negative height of the bullet for (var i = 0; i < bullets.length; i++) {
if (bullets[i].candel || bullets[i].y < -bullets[i].height) {
bullets.splice(i, 1)
}
}
};The bullet moves with the movement of the aircraft
//Bullet launch this.time = 0; //The initial design speed is 0
this.shoot = function() {
this.time++;
if (this.time % 2 === 0) { // Shoot every 2 steps bullets.push(new Bullet(BULLETS))
}
};
};
// Create an object instance of our aircraft var hero = new Hero(HEROS);
// Mouse movement event canvas.onmousemove = function(event) {
// console.log("onmousemove");
var event = event || window.event;
if (state == running) { //Judge the current game state //Assign the value of the mouse horizontal coordinate in the obtained page to the horizontal coordinate (position) of the aircraft
hero.x = event.offsetX - hero.width / 2;
//Assign the value of the mouse ordinate in the obtained page to the ordinate (position) of the aircraft
hero.y = event.offsetY - hero.height / 2;
}
};Drawing enemy aircraft
// Drawing of the enemy plane var enemy1 = []; //Small plane enemy1[0] = new Image();
enemy1[0].src = "img/enemy1.png";
enemy1[1] = new Image();
enemy1[1].src = 'img/enemy1_down1.png';
enemy1[2] = new Image();
enemy1[2].src = 'img/enemy1_down2.png';
enemy1[3] = new Image();
enemy1[3].src = 'img/enemy1_down3.png';
enemy1[4] = new Image();
enemy1[4].src = 'img/enemy1_down4.png';
var enemy2 = []; //mid-plane enemy2[0] = new Image();
enemy2[0].src = "img/enemy2.png";
enemy2[1] = new Image();
enemy2[1].src = "img/enemy2_down1.png";
enemy2[2] = new Image();
enemy2[2].src = "img/enemy2_down2.png";
enemy2[3] = new Image();
enemy2[3].src = "img/enemy2_down3.png";
enemy2[4] = new Image();
enemy2[4].src = "img/enemy2_down4.png";
var enemy3 = []; //Big plane enemy3[0] = new Image();
enemy3[0].src = "img/enemy3_n1.png";
enemy3[1] = new Image();
enemy3[1].src = "img/enemy3_n2.png";
enemy3[2] = new Image();
enemy3[2].src = "img/enemy3_down1.png";
enemy3[3] = new Image();
enemy3[3].src = "img/enemy3_down2.png";
enemy3[4] = new Image();
enemy3[4].src = "img/enemy3_down3.png";
enemy3[5] = new Image();
enemy3[5].src = "img/enemy3_down4.png";
enemy3[6] = new Image();
enemy3[6].src = "img/enemy3_down5.png";
enemy3[7] = new Image();
enemy3[7].src = "img/enemy3_down6.png";
// Initialize data var ENEMY1 = {
imgs: enemy1,
length: enemy1.length,
width: 57,
height: 51,
type: 1,
frame: 2,
life: 1,
score: 1,
};
var ENEMY2 = {
imgs: enemy2,
length: enemy2.length,
width: 69,
height: 95,
type: 2,
frame: 2,
life: 5,
score: 5,
};
var ENEMY3 = {
imgs: enemy3,
length: enemy3.length,
width: 165,
height: 261,
type: 3,
frame: 2,
life: 15,
score: 20,
};
// Constructor for the enemy aircraft function Enemy(config) {
this.imgs = config.imgs;
this.length = config.length;
this.width = config.width;
this.height = config.height;
this.type = config.type;
this.frame = config.frame;
this.life = config.life;
this.score = config.score;
// The coordinates of the enemy aircraft this.x = Math.random() * (width - this.width);
this.y = -this.height;
this.startIndex = 0; // used to judge the subscript this.down = false; // used to judge whether there is a collision this.candel = false; // used to judge whether the explosion is completed //Drawing method this.paint = function() {
ctx.drawImage(this.imgs[this.startIndex], this.x, this.y);
};
//Movement method this.step = function() {
if (!this.down) { // The enemy aircraft is in normal state // The subscripts of small and medium aircraft are always 0
//The index of the large aircraft is switched between 0 and 1 this.startIndex++;
this.startIndex = this.startIndex % this.frame;
// downward animation of the plane this.y += 2;
} else { //After the plane collides this.startIndex++;
if (this.startIndex == this.length) {
this.candel = true;
this.startIndex = this.length - 1;
}
}
};
// Check if it has collided this.checkHit = function(wo) { // Check the four sides return wo.y + wo.height > this.y &&
wo.x + wo.width > this.x &&
wo.y < this.y + this.height &&
wo.x < this.x + this.width;
};
//After the enemy aircraft collides this.bang = function() {
this.life--;
if (this.life === 0) {
this.down = true;
score += this.score;
}
}
};
//Array stores enemy aircraft var enemise = [];
// Add data to the enemy aircraft array function enterEnemise() {
var rand = Math.floor(Math.random() * 100)
if (rand < 10) {
// Add a small plane enemy.push(new Enemy(ENEMY1));
} else if (rand < 55 && rand > 50) {
// Adding aircraft enemy.push(new Enemy(ENEMY2));
} else if (rand === 88) {
// Add a large plane if (enemise[0].type !== 3 && enemise.length > 0) {
enemise.splice(0, 0, new Enemy(ENEMY3));
}
}
};
// Draw the enemy aircraft function enemyPaint() {
for (var i = 0; i < enemise.length; i++) {
enemise[i].paint();
}
};
//Enemy aircraft movement function enemyStep() {
for (var i = 0; i < enemise.length; i++) {
enemise[i].step();
}
};
// Delete enemy aircraft function function delenemy() {
for (var i = 0; i < enemise.length; i++) {
// console.log(enemise[i].candel)
if (enemise[i].y > height || enemise[i].candel) {
enemise.splice(i, 1)
}
}
};
// Function after collision function hitEnemise() {
for (var i = 0; i < enemise.length; i++) {
// If I launch my plane and it hits an enemy plane if (enemise[i].checkHit(hero)) {
// After the enemy aircraft collides, the collision state changes enemy[i].bang();
// After our plane collides, the collision status changes hero.bang();
};
// The bullet hits the enemy plane for (var j = 0; j < bullets.length; j++) {
if (enemise[i].checkHit(bullets[j])) {
enemise[i].bang();
// After the bullet collides, the collision state changes bullets[j].bang();
}
}
}
};Final finishing stage
// Draw score and health function scoreText() {
ctx.font = "30px bold"
ctx.fillText("score:" + score, 10, 30);
ctx.fillText("life:" + life, 300, 30);
};
// The game is paused canvas.onmouseout = function() {
if (state === running) {
state = pause;
}
};
//Call the mouse over event of the canvas canvas.onmouseover = function() {
if (state === pause) {
state = running;
}
};
// Pause the image var pause = new Image()
pause.src = "img/game_pause_nor.png";
// Game over function gameoverfn() {
ctx.font = "50px bold"
ctx.fillText("GAME OVER !!!", 80, 300);
ctx.fillText("ONCE MORE !!!", 80, 400);
};
// Canvas click event canvas.addEventListener("click", function(e) {
p = getEventPosition(e);
// When clicking the canvas, determine whether the game has started if (state === start) {
state = starting;
}
console.log(123);
// Having trouble restarting the game? ? ?
if (state === gameover) {
if (py >= 350 && py < 450) {
console.log('You clicked ONCE MORE!!!');
state = running;
}
}
});
function getEventPosition(e) {
var x, y;
if (e.layerX || ev.layerX === 0) {
x = e.layerX;
y = e.layerY;
} else if (e.offsetX || ev.offsetX === 0) {
x = e.offsetX;
y = e.offsetY;
}
return {
x: x,
y: y
};
};The following is the basic calling problem of each stage.
setInterval(function() {
//The background image and its dynamic effects are available in all statessky.paint(); // Draw the backgroundsky.step(); // Background animationif (state === start) { // The first stagectx.drawImage(logo, 35, 0)
} else if (state === starting) { // The second stage loading.paint(); // Draw the background loading.step(); // Background animation } else if (state === running) { // The third state // Draw me flying the plane hero.paint();
// Movement of our aircraft hero.step();
//Our aircraft's shooting method hero.shoot();
// Drawing of bullets bulletdPaint();
//Bullet movement bulletdStep();
// Delete the bullet bulletDel();
// Create an enemy aircraft enterEnemise();
// Draw the enemy aircraft enemyPaint();
// Draw the enemy aircraft's movement enemyStep();
// Delete the enemy aircraft delenemy();
// Determine whether it hits hitEnemise();
// Draw the score and health value scoreText()
} else if (state === pause) { // Fourth state sky.paint(); // Draw the background sky.step(); // Background animation // Draw me flying the plane hero.paint();
// Drawing of bullets bulletdPaint();
// Draw the enemy aircraft enemyPaint();
// Draw the score and health value scoreText();
ctx.drawImage(pause, 220, 300)
} else if (state === gameover) { // Fifth state sky.paint(); // Draw background sky.step(); // Background animation hero.paint();
// Drawing of bullets bulletdPaint();
// Draw the enemy aircraft enemyPaint();
// Draw the score and health value scoreText();
// Game over gameoverfn();
}
}, 10)
})()This is the complete source code of Aircraft Wars, for reference only. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: CentOS7 installation zabbix 4.0 tutorial (illustration and text)
>>: CentOS7 installation GUI interface and remote connection implementation
Recommend
js implements the classic minesweeper game
This article example shares the specific code of ...
MySQL tutorial DML data manipulation language example detailed explanation
Table of contents 1. Data Manipulation Language (...
A brief discussion on the matching rules of host and user when Mysql connects to the database
--When connecting to the database, the matching r...
Implementation example of react project from new creation to deployment
Start a new project This article mainly records t...
Linux bash: ./xxx: Unable to execute binary file error
Today I sent a small tool for Ubuntu to a custome...
Pure js to achieve typewriter effect
This article example shares the specific code of ...
Embed codes for several older players
The players we see on the web pages are nothing m...
How to decompress multiple files using the unzip command in Linux
Solution to the problem that there is no unzip co...
Analysis of the process of configuring Alibaba Cloud proxy warehouse based on Nexus
The default remote repository of Nexus is https:/...
Vue project implements graphic verification code
This article example shares the specific code of ...
Explanation of the basic syntax of Mysql database stored procedures
drop procedure sp_name// Before this, I have told...
A brief discussion on using Cartesian product principle to query multiple tables in MySQL
MySQL multi-table query (Cartesian product princi...
Summary of commonly used commands for docker competition submission
Log in to your account export DOCKER_REGISTRY=reg...
Detailed summary of web form submission methods
Let's first look at several ways to submit a ...
Will mysql's in invalidate the index?
Will mysql's IN invalidate the index? Won'...