之前發了簡單版本打字遊戲，現在增加圖片，設置開始按鈕，記錄分數，字母顯示也改成對象數組，直接操作對象而不是操作對象屬性，孰好孰壞，我也不懂，我也是初學者。
直接上代碼
字母類
//字母類
function Letters(){
//改變之前屬性數組使用，這次使用對象數組，屏幕上顯示幾個不同字母對象
//通過對象比較對象屬性，這樣能夠更好理解oop，實際上我也是雲裏霧裏
this.x;
this.y;
this.Ax;//蘋果座標
this.Ay;
this.aLive;//字母是否消失
this.spd;//速度
this.lett;//字母，每個字母對象有個對應字母
this.lePic;//字母背景(蘋果)
this.ctx;//畫筆
this.letters;
this.fColor;
}
//蘋果背景圖，字母顯示在蘋果上
Letters.prototype.leBackground=function(){
this.Ay+=this.spd*speed*detalTime;
this.y+=this.spd*speed*detalTime;
// console.log(this.aLive);
if(this.aLive){
this.ctx.save();
this.ctx.drawImage(this.lePic,this.Ax,this.Ay,55,55);//蘋果大小爲55*55
//設置字體樣式
this.ctx.font = "40px Courier New";
//設置字體填充顏色
this.ctx.fillStyle =''+this.fColor+'';
//從座標點(50,50)開始繪製文字
this.ctx.fillText(this.lett, this.x, this.y);
this.ctx.restore();
}
}
圖片繪製類，包括背景圖片，字母圖片
//繪製類，用於繪畫背景，字母圖片
var letter;//字母類實例
function draw(){
this.x;//畫布背景座標
this.y;
this.ctx;//畫筆
this.bgPic;//背景
this.le;//顯示數組，保存字母對象實例
}
//初始化
draw.prototype.init=function(){
this.le=[];
for(var i=0;i<5;i++){//屏幕上有8個字母
newLe();
this.le.push(letter);//將字母對象加入數組
}
this.x=0;
this.y=0;
this.bgPic=new Image();//圖片類型
this.bgPic.src='images/bg2.png';
}
draw.prototype.ImgDraw=function(){
//繪製圖片
this.ctx.drawImage(this.bgPic,this.x,this.y,632,472);//背景
for(var i=0;i<this.le.length;i++){
this.le[i].leBackground();//畫出字母
if(this.le[i].Ay>=432){
this.born(i);
}
}
}
//生成字母
draw.prototype.born=function(i){
this.le[i].aLive=false;//消失
this.le[i].letters=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
this.le[i].ctx=this.ctx;
this.le[i].x=Math.floor(Math.random()*400)+80;;
this.le[i].y=0;
this.le[i].Ax=this.le[i].x-15;//注意這裏蘋果座標
this.le[i].Ay=this.le[i].y-40;
this.le[i].aLive=true;//默認激活
this.le[i].spd=Math.random()*0.017+0.003;//速度區間在[0.01-0.015)
this.le[i].lett=letter.letters[Math.floor(Math.random()*48)];//隨機挑選字母
this.le[i].lePic=new Image();//圖片類型
this.le[i].lePic.src='images/蘋果[圖形].png';
this.le[i].fColor=this.le[i].fColor;
var le_i=this.le[i];//保存第i個對象初始屬性
this.le.splice(i,1,le_i);//刪除並添加字母對象
}
//Letters對象實例函數
function newLe(){
letter=new Letters();//new一個對象
letter.letters=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
letter.ctx=this.ctx;
letter.x=Math.floor(Math.random()*400)+80;
letter.y=0;
letter.Ax=letter.x-15;//蘋果座標是相對座標
letter.Ay=letter.y-40;
letter.aLive=true;//默認激活
letter.spd=Math.random()*0.017+0.003;//速度區間在[0.01-0.015)
letter.lett=letter.letters[Math.floor(Math.random()*48)];//隨機挑選字母
letter.lePic=new Image();//圖片類型
letter.lePic.src='images/蘋果[圖形].png';
letter.fColor='yellow';
letter.leBackground();
}裏面用到關鍵就是，將字母類實例分別放入數組，
this.le=[];
for(var i=0;i<5;i++){//屏幕上有8個字母
newLe();
this.le.push(letter);//將字母對象加入數組
}
後面所有操作，包括座標都是通過操作這個數組得到。
鼠標事件，按鍵事件就不多說了，看下面代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript+html5完整版打字遊戲</title>
<script type="text/javascript" src="js/Letters.js"></script>
<script type="text/javascript" src="js/draw.js"></script>
<script type="text/javascript">
var canvas;
var ctx;
var dr;//繪畫類實例
var keyDown;//按鍵對象
var capsLock;//大寫按鍵判斷
var st;//遊戲開始
var stBtn_s;//開始按鈕
var rdBtn_r;//鼠標經過說明按鈕
var lastTime;//最後時間
var detalTime;//時間間隔
var now;//當前時間
var speed;//速度
var score;//分數
window.requestAnimFrame=(function(){
return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();//自動執行函數
window.οnlοad=function(){
document.body.οnlοad=game();//程序入口
//入口函數
function game(){
init();
gameLoop();//刷新函數
}
//初始化函數
function init(){
canvas=document.getElementById('canvas');
ctx=canvas.getContext('2d');//畫筆
canvas.width=632;
canvas.height=472;
startDraw();//加載開始界面
lastTime=Date.now();//控制requesAnimFrame播放速度
detalTime=0;//時間間隔，保證運動過渡圓滑
speed=2;
score=0;//0分
//鼠標事件
window.addEventListener('mousemove',function(e){
if(e.offSetX||e.layerX){//兼容性寫法
//三元運算符
mx=e.offSetX==undefined?e.layerX:e.offSetX;
my=e.offSetY==undefined?e.layerY:e.layerY;
}
//開始按鈕
if(mx>20&&mx<156&&my>350&&my<397){
stBtn_s=true;
}
else if(mx>20&&mx<156&&my>410&&my<457){
rdBtn_r=true;
}
else
{
stBtn_s=false;
rdBtn_r=false;
}
if(st){
ctx.save();
ctx.font = "12px Courier New";
ctx.fillStyle ='red';
if(mx>642&&mx<668&&my>120&&my<130){
canvas.style.cursor='pointer';
ctx.fillText('黃色',642,130);
}
else if(mx>692&&mx<712&&my>120&&my<130){
canvas.style.cursor='pointer';
ctx.fillText('紅色',692,130);
}
else if(mx>642&&mx<668&&my>160&&my<170){
canvas.style.cursor='pointer';
ctx.fillText('藍色',642,170);
}
else if(mx>692&&mx<712&&my>160&&my<170){
canvas.style.cursor='pointer';
ctx.fillText('綠色',692,170);
}
else{
canvas.style.cursor='default';
ctx.beginPath();
//設置字體樣式
ctx.font = "12px Courier New";
//設置字體填充顏色
ctx.fillStyle ='blue';
//從座標點(50,50)開始繪製文字
ctx.fillText('請選擇字母顏色',642,100);
ctx.fillText('黃色',642,130);
ctx.fillText('紅色',692,130);
ctx.fillText('藍色',642,170);
ctx.fillText('綠色',692,170);
ctx.closePath();
}
ctx.restore();
}
},false);
//鼠標點擊
window.addEventListener('click',function(e){
if(e.offSetX||e.layerX){//兼容性寫法
//三元運算符
mx=e.offSetX==undefined?e.layerX:e.offSetX;
my=e.offSetY==undefined?e.layerY:e.layerY;
}
if(mx>20&&mx<156&&my>350&&my<397){
canvas.width=732;
canvas.height=472;
st=true;
}
else if(mx>20&&mx<156&&my>410&&my<457){
rdBtn_r=true;
}
if(st){
for(var i=0;i<dr.le.length;i++){
if(mx>642&&mx<668&&my>120&&my<130){
dr.le[i].fColor='yellow';
}
else if(mx>692&&mx<712&&my>120&&my<130){
dr.le[i].fColor='red';
}
else if(mx>642&&mx<668&&my>160&&my<170){
dr.le[i].fColor='blue';
}
else if(mx>692&&mx<712&&my>160&&my<170){
dr.le[i].fColor='green';
}
}
}
},false);
dr=new draw();//draw實例
dr.ctx=ctx;//畫筆
dr.init();
dr.ImgDraw();
//按鍵事件
keyDown={};
capsLock=false;//沒打開大寫鍵
window.addEventListener('keydown',function(e){
e=event||window.event;
//shift組合大寫按鍵
var capsLockKey = e.keyCode ? e.keyCode : e.which;
var shifKey = e.shiftKey ? e.shiftKey:((capsLockKey == 16) ? true : false);
if(((capsLockKey >= 65 && capsLockKey <= 90) && !shifKey)||((capsLockKey >= 97 && capsLockKey <= 122) && shifKey)){
var zh=true;
}else{
zh=false;
}
keyDown[e.keyCode]=true;
for(var i=0;i<dr.le.length;i++){
if(capsLock==false&&zh==true){//大寫鎖未打開且沒有按下shift鍵(組合鍵)
if(String.fromCharCode(e.keyCode).toLocaleLowerCase()==dr.le[i].lett){//字母區分大小寫
dr.born(i);//重新生成
level();
}
}
else{//按下shift鍵或者大寫鎖已經打開
if(String.fromCharCode(e.keyCode)==dr.le[i].lett){
dr.born(i);//重新生成
level();
}
}
if(e.keyCode==20){//由於javascript是事件監聽，所以無法知道按下大寫鎖前鍵盤大寫鎖是否已經打開
//(當做未打開），搞着玩的,可以忽略。
if(capsLock==false){
ctx.clearRect(632,30,232,55);
this.ctx.save();
this.ctx.font = "14px Courier New";
this.ctx.fillStyle ='yellow';
this.ctx.fillText('大寫鎖開啓',642,50);
this.ctx.restore();
capsLock=true;
return;
}
else{
ctx.clearRect(632,30,232,55);
this.ctx.save();
this.ctx.font = "14px Courier New";
this.ctx.fillStyle ='yellow';
this.ctx.fillText('大寫鎖關閉',642,50);
this.ctx.restore();
capsLock=false;
return;
}
}
}
});
window.addEventListener('keyup',function(e){
delete keyDown[e.keyCode];//釋放按鍵對象
});
}
//自動刷新函數
function gameLoop(){
requestAnimFrame(gameLoop);
if(st){
now=Date.now();//當前循環時間
detalTime=now-lastTime;
lastTime=now; //將最後時間變爲上一次初始時間
//谷歌瀏覽器離開標籤後，動畫幀會停止，導致時間差加大
if(detalTime>40){
detalTime=40;
}
dr.ImgDraw();
}else{
startDraw();//加載開始界面
}
}
//開始遊戲界面函數
var yb=220;
function startDraw(){
var p=new Image();//開始背景
var bee=new Image();//蜜蜂
var stBtn=new Image();//開始按鈕
var rdBtn=new Image();//說明按鈕
var f=new Image();//說明按鈕
var stBtn2=new Image();
var rdBtn2=new Image();
stBtn2.src='images/開始按鈕[經過].png';
rdBtn2.src='images/說明按鈕[經過].png';
p.src='images/bg2.png';
bee.src='images/卡通飛蟲[圖形].png';
stBtn.src='images/開始按鈕[初始].png';
rdBtn.src='images/說明按鈕[初始].png';
f.src='images/遊戲名稱.png';
ctx.drawImage(p,0,0,632,472);
ctx.drawImage(bee,136,yb-=0.5,131,97);
if(yb<=170){yb=220;}
ctx.drawImage(stBtn,20,350,136,47);
ctx.drawImage(rdBtn,20,410,136,47);
if(stBtn_s){
ctx.drawImage(stBtn2,20,350,136,47);
}
if(rdBtn_r){
ctx.drawImage(rdBtn2,20,410,136,47);
}
ctx.drawImage(f,140,50,426,106);
}
//分數，關卡
function level(){
score++;
ctx.save();
ctx.clearRect(632,200,232,200);
ctx.font = "12px Courier New";
ctx.fillStyle ='#fff';
ctx.fillText('分數：'+score+'',642,220);
ctx.clearRect(632,239,232,200);
if(score>=20&&score<50){
speed=4;
ctx.fillText('第二關',642,240);
}
if(score>=50&&score<100){
speed=6;
ctx.fillText('第三關',642,240);
}
if(score>=100&&score<200){
speed=8;
ctx.fillText('第四關',642,240);
}
else if(score>=200){
st=false;
location.reload();//不會處理結束，所以只好強制刷新瀏覽器
}
ctx.restore();
}
}
</script>
</head>
<body>
<div style="width: 732px;height: 472px;margin:50px auto;">
<canvas id="canvas" style="background: #000;"></canvas>
</div>
</body>
</html>
以上便是完整代碼，大家也可以下載。今天狀態不好，有點濫竽充數感覺，湊合着看吧。
