打字小游戏源码—(JS写面向对象编程)

发现这段时间老忘基础单词,死记硬背太枯燥,遂想出写一个打字小游戏,过关制度来复习各个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 == "开始游戏"
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值