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

最新推荐文章于 2022-01-31 15:39:58 发布

曲径通幽~

最新推荐文章于 2022-01-31 15:39:58 发布

阅读量1.9k

点赞数 3

分类专栏： H5游戏小游戏动画

本文链接：https://blog.csdn.net/qq_36205941/article/details/103556460

版权

发现这段时间老忘基础单词，死记硬背太枯燥，遂想出写一个打字小游戏，过关制度来复习各个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 == "开始游戏"

最低0.47元/天解锁文章

曲径通幽~

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
打字小游戏源码—（JS写面向对象编程）

发现这段时间老忘基础单词，死记硬背太枯燥，遂想出写一个打字小游戏，过关制度来复习各个css属性和js关键字！下面贴出游戏界面！下边贴出代码！首先是index（首页）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...
复制链接

扫一扫

专栏目录