js实现一个canvas鼠标防御战小游戏效果代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现一个canvas鼠标防御战小游戏效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body {background:#000000;margin:0;padding:0}

canvas {background:#ecf0f1;}
</style>



</head>


<body onresize='_pexresize()'>

	<canvas id='canvas' width=1280 height=720></canvas>




  
      <script >
"use strict";
var stage = {
  w: 1280,
  h: 720 };


var _pexcanvas = document.getElementById("canvas");
_pexcanvas.width = stage.w;
_pexcanvas.height = stage.h;
var ctx = _pexcanvas.getContext("2d");




var pointer = {
  x: 0,
  y: 0 };


var scale = 1;
var portrait = true;
var loffset = 0;
var toffset = 0;
var mxpos = 0;
var mypos = 0;


// ------------------------------------------------------------------------------- Gamy
function drawArrow(fromx, fromy, tox, toy, lw, hlen, color) {
  var dx = tox - fromx;
  var dy = toy - fromy;
  var angle = Math.atan2(dy, dx);
  ctx.fillStyle = color;
  ctx.strokeStyle = color;
  ctx.lineCap = "round";
  ctx.lineWidth = lw;
  ctx.beginPath();
  ctx.moveTo(fromx, fromy);
  ctx.lineTo(tox, toy);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(tox, toy);
  ctx.lineTo(tox - hlen * Math.cos(angle - Math.PI / 6), toy - hlen * Math.sin(angle - Math.PI / 6));
  ctx.lineTo(tox - hlen * Math.cos(angle) / 2, toy - hlen * Math.sin(angle) / 2);
  ctx.lineTo(tox - hlen * Math.cos(angle + Math.PI / 6), toy - hlen * Math.sin(angle + Math.PI / 6));
  ctx.closePath();
  ctx.stroke();
  ctx.fill();
}




var colors = ['#1abc9c', '#1abc9c', '#3498db', '#9b59b6', '#34495e', '#16a085', '#27ae60', '#2980b9', '#8e44ad', '#2c3e50', '#f1c40f', '#e67e22', '#e74c3c', '#95a5a6', '#f39c12', '#d35400', '#c0392b', '#bdc3c7', '#7f8c8d'];


ctx.clearRect(0, 0, stage.w, stage.h);
for (var i = 0; i < 200; i++) {
  var angle = Math.random() * Math.PI * 2;
  var length = Math.random() * 250 + 50;
  var myx = 360 + Math.sin(angle) * length;
  var myy = 360 - Math.cos(angle) * length;
  drawArrow(myx, myy, myx + length / 6 * Math.sin(angle), myy - length / 6 * Math.cos(angle), length / 30, length / 30, '#c0392b');
}
var explode = new Image();
explode.src = canvas.toDataURL("image/png");

ctx.clearRect(0, 0, stage.w, stage.h);
for (var i = 0; i < 200; i++) {
  var angle = Math.random() * Math.PI - Math.PI / 2;
  var length = Math.random() * 480 + 50;
  var myx = stage.w / 2 + Math.sin(angle) * length;
  var myy = stage.h - Math.cos(angle) * length;
  drawArrow(myx, myy, myx + length / 6 * Math.sin(angle), myy - length / 6 * Math.cos(angle), length / 30, length / 30, '#2c3e50');
}
var explodeb = new Image();
explodeb.src = canvas.toDataURL("image/png");


ctx.clearRect(0, 0, stage.w, stage.h);
ctx.fillStyle = "rgba(236,240,241,1)";
ctx.fillRect(0, 0, stage.w, stage.h);
for (var i = 0; i < 200; i++) {
  var angle = Math.random() * Math.PI / Math.PI * 180;
  var length = Math.random() * 250 + 50;
  var myx = Math.random() * stage.w;
  var myy = Math.random() * stage.h;
  drawArrow(myx, myy, myx + length / 6 * Math.sin(angle), myy - length / 6 * Math.cos(angle), length / 30, length / 30, colors[Math.floor(Math.random() * colors.length)]);
}

ctx.fillStyle = "rgba(236,240,241,0.9)";
ctx.fillRect(0, 0, stage.w, stage.h);
var back = new Image();
back.src = canvas.toDataURL("image/png");

var angle = 0;
var ai = true;
var ait = 0;
var btm = 0;
var bullets = [];

function Bullet() {
  this.x = stage.w / 2 - Math.sin(angle) * 150;
  this.y = stage.h - Math.cos(angle) * 150;
  this.r = angle;
}

var enemies = [];
function Enemy() {
  this.r = Math.random() * Math.PI / (2.5 / 2) - Math.PI / 2.5;
  this.dis = Math.random() * 1280 + 720;
  this.x = stage.w / 2 - Math.sin(this.r) * this.dis;
  this.y = stage.h - Math.cos(this.r) * this.dis;
}
for (var i = 0; i < 10; i++) {
  enemies.push(new Enemy());

  enemies[i].x += Math.sin(enemies[i].r) * 300;
  enemies[i].y += Math.cos(enemies[i].r) * 300;
}



var explosions = [];
function Explosion(x, y, ty) {
  this.x = x;
  this.y = y;
  this.t = 30;
  this.ty = ty;
}

var eturn = 0;
var cold = [];
function enginestep() {

  ctx.drawImage(back, 0, 0);
  if (!ai && ait < Date.now() - 3000) {
    ai = true;
  }
  btm++;
  if (btm > 8) {
    btm = 0;
    bullets.push(new Bullet());
  }

  for (var i = 0; i < bullets.length; i++) {
    bullets[i].x -= Math.sin(bullets[i].r) * 20;
    bullets[i].y -= Math.cos(bullets[i].r) * 20;
    drawArrow(bullets[i].x + Math.sin(bullets[i].r) * 50, bullets[i].y + Math.cos(bullets[i].r) * 50, bullets[i].x, bullets[i].y, 8, 8, '#2980b9');
    if (bullets[i].x < -100 || bullets[i].x > stage.w + 100) {
      bullets.splice(i, 1);
    }
    if (bullets[i].y < -100 || bullets[i].y > stage.h + 100) {
      bullets.splice(i, 1);
    }

  }


  for (var i = 0; i < enemies.length; i++) {
    enemies[i].x += Math.sin(enemies[i].r) * 3;
    enemies[i].y += Math.cos(enemies[i].r) * 3;
    drawArrow(enemies[i].x - Math.sin(enemies[i].r) * 100, enemies[i].y - Math.cos(enemies[i].r) * 100, enemies[i].x, enemies[i].y, 15, 15, "#c0392b");
    if (enemies[i].y > stage.h) {
      enemies[i] = new Enemy();
      explosions.push(new Explosion(stage.w / 2, stage.h, 2));
      shake = true;
      shaket = 0;
    }
    for (var b = 0; b < bullets.length; b++) {
      var dx = enemies[i].x - bullets[b].x;
      var dy = enemies[i].y - bullets[b].y;
      var dis = dx * dx + dy * dy;
      if (dis < 20 * 20) {
        explosions.push(new Explosion(enemies[i].x, enemies[i].y, 1));
        enemies[i] = new Enemy();
        bullets.splice(b, 1);
      }
    }
  }

  if (ai) {
    for (var l = 0; l < enemies.length; l++) {
      var dx = enemies[l].x - stage.w / 2;
      var dy = enemies[l].y - stage.h;
      var dis = Math.floor(Math.sqrt(dx * dx + dy * dy));
      var val1 = 100000 + dis;
      var val2 = 1000 + l;
 .........完整代码请登录后点击上方下载按钮下载查看