今天想写个简单的游戏， 打字游戏好像都没写过， 那么就写打字游戏吧， gamePad包含了关卡的信息， 可以用来调整给个关卡字符下落的速度；
getRandom函数会返回一个字符对象， 这个对象包含了字符下落的速度和当前被定位的x，y值， 一整框代码比较有借鉴的地方就是， 只用了一个定时器， 而不是每一个字符都用一个定时器， 那样会严重影响性能；
没使用第三方的库， 纯手贱， 用原生的js写游戏
<html>
<head>
<meta charset="utf-8">
<style>
#conatiner{
400px;
height:500px;
border:1px solid #eee;
position: relative;
}
</style>
</head>
<body>
<span>typing</span>
<div>
<span id="score">0</span>得分
</div>
<div id="conatiner">
</div>
<button id="start">开始游戏</button>
</body>
<script>
var gamePad = {
1 : {
speed : 100
},
2 : {
speed : 90
},
3 : {
speed : 70
},
4 : {
speed : 40
},
5 : {
speed : 20
}
}
var getRandom = function() {
//随即一个97到122的字符;
var charCode = 97+Math.floor(Math.random()*26);
var speed = Math.ceil(Math.random()*4);
return {
code : String.fromCharCode(charCode),
speed : speed,
y : 0,
x : Math.floor(Math.random()*390),
}
};
function game( n , score ) {
var eConatiner = document.getElementById("conatiner");
var eScore = document.getElementById("score");
var showArr = []; //字符对象的列表
var shoted = 0;
//随机一个字符对象， 包含了字符的运动速度，字符的值
//让showArr这个数组的数据运动;
var run = function() {
//随机生成字符对象
if(Math.random()>0.9) {
var obj = getRandom();
showArr.push(obj);
}
//让元素运动
for(var i=0 ;i < showArr.length; i++) {
showArr[i].y+=showArr[i].speed;
if(showArr[i].y>500) {
//showArr.splice(i,1);
clear();
alert("游戏失败");
location.reload();
}
}
eConatiner.innerHTML = "";
//让元素添加到界面中;
for(var i=0 ;i < showArr.length; i++) {
var eSpan = document.createElement("span");
eSpan.style.position = "absolute";
eSpan.innerHTML = showArr[i].code;
eSpan.style.left = showArr[i].x;
eSpan.style.top = showArr[i].y;
eConatiner.appendChild(eSpan);
}
}
var keyup = function(ev) {
for(var i=0 ;i < showArr.length; i++) {
if(showArr[i].code === ev.key || String.fromCharCode(ev.keyCode).toLowerCase() == showArr[i].code) {
showArr.splice(i,1);
shoted++;
eScore.innerHTML = shoted;
if(shoted === score && gamePad[n+1] === undefined) {
alert("少侠你好厉害， 你好快， 真的好快好快的");
}else if(shoted === score) {
clear();
alert("进入下一关");
game(n+1, score+10)
}
return;
}
}
}
var clear = function() {
clearInterval(game.timer);
window.removeEventListener("keyup", keyup);
}
window.addEventListener("keyup", keyup);
game.timer = setInterval(run,gamePad[n].speed);
}
document.getElementById("start").addEventListener("click", function() {
game(1, 10);
});
</script>
</html>
重新整理代码， 修改成面向对象样子， 过程式的代码太乱了， 虽然说是面向对象， 只是JS看起来舒服多；
通过面向对象的思维把JS代码各个模块进行封装， 避免作用域的混乱不堪：
<html>
<head>
<meta charset="utf-8">
<style>
#conatiner{
400px;
height:500px;
border:1px solid #eee;
position: relative;
}
</style>
</head>
<body>
<span>typing</span>
<div>
<span id="score">0</span>得分 ;
需要：<span id="need"></span>分；
</div>
<div id="conatiner">
</div>
<button id="start">开始游戏</button>
</body>
<script>
var eConatiner = document.getElementById("conatiner");
var eScore = document.getElementById("score");
var getRandom = function() {
//随即一个97到122的字符;
var charCode = 97+Math.floor(Math.random()*26);
var speed = Math.ceil(Math.random()*4);
return {
code : String.fromCharCode(charCode),
speed : speed,
y : 0,
x : Math.floor(Math.random()*390),
}
};
function Game( n , score , eConatiner, eScore ,need) {
this.need = need;
this.need.innerHTML = score;
this.showArr = []; //字符对象的列表
this.shoted = 0;
this.n = n;
this.score = score;
this.eConatiner = eConatiner;
this.eScore = eScore;
this.events();
this.run();
this.timer = setInterval(this.run.bind(this), Game.gamePad[n].speed);
}
Game.gamePad = {
1 : {
speed : 100
},
2 : {
speed : 90
},
3 : {
speed : 70
},
4 : {
speed : 40
},
5 : {
speed : 20
}
}
Game.prototype.keyup = function(ev) {
showArr = this.showArr;
for(var i=0 ;i < showArr.length; i++) {
if(showArr[i].code === ev.key || String.fromCharCode(ev.keyCode).toLowerCase() == showArr[i].code) {
showArr.splice(i,1);
this.shoted++;
this.eScore.innerHTML = this.shoted;
if(this.shoted === this.score && Game.gamePad[this.n+1] === undefined) {
alert("少侠你好厉害， 你好快， 真的好快好快的");
}else if(this.shoted === this.score) {
this.unbind();
alert("进入下一关");
new Game(this.n+1, this.score+10, this.eConatiner, this.eScore, this.need);
}
return;
}
}
}
Game.prototype.events = function() {
this.keyup = this.keyup.bind(this);
window.addEventListener("keyup", this.keyup);
}
Game.prototype.unbind = function() {
clearInterval(this.timer);
window.removeEventListener("keyup", this.keyup);
}
//随机一个字符对象， 包含了字符的运动速度，字符的值
//让showArr这个数组的数据运动;
Game.prototype.run = function(){
showArr = this.showArr;
//随机生成字符对象
if(Math.random()>0.9) {
var obj = getRandom();
showArr.push(obj);
}
//让元素运动
for(var i=0 ;i < showArr.length; i++) {
showArr[i].y+=showArr[i].speed;
if(showArr[i].y>500) {
alert("游戏失败");
location.reload();
}
}
this.eConatiner.innerHTML = "";
//让元素添加到界面中;
for(var i=0 ;i < showArr.length; i++) {
var eSpan = document.createElement("span");
eSpan.style.position = "absolute";
eSpan.innerHTML = showArr[i].code;
eSpan.style.left = showArr[i].x;
eSpan.style.top = showArr[i].y;
this.eConatiner.appendChild(eSpan);
}
}
document.getElementById("start").addEventListener("click", function() {
new Game(1, 10, eConatiner, eScore, document.getElementById("need"));
});
</script>
</html>
作者： NONO
出处：http://www.cnblogs.com/diligenceday/
企业网站：http://www.idrwl.com/ 厦门点燃未来网络科技
开源博客：http://www.github.com/sqqihao
QQ：287101329
微信：18101055830