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; // Frame count
    	var fs = 0; // Frame score
    	var cs = 0; // Collision score
    
    	// The world's velocity
    	var velocity = { x: -1.3, y: 1 };
    
    	// Performance (FPS) tracking
    	var fps = 0;
    	var fpsMin = 1000;
    	var fpsMax = 0;
    	var timeLastSecond = new Date().getTime();
    	var frames = 0;
    
    	this.init = function(){
    
    		canvas = document.getElementById('world');
    		canvasBackground = document.getElementById('background');
    		panels = document.getElementById('panels');
    		status = document.getElementById('status');
    		message = document.getElementById('message');
    		title = document.getElementById('title');
    		startButton = document.getElementById('startButton');
    
    		if (canvas && canvas.getContext) {
    			context = canvas.getContext('2d');
    
    			contextBackground = canvasBackground.getContext('2d');
    
    			// Register event listeners
    			document.addEventListener('mousemove', documentMouseMoveHandler, false);
    			document.addEventListener('mousedown', documentMouseDownHandler, false);
    			document.addEventListener('mouseup', documentMouseUpHandler, false);
    			canvas.addEventListener('touchstart', documentTouchStartHandler, false);
    			document.addEventListener('touchmove', documentTouchMoveHandler, false);
    			document.addEventListener('touchend', documentTouchEndHandler, false);
    			window.addEventListener('resize', windowResizeHandler, false);
    			startButton.addEventListener('click', startButtonClickHandler, false);
    			document.addEventListener('keydown', documentKeyDownHandler, false);
    			document.addEventListener('keyup', documentKeyUpHandler, false);
    
    			// Define our player
    			player = new Player();
    
    			// Force an initial resize to make sure the UI is sized correctly
    			windowResizeHandler();
    
    			// If we are running on mobile, certain elements need to be configured differently
    			if( isMobile ) {
    				status.style.width = world.width + 'px';
    				canvas.style.border = 'none';
    			}
    
    			animate();
    		}
    	};
    
    	function renderBackground() {
    		var gradient = contextBackground.createRadialGradient( world.width * 0.5, world.height * 0.5, 0, world.width * 0.5, world.height * 0.5, 500 );
    		gradient.addColorStop(0,'rgba(0, 70, 70, 1)');
    		gradient.addColorStop(1,'rgba(0, 8, 14, 1)');
    
    		contextBackground.fillStyle = gradient;
    		contextBackground.fillRect( 0, 0, world.width, world.height );
    	}
    
    	/**
    	 * Handles click on the start button in the UI.
    	 */
    	function startButtonClickHandler(event){
    		if( playing == false ) {
    			playing = true;
    
    			// Reset game properties
    			organisms = [];
    			score = 0;
    			difficulty = 1;
    
    			// Reset game tracking properties
    			fc = 0;
    			fs = 0;
    			ms = 0;
    			cs = 0;
    
    			// Reset the player data
    			player.energy = 30;
    
    			// Hide the game UI
    			panels.style.display = 'none';
    			status.style.display = 'block';
    
    			time = new Date().getTime();
    		}
    	}
    
    	/**
    	 * Stops the currently ongoing game and shows the
    	 * resulting data in the UI.
    	 */
    	function gameOver() {
    		playing = false;
    
    		// Determine the duration of the game
    		duration = new Date().getTime() - time;
    
    		// Show the UI
    		panels.style.display = 'block';
    
    		// Ensure that the score is an integer
    		score = Math.round(score);
    
    		// Write the users score to the UI
    		title.innerHTML = 'Game Over! (' + score + ' points)';
    
    		// Update the status bar with the final score and time
    		scoreText = 'Score: <span>' + Math.round( score ) + '</span>';
    		scoreText += ' Time: <span>' + Math.round( ( ( new Date().getTime() - time ) / 1000 ) * 100 ) / 100 + 's</span>';
    		status.innerHTML = scoreText;
    	}
    
    	function documentKeyDownHandler(event) {
    		switch( event.keyCode ) {
    			case 32:
    				if( !spaceIsDown && player.energy > 15 ) {
    					player.energy -= 4;
    				}
    				spaceIsDown = true;
    				event.preventDefault();
    				break;
    		}
    	}
    	function documentKeyUpHandler(event) {
    		switch( event.keyCode ) {
    			case 32:
    				spaceIsDown = false;
    				event.preventDefault();
    				break;
    		}
    	}
    
    	/**
    	 * Event handler for document.onmousemove.
    	 */
    	function documentMouseMoveHandler(event){
    		mouseX = event.clientX - (window.innerWidth - world.width) * 0.5 - BORDER_WIDTH;
    		mouseY = event.clientY - (window.innerHeight - world.height) * 0.5 - BORDER_WIDTH;
    	}
    
    	/**
    	 * Event handler for document.onmousedown.
    	 */
    	function documentMouseDownHandler(event){
    		mouseIsDown = true;
    	}
    
    	/**
    	 * Event handler for document.onmouseup.
    	 */
    	function documentMouseUpHandler(event) {
    		mouseIsDown = false;
    	}
    
    	/**
    	 * Event handler for document.ontouchstart.
    .........完整代码请登录后点击上方下载按钮下载查看