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(&q.........完整代码请登录后点击上方下载按钮下载查看