Write aircraft battle with the canvas

1. The old rules, when we started the project, we first step is to analyze the game when we started to do a whole game we want to write into five stages:

The five stages of life and the value of our aircraft, as well as game scores as follows:

// game state welcome

the START 0 = const;
// second stage: loading the game state
const = LOADING. 1;
// Phase III: the state of the game running
const the RUNNING = 2;
// Stage IV: pauses the game stage
const the PAUSE =. 3;
// first The five stages: stage game ends
const = GAMEOVER. 4;
// game score defined
var score = 0;
// definition of health
var = life. 3;
// define a switch
var state = 0;

(1) Our first stage : Welcome to the stage, which is the stage renderings start of the game are as follows:

How we should achieve:

var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");

First we have to get the canvas, go to read my previous blog

// Get the background image
var img = new new Image ();
img.src = "ImagesRF Royalty Free / background.png";
// create a logo image
var logo = new new Image ();
logo.src = "ImagesRF Royalty Free / start.png";
// Create image logo
var = PAUSE new new image ();
pause.src = "images / game_pause_nor.png";
var {obj =
IMG,
width: 480,
height: 852,
}
function the BG (A) {
this.width = obj.width;
this.height = obj.height;
in this.x = 0;
this.y from = 0;
this.x1 = 0;
this.y1 = -obj.height;
// draw a picture
this.Bg = function () {
cxt.drawImage (obj.img, in this.x, this.y from);
cxt.drawImage (obj.img, this.x1, this.y1);
}
// controlling a moving distance and allow seamless image
= function this.step () {
this.y from ++;
this.y1 ++;
IF (== this.y from obj.height) {// when the first picture is moved to the lowermost when
this.y = -obj.height / / let the height of the first picture becomes negative FIG height
}
IF (this.y1 == obj.height) {// Similarly
this.y1 = -obj.height
}
}

}
var = new new _bg the BG (obj );

Welcome to this stage of the game to complete the first phase but also in fact no difficulty, mainly, rolling our background image, we can be done by means of ideological carousel figure, we change the y-axis of the picture on it, the first a picture on the canvas above them into another canvas, allowing two pictures pictures y-axis simultaneous Gaga, when the first pictures come under the canvas of the zero point of the border, let the first FIG, into the canvas top, FIG Similarly another;

The second stage : the preparation phase of the game

The effect is as follows:

This picture looked simple, very simple indeed, a little bit less likely to understand, is how to make the following small plane loaded him, and move, and this is the focus of this section, he is actually moving up from a visual effects we write the code will know.

//第二阶段开始
var loading = [];
loading[0] = new Image();
loading[0].src = "images/game_loading1.png";
loading[1] = new Image();
loading[1].src = "images/game_loading2.png";
loading[2] = new Image();
loading[2].src = "images/game_loading3.png";
loading[3] = new Image();
loading[3].src = "images/game_loading4.png";
//前面的是获取所有的图片
var LOAD = {//并把相同的属性放到一个对象中
imgs:loading,
width:186,
height:38,
length:loading.length,
}
function Loading(a){
//根据下标来加
this.index = 0;
this.width = a.width;
this.height = a.height;
this.length =a.length;
this.imgs = a.imgs;
//绘制图片
this.loads = function(){
// cxt.drawImage(b.imgs[this.index],(WIDTH-b.width)/2-50,HEIGHT-b.height);
cxt.drawImage(this.imgs[this.index],10,HEIGHT-this.height);
//开始绘图
}
//定义一个速度，因为不定义一个速度，图片变换的速度太快
this.speed = 0 ;
//定义一个速度的方法
this.step = function(){
//让这个速度自加
this.speed++;
if(this.speed % 5 == 0){//软和进行判断
this.index++;//当判断为true的时候就进行图片的切换
}

if(this.index == a.length){//图片切换到最后一张的时候
state = 2;//就让当前得状态变成游戏运行状态
}
}
this.wen = function(){//定义一个文字的方法
cxt.font="bold 30px 宋体";
cxt.fillText("score:"+score,10,30);
cxt.fillText("life:"+life,370,30);
}
}
var loadings = new Loading(LOAD);
canvas.addEventListener("click",function(){//给画布绑定一个单击事件
if(state === START ){//并进行判断当前状态，如果当前状态为游戏欢迎状态
state = LOADING;//就触发事件，让此时的状态变为游戏加载状态
}
});

加载的过程其实就是几张图片就行的切换，这里面还有一个单机事件，就是当我们单机一下画布就进入到第二阶段，此时就对页面的状态判断就行了；

第三阶段：游戏开始阶段

效果图：

实现代码如下：

this.index++;//飞机就切换下一张图
// console.log(this.index++);
if(this.index==hero.length){//当切换到最后一张图的时候
life--;生命值就减一
if(life==0){//进行判断，当前的生命值等于0是，游戏就结束了
state = GAMEOVER;
this.index = this.length-1;//并让倒数第二张图保留在原地
}else{
heros = new Hero(HERO);//否者就重新绘制我放飞机
}
}
}
}

this.time = 0;
//增加射击的方法
this.shoot = function(){
this.time++;
if(this.time%3==0){//挡我的定时器执行3的倍数次
bulletss.push(new Bullet(BULLET));//就进行下一颗子弹的绘制
}
}

this.bang = function(){//为我方定义一个撞击方法
this.dwon = true;
}

}
var heros = new Hero(HERO);
//绑定我方飞机移动事件
canvas.onmousemove=function(event){
if(state==RUNNING){
var x = event.offsetX;
var y =event.offsetY;
heros.x = x-heros.width/2;
heros.y = y-heros.height/2;
}
if(state==PAUSE){
state=RUNNING
}
}
canvas.onmouseout = function(e){//移出游戏就暂停，这应该是第四阶段的
if (state == RUNNING) {
state =PAUSE;
}
}

//绘制子弹
var bullet = new Image();
bullet.src = "images/bullet1.png";
var BULLET = {
imgs:bullet,
width:9,
height:21,
}

function Bullet(a){
this.x = heros.x + heros.width/2 - a.width/2;
this.y = heros.y-a.height;
this.width = a.width;
this.height = a.height;
this.paint = function(){
cxt.drawImage(a.imgs,this.x,this.y);
}
this.step1=function(){
this.y-=10;
}
this.candel = false;
// 新增方法 - 用于处理撞击后的逻辑
this.bang = function(){
this.candel = true;
}
}

var bullets =new Bullet(BULLET);
var bulletss = [];//创建一个数组来存放子弹，（弹药库）
function bulletsPanit(){
for(var i =0;i<bulletss.length;i++){
bulletss[i].paint();//不停地绘制子弹
}
}

function bulletsPanit1(){
for(var i =0;i<bulletss.length;i++){
bulletss[i].step1();//绘制出来的子弹，速度也要和其他子弹一样
}

}

this.paint1 = function(){//绘制敌方飞机
cxt.drawImage(a.imgs[this.index],this.x,this.y);
}

this.step1 = function(){//敌方飞机的运动方法
if(!this.dwon){//在没有被撞击的情况下
this.index++;
this.index = this.index%this.frame;//小飞机和中飞机下标都是0，只有大飞机的下标是0和1切换
this.y+=2;
}else{
this.index++;
if(this.index == this.length){
this.candel = true;
this.index = this.length-1;
}
}
}

this.checkHit = function(wo){找到我放飞机和子弹是否到地方飞机的的范围
// 参数wo - 1)我方飞机;2)子弹
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;
}

this.bang = function(){//敌方飞机的陪碰撞事件
this.life--;//敌方飞机生命减减
if(this.life == 0){//当生命值为0的时候
this.dwon = true;
score += this.score;我们的分数加
}
}
}
var denemys=new Denemy(DENEMY);

var dfilt = [];//创建空数组，用来装敌方飞机
var temp = 0//创建一个变量
function fun(){
temp++;//让这个变量自加
if(temp%10==0){//让定时器走10次在创建新飞机
dfilt.push(new Denemy(ENEMY));
}

if (temp % 200 == 0) {//让定时器走200次在创建新飞机
dfilt.push(new Denemy(ZENEMY))
}

if (temp % 500 == 0) {//让定时器走500次在创建新飞机
dfilt.push(new Denemy(DENEMY))
}
}

//创建一个函数用于检查撞击情况
function zj(){//敌方飞机和我方子弹的撞击情况
for(var i=0;i<dfilt.length;i++){
if(dfilt[i].checkHit(heros)){
dfilt[i].bang();
heros.bang();
}
for(var j = 0;j<bulletss.length;j++){
if(dfilt[i].checkHit(bulletss[j])){
dfilt[i].bang();
bulletss[j].bang();
}
}
}
}

效果图

第四阶段：游戏暂停阶段

暂停的事件我放到上面写了

第五阶段：游戏结束阶段

function over(){
cxt.font = "bold 48px 微软雅黑";
cxt.fillText("GAME OVER",100,320);
}

根据自己的喜好进行设置

这个游戏最重要的部分就是第三阶段，也是核心阶段

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
text-align: center;
}
canvas{
border: 1px solid;
}
</style>
</head>
<body>
<canvas id="canvas" width="480" height="650"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
// 第一阶段：游戏欢迎状态
const START=0;
// 第二阶段：游戏加载状态
const LOADING=1;
// 第三阶段：游戏运行状态
const RUNNING=2;
// 第四阶段：游戏暂停阶段
const PAUSE=3;
// 第五阶段：游戏结束阶段
const GAMEOVER=4;
//定义游戏得分
var score = 0;
//定义生命值
var life = 3;
//定义一个开关
var state=0 ;
//获取当前的宽高
var WIDTH = 480;
var HEIGHT = 650;
//获取背景图片
var img = new Image();
img.src = "images/background.png";
//创建logo图片
var logo = new Image();
logo.src = "images/start.png";
//创建logo图片
var pause = new Image();
pause.src = "images/game_pause_nor.png";
var obj = {
img,
width:480,
height:852,
}
function BG(a){
this.width = obj.width;
this.height = obj.height;
this.x =0;
this.y = 0;
this.x1 = 0;
this.y1 = -obj.height;
//绘制图片
this.Bg = function(){
cxt.drawImage(obj.img,this.x,this.y);
cxt.drawImage(obj.img,this.x1,this.y1);
}
//控制移动距离并让图片无缝连接
this.step = function(){
this.y++;
this.y1++;
if(this.y==obj.height){//当第一张图片运动到最底下的时候
this.y =-obj.height//就让第一张图图片的高度变成负的高度
}
if(this.y1==obj.height){//同理
this.y1 =-obj.height
}
}

}
var _bg = new BG(obj);

//第二阶段开始
var loading = [];
loading[0] = new Image();
loading[0].src = "images/game_loading1.png";
loading[1] = new Image();
loading[1].src = "images/game_loading2.png";
loading[2] = new Image();
loading[2].src = "images/game_loading3.png";
loading[3] = new Image();
loading[3].src = "images/game_loading4.png";
//前面的是获取所有的图片
var LOAD = {//并把相同的属性放到一个对象中
imgs:loading,
width:186,
height:38,
length:loading.length,
}
function Loading(a){
//根据下标来加
this.index = 0;
this.width = a.width;
this.height = a.height;
this.length =a.length;
this.imgs = a.imgs;
//绘制图片
this.loads = function(){
// cxt.drawImage(b.imgs[this.index],(WIDTH-b.width)/2-50,HEIGHT-b.height);
cxt.drawImage(this.imgs[this.index],10,HEIGHT-this.height);
//开始绘图
}
//定义一个速度，因为不定义一个速度，图片变换的速度太快
this.speed = 0 ;
//定义一个速度的方法
this.step = function(){
//让这个速度自加
this.speed++;
if(this.speed % 5 == 0){//软和进行判断
this.index++;//当判断为true的时候就进行图片的切换
}

//第三阶段游戏运行阶段
var hero =[];
hero[0] = new Image;
hero[0].src = "images/hero1.png";
hero[1] = new Image;
hero[1].src = "images/hero2.png";
hero[2] = new Image();
hero[2].src = "images/hero_blowup_n1.png";
hero[3] = new Image();
hero[3].src = "images/hero_blowup_n2.png";
hero[4] = new Image();
hero[4].src = "images/hero_blowup_n3.png";
hero[5] = new Image();
hero[5].src = "images/hero_blowup_n4.png";
//获取游戏运行阶段的所有的图片
var HERO = {
imgs:hero,
width:99,
height:124,
length:hero.length,
frame:2,
}
function Hero(a){
this.width = a.width;
this.height = a.height;
this.x = (WIDTH-a.width)/2;
this.y = HEIGHT-a.height;
this.dwon =false;//用来判断当前是否被撞击，当前没有被撞击
this.index = 0;
this.length = a.length;
this.candel = false;
//并获取当前先相应的值
this.plot=function(){
cxt.drawImage(a.imgs[this.index],this.x,this.y);
//并开始绘制当前得图片
}
//获取运动的方法
this.step = function(){
if(!this.dwon){//进行判断，当前没有被撞击时，要让这个飞机有动态效果，就要就行两张图的切换
if(this.index==0){
this.index =1;
}else{
this.index = 0
}
}else{//否者

this.index++;//飞机就切换下一张图
// console.log(this.index++);
if(this.index==hero.length){//当切换
life--
if(life==0){
state = GAMEOVER;
this.index = this.length-1;
}else{
heros = new Hero(HERO);
}
}
}
}

this.time = 0;
//增加子弹的方法
this.shoot = function(){
this.time++;
if(this.time%3==0){
bulletss.push(new Bullet(BULLET));
}
}

this.bang = function(){
this.dwon = true;
}

//绘制子弹
var bullet = new Image();
bullet.src = "images/bullet1.png";
var BULLET = {
imgs:bullet,
width:9,
height:21,
}

function Bullet(a){
this.x = heros.x + heros.width/2 - a.width/2;
this.y = heros.y-a.height;
this.width = a.width;
this.height = a.height;
this.paint = function(){
cxt.drawImage(a.imgs,this.x,this.y);
// console.log(this.x,this.y);
}
this.step1=function(){
this.y-=10;
}
this.candel = false;
// 新增方法 - 用于处理撞击后的逻辑
this.bang = function(){
this.candel = true;
}
}

var bullets =new Bullet(BULLET);
var bulletss = [];
function bulletsPanit(){
for(var i =0;i<bulletss.length;i++){
bulletss[i].paint();
}
}

function bulletsPanit1(){
for(var i =0;i<bulletss.length;i++){
bulletss[i].step1();
}

}

this.paint1 = function(){
cxt.drawImage(a.imgs[this.index],this.x,this.y);
}

this.step1 = function(){
if(!this.dwon){
this.index++;
this.index = this.index%this.frame;
this.y+=2;
}else{
this.index++;
if(this.index == this.length){
this.candel = true;
this.index = this.length-1;
}
}
}

this.checkHit = function(wo){
// 参数wo - 1)我方飞机;2)子弹
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;
}

this.bang = function(){
this.life--;
if(this.life == 0){
this.dwon = true;
score += this.score;
}
}
}
var denemys=new Denemy(DENEMY);

var dfilt = [];
var temp = 0
function fun(){
temp++;
if(temp%10==0){
dfilt.push(new Denemy(ENEMY));
}

if (temp % 200 == 0) {
dfilt.push(new Denemy(ZENEMY))
}

if (temp % 500 == 0) {
dfilt.push(new Denemy(DENEMY))
}
}

//创建一个函数用于检查撞击情况
function zj(){
for(var i=0;i<dfilt.length;i++){
if(dfilt[i].checkHit(heros)){
dfilt[i].bang();
heros.bang();
}
for(var j = 0;j<bulletss.length;j++){
if(dfilt[i].checkHit(bulletss[j])){
dfilt[i].bang();
bulletss[j].bang();
}
}
}
}
//第四阶段
var pause = new Image();
pause.src = "images/game_pause_nor.png";
var PAUSES = {
imgs:pause,
width:60,
height:45,
}
function Pause(a){
this.width = a.width;
this.height = a.height;
this.x=WIDTH/2-this.width/2;
this.y = HEIGHT/2-this.height/2;
this.paint = function(){
cxt.drawImage(a.imgs,this.x,this.y);
}
}
var pauses = new Pause(PAUSES);

Write aircraft battle with the canvas

Guess you like