canvas实现太空飞船射击类游戏ASTEROIDS代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：canvas实现太空飞船射击类游戏ASTEROIDS代码，鼠标移动控制飞船，鼠标左键单击射击。

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

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

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  
  
  
<style>
* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #000000;
    color: #fff;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
canvas {
    cursor: crosshair;
    position: absolute;
}

a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

#menu {
    position: absolute;
    top: 50%;
    margin-top: -45px;
    text-align: center;
    width: 100%;
}

#start {
    font-size: 20px;
    font-weight: bold;
}

#title {
    font-size: 24px;
    margin-bottom: 15px;
}

#message {
    font-size: 14px;
    margin-bottom: 30px;
}

a#tweet {
    color: white;
    font-size: 11px;
    display: inline-block;
    margin-top: 15px;
    padding: 5px 10px;
    background-color: transparent;
    border: 1px solid white;
}

a#tweet:hover {
    color: black;
    background-color: white;
}

#hud {
    position: absolute;
    top: 10px;
    left: 10px;
    list-style: none;
}

#menu, #hud {
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
}

#hud li.score {
    width: 120px;
    overflow: hidden;
}

#hud li {
    float: left;
    margin-right: 20px;
}
</style>


  
  
</head>

<body >
  <div id='container'>
    <canvas id='c'></canvas>
    <ul id='hud'>
        <li class='score'>SCORE: <span id='score'>0</span></li>
        <li>WEPON: <span id='wepon'>NORMAL BEAM</span></li>
    </ul>
    <div id='menu'>
        <h2 id='title'></h2>
        <div id='message'></div>
        <a href='#' id='start'>START</a>
    </div>
</div>


  
      <script  >
// Machine translation because I'm not good at English!

//------------------------------------
// CONFIG
//------------------------------------

// デフォルトの武器
// Default weapon
var WEPON_DEFAULT = {
  // 武器の名前
  // Weapon name
  name: 'NORMAL BEAM',
  // 与えるダメージ 0~1
  // Damage dealt 0 ~ 1
  power: 0.3,
  // 弾のスピード
  // Bullet speed
  speed: 3,
  // 弾の長さ
  // Bullet length
  length: 10,
  // 弾の幅
  // Bullet width
  width: 1,
  // 弾の色, 特殊武器の場合アイテムの色に反映される, CSS カラーで指定
  // The color of the bullet, in the case of special weapons, reflected in the color of the item, specified by CSS color
  color: 'white',
  // 連射速度
  // Fire rate
  shootingInterval: 1000 * 0.35,
  // 貫通弾か示す
  // true の場合着弾しても消滅しない
  // explosion を指定した場合はそちらが優先される
  // Indicates whether the bullet
  // If true, will not disappear even if it lands
  // If explosion is specified, it takes precedence.
  through: false,
  // 爆発による着弾後の範囲攻撃
  // 以下のプロパティを持つオブジェクトで指定する
  // { range: 爆発範囲, speed: 爆発の速度 }
  // * 範囲攻撃の威力は武器の基本威力の半分
  // Range attack after landing due to explosion
  // Specify with an object that has the following properties:
  // { range: Explosion range, speed: Explosion speed }
  // * The power of range attacks is half the basic power of weapons
  explosion: false };


// 特殊武器の配列, UFO を撃破するとランダムで出現する
// Special weapon array, Randomly appear when you destroy a UFO
var WEPON_SPECIAL = [
{
  name: 'TINY BEAM',
  power: 0.1,
  speed: 10,
  length: 5,
  width: 1,
  color: 'rgb(131, 224, 8)',
  shootingInterval: 1000 * 0.1,
  through: false,
  explosion: false },

{
  name: 'BLASTER',
  power: 1,
  speed: 3,
  length: 15,
  width: 3,
  color: 'rgb(244, 0, 122)',
  shootingInterval: 1000 * 0.3,
  through: false,
  explosion: false },

{
  name: 'LASER',
  power: 0.2,
  speed: 35,
  length: 200,
  width: 2,
  color: 'rgb(138, 227, 252)',
  shootingInterval: 1000 * 0.6,
  through: true,
  explosion: false },

{
  name: 'EXPLOSION BEAM',
  power: 0.15,
  speed: 15,
  length: 10,
  width: 2,
  color: 'rgb(255, 153, 0)',
  shootingInterval: 1000 * 0.5,
  through: false,
  explosion: {
    range: 100,
    speed: 4.5 } }

/*
,{
 name: 'INSANE BEAM',
 power: 0.035,
 speed: 7.5,
 length: 5,
 color: 'rgb(255, 246, 0)',
 width: 2,
 shootingInterval: 1000 * 0.015,
 through: true,
 explosion: false,
explosion: {
	range: 75,
	speed: 2
}
}//*/];


var ASTEROID_MAX_SIZE = 80; // 小惑星の最大サイズ
var ASTEROID_MIN_SIZE = 5; // 小惑星の最小サイズ
var ASTEROID_MAX_NUM = 75; // 小惑星の最大数
var ASTEROID_SPAWN_TIME = 350; // 小惑星の復活時間
var SHIP_SPEED = 1.5; // 自機のスピード
var UFO_SPEED = 2; // UFO のスピード
var ITEM_SPEED = 0.5; // アイテムのスピード

// UFO の出現率 0~1
var UFO_INCIDENCE = 0.0035;

// 特殊武器の持続時間
var SPECIAL_WEPON_TIME = 1000 * 20;

// 各種スコア
var SCORE = {
  ASTEROID_DAMAGE: 10,
  ASTEROID_DESTROY: 50,
  UFO_DAMAGE: 0,
  UFO_DESTROY: 300 };


//------------------------------------
// CONSTANTS
//------------------------------------

var PI = Math.PI;
var TWO_PI = PI * 2;
var DEG_TO_RAD = PI / 180;
var FPS = 60;

//------------------------------------
// VARS
//------------------------------------

var canvas;
var canvasWidth;
var canvasHeight;
var context;
var mouse;
var isMouseDown = false;
var ship; // Ship
var beams; // Collection of Beam
var asteroids; // Collection of Asteroid
var splinters; // Collection of Splinter
var debris; // Collection of Debri
var ufo; // Ufo
var item; // Item
var asteroidLastSpawn = 0; // 小惑星が最後に復活した時間
var ufoLastSpawn = 0; // UFO が最後に復活した時間
var debriLastSpawn = 0; // 背景の星屑が最後に出現した時間
var fieldRange; // フィールドの範囲
var score = 0; // スコア
var isPlay = false; // ゲームが開始されているか示す
var dom = {
  menu: null,
  title: null,
  message: null,
  tweet: null,
  start: null,
  score: null,
  wepon: null };



//---------------------------------.........完整代码请登录后点击上方下载按钮下载查看