小小游戏，点击按钮开始。
<html><head> <script>
var en_word_containter;//单词所在的面板
var speed = 30;//速度 （像素）
var current_width = 0; //单词所在面板的自身宽度
var time;
var random_word;//随机单词
var score = 0;//分数
var en_word = new Array();//单词数据库
en_word[0] = "english";
en_word[1] = "dying";
en_word[2] = "ever";
en_word[3] = "java";
en_word[4] = "elegant";
en_word[5] = "stare";
en_word[6] = "eting";
en_word[7] = "compare";
en_word[8] = "freak";
en_word[9] = "hello";
en_word[10] = "keep in touch";
en_word[11] = "one the go";
en_word[12] = "recognition";
en_word[13] = "policy";
en_word[14] = "refund";
en_word[15] = "upstream";
en_word[16] = "paradise";
en_word[17] = "defective";
en_word[18] = "race";
en_word[19] = "reliable";
en_word[20] = "deadline";
en_word[21] = "revision";
en_word[22] = "falible";
en_word[23] = "composition";
en_word[24] = "personally";
en_word[25] = "straight";
en_word[26] = "exchange";
var en_length = en_word.length - 1;//单词个数
var _$ = new Function("id","return document.getElementById(id)");
//初始化
function init () {
_$("start").onclick = function () {
_$("start").setAttribute("disabled", true);
start_game ();
};
_$("word").onkeyup = function () {
compare_word (this);
};
_$("score").innerHTML = "score: "+ score;
}
//开始游戏
function start_game () {
var random_word_div = random_word_fn();
_$("containter").innerHTML = "";
_$("containter").appendChild(random_word_div);
time = setInterval("word_move()",500);
}
//随机产生单词
function random_word_fn () {
var div = document.createElement("div");
var random_word_index = Math.ceil(Math.random() * en_length);
random_word = en_word[random_word_index];
div.innerHTML = random_word;
en_word_containter = div;
div.style.width = "30px";
current_width = div.style.width.substring(0, div.style.width.indexOf("px"));
return div;
}
//单词移动效果
function word_move () {
var mf = en_word_containter.style.marginLeft;
if(mf.indexOf("px") != -1) {
//取得单词面板的margin-left值
var cur_mf = en_word_containter.style.marginLeft.substring(0, en_word_containter.style.marginLeft.indexOf("px"));
//如果margin-left大于250，就重新随机读取下一个单词
if(parseInt(cur_mf) - parseInt(current_width) > 250) {
clearTimeout(time);
_$("word").value = "";
start_game ();
}else {
en_word_containter.style.marginLeft = (parseInt(cur_mf) + speed) + "px";
}
}
//第一次的默认数据
else {
en_word_containter.style.marginLeft = speed+"px";
}
}
//是否得分
function compare_word (obj) {
if(random_word == obj.value) {
score ++;
clearTimeout(time);
_$("word").value = ""
_$("score").innerHTML = "score: "+ score;
start_game ();
}
}
</script>
</head><body onload="init();">
<input type="button" id="start" value="start game" style="background-color:black;color:white;border:0"/>
<span id="score">
</span>
<div style="width:500px;height:200px;padding-top:70px;color:white;background-color:black;margin-top:20px" id="containter">
</div>
<div>
<input type="text" id="word" style="border:0px;border-bottom:1px solid black;margin-top:10px;"/>
</div>
</body>
</html>
<html><head> <script>
var en_word_containter;//单词所在的面板
var speed = 30;//速度 （像素）
var current_width = 0; //单词所在面板的自身宽度
var time;
var random_word;//随机单词
var score = 0;//分数
var en_word = new Array();//单词数据库
en_word[0] = "english";
en_word[1] = "dying";
en_word[2] = "ever";
en_word[3] = "java";
en_word[4] = "elegant";
en_word[5] = "stare";
en_word[6] = "eting";
en_word[7] = "compare";
en_word[8] = "freak";
en_word[9] = "hello";
en_word[10] = "keep in touch";
en_word[11] = "one the go";
en_word[12] = "recognition";
en_word[13] = "policy";
en_word[14] = "refund";
en_word[15] = "upstream";
en_word[16] = "paradise";
en_word[17] = "defective";
en_word[18] = "race";
en_word[19] = "reliable";
en_word[20] = "deadline";
en_word[21] = "revision";
en_word[22] = "falible";
en_word[23] = "composition";
en_word[24] = "personally";
en_word[25] = "straight";
en_word[26] = "exchange";
var en_length = en_word.length - 1;//单词个数
var _$ = new Function("id","return document.getElementById(id)");
//初始化
function init () {
_$("start").onclick = function () {
_$("start").setAttribute("disabled", true);
start_game ();
};
_$("word").onkeyup = function () {
compare_word (this);
};
_$("score").innerHTML = "score: "+ score;
}
//开始游戏
function start_game () {
var random_word_div = random_word_fn();
_$("containter").innerHTML = "";
_$("containter").appendChild(random_word_div);
time = setInterval("word_move()",500);
}
//随机产生单词
function random_word_fn () {
var div = document.createElement("div");
var random_word_index = Math.ceil(Math.random() * en_length);
random_word = en_word[random_word_index];
div.innerHTML = random_word;
en_word_containter = div;
div.style.width = "30px";
current_width = div.style.width.substring(0, div.style.width.indexOf("px"));
return div;
}
//单词移动效果
function word_move () {
var mf = en_word_containter.style.marginLeft;
if(mf.indexOf("px") != -1) {
//取得单词面板的margin-left值
var cur_mf = en_word_containter.style.marginLeft.substring(0, en_word_containter.style.marginLeft.indexOf("px"));
//如果margin-left大于250，就重新随机读取下一个单词
if(parseInt(cur_mf) - parseInt(current_width) > 250) {
clearTimeout(time);
_$("word").value = "";
start_game ();
}else {
en_word_containter.style.marginLeft = (parseInt(cur_mf) + speed) + "px";
}
}
//第一次的默认数据
else {
en_word_containter.style.marginLeft = speed+"px";
}
}
//是否得分
function compare_word (obj) {
if(random_word == obj.value) {
score ++;
clearTimeout(time);
_$("word").value = ""
_$("score").innerHTML = "score: "+ score;
start_game ();
}
}
</script>
</head><body onload="init();">
<input type="button" id="start" value="start game" style="background-color:black;color:white;border:0"/>
<span id="score">
</span>
<div style="width:500px;height:200px;padding-top:70px;color:white;background-color:black;margin-top:20px" id="containter">
</div>
<div>
<input type="text" id="word" style="border:0px;border-bottom:1px solid black;margin-top:10px;"/>
</div>
</body>
</html>
_$("word").focus();
<html>
<head>
<script>
var en_word_containter;//单词所在的面板
var speed = 30;//速度 （像素）
var current_width = 0; //单词所在面板的自身宽度
var time;
var random_word;//随机单词
var score = 0;//分数var en_word = [//单词数据库
"english",
"dying",
"ever",
"java",
"elegant",
"stare",
"eting",
"compare",
"freak",
"hello",
"keep in touch",
"one the go",
"recognition",
"policy",
"refund",
"upstream",
"paradise",
"defective",
"race",
"reliable",
"deadline",
"revision",
"falible",
"composition",
"personally",
"straight",
"exchange"];var en_length = en_word.length - 1;//单词个数
var _$ = new Function("id","return document.getElementById(id)");//初始化
function init () {
_$("start").disabled = false;
_$("start").onclick = function () {
_$("start").disabled = true;
_$("word").focus();
start_game ();
};
_$("word").onkeyup = function () {
compare_word (this);
}; _$("score").innerHTML = "score: "+ score;
}//开始游戏
function start_game () {
var random_word_div = random_word_fn();
_$("containter").innerHTML = "";
_$("containter").appendChild(random_word_div);
time = setInterval("word_move()",500);
}//随机产生单词
function random_word_fn () {
var div = document.createElement("div");
var random_word_index = Math.ceil(Math.random() * en_length);
random_word = en_word[random_word_index];
div.innerHTML = random_word;
en_word_containter = div;
div.style.width = "30px";
current_width = div.style.width.substring(0, div.style.width.indexOf("px"));
return div;
}//单词移动效果
function word_move () {
var mf = en_word_containter.style.marginLeft;
if(mf.indexOf("px") != -1) {
//取得单词面板的margin-left值
var cur_mf = en_word_containter.style.marginLeft.substring(0, en_word_containter.style.marginLeft.indexOf("px"));
//如果margin-left大于250，就重新随机读取下一个单词
if(parseInt(cur_mf) - parseInt(current_width) > 250) {
clearTimeout(time);
_$("word").value = "";
start_game ();
}else {
en_word_containter.style.marginLeft = (parseInt(cur_mf) + speed) + "px";
}
}
//第一次的默认数据
else {
en_word_containter.style.marginLeft = speed+"px";
}
}//是否得分
function compare_word (obj) {
if (random_word == obj.value) {
score++;
clearTimeout(time);
_$("word").value = ""
_$("score").innerHTML = "score: "+ score;
start_game ();
return;
}
if (!en_word_containter) return;
var i = random_word.indexOf(obj.value);
var html = "";
if (obj.value && i == 0) {
html = "<span style=\"color:#f00;\">" + obj.value + "</span>" +
"<span style=\"color:#0f0;\">" +
random_word.substr(obj.value.length, random_word.length - obj.value.length) +
"</span>";
} else html = random_word;
if (en_word_containter.innerHTML != html)
en_word_containter.innerHTML = html;
}
</script>
</head><body onload="init();">
<input type="button" id="start" value="start game" style="background-color:black;color:white;border:0"/>
<span id="score">
</span>
<div style="width:500px;height:200px;padding-top:70px;color:white;background-color:black;margin-top:20px" id="containter">
</div>
<div>
<input type="text" id="word" style="border:0px;border-bottom:1px solid black;margin-top:10px;"/>
</div>
</body>
</html>