canvas实现防御类保护堆芯小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：canvas实现防御类保护堆芯小游戏代码，让绿色的点通行，增加堆芯大小，红色的要防御，否则会较少堆芯的大小，按住空格键会形成短暂的防护罩，但会消耗堆芯能量
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

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

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
        /*********************************************
         * GLOBAL
         *********************************************/
        
        body, html {
        	overflow: hidden;
        	font-family: Helvetica, Arial, sans-serif;
        	color: #fff;
        	font-size: 11px;
        	background: #010c12;
        }
        
        .no-canvas {
        	color: #999999;
        	font-size: 24px;
        	text-align: center;
        	margin-top: 150px;
        }
        
        
        /*********************************************
         * EXPERIMENT STYLES
         *********************************************/
        
        canvas {
        	border: 6px #333333 solid;
        	cursor: crosshair;
        	z-index: 1;
        }
        
        #background {
        	border: none;
        	z-index: 0;
        }
        
        .ui {
        	font-family: Arial, Helvetica, sans-serif;
        	font-size: 10px;
        	color: #999999;
        	text-align: left;
        	padding: 8px;
        	background-color: rgba(0,0,0,0.4);
        	float: left;
        }
        
        #status {
        	width: 884px;
        	height: 15px;
        	padding: 8px;
        	display: none;
        	position: absolute;
        	z-index: 2;
        }
        
        #status span {
        	color: #bbbbbb;
        	font-weight: bold;
        	margin-right: 5px;
        }
        
        #status .fps {
        	float: right;
        }
        
        #panels {
        	width: 100%;
        	position: absolute;
        	z-index: 3;
        }
        
        #message {
        	padding: 150px 300px 0 60px;
        	width: 100%;
        	height: 100%;
        	box-sizing: border-box;
        
        	font-family: "Montserrat", Helvetica, Arial, sans-serif;
        	font-size: 20px;
        	text-transform: uppercase;
        	line-height: 1.4;
        }
        
        #message .start-button {
        	display: inline-block;
        	padding: 10px 20px;
        	font-size: 2em;
        	font-family: inherit;
        	border-radius: 2px;
        	margin-top: 20px;
        	background-color: #eee;
        	color: #222;
        	font-size: 1.6em;
        	text-transform: inherit;
        	transition: all .18s linear;
        
        	outline: 0;
        	border: 0;
        	cursor: pointer;
        
        	-webkit-appearance: none;
        	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        
        #message .start-button:hover {
        	background-color: #fff;
        }
        
        #message p {
        	margin-bottom: 20px;
        }
        
        #message a {
        	color: #fff;
        	text-decoration: none;
        }
        
        #message a:hover {
        	text-decoration: underline;
        }
        
        .ui h2 {
        	margin-bottom: 20px;
        	color: #eeeeee;
        }
        
        .ui p em {
        	color: #f5f5f5;
        }
        
        .ui ol {
        	margin: 10px 0;
        	padding-left: 1em;
        }
        
        .ui ol li {
        	margin: 0 0 2px 0;
        	list-style: unset;
        }
        
        .ui a.external {
        	outline: none;
        	font-family: sans-serif;
        	font-size: 1em;
        	font-weight: bold;
        	text-decoration: none;
        	color: #bbbbbb;
        	display: inline;
        	padding: 0;
        }
        
        .ui a.external:hover {
        	color: #ffffff;
        }
        
        
        @media screen and (max-width: 600px) {
        	#message {
        		padding: 60px 40px;
        	}
        }
    </style>

    <link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">

</head>

<body>
    <div id="status" class="ui"></div>
    <div id="panels">
        <div id="message" class="ui">
            <h2 id="title">保护核心</h2>
            <p>
               保护堆芯不受红色射弹的影响。让绿色的通过。按下并按住临时屏蔽的空间。
               按下并按住临时屏蔽的空.
            </p>

            <button id="startButton" class="start-button">开始游戏</button>
        </div>
    </div>

    <canvas id="world">
			<p class="no-canvas">
				You need a <a href="https://www.google.com/chrome">modern browser</a> to view this.
			</p>
		</canvas>
    <canvas id="background"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/timbre.js"></script>
    <script>
        /**
     * Copyright (C) 2018 Luis Bergmann, https://luisbergmann.com/
     */
    var CoreAudio = new function() {
    
      // notes and octaves
      var notes = [0, 2, 3, 5, 7, 10];
      var octaves = [0, 12, 24, 36];
    
      // sound chain
      // it can get cpu intensive with the reverb
      var reverb = T("reverb", {room:0.7, damp:0.2, mix:0.3}).play();
    
      //organism sound chain
      var orgOsc = T("pulse");
      var orgEnv = T("perc", {a:1, r:30});
      var orgOscEnv1 = T("OscGen", {osc:orgOsc, env:orgEnv, mul:0.1});
      reverb.append(orgOscEnv1);
    
      var orgOsc2 = T("sin");
      var orgEnv2 = T("perc", {a:10, r:500});
      var orgOscEnv2 = T("OscGen", {osc:orgOsc2, env:orgEnv2, mul:0.2});
      reverb.append(orgOscEnv2);
    
      //shield sound chain
      var shieldNoiseOsc = T("fnoise", {freq:50, mul:0.1});
      var shieldOsc = T("pulse", {freq:50, mul:0.1});
      var shieldEnv = T("perc", {a:10, r:100}, shieldNoiseOsc, shieldOsc).play();
    
      // play synth note every time a organism is created
      this.playSynth = function(objPos) {
        //choose and play synth note
        var midicps = T("midicps");
        var note = notes[Math.random() * 5 | 0];
        var octave = octaves[Math.random() * 3 | 0];
    
        if (Math.random() < 0.7) {
          // for saving cpu not every time there's a organism a oscillator plays
          var playOsc = T("sin", {freq:midicps.at(60 + note + octave), mul:0.2});
          var playEnv = T("perc", {r:3000}, playOsc).bang();
          var eq = T("eq", {params:{hpf:[200, 1], lpf:[2000, 1]}}, playEnv);
          var tremParam = T("param", {value:1}).to(Math.random()*5 + 5, 3000);
          var tremOsc = T("sin", {freq:tremParam, mul:.6});
          var trem = T("*", eq, tremOsc);
          var panParam = T("param", {value:objPos}).expTo(0.5, 3000);
          var pan = T("pan", {pos:panParam}, trem).play();
    
          var interval = T("timeout", {timeout:3000}).on('ended', function () {
            tremOsc.pause();
            trem.pause();
            pan.pause();
          }).start();
        }
      }
    
    
      this.organismDead = function () {
        var midicps = T("midicps");
        var note = notes[Math.random() * 5 | 0];
        var octave = octaves[Math.random() * 3 | 0];
    
        orgOscEnv1.noteOn((180 + note + octave), 80);
        orgOscEnv2.noteOn((60 + note + octave), 80);
    
        //low sound
        var lowOsc = T("sin", {freq:Math.random()*50+50, mul:0.6});
        var losOscEq = T("eq", {params:{hpf:[150, 1]}}, lowOsc);
        var lowPscEnv= T("perc", {a:70, r:100}, losOscEq).bang().play();
    
      }
    
      this.playShield = function () {
        shieldEnv.bang();
      }
    
      this.playGameOver = function () {
        // var downer = T("param", {value:10000}).to(50, 2000);
        var osc = T('fnoise', {freq:400, mul:0.1});
        var env = T('perc', {a:10, r:2000}, osc).bang().play();
      }
    
    
      this.energyUp = function () {
        var energyFreq = T("param", {value:80}).to(Math.random()*500+500, "1sec");
        var osc1 = T('sin', {freq:energyFreq, mul:0.6});
        var osc1Eq = T("eq", {params:{hpf:[150, 1]}}, osc1);
        var env = T("perc", {a:50, r:500}, osc1Eq).bang().play();
      }
    
      this.energyDown = function () {
    
        //sine osc with tremolo
        var downer2 = T("param", {value:(Math.random()*100 + 100)}).to(10, 1000);
        var osc2 = T('sin', {freq:downer2, mul:0.1});
        var osc2Eq = T("eq", {params:{hpf:[150, 1]}}, osc2);
        var downer3 = T("param", {value:(Math.random()*50 + 50)}).to(30, 1000);
        var osc3 = T('pulse', {freq:downer3, mul:0.1});
        var osc3Eq = T("eq", {params:{hpf:[150, 1]}}, osc3);
        var env2 = T("perc", {r:800}, osc2Eq, osc3Eq).bang();
        var trem2param = T("param", {value:Math.random()*5+1}).to(1, 1000);
        var trem2 = T("sin", {freq:trem2param, mul:.7})
        var oscTrem2 = T("*", env2, trem2).play();
      }
    }
    </script>
    <script>
        /**
     * Core
     * MIT licensed
     *
     * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
     */
    var Core = new function(){
    
    	// Flags if we are running mobile mode
    	var isMobile = !!navigator.userAgent.toLowerCase().match( /ipod|ipad|iphone|android/gi );
    
    	var DEFAULT_WIDTH = 1000,
    		DEFAULT_HEIGHT = 650,
    		BORDER_WIDTH = 6,
    		FRAMERATE = 60;
    
    	// Types of organisms
    	var ORGANISM_ENEMY = 'enemy',
    		ORGANISM_ENERGY = 'energy';
    
    	// The world dimensions
    	var world = {
    		width: isMobile ? window.innerWidth : DEFAULT_WIDTH,
    		height: isMobile ? window.innerHeight : DEFAULT_HEIGHT
    	};
    
    	var canvas,
    		context;
    
    	var canvasBackground,
    		contextBackground;
    
    	// UI DOM elements
    	var status;
    	var panels;
    	var message;
    	var title;
    	var startButton;
    
    	// Game elements
    	var organisms = [];
    	var particles = [];
    	var player;
    
    	// Mouse properties
    	var mouseX = (window.innerWidth + world.width) * 0.5;
    	var mouseY = (window.innerHeight + world.height) * 0.5;
    	var mouseIsDown = false;
    	var spaceIsDown = false;
    
    	// Game properties and scoring
    	var playing = false;
    	var score = 0;
    	var time = 0;
    	var duration = 0;
    	var difficulty = 1;
    	var lastspawn = 0;
    
    	// Game statistics
    	var fc = 0;.........完整代码请登录后点击上方下载按钮下载查看