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
Chrome 4.0 supports GreaseMonkey scripts
GreaseMokey (Chinese people call it Grease Monkey...
Solution to Incorrect string value in MySQL
Many friends will report the following error when...
React Hooks Usage Examples
Table of contents A simple component example More...
HTML+Sass implements HambergurMenu (hamburger menu)
A few days ago, I watched a video of a foreign gu...
Linux file/directory permissions and ownership management
1. Overview of file permissions and ownership 1. ...
How to change the encoding of MySQL database to utf8mb4
The utf8mb4 encoding is a superset of the utf8 en...
HTML+CSS to create a top navigation bar menu
Navigation bar creation: Technical requirements: ...
How to distinguish MySQL's innodb_flush_log_at_trx_commit and sync_binlog
The two parameters innodb_flush_log_at_trx_commit...
How to write elegant JS code
Table of contents variable Use meaningful and pro...
Nine advanced methods for deduplicating JS arrays (proven and effective)
Preface The general methods are not listed here, ...
mysql delete multi-table connection deletion function
Deleting a single table: DELETE FROM tableName WH...
Reasons why MySQL cancelled Query Cache
MySQL previously had a query cache, Query Cache. ...
Introduction to HTML for front-end developers
1 Introduction to HTML 1.1 First experience with ...
Basic usage examples of Vue named slots
Preface Named slots are bound to elements using t...
Based on JavaScript ES new features let and const keywords
Table of contents 1. let keyword 1.1 Basic Usage ...