JavaScript: 原创面对对象打地鼠小游戏

文章目录

HTML部分：
Css部分：
JavaScript部分：
效果展示：
代码仅供参考，禁止转载！

2019年12月写的，现在分享出来

HTML部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>打地鼠 面对对象</title>
</head>

<body onmousedown="mousedown()" onmouseup="mouseup()">
    <main>
        <img src="./image/tianshi.gif" class="gif">
        <div class="content" id="content">
            <a href="javascript:void(0)">
                <div id="begin">开始</div>
            </a>
            <div class="count">
                得分为:
                <span>0</span>分
            </div>
            <a href="javascript:void(0)">
                <div id="pause">暂停</div>
            </a>
            <div class="hole-tab">
                <table style="margin-top: 10px;">

                    <tr>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                        <td>
                            <img src="./image/hole.png" class="img">
                        </td>
                    </tr>
                </table>
            </div>
            <video src="./audio/music.mp3" autoplay="true" loop="true" id="video_"></video>
        </div>
    </main>
    <script src="./mouse.js"></script>
</body>

</html>

Css部分：

    * {
        margin: 0px;
        padding: 0px;
    }
    
    body {
        background-image: url(./image/bg.jpg);
        background-size: 100% 135%;
        overflow: hidden;
        user-select: none;
    }
    
    main {
        width: 960px;
        height: 600px;
        margin: 100px auto;
    }
    
    .content {
        width: 700px;
        height: 600px;
        margin: auto;
        position: relative;
        border: 5px solid rgba(38, 255, 5, 0.599);
    }
    
    #begin {
        background-color: rgb(11, 247, 196);
        border-radius: 15px;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        position: absolute;
        margin-left: 50px;
        font-size: 23px;
    }
    
    #pause {
        background-color: rgb(11, 247, 196);
        border-radius: 15px;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        position: absolute;
        top: 0px;
        right: 0px;
        margin-right: 50px;
        font-size: 23px;
    }
    
    .count {
        width: 115px;
        height: 50px;
        border: 2px solid rgb(0, 242, 255);
        margin: auto;
        background-color: chartreuse;
        margin-top: -1px;
    }
    
    main div div span:first-child {
        line-height: 50px;
        margin-left: 10px;
    }
    
    .hole-tab {
        width: 100%;
        height: 550px;
        position: absolute;
        margin-top: -4px;
        margin-left: -4px;
        border: 4px solid rgb(0, 242, 255);
    }
    
    .img {
        width: 233px;
        height: 101px;
    }
    
    .gif {
        top: 0px;
        width: 272px;
        height: 266px;
        right: 140px;
        position: absolute;
    }
    
    .mouse {
        width: 90px;
        height: 90px;
        position: absolute;
        margin-left: -165px;
        margin-top: -7px;
    }
    
    .mouse_click {
        width: 0px;
        height: 0px;
        position: absolute;
        margin-left: -165px;
        margin-top: -7px;
    }

JavaScript部分：

var that; //储存 constructor 的 this
var index_; //储存  showMouse 的 index
var count = 0;
var body_ = document.querySelector('body');

function mousedown() {
    body_.style.cursor = 'url(./image/cursor-down.png),auto';
}

function mouseup() {
    body_.style.cursor = 'url(./image/cursor.png),auto';
}
class Map {
    constructor(id) {
        that = this;
        this.main = document.querySelector(id);
        this.tds = this.main.querySelectorAll('td');
        this.score = this.main.querySelector('main div div span:first-child')
        this.begin_ = this.main.querySelector('#begin')
        this.pause = this.main.querySelector('#pause')
        this.video_ = this.main.querySelector('#video_')
        this.init()
    }
    init() {
            this.pause.onclick = this.pauseGame;
            this.begin_.onclick = this.showMouse;
        }
        //老鼠出现
    showMouse() {

        console.log(this); //this 指向还是 this.begin_.onclick 
        var index = Math.floor(Math.random() * 15); //随机出生地
        console.log(index);
        index_ = index; //储存
        let img = '<img src="./image/mouse.png" class="mouse">';
        that.tds[index].insertAdjacentHTML('beforeend', img); //添加元素
        that.tds[index].children[1].setAttribute('onclick', 'that.die()') //给添加的元素绑定onclick事件
        setTimeout("that.escape()", Math.random() * 600 + 800);
    }

    //老鼠逃跑
    escape() {
            try {
                console.log(index_); //检测是否拿到 showMouse()的index
                console.log(this); //this 指向还是constructor
                console.log(this.tds[index_].children[1]); //检测是否拿到老鼠img
                this.tds[index_].children[1].remove();
                setTimeout("that.showMouse()", Math.random() * 600 + 800);
            } catch (e) {

            }
        }
        //老鼠被打死
    die() {
            console.log(this); //this=>constructor
            console.log(true); //测试是否调用成功
            console.log(that.tds[index_].children[1]);
            this.tds[index_].removeAttribute('onclick');
            this.tds[index_].children[1].remove();
            let video_ = '<video src="./audio/hit.wav" autoplay="true"></video>';
            this.video_.insertAdjacentHTML('beforeend', video_);
            let img_ = '<img src="./image/mouse_.png" class="mouse">';
            this.tds[index_].insertAdjacentHTML('beforeend', img_);
            count++;
            this.score.innerHTML = count + '0';
            setTimeout("that.escape()", Math.random() * 600 + 800);
        }
        //游戏暂停
    pauseGame() {
        console.log(true);
        alert('您已暂停游戏！是否继续游戏？');
    }
}
new Map("#content");

效果展示：

在这里插入图片描述

JavaScript: 原创面对对象 打地鼠小游戏

文章目录

HTML部分：

Css部分：

JavaScript部分：

效果展示：

代码仅供参考，禁止转载！

猜你喜欢

JavaScript: 原创面对对象打地鼠小游戏