发现这段时间老忘基础单词,死记硬背太枯燥,遂想出写一个打字小游戏,过关制度来复习各个css属性和js关键字!下面贴出游戏界面!
下边贴出代码!
首先是index(首页)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>疯狂学js</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height:100%;
color: #fff;
}
#borad{
width: 100%;
height: 100%;
background: rgba(17, 17, 17, 0.966);
overflow: hidden;
}
#hint{
color: #fff;
position: absolute;
top: 0;
}
li{
list-style: none;
float: right;
}
li>span{
color: red;
}
</style>
</head>
<body>
<div id="borad">
</div>
<div id="hint">
游戏规则,输入飘出的对应字母,按空格键进行消除<br><br>
<li>当前分数:<span id="grade">0</span>分</li>
</div>
<script src="js/move.js"></script>
<script src="js/easing.js"></script>
<script src="js/Catalogue.js"></script>
<script src="js/Level.js"></script>
<script src="js/Control.js"></script>
<script src="js/Game.js"></script>
<script src="js/Map.js"></script>
<script src="js/WordAll.js"></script>
<script>
var borad = document.getElementById("borad")
var map = new Map(borad)
var catalogue = new Catalogue()
var level = new Level()
var wordall = new WordAll()
var control = new Control()
var game = new Game()
</script>
</body>
</html>
接下来是游戏开始目录的类
class Catalogue {
constructor() {
this.cata = document.createElement("div")
// this.init()
}
init() {
this.renderCata()
this.GameName()
this.startGame() //开始游戏
this.level()
this.developer() //开发人员
this.leaveGame()
this.bindEvent()
}
renderCata() {
this.cata.style.width = map.mapArea.clientWidth / 2 + "px";
this.cata.style.height = map.mapArea.clientHeight / 2.5 + "px";
this.cata.style.position = "relative"
this.cata.style.background = "#000";
this.cata.id = "cata"
map.mapArea.appendChild(this.cata)
this.cata.style.margin = `${map.mapArea.clientHeight / 2 - this.cata.clientHeight / 2}px auto 0`;
}
createFun(text,color) { //创建目录div
var startgame = document.createElement("div")
// var startgame.style.width = "50px"
startgame.style.height = this.cata.clientHeight/6 + "px";
startgame.style.lineHeight = this.cata.clientHeight/6 + "px";
startgame.style.background = color;
startgame.style.textAlign = "center";
startgame.innerHTML = text;
startgame.style.borderRadius = "5px"
startgame.style.margin = "20px 30px";
startgame.style.cursor = "pointer";
startgame.className = "cata";
startgame.style.overflow = "hidden"
startgame.style.position = "relative"
this.cata.appendChild(startgame)
}
GameName(){
var gamename = document.createElement("div")
gamename.style.position = "absolute";
gamename.style.width = map.mapArea.clientWidth / 2 + "px";
gamename.style.height = map.mapArea.clientHeight / 7 + "px";
gamename.style.top = "0px";
gamename.style.background="#000";
gamename.className = "gamename"
gamename.style.textAlign = "center"
gamename.style.lineHeight = map.mapArea.clientHeight / 7 + "px";
gamename.style.fontSize = "30px"
gamename.innerHTML = "疯狂学代码";
gamename.style.cursor = "default"
map.mapArea.appendChild(gamename)
gamename.style.left = map.mapArea.clientWidth / 2 - gamename.clientWidth/2+"px";
}
startGame() {
this.createFun("开始游戏","green")
}
level(){
this.createFun("难度选择","green")
}
developer(){
this.createFun("开发人员","green")
}
leaveGame(){
this.createFun("离开游戏","green")
}
bindEvent(){
var _this = this;
this.domAll = document.getElementsByClassName("cata")
for(let i =0 ;i< this.domAll.length;i++){
this.domAll[i].onclick = function(e){
if(e.target.innerHTML == "开始游戏"