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

canvas实现太空飞船射击类游戏ASTEROIDS代码

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