效果如图所示:
下面是核心代码
复制代码 代码如下:
game = {
//随机产生字母
randletter: function() {
var arrletter = new array(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);
//随机产生字母
var index = math.floor(math.random() * 26);
return arrletter[index];
},
//随机字母颜色
randlettercolor: function() {
var arrlettercolor = new array(red, green, #555, blue, black);
var index = math.floor(math.random() * 4);
return arrlettercolor[index];
},
//随机字母大小
randlettersize: function() {
var arrlettersize = new array(12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px);
var index = math.floor(math.random() * 7);
return arrlettersize[index];
},
//创建div
divcreate: function(width, height, left, top, value) {
this.width = width;
this.height = height;
this.div = document.createelement(div);
this.div.style.width = width;
this.div.style.height = height;
this.div.style.left = left;
this.div.style.top = top;
this.div.innertext = value;
this.div.style.color = this.randlettercolor();
this.div.style.fontsize = this.randlettersize();
this.div.style.lineheight = this.div.style.height;
this.div.style.textalign = center;
this.div.style.fontweight = bold;
//this.div.style.border = solid red 1px;
this.div.style.position = relative;
document.getelementbyid(map).appendchild(this.div);
return this.div;
},
//div下落
divdown: function() {
var divtop = parseint(this.div.style.top.slice(0, -2)); //字母方块的top
var mapheight = parseint(document.getelementbyid(map).style.height.slice(0, -2));
//就消失
if (divtop this.div.style.top = divtop + 30;
//获取按键的值
document.onkeydown = function() {
//按键的字母是不是 等于 div的值
if (string.fromcharcode(event.keycode) == game.div.innertext) {
document.getelementbyid(textrecord).value = 正确;
game.div.style.display = none;
clearinterval(game.timecreateid);
game.divcreate(100, 100, math.floor(math.random() * 300), -30, game.randletter());
}
else {
document.getelementbyid(textrecord).value = 错误;
}
}
}
//到达底线就消失，之后再创建div
else {
this.div.style.display = none;
game.divcreate(100, 100, math.floor(math.random() * 300), -30, this.randletter());
}
},
timecreateid: null,
timedownid: null,
start: function() {
this.divcreate(100, 100, 200, -40, this.randletter());
this.timedownid = setinterval(game.divdown();, 1000);
document.getelementbyid('buttonstart').disabled = 'disabled';
document.getelementbyid('buttonstop').disabled = '';
},
stop: function() {
if (this.timedownid != null) {
clearinterval(this.timedownid);
this.div.style.display = none;
}
document.getelementbyid('buttonstart').disabled = '';
document.getelementbyid('buttonstop').disabled = 'disabled';
}
}
效果演示
snmon转正题目 - -||| ，题目需求还要复杂100倍。。。 暂时只实现了随机生成字母，已监听键盘，还未计算得分。
得分：
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]