忙里偷闲，让UI小伙伴帮忙搞了几个图片元素，利用飞机大战代码进行修改，做个接金币小游戏～
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imgWidth = window.innerWidth;
var imgHeight = window.innerHeight;
canvas.setAttribute('width',imgWidth);
canvas.setAttribute('height',imgHeight-8);
const START = 0;
const STARTTING = 1;
const RUNNING = 2;
const PAUSED = 3;
const GAMEOVER = 4;
var state = START;
const WIDTH = canvas.width;
const HEIGHT = canvas.height;
var life = 1;
var score = 0;
var countdown=3100; //定义总的倒计时时长
var bg = new Image();
bg.src = "img/background1.png"; //初始背景图片
var SKY = {
imgs : bg,
width : imgWidth,
height : imgHeight
}
function Sky(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
this.time = 0;
this.paint = function(){
context.drawImage(this.imgs,0,0,imgWidth,imgHeight);
}
this.step = function(){
this.time++;
}
}
var sky = new Sky(SKY);
var logo = new Image(); //加载游戏logo
logo.src = "img/game-name1.png";
canvas.onclick = function(){
if(state == START){
state = STARTTING;
}
}
var loadings = []; //加载动画
loadings[0] = new Image();
loadings[0].src = "img/run1.png";
loadings[1] = new Image();
loadings[1].src = "img/run2.png";
loadings[2] = new Image();
loadings[2].src = "img/run3.png";
loadings[3] = new Image();
loadings[3].src = "img/run4.png";
var LOADING = {
imgs : loadings,
width : 320,
height : 72,
sum : loadings.length
}
function Loading(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
this.sum = config.sum;
this.index = 0;
this.time = 0;
this.paint = function(){
context.drawImage(this.imgs[this.index],0,HEIGHT-this.height-20);
}
this.step = function(){
this.time++;
if(this.time%20==0){
this.index++;
}
if(this.index == this.sum){
state = RUNNING;
}
}
}
var loading = new Loading(LOADING);
var heros = [];
heros[0] = new Image();
heros[0].src = "img/pople3.png";
heros[1] = new Image();
heros[1].src = "img/pople3.png";
heros[2] = new Image();
heros[2].src = "img/pople1.png";
heros[3] = new Image();
heros[3].src = "img/pople2.png";
var HERO = {
imgs : heros,
width : 78,
height : 109,
sum : heros.length,
length : 2
}
function Hero(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
this.sum = config.sum;
this.index = 0;
this.x = (WIDTH-this.width)/2;
this.y = HEIGHT-this.height-20;
this.down = false;
this.length = config.length;
this.paint = function(){
context.drawImage(this.imgs[this.index],this.x,this.y);
}
this.step = function(){
if(this.down){
this.index++;
if(this.index == this.sum){
state = GAMEOVER;
this.index = this.sum-1;
}
}else{
this.index++;
this.index = this.index%2;
}
}
this.bang = function(){
this.down = true;
this.index = this.length;
}
}
var hero = new Hero(HERO);
canvas.addEventListener('touchstart',function(e){
var touch = e.touches[0], posX = touch.clientX - 39;
if(state == RUNNING){
e.preventDefault();
hero.x = posX;
}
},false);
canvas.addEventListener('touchmove',function(e){
e.preventDefault();
var touch = e.touches[0], posX = touch.clientX - 39;
if(state == RUNNING){
hero.x = posX;
}
},false)
var enemies1 = [];
enemies1[0] = new Image();
enemies1[0].src = "img/cion-1.png";
enemies1[1] = new Image();
enemies1[1].src = "img/cion-2.png";
enemies1[2] = new Image();
enemies1[2].src = "img/cion-3.png";
enemies1[3] = new Image();
enemies1[3].src = "img/cion-4.png";
enemies1[4] = new Image();
enemies1[4].src = "img/+2-1.png";
enemies1[5] = new Image();
enemies1[5].src = "img/+2-2.png";
var enemies2 = [];
enemies2[0] = new Image();
enemies2[0].src = "img/red1.png";
enemies2[1] = new Image();
enemies2[1].src = "img/red2.png";
enemies2[2] = new Image();
enemies2[2].src = "img/red2.png";
enemies2[3] = new Image();
enemies2[3].src = "img/red2.png";
enemies2[4] = new Image();
enemies2[4].src = "img/+5-1.png";
enemies2[5] = new Image();
enemies2[5].src = "img/+5-1.png";
enemies2[6] = new Image();
enemies2[6].src = "img/+5-1.png";
enemies2[7] = new Image();
enemies2[7].src = "img/+5-2.png";
var enemies3 = [];
enemies3[0] = new Image();
enemies3[0].src = "img/boom1.png";
enemies3[1] = new Image();
enemies3[1].src = "img/boom2.png";
enemies3[2] = new Image();
enemies3[2].src = "img/boom3.png";
enemies3[3] = new Image();
enemies3[3].src = "img/pow.png";
enemies3[4] = new Image();
enemies3[4].src = "img/pow.png";
enemies3[5] = new Image();
enemies3[5].src = "img/pow.png";
enemies3[6] = new Image();
enemies3[6].src = "img/-10-1.png";
enemies3[7] = new Image();
enemies3[7].src = "img/-10-1.png";
enemies3[8] = new Image();
enemies3[8].src = "img/-10-2.png";
var ENEMY1 = {
imgs : enemies1,
width : 33,
height : 39,
sum : enemies1.length,
length : 1,
type : 0,
life : 1,
score : 2
}
var ENEMY2 = {
imgs : enemies2,
width : 41,
height : 58,
sum : enemies2.length,
length : 1,
type : 1,
life : 1,
score : 5
}
var ENEMY3 = {
imgs : enemies3,
width : 48,
height : 48,
sum : enemies3.length,
length : 3,
type : 2,
life : 1,
score : -10
}
function Enemy(config){
this.imgs = config.imgs;
this.width = config.width;
this.height = config.height;
this.sum = config.sum;
this.type = config.type;
this.life = config.life;
this.x = Math.random() * (WIDTH - this.width);
this.y = -this.height;
this.time = 0;
this.index = 0;
this.down = false;
this.canDelete = false;
this.length = config.length;
this.score = config.score;
this.paint = function(){
context.drawImage(this.imgs[this.index],this.x,this.y);
}
this.step = function(){ //可以通过元素运动速度控制难易程度this.y++
if(this.down){
this.time++;
if(this.time%5==0){
this.index++;
}
if(this.index == this.sum){
this.canDelete = true;
this.index = this.sum-1;
score += this.score;
if(score <= 0){
score = 0;
}
}
if(this.score == -10){ //碰到炸弹就嗝屁
countdown = 0;
}
}else{
this.time++;
switch (this.type){
case 0:
this.y+=0.8;
break;
case 1:
if(this.time%2==0){
this.y+=2;
}
break;
case 2:
this.index++;
this.index = this.index%2;
if(this.time%5==0){
this.y+=8;
}
break;
}
}
}
this.hit = function(compant){
return compant.x + compant.width > this.x &&
compant.y < this.y + this.height &&
compant.x < this.x + this.width &&
compant.y + hero.height > this.y;
}
this.bang = function(){
this.life--;
if(this.life == 0){
this.down = true;
this.index = this.length;
}
}
}
var enemies = [];
function createEmeies(){ //控制不同元素出现的概率
var num = Math.floor(Math.random()*100);
if(num <= 60){
var enemy = new Enemy(ENEMY1);
enemies[enemies.length] = enemy;
}else if(num < 75){
var enemy = new Enemy(ENEMY2);
enemies[enemies.length] = enemy;
}else{
if(enemies.length > 0 && enemies[0].type != 2){
var enemy = new Enemy(ENEMY3);
enemies[enemies.length] = enemy;
// enemies.splice(0,0,enemy); //控制炸弹数量
}
}
}
function paintEnemies(){
for(var i=0;i<enemies.length;i++){
enemies[i].paint();
}
}
function stepEnemies(){
for(var i=0;i<enemies.length;i++){
enemies[i].step();
}
}
function delEnemies(){
for(var i=0;i<enemies.length;i++){
if(enemies[i].y > HEIGHT || enemies[i].canDelete){
enemies.splice(i,1);
}
}
}
function checkHit(){
for(var i=0;i<enemies.length;i++){
var enemy = enemies[i];
if(enemy.hit(hero)){
if(!enemy.down && !hero.down){
enemy.bang();
// hero.bang();
}
}
}
}
function paintText(){
countdown--; //显示时间倒计时
if(countdown <= 0){
countdown = 0;
}
context.font = "bold 20px 微软雅黑";
context.fillText("SCORE: "+score,10,30);
context.fillText("TIME: "+Math.floor(countdown/100),10,60);
// Math.floor(countdown/100) //倒计时以秒计算
}
canvas.onmouseover = function(){
if(state == PAUSED){
state = RUNNING;
}
}
canvas.onmouseout = function(){
if(state == RUNNING){
state = PAUSED;
}
}
var paused = new Image();
paused.src = "";
function gameOver(){
context.font = "bold 48px 微软雅黑";
context.fillText("GAME OVER",WIDTH/2-130,HEIGHT/2-30);
context.font = "bold 32px 微软雅黑";
context.fillText("你的得分:"+score,WIDTH/2-75,HEIGHT/2+40);
}
var time = 0;
setInterval(function(){
sky.paint();
sky.step();
switch (state){
case START:
context.drawImage(logo,0,0,imgWidth,imgHeight);
break;
case STARTTING:
loading.paint();
loading.step();
break;
case RUNNING:
hero.paint();
hero.step();
time++;
if(time%50==0){
createEmeies();
}
paintEnemies();
stepEnemies();
delEnemies();
checkHit();
paintText();
// console.info(time); //控制游戏总时长
if(countdown == 0){
state = GAMEOVER;
}
break;
case PAUSED:
hero.paint();
paintEnemies();
paintText();
context.drawImage(paused,WIDTH/2-30,HEIGHT/2-22.5);
break;
case GAMEOVER:
hero.paint();
paintEnemies();
paintText();
gameOver();
//可添加游戏结束的动作
break;
}
},10);
以上是主要代码，效果如下：
ps: 完整代码以及其他一些资源可以在微信小程序 “工具百宝汇”中获取下载
标签：src,canvas,img,Image,js,小游戏,var,new,png From： https://www.cnblogs.com/Immortal-brother/p/17692953.html