求大神帮忙改一下程序 js的打字游戏

紫菱天宇 2014-10-01 01:27:17

//出现的第一个问题：怎么才能让画布宽度填充整个浏览器宽度
//第二个问题：数组删除有异常，有时候按一个键，会把全部都清除，有时候图形会自动消失
//主页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打字游戏</title>
<script src="index.js" ></script>
<script src="play.js"></script>
</script>
<script language="javascript">
window.onload=function()
{
addKeys(document.getElementById("KeyDiv"));//添加虚拟键盘
window.setInterval('randomLetter(1)',2000);
//绘制文本
window.setInterval("draw('myCanvas')",100);

}

</script>
<style type="text/css">
#KeyDiv {
margin-top: 50px;
margin-left: 500px;
filter: Alpha(Opacity=0.2);

}
</style>
</head>

<body>

<canvas id="myCanvas" width=1370 height="450" style="background-color:#f2c6d7; margin-left:-10px; margin-top:-15px" ></canvas>
<div id="KeyDiv">
</div>
</body>
</html>
//虚拟键盘
//生成虚拟键盘
//定义和获取键盘布局的数组
function getKeys()
{
var keys=new Array();
keys[0]=new Array("Q","W","E","R","T","Y","U","I","O","P");
keys[1]=new Array("A","S","D","F","G","H","J","K","L");
keys[2]=new Array("Z","X","C","V","B","N","M");
return keys;
}
//添加按键到层
function addKeys(obj)
{
//设置层的样式
obj.style.width="320px";
obj.style.height="150px";
obj.style.position="relative";
obj.style.backgroundColor="#f6cfe2";
obj.style.borderRadius="5px";

//添加控件和设置控件样式
var keys=getKeys();//获取数组定义的值返回是一个对象数组
for(var i in keys)
{
for(var j in keys[i])
{
var key=keys[i][j];//一个元素，一个字母
//创建一个div容器设置样式添加值形成一个按键
var kd=document.createElement("div");
//设置样式
kd.innerHTML=key;//添加内容到div上
kd.id="key_"+key;//设置ID
kd.style.width="17px"
kd.style.height="20px";
kd.style.backgroundColor="#ebaaca";
kd.style.float="left";
kd.style.position="absolute";
kd.style.top=(20+i*30)+"px";
kd.style.left=(10+j*30+i*15)+"px";
kd.style.paddingLeft="8px";
kd.style.borderRadius="10px";
//添加到div上
obj.appendChild(kd);
}
}
//空格
var space=document.createElement("div");
space.id="key_Space";
space.style.width="100px";
space.style.height="20px";
space.style.backgroundColor="#ebaaca";
space.style.float="left";
space.style.position="absolute";
space.style.top = 110+"px";
space.style.left = 90+"px";
obj.appendChild(space);
addKeyEvent();

}
//添加按键响应事件
function addKeyEvent()
{
document.onkeydown=function(event)
{
var key = String.fromCharCode(event.keyCode);
// alert(key);
//发射子弹
var shot = new Shot(668,377,key);
addShot(shot);
if(key==" ")
{
key=document.getElementById("key_Space");
}
else
{
key=document.getElementById("key_"+key);
}
key.style.backgroundColor ="#fff";

}
document.onkeyup = function(event)
{
var key = String.fromCharCode(event.keyCode);
if(key==" ")
{
key = document.getElementById("key_Space");

}
else
{
key = document.getElementById("key_"+key);
}

key.style.backgroundColor = "#ebaaca";
}
}
//操作
// JavaScript Document
var letters=new Array();//字母
var shots=new Array();//子弹的对象集合
var Letterx=Math.random()*1366;
//var data = new Array();//移除数据
var garde=0;
var GardeX=2;
var ctx;//创建图像对象
//定义字母对象
function Letter(x,y,zimu)
{
this.x=x;//字母的X坐标
this.y=y;//字母的Y坐标
this.zimu=zimu;//字母
}
//定义子弹对象
function Shot(x,y,zidan)
{
this.x=x;//子弹的X坐标
this.y=y;//子弹的Y坐标
this.zidan=zidan;//子弹
}
//添加字母
function addLetter(letter)
{
letters.push(letter);//添加到字母数组
}
//随机产生
function randomLetter(num)
{
for(var i=1;i<=num;i++)
{
//随机字母
var code=new Array("Q","W","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","K","L","Z","X","C","V","B","N","M");
var index=Math.floor(Math.random()*24);
var letter = new Letter((index)*(1300/24),10,code[index]);
addLetter(letter); //添加到数组
}
}
//绘制字母
function drawLetter()
{
for(var i in letters)
{
//绘制背景图
ctx.beginPath();
var img=new Image();
img.src="../images/bg.png";
ctx.drawImage(img,letters[i].x,letters[i].y);//绘制图
ctx.closePath();
//设置字体
ctx.font="bold 30px Lucida Sans";
ctx.fillStyle="#"+se();
ctx.textBaseline="top";
ctx.fillText(letters[i].zimu,letters[i].x+15,letters[i].y+8);
letters[i].y += GardeX;
}
}
//添加子弹到数组
function addShot(shot)
{
shots.push(shot);//添加到数组
}
//绘制炮台
function drawBg()
{
//绘制半圆
ctx.beginPath();
var pao=new Image();
pao.src="../images/dapao.png";
ctx.drawImage(pao,640,390);//绘制图
ctx.closePath();
}
//字体颜色
function se()
{
var se=new Array("f0a7a7","f0a7ed","d7a7f0","ebf275","75f2aa","f2b080");
var index= Math.floor(Math.random()*5);
return se[index];
}
//绘制子弹
function drawShots()
{
//遍历子弹的数组
for(var i in shots)
{
ctx.font = "bold 18px Lucida Sans";
ctx.fillStyle = "#ff0000";
ctx.textBaseline = "top";
ctx.fillText(shots[i].zidan,shots[i].x-2,shots[i].y-4);
//位移
//查找目标
var letter;
var j = 0;
for(;j<letters.length;j++)
{
//document.getElementById("mess").innerHTML = letters[j].ts+":"+shots[i].ts;
if(letters[j].zimu==shots[i].zidan)
{
letter = letters[j];
shots[i].y += letter.y-shots[i].y>0?10:-10;
shots[i].x += letter.x-shots[i].x>0?10:-10;
if(Math.abs(letter.y-shots[i].y)<15&&Math.abs(letter.x-shots[i].x)<15)
{
//alert(letter.x-shots[i].x);
deletePlayer(i,j);
garde++;
}
if(letter.y>450||letter.x<0||letter.x>1370)
{
deletePlayer(null,j);
}
if(shots[i].y<5||shots[i].y>450||shots[i].x<0||shots[i].x>1370)
{
deletePlayer(i,null);
}
break;
}

}

//目标不存在
if(j==letters.length)
{
shots[i].y += -30;
}
}
}
//删除元素
function deletePlayer(i,j)
{
//data.push(letter);//添加到移除元素数组
letters.splice(j,1);
shots.splice(i,1);

}
//绘制积分
function drawgarde()
{
var sun=garde*10;
ctx.font = "bold 24px Lucida Sans";
ctx.fillStyle = "#"+se();
ctx.textBaseline = "top";
if(sun>200)
{
GardeX=15;
}
if(sun>500)
{
GardeX=30;
}
ctx.fillText("积分："+sun,10,20);
}
//绘图方法
function draw(canvasId)
{
if(ctx==null)
{
ctx = document.getElementById(canvasId).getContext("2d");
//alert("初始化ctx");
}
//清空一个矩形区域
ctx.clearRect(0,0,document.getElementById(canvasId).width,document.getElementById(canvasId).height);

//绘制炮台
drawBg();

//绘制字母
drawLetter();

//绘制子弹
drawShots();
drawgarde();
}

...全文

225 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

紫菱天宇 2014-10-03

打赏
举报

我把第一个元素单独删除了，现在好像可以了，谢谢你。

save4me 2014-10-02

打赏
举报

Google Chrome 版本 34.0.1847.116

引用 15 楼 u011267392 的回复:

不行啊，你用的什么浏览器

紫菱天宇 2014-10-02

打赏
举报

不行啊，你用的什么浏览器

紫菱天宇 2014-10-02

打赏
举报

就是第一字母呀，子弹随便怎么打，它都不消失，但是子弹是消失了的。

save4me 2014-10-02

打赏
举报

清空的问题是因为字母的y和GardeX关联的问题吗？不是很明白你说的第一个元素删不掉是指什么？第一个字母，还是第一个子弹？好像没有什么问题，你是怎么判断有没有被删除的？

引用 10 楼 u011267392 的回复:

报告大神，第一个元素为什么删不掉。

紫菱天宇 2014-10-02

打赏
举报

补充一下，是第一个掉落的字母，无法删除，子弹会消失

紫菱天宇 2014-10-02

打赏
举报

报告大神，第一个元素为什么删不掉。

save4me 2014-10-01

打赏
举报

在你绘制字母的时候，这句(letters[i].y += GardeX;)的作用是什么？因为你的区域高度是450，这样当分数达到200多分的时候，字母的垂直坐标都会跑到你的区域之外去了，所以你看上去字母都被清空了，其实字母还在，只是在不可见区域了。

引用 8 楼 u011267392 的回复:

第一个元素无法删除，但是我的积分在不停的增加

紫菱天宇 2014-10-01

打赏
举报

第一个元素无法删除，但是我的积分在不停的增加

紫菱天宇 2014-10-01

打赏
举报

试了一下没效果，还是会出现奇怪的现象

紫菱天宇 2014-10-01

打赏
举报

给位想想办法吧，我的删除语句有问题没有，还有传入的值有问题没有，判断越界有问题没

紫菱天宇 2014-10-01

打赏
举报

当子弹和字母相撞的时候，2则都要删除，当越界的时候并不是2则同时越界，所以我传的NULL

save4me 2014-10-01

打赏
举报

删除的时候看你传入null，是不是不想删除相应数组的元素？如过是这样的话，先判断参数是否为null，非null的时候，才删除，否则会默认删除第一个元素，如果你在外面再加了循环的话，那就可能清空了


//删除元素
function deletePlayer(i,j)
{
    //data.push(letter);//添加到移除元素数组
    j && letters.splice(j,1);
    i && shots.splice(i,1);
}

引用 2 楼 u011267392 的回复:

第二个问题是重点，亲帮帮忙，今天晚上有急用

紫菱天宇 2014-10-01

打赏
举报

第二个问题是重点，亲帮帮忙，今天晚上有急用

程序员鼓励师 2014-10-01

打赏
举报

JavaScript提供了apply和call两种调用方式来确定函数体中this的指向，表现出来的特征就是：对象可以'借用'其他对象的方法。之前的几篇博客回顾了一些Web控件的一些开发方法，我们聊了如何实现一个自定义的组合框，...

JavaScript提供了apply和call两种调用方式来确定函数体中this的指向，表现出来的特征就是：对象可以'借用'其他对象的方法。之前的几篇博客回顾了一些Web控件的一些开发方法，我们聊了如何实现一个自定义的组合框，也...

广州游戏公司4399校园招聘... 一面var let const区别js输入0.1+0.2为什么不是0.3js用多少位表示0.1css实现水平居中es6 promise怎么理解小程序生命周期函数9.21 携程笔试 80min AK。好难，秋招目前写过最难的笔试。T1

JavaScript

87,921

社区成员

224,619

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章