canvas控制小球跳跃不要掉进坑里小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：canvas控制小球跳跃不要掉进坑里小游戏代码，键盘方向键控制：右-加速，左侧-制动器，向上 - 跳跃、向下 (跳跃或下降时) - 交换轨迹 1 - 禁用向前移动 2 - 启用向前移动

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <style>
        body {
          background: #242424;
        	color: #666;
        	font-size: 8pt;
        	font-family: sans-serif;
        	padding: 0;
        	margin: 0;
        }
    </style>

</head>

<body><canvas width="860" height="480" id="canvas"></canvas>
    <ul>
        <li>右-加速</li>
        <li>左侧-制动器</li>
        <li>向上 - 跳跃</li>
        <li>向下 (跳跃或下降时) - 交换轨迹</li>
        <li>1 - 禁用向前移动</li>
        <li>2 - 启用向前移动</li>
    </ul>
    <script>
        var _debug = {
          lockPlayerMovement: false,
          showPlayerInfo: false
        };
        
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        
        var Shape = {};
        
        Shape.line = function() {
          this.x1 = 0;
        	this.y1 = 0;
        	this.x2 = 0;
        	this.y2 = 0;
        	this.lineWidth = 2;
        	this.strokeStyle = "#000000";
        	
        	this.draw = function() {
        		context.beginPath();
        		context.moveTo(this.x1, this.y1);
        		context.lineTo(this.x2, this.y2);
        		context.lineWidth = this.lineWidth;
        		context.strokeStyle = this.strokeStyle;
        		context.stroke();
        	};
        };
        
        Shape.circle = function() {
        	this.x = 0;
        	this.y = 0;
        	this.radius = 0;
        	this.lineWidth = 2;
        	this.strokeStyle = "#000000";
        	this.fillStyle = "transparent";
        	
        	this.draw = function() {
        		context.beginPath();
        		context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
        		context.fillStyle = this.fillStyle;
        		context.fill();
        		context.lineWidth = this.lineWidth;
        		context.strokeStyle = this.strokeStyle;
        		context.stroke();
        	};
        };
        
        Shape.text = function() {
        	this.x = 0;
        	this.y = 0;
        	this.font = "10pt sans-serif";
        	this.textAlign = "center";
        	this.textBaseline = "middle";
        	this.fillStyle = "black";
        	this.fillText = "";
        	
        	this.draw = function() {
        		context.font = this.font;
        		context.textAlign = this.center;
        		context.textBaseline = this.textBaseline;
        		context.fillStyle = this.fillStyle;
        		context.fillText(this.fillText, this.x, this.y);
        	};
        };
        
        Shape.rectangle = function() {
        	this.x = 0;
        	this.y = 0;
        	this.width = 0;
        	this.height = 0;
        	this.lineWidth = 2;
        	this.strokeStyle = "#000000";
        	this.fillStyle = "transparent";
        	
        	this.draw = function() {
        		context.rect(this.x, this.y, this.width, this.height);
        		context.fillStyle = this.fillStyle;
        		context.fill();
        	};
        };
        
        var Key = {
        	_pressed: {},
        
        	LEFT: 37,
        	UP: 38,
        	RIGHT: 39,
        	DOWN: 40,
        	SPACE: 32,
        	SHIFT: 16,
        	CTRL: 17,
        	CAM_LEFT: 190,
        	CAM_RIGHT: 188,
        	
        	DB_1: 49,
        	DB_2: 50,
        	DB_3: 51,
        	DB_4: 52,
        	DB_5: 53,
        	DB_6: 54,
        	DB_7: 55,
        	DB_8: 56,
        	DB_9: 57,
        
        	isDown: function(keyCode) {
        		return this._pressed[keyCode];
        	},
        
        	onKeydown: function(event) {
        		this._pressed[event.keyCode] = true;
        	},
        
        	onKeyup: function(event) {
        		delete this._pressed[event.keyCode];
        	}
        };
        window.addEventListener('keyup', function(event) { Key.onKeyup(event); }, false);
        window.addEventListener('keydown', function(event) { Key.onKeydown(event); }, false);
        
        var Camera = function(x, y) {
        	this.x = x;
        	this.y = y;
        	this.radius = 4;
        	this.velocity = {};
        	this.velocity.x = 0;
        	this.velocity.y = 0;
        	
        	this.addVelocity = function(x, y) {
        		this.velocity.x += x;
        		this.velocity.y += y;
        	};
        	
        	this.update = function(lines, player) {
        		this.x = player.x - (canvas.width / 2);
        	};
        };
        
        var Player = function(x, y, r) {
        	this.shapes = {};
        	this.shapes.circle = new Shape.circle();
        	this.shapes.radius = new Shape.line();
        	
        	this.x = x;
        	this.y = y;
        	this.radius = r;
        	this.velocity = {};
        	this.velocity.x = 0;
        	this.velocity.y = 0;
        	this.angle = 0;
        	this.level = 1;
        	
        	var maxJumpDist = 12;
        	var jumpDist = 0;
        	
        	var lasty = y;
        	var lastx = 0;
        	
        	// States
        	this.isJumping = false;
        	this.isFalling = false;
        	this.isSwappingLevels = false;
        	this.isAlive = true;
        	
 .........完整代码请登录后点击上方下载按钮下载查看