<!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