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;
        	
        	// Adds velocity to the player
        	this.addVelocity = function(x, y) {
        		this.velocity.x += x;
        		this.velocity.y += y;
        	};
        	
        	// Collides with the world
        	this.collide = function(line, adjx, adjy) {
        		var run = line.x2 - line.x1;
        		var rise = line.y2 - line.y1;
        		
        		var slope = rise / run;
        		var intersect = (line.y1) - (line.x1 * slope);
        		var col = (slope * adjx) + intersect;
        		
        		var angle = radToDeg(Math.atan(rise / run));
        		this.angle = angle;
        		var normal = angle + 90;
        		
        		// Collide with track
        		if(lasty < col && adjy > col) {
        			this.y = col + (this.y - adjy);
        			this.isFalling = false;
        			this.isSwappingLevels = false;
        			jumpDist = 0;
        		} else {
        			if(!this.isJumping) {
        				this.isFalling = true;
        			}
        		}
        	};
        	
        	this.update = function(lines) {	
        		if(this.isAlive) {
        			// Accelerate
        			if(Key.isDown(Key.RIGHT))
        				this.addVelocity(_debug.lockPlayerMovement ? 0.2 : 0.1, 0, 0);
        			
        			// Brake
        			if(Key.isDown(Key.LEFT))
        				this.addVelocity(_debug.lockPlayerMovement ? -0.2 : -0.1, 0);
        				
        			// Jump
        			if(Key.isDown(Key.UP)) {
        				if(!this.isFalling && !this.isJumping) {
        					this.isJumping = true;
        				}
        			// Stop jumping
        			} else {
        				if(this.isJumping) {
        					this.isJumping = false;
        					jumpDist = 0;
        				}
        			}
        		}
        	
        		this.y += 7.5; // gravity
        		if(this.isAlive) this.velocity.x += _debug.lockPlayerMovement ? 0 : 0.2; // automatic accelerate
        		this.x += this.velocity.x;
        		this.y += this.velocity.y;
        		
        		// Decay velocity
        		this.velocity.x *= 0.985;
        		this.velocity.y *= 0.95;
        
        		// Collision point
        		var adjx = (this.radius * Math.cos((this.angle + 90) * Math.PI / 180)) + this.x;
                var adjy = (this.radius * Math.sin((this.angle + 90) * Math.PI / 180)) + (this.y + 2); // 2px padding for stroke width
        		
        		// Finds the line the player is going to collide with
        		var playerPos;
        		if(lines[0].level === 2) // background track
        			playerPos = adjx / levelPrefs.width >> 0;
        		else // foreground track
        			playerPos = adjx / levelPrefs.width >> 0;
        		
        		// Loop through the lines and collide .........完整代码请登录后点击上方下载按钮下载查看