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

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

代码语言：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 < 2.........完整代码请登录后点击上方下载按钮下载查看