首页 >> js开发 >> JavaScript原生js实现的金山打字小游戏（实例代码详解）
JavaScript原生js实现的金山打字小游戏（实例代码详解）
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
首先先来看一下效果图如果感兴趣的就来看一下Js源码吧
//计分板
var board = {
dom: document.getElementById("score"),
maxLost: 3, //最大丢失量
lost: 0, //当前丢失了多少个
score: 0, //当前分数
render: function() {
//显示
this.dom.innerHTML =
"
},
//增加一个丢失数
addLost: function() {
if (this.lost === this.maxLost) {
return; //游戏已经结束了
}
this.lost++;
if (this.lost === this.maxLost) {
//丢失量达到最大
game.gameOver();
}
this.render();
},
reset: function() {
this.lost = 0;
this.score = 0;
this.render();
},
//增加得分
addScore: function(number) {
if (this.lost === this.maxLost) {
//已经结束了
return;
}
this.score += number;
this.render();
}
};
board.render();
var letters = []; //目前的所有字母，一个字母就是一个对象
//字母的容器
var divContainer = document.getElementById("letter-container");
/**
* 产生一个字母对象，并将其加入到数组中
*/
function createLetter() {
//创建img元素
var img = document.createElement("img");
img.className = "letter";
divContainer.appendChild(img);
//设置src路径
var charNumber = getRandom(65, 65 + 26); //字母的随机ASCII码
var char = String.fromCharCode(charNumber);
img.src = "img/letter/" + char + ".png";
//left随机
var left = getRandom(0, divContainer.clientWidth - img.width);
img.style.left = left + "px";
var letter = {
dom: img,
char: char,
left: left,
top: -img.height, //初始的top值
speed: getRandom(100, 500), //速度: 像素/秒
render: function() {
this.dom.style.top = this.top + "px";
},
// 每调用一次该方法，字母移动一段距离
// duration是经过的时间: 秒
move: function(duration) {
var dis = duration * this.speed; //计算距离
this.top += dis;
this.render();
},
kill: function() {
//自杀
// 从数组中移除
var index = letters.indexOf(this); //找到字母在数组中的下标
if (index >= 0) {
letters.splice(index, 1);
}
// 移除dom元素
this.dom.remove();
}
};
letter.render();
letters.push(letter);
}
// 根据最小值和最大值产生一个随机整数(不包含最大值)
function getRandom(min, max) {
// Math.random() 0~1
// Math.random() * (max - min) 0 ~ (max - min)
// Math.random() * (max - min) + min min ~ max
return Math.floor(Math.random() * (max - min) + min);
}
//游戏对象，统筹规划
var game = {
timerProduce: null, //自动产生字母的timerid
timerMove: null, //自动移动的timerid
isOver: false,
//自动的，不断的，产生字母
startProduce: function() {
if (this.timerProduce) {
return; //正在产生中，什么也不做
}
this.timerProduce = setInterval(createLetter, 500);
},
//停止自动产生字母
stopProduce: function() {
clearInterval(this.timerProduce);
this.timerProduce = null;
},
//开始不断的移动所有字母
startMove: function() {
if (this.timerMove) {
return;
}
var duration = 0.016; //间隔时间，秒
this.timerMove = setInterval(function() {
for (var i = 0; i < letters.length; i++) {
var letter = letters[i]; //要移动的字母
letter.move(duration);
//判断该字母是不是可以消除了
if (letter.top >= divContainer.clientHeight) {
letter.kill();
i--;
//丢失
board.addLost();
}
}
}, duration * 1000);
},
//停止移动所有字母
stopMove: function() {
clearInterval(this.timerMove);
this.timerMove = null;
},
gameOver: function() {
this.stopMove();
this.stopProduce();
document.getElementById("over").style.display = "block";
this.isOver = true;
},
restart: function() {
//清空字母
for (var i = 0; i < letters.length; i++) {
var letter = letters[i];
letter.kill();
i--;
}
this.startMove();
this.startProduce();
board.reset();
this.isOver = false;
document.getElementById("over").style.display = "none";
}
};
game.startProduce();
game.startMove();
//注册事件
window.onkeydown = function(e) {
if (game.isOver) {
return;
}
var key = e.key.toUpperCase();
//匹配
for (var i = 0; i < letters.length; i++) {
var letter = letters[i];
if (letter.char === key) {
letter.kill();
board.addScore(10);
return; //只移除一个
}
}
};
//计分板
var board = {
dom: document.getElementById("score"),
maxLost: 3, //最大丢失量
lost: 0, //当前丢失了多少个
score: 0, //当前分数
render: function() {
//显示
this.dom.innerHTML =
"
},
//增加一个丢失数
addLost: function() {
if (this.lost === this.maxLost) {
return; //游戏已经结束了
}
this.lost++;
if (this.lost === this.maxLost) {
//丢失量达到最大
game.gameOver();
}
this.render();
},
reset: function() {
this.lost = 0;
this.score = 0;
this.render();
},
//增加得分
addScore: function(number) {
if (this.lost === this.maxLost) {
//已经结束了
return;
}
this.score += number;
this.render();
}
};
board.render();
var letters = []; //目前的所有字母，一个字母就是一个对象
//字母的容器
var divContainer = document.getElementById("letter-container");
/**
* 产生一个字母对象，并将其加入到数组中
*/
function createLetter() {
//创建img元素
var img = document.createElement("img");
img.className = "letter";
divContainer.appendChild(img);
//设置src路径
var charNumber = getRandom(65, 65 + 26); //字母的随机ASCII码
var char = String.fromCharCode(charNumber);
img.src = "img/letter/" + char + ".png";
//left随机
var left = getRandom(0, divContainer.clientWidth - img.width);
img.style.left = left + "px";
var letter = {
dom: img,
char: char,
left: left,
top: -img.height, //初始的top值
speed: getRandom(100, 500), //速度: 像素/秒
render: function() {
this.dom.style.top = this.top + "px";
},
// 每调用一次该方法，字母移动一段距离
// duration是经过的时间: 秒
move: function(duration) {
var dis = duration * this.speed; //计算距离
this.top += dis;
this.render();
},
kill: function() {
//自杀
// 从数组中移除
var index = letters.indexOf(this); //找到字母在数组中的下标
if (index >= 0) {
letters.splice(index, 1);
}
// 移除dom元素
this.dom.remove();
}
};
letter.render();
letters.push(letter);
}
// 根据最小值和最大值产生一个随机整数(不包含最大值)
function getRandom(min, max) {
// Math.random() 0~1
// Math.random() * (max - min) 0 ~ (max - min)
// Math.random() * (max - min) + min min ~ max
return Math.floor(Math.random() * (max - min) + min);
}
//游戏对象，统筹规划
var game = {
timerProduce: null, //自动产生字母的timerid
timerMove: null, //自动移动的timerid
isOver: false,
//自动的，不断的，产生字母
startProduce: function() {
if (this.timerProduce) {
return; //正在产生中，什么也不做
}
this.timerProduce = setInterval(createLetter, 500);
},
//停止自动产生字母
stopProduce: function() {
clearInterval(this.timerProduce);
this.timerProduce = null;
},
//开始不断的移动所有字母
startMove: function() {
if (this.timerMove) {
return;
}
var duration = 0.016; //间隔时间，秒
this.timerMove = setInterval(function() {
for (var i = 0; i < letters.length; i++) {
var letter = letters[i]; //要移动的字母
letter.move(duration);
//判断该字母是不是可以消除了
if (letter.top >= divContainer.clientHeight) {
letter.kill();
i--;
//丢失
board.addLost();
}
}
}, duration * 1000);
},
//停止移动所有字母
stopMove: function() {
clearInterval(this.timerMove);
this.timerMove = null;
},
gameOver: function() {
this.stopMove();
this.stopProduce();
document.getElementById("over").style.display = "block";
this.isOver = true;
},
restart: function() {
//清空字母
for (var i = 0; i < letters.length; i++) {
var letter = letters[i];
letter.kill();
i--;
}
this.startMove();
this.startProduce();
board.reset();
this.isOver = false;
document.getElementById("over").style.display = "none";
}
};
game.startProduce();
game.startMove();
//注册事件
window.onkeydown = function(e) {
if (game.isOver) {
return;
}
var key = e.key.toUpperCase();
//匹配
for (var i = 0; i < letters.length; i++) {
var letter = letters[i];
if (letter.char === key) {
letter.kill();
board.addScore(10);
return; //只移除一个
}
}
};仅仅使用js的面向对象编程，可爱的金山打字小游戏就实现了总结总结总结
//计分板
var board = {
dom: document.getElementById("score"),
maxLost: 3, //最大丢失量
lost: 0, //当前丢失了多少个
score: 0, //当前分数
render: function() {
//显示
this.dom.innerHTML =
"
得分：" +
this.score +
"
丢失：" +
this.lost +
" / " +
this.maxLost +
"
},
//增加一个丢失数
addLost: function() {
if (this.lost === this.maxLost) {
return; //游戏已经结束了
}
this.lost++;
if (this.lost === this.maxLost) {
//丢失量达到最大
game.gameOver();
}
this.render();
},
reset: function() {
this.lost = 0;
this.score = 0;
this.render();
},
//增加得分
addScore: function(number) {
if (this.lost === this.maxLost) {
//已经结束了
return;
}
this.score += number;
this.render();
}
};
board.render();
var letters = []; //目前的所有字母，一个字母就是一个对象
//字母的容器
var divContainer = document.getElementById("letter-container");
/**
* 产生一个字母对象，并将其加入到数组中
*/
function createLetter() {
//创建img元素
var img = document.createElement("img");
img.className = "letter";
divContainer.appendChild(img);
//设置src路径
var charNumber = getRandom(65, 65 + 26); //字母的随机ASCII码
var char = String.fromCharCode(charNumber);
img.src = "img/letter/" + char + ".png";
//left随机
var left = getRandom(0, divContainer.clientWidth - img.width);
img.style.left = left + "px";
var letter = {
dom: img,
char: char,
left: left,
top: -img.height, //初始的top值
speed: getRandom(100, 500), //速度: 像素/秒
render: function() {
this.dom.style.top = this.top + "px";
},
// 每调用一次该方法，字母移动一段距离
// duration是经过的时间: 秒
move: function(duration) {
var dis = duration * this.speed; //计算距离
this.top += dis;
this.render();
},
kill: function() {
//自杀
// 从数组中移除
var index = letters.indexOf(this); //找到字母在数组中的下标
if (index >= 0) {
letters.splice(index, 1);
}
// 移除dom元素
this.dom.remove();
}
};
letter.render();
letters.push(letter);
}
// 根据最小值和最大值产生一个随机整数(不包含最大值)
function getRandom(min, max) {
// Math.random() 0~1
// Math.random() * (max - min) 0 ~ (max - min)
// Math.random() * (max - min) + min min ~ max
return Math.floor(Math.random() * (max - min) + min);
}
//游戏对象，统筹规划
var game = {
timerProduce: null, //自动产生字母的timerid
timerMove: null, //自动移动的timerid
isOver: false,
//自动的，不断的，产生字母
startProduce: function() {
if (this.timerProduce) {
return; //正在产生中，什么也不做
}
this.timerProduce = setInterval(createLetter, 500);
},
//停止自动产生字母
stopProduce: function() {
clearInterval(this.timerProduce);
this.timerProduce = null;
},
//开始不断的移动所有字母
startMove: function() {
if (this.timerMove) {
return;
}
var duration = 0.016; //间隔时间，秒
this.timerMove = setInterval(function() {
for (var i = 0; i < letters.length; i++) {
var letter = letters[i]; //要移动的字母
letter.move(duration);
//判断该字母是不是可以消除了
if (letter.top >= divContainer.clientHeight) {
letter.kill();
i--;
//丢失
board.addLost();
}
}
}, duration * 1000);
},
//停止移动所有字母
stopMove: function() {
clearInterval(this.timerMove);
this.timerMove = null;
},
gameOver: function() {
this.stopMove();
this.stopProduce();
document.getElementById("over").style.display = "block";
this.isOver = true;
},
restart: function() {
//清空字母
for (var i = 0; i < letters.length; i++) {
var letter = letters[i];
letter.kill();
i--;
}
this.startMove();
this.startProduce();
board.reset();
this.isOver = false;
document.getElementById("over").style.display = "none";
}
};
game.startProduce();
game.startMove();
//注册事件
window.onkeydown = function(e) {
if (game.isOver) {
return;
}
var key = e.key.toUpperCase();
//匹配
for (var i = 0; i < letters.length; i++) {
var letter = letters[i];
if (letter.char === key) {
letter.kill();
board.addScore(10);
return; //只移除一个
}
}
};
//计分板
var board = {
dom: document.getElementById("score"),
maxLost: 3, //最大丢失量
lost: 0, //当前丢失了多少个
score: 0, //当前分数
render: function() {
//显示
this.dom.innerHTML =
"
得分：" +
this.score +
"
丢失：" +
this.lost +
" / " +
this.maxLost +
"
},
//增加一个丢失数
addLost: function() {
if (this.lost === this.maxLost) {
return; //游戏已经结束了
}
this.lost++;
if (this.lost === this.maxLost) {
//丢失量达到最大
game.gameOver();
}
this.render();
},
reset: function() {
this.lost = 0;
this.score = 0;
this.render();
},
//增加得分
addScore: function(number) {
if (this.lost === this.maxLost) {
//已经结束了
return;
}
this.score += number;
this.render();
}
};
board.render();
var letters = []; //目前的所有字母，一个字母就是一个对象
//字母的容器
var divContainer = document.getElementById("letter-container");
/**
* 产生一个字母对象，并将其加入到数组中
*/
function createLetter() {
//创建img元素
var img = document.createElement("img");
img.className = "letter";
divContainer.appendChild(img);
//设置src路径
var charNumber = getRandom(65, 65 + 26); //字母的随机ASCII码
var char = String.fromCharCode(charNumber);
img.src = "img/letter/" + char + ".png";
//left随机
var left = getRandom(0, divContainer.clientWidth - img.width);
img.style.left = left + "px";
var letter = {
dom: img,
char: char,
left: left,
top: -img.height, //初始的top值
speed: getRandom(100, 500), //速度: 像素/秒
render: function() {
this.dom.style.top = this.top + "px";
},
// 每调用一次该方法，字母移动一段距离
// duration是经过的时间: 秒
move: function(duration) {
var dis = duration * this.speed; //计算距离
this.top += dis;
this.render();
},
kill: function() {
//自杀
// 从数组中移除
var index = letters.indexOf(this); //找到字母在数组中的下标
if (index >= 0) {
letters.splice(index, 1);
}
// 移除dom元素
this.dom.remove();
}
};
letter.render();
letters.push(letter);
}
// 根据最小值和最大值产生一个随机整数(不包含最大值)
function getRandom(min, max) {
// Math.random() 0~1
// Math.random() * (max - min) 0 ~ (max - min)
// Math.random() * (max - min) + min min ~ max
return Math.floor(Math.random() * (max - min) + min);
}
//游戏对象，统筹规划
var game = {
timerProduce: null, //自动产生字母的timerid
timerMove: null, //自动移动的timerid
isOver: false,
//自动的，不断的，产生字母
startProduce: function() {
if (this.timerProduce) {
return; //正在产生中，什么也不做
}
this.timerProduce = setInterval(createLetter, 500);
},
//停止自动产生字母
stopProduce: function() {
clearInterval(this.timerProduce);
this.timerProduce = null;
},
//开始不断的移动所有字母
startMove: function() {
if (this.timerMove) {
return;
}
var duration = 0.016; //间隔时间，秒
this.timerMove = setInterval(function() {
for (var i = 0; i < letters.length; i++) {
var letter = letters[i]; //要移动的字母
letter.move(duration);
//判断该字母是不是可以消除了
if (letter.top >= divContainer.clientHeight) {
letter.kill();
i--;
//丢失
board.addLost();
}
}
}, duration * 1000);
},
//停止移动所有字母
stopMove: function() {
clearInterval(this.timerMove);
this.timerMove = null;
},
gameOver: function() {
this.stopMove();
this.stopProduce();
document.getElementById("over").style.display = "block";
this.isOver = true;
},
restart: function() {
//清空字母
for (var i = 0; i < letters.length; i++) {
var letter = letters[i];
letter.kill();
i--;
}
this.startMove();
this.startProduce();
board.reset();
this.isOver = false;
document.getElementById("over").style.display = "none";
}
};
game.startProduce();
game.startMove();
//注册事件
window.onkeydown = function(e) {
if (game.isOver) {
return;
}
var key = e.key.toUpperCase();
//匹配
for (var i = 0; i < letters.length; i++) {
var letter = letters[i];
if (letter.char === key) {
letter.kill();
board.addScore(10);
return; //只移除一个
}
}
};仅仅使用js的面向对象编程，可爱的金山打字小游戏就实现了总结总结总结
相关文章:
- jswebpack+vue-cil 中proxyTable配置接口地址代理操作js大全
- js解决elementUI 切换tab后 el_table 固定列下方多了一条线问题js大全
- jsVue项目前后端联调(使用proxyTable实现跨域方式)js大全
- js解决vue一个页面中复用同一个echarts组件的问题js大全
- jsVue移动端项目实现使用手机预览调试操作js大全
- js深入理解 ES6中的 Reflect用法js大全
- JavaScriptvuejs element table 表格添加行,修改,单独删除行,批量删除行操作
- js解决echarts图表使用v-show控制图表显示不全的问题js大全
- JavaScriptecharts.js 动态生成多个图表 使用vue封装组件操作
- jsvue-router为激活的路由设置样式操作js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
