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

canvas实现防御类保护堆芯小游戏代码

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