html5画布写的一个键盘游戏（二）
日期：2014-05-16 浏览次数：20859 次
html5画布写的一个键盘游戏（2）
这篇是对上一篇《html5画布写的一个键盘游戏（1）》博文进行总结，解决了上一次遗留下来的问题（不支持ie）：
上一次做的是为了写出效果，是根据步骤一步步进行的。没有考虑那么详细，就键盘游戏而言，字母消失和替换字母可以归纳在同一个问题上，就是用到splice()的替换方法：
array.splice(i,array[i].add());
然后清除画布我们可以在定时器执行循环代码之前清空一次就不存在捕捉坐标的问题了:
time=setInterval(function(){
context.clearRect(0,0,600,600);
for(var i=0;i<array.length;i++){
array[i].move();
array[i].show();
}
},1000);
效果上不存在字母与字母之间的清除掉或者清除一半的状况。效果如图：
下面贴出改进后的所有代码：
<html>
<head>
<title>HTML5Game</title>
<script>
//窗体加载
window.onload=function(){
//alert("start()");
var game=new Game();
game.start();
}
//游戏类
function Game(){
//alert("Game()");
var array=new Array();
var canvas=document.getElementById("myCanvas");
//alert("canvas-----------"+canvas);
var context=canvas.getContext("2d");
for(var i=0;i<10;i++){
//var charA=new CharA();
var charA=new CharA(context);
//charA.getChar();
array.push(charA);
//alert("array.length-----------"+array.length);
}
//var charA=new CharA();
//开始游戏
this.start=function(){
time=setInterval(function(){
context.clearRect(0,0,600,600);
for(var i=0;i<array.length;i++){
array[i].move();
array[i].show();
}
},1000);
}
//键盘方法
document.onkeydown=function(e){
//alert("键盘-------"+String.fromCharCode(e.which));
for(var i=0;i<array.length;i++){
if(String.fromCharCode(e.which)==array[i].getChar()){
//alert("array[i].getChar()----------------"+array[i].getChar()+"String.fromCharCod
(e.which)------"+String.fromCharCode(e.which));
//array[i].hidden();
array.splice(i,array[i].add());
}
}
}
}
//字母类
//function CharA(){
function CharA(context){
//alert("CharA()");
//var context;
var x;
var y;
var charArray=new Array("A","B","C","D","E","F","G","H","I","J","K","L");
var chara;
init();
//初始化
function init(){
y=100;
x=parseInt(Math.random()*600);
chara=charArray[parseInt(Math.random()*charArray.length)];
//alert("chara-----------------"+chara);
//alert("x-------------"+x);
//var canvas=document.getElementById("myCanvas");
//alert("canvas-----------"+canvas);
//context=canvas.getContext("2d");
//alert("context--------------"+context);
//context.fillText("A",x,y);
}
//增加字母
this.add=function(){
init()
}
//移动方法
this.move=function(){
y+=10;
//alert("y--------------"+y);
}
//返回字母的方法
this.getChar=function(){
//alert(&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
