canvas实现的一个简易字母游戏

最新推荐文章于 2021-06-01 09:23:41 发布

CoderQ

最新推荐文章于 2021-06-01 09:23:41 发布

阅读量551

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/coderq/article/details/8894670

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<title>字母游戏</title>
<meta charset="UTF-8"></meta>
<canvas></canvas>
<style>
html, body{width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;}
canvas{background: #000;}
</style>
<script type="text/javascript" src="../js/base.js"></script>
<script>
	var canvas = document.getElementsByTagName('canvas')[0];
	var context = canvas.getContext('2d');
	var env = {}, letters = {}, key = {};
	var onResize;
	var time = 0;
	var startButton = document.getElementsByTagName('input')[0];
	var bomb = new Image();
	var handler;
	var life = 5;
	
	bomb.src = 'image/explosion.png';
	
	env.max_letter_count = 10;
	
	(onResize = function(){
		env.canvas_width = canvas.width = document.width || document.body.clientWidth;
		env.canvas_height = canvas.height = document.height || document.body.clientHeight;
	})();
	
	window.onresize = onResize;
	
	var Letter = function(params){
		this.char = (params.char || 'A').toUpperCase();
		this.x = params.x || 0;
		this.y = params.y || 0;
		this.size = params.size || 22;
		this.speed = params.speed || 2;
	}
	
	var initKey = function(){
		var char = 'abcdefghijklmnopqrstuvwxyz';
		var code_start = 65, code_end = 90;
		for(var i = code_start; i <= code_end; i++){
			key[i] = char[i - code_start];
		}
	}
	
	var createLetter = function(){
		var char;
		do{
			char = key[Math.floor(Math.random() * 26) + 65];
		}while(letters[char]);
				
		var size = 56;
		letters[char] = new Letter({
			char: char,
			x: Math.random() * (env.canvas_width - size),
			y: - size,
			speed: Math.random() * 4 + 4,
			size: size
		});
	}
	
	var displayLetter = function(){
		context.fillStyle = "#fff";
		context.clearRect(0, 0, env.canvas_width, env.canvas_height);
		for(var char in letters){
			var letter = letters[char];
			letter.y += letter.speed;
			context.font = 'normal {0}px serif'.format(letter.size);
			context.fillText(letter.char, letter.x, letter.y);
			if(letter.y - letter.size > env.canvas_height){
				delete letters[char];
				life--;
				if(life === 0){
					clearInterval(handler);
					context.clearRect(0, 0, env.canvas_width, env.canvas_height);
					context.fillText('Game Over', 200, 300);
				}
			}
		}
	}
	
	var drawLetter = function(letter){
		context.font = 'normal {0}px'.format(letter.size);
		context.fillText(letter.char, letter.x, letter.y);
	}
	
	var onKeyDown = function(e){
		key[e.keyCode] && letters[key[e.keyCode]] && (function(){
			var letter = letters[key[e.keyCode]];
			//context.clearRect(letter.x, letter.y - letter.size, letter.size, letter.size);
			context.drawImage(bomb, letter.x, letter.y - letter.size, bomb.width, bomb.height);
			delete letters[key[e.keyCode]];
		})();
	}
	
	var start = function(){
		initKey();
		
		handler = setInterval(function(){
			if(time++ % 30 == 0){
				createLetter();
				time = 1;
			}
			displayLetter();
		}, 30);
		
		document.onkeydown = onKeyDown;
	}
	
	start();
</script>

base.js地址http://blog.csdn.net/coderq/article/details/7229050

CoderQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas实现的一个简易字母游戏

字母游戏html, body{width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;}canvas{background: #000;} var canvas = document.getElementsByTagName('canvas')[0]; var context = canvas.get
复制链接

扫一扫