原生JS之贪吃蛇

其他 2018-10-31 18:31:18 阅读次数: 0

注：本文章代码根据网上教程所编写（略有改动）

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>贪吃蛇</title>
    <link rel="stylesheet" href="snake.css">
</head>

<body>
    <div class="startPage" id="startPage">
        <div class="startBtn" id="startBtn"></div>
    </div>
    <div class="wrapper">
        <div class="left-side">
            <img src="img/start.png" alt="" id="start">
            <img src="img/pause.png" alt="" id="pause">
        </div>
        <div class="main">
            <div class="header">
                <div class="score">
                    分数：
                    <span id="score"></span>
                </div>
            </div>
            <div class="content" id="content">

            </div>
        </div>
    </div>
    <!-- 游戏失败的弹窗 -->
    <div class="loser" id="loser">
        <div class="con">
            <div class="close" id="close"></div>
            <span class="loserScore" id="loserScore"></span>
        </div>
    </div>



    <script src="snake.js"></script>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
}

.startPage {
    width: 100%;
    height: 100%;
    z-index: 999;
    position: absolute;
    top: 0;
    left: 0;
    /* display: none; */
}

.startBtn {
    background-image: url("img/startGame.png");
    height: 170px;
    width: 200px;
    background-size: 100% 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.wrapper {
    width: 100%;
    height: 100%;
    background-image: url('img/bg.jpg');
    background-size: 100% 100%;
    position: relative;
}

.left-side {
    width: 24%;
    position: absolute;
    height: 20%;
    /* border: 1px solid black; */
    top: 65%;
    left: 38%;
}

.left-side img {
    display: none;
    float: left;
    margin-left: 50px;
    margin-top: 50px;
    cursor: pointer;
}

.main {
    position: absolute;
    left: 25%;
    width: 50%;
    height: 70%;
    /* border: 1px solid black; */
}

.header {
    width: 100%;
    height: 80px;
    text-align: center;
}

.score {
    line-height: 80px;
    color: #dddddd;
    font-size: 20px;
    font-weight: bold;
}

.content {
    position: absolute;
    width: 79.5%;
    height: 48%;
    left: 10%;
    top: 43%;
    /* border: 1px solid black; */
}

.loser {
    display: none;
    width: 100%;
    height: 1000px;
    top: 0;
    left: 0;
}

.con {
    background-image: url('img/startP.jpg');
    background-size: 100% 100%;
    width: 400px;
    height: 300px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
}

.close {
    background-image: url('img/closeBtn.png');
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.loserScore {
   
    height: 30px;
    height: 40px;
    position: absolute;
    top: 42%;
    left: 40%;
    color: #222222;
    font-size: 30px;
    font-weight: bold;
}

.food {
    background-image: url('img/apple.png');
    background-size: 100% 100%;
}

/* 蛇头 */

.head {
    background-image: url('img/head.png');
    background-size: 100% 100%;
}

/* 蛇身 */

.body {
    background-image: url('img/body.png');
    background-size: 100% 100%;
}

Js

代码设计思路

//点击开始游戏--startPage消失--游戏开始

//随机出现食物、出现三节蛇开始运动

//上下左右---改变运动方向

//判断是否吃到食物---食物消失，蛇身+1

//判断游戏结束--弹框

代码

var content = document.getElementById('content');
var startPage = document.getElementById('startPage');
var scoreBox = document.getElementById('score');
var loser = document.getElementById('loser');
var loseScore = document.getElementById('loserScore');
var closeBtn = document.getElementById('close');
var startBtn = document.getElementById('startBtn');
var start = document.getElementById('start');
var pause = document.getElementById('pause');
var startGameBool = true;
var startPaushBool = true;
var code;
var snakeMove;
var speed = 300;
init();
//初始化函数
function init() {
    //地图
    this.mapW = parseInt(getComputedStyle(content).width); //取得地图宽
    this.mapH = parseInt(getComputedStyle(content).height); //取得地图高

    this.mapDiv = content;

    //食物
    this.foodW = 20; //食物宽度
    this.foodH = 20; //食物高度
    this.foodX = 0;
    this.foodY = 0;
    //蛇
    this.snakeW = 20;
    this.snakeH = 20;
    this.SnakeBody = [
        [3, 1, 'head'],
        [2, 1, 'body'],
        [1, 1, 'body']
    ];
    //游戏属性
    this.direct = 'right';
    //当方向为右时  只能上/下操作 不能左/右操作
    this.left = false;
    this.right = false;
    this.up = true;
    this.down = true;

    this.score = 0;

}
bindEvent();

function StartGame() {

    food();
    snake();
    bindEvent();
}
//生成食物
function food() {
    var food = document.createElement('div');
    food.style.width = this.foodW + 'px';
    food.style.height = this.foodH + 'px';
    food.style.position = 'absolute';
    this.foodX = Math.floor(Math.random() * (this.mapW / 20));
    this.foodY = Math.floor(Math.random() * (this.mapH / 20));
    food.style.left = this.foodX * 20 + 'px';
    food.style.top = this.foodY * 20 + 'px';
    this.mapDiv.appendChild(food).setAttribute('class', 'food');

    for(var i=0;i<this.SnakeBody.length;i++){
        if(this.foodX==SnakeBody[i][0]&&this.foodY== SnakeBody[i][1]){
            food();
        }
    }
}
//生成蛇
function snake() {

    for (var i = 0; i < this.SnakeBody.length; i++) {

        var snake = document.createElement('div');
        snake.style.width = this.snakeW + 'px';
        snake.style.height = this.snakeH + 'px';
        snake.style.position = 'absolute';
        snake.style.left = this.SnakeBody[i][0] * 20 + 'px';
        snake.style.top = this.SnakeBody[i][1] * 20 + 'px';
        snake.classList.add(this.SnakeBody[i][2]);
        this.mapDiv.appendChild(snake).classList.add('snake');
        switch (this.direct) {
            case 'right':

                break;
            case 'up':
                snake.style.transform = 'rotate(270deg)';
                break;
            case 'left':
                snake.style.transform = 'rotate(180deg)';

                break;
            case 'down':
                snake.style.transform = 'rotate(90deg)';

                break;
            default:
                break;
        }
    }
}
//运动
function move() {

    for (var i = this.SnakeBody.length - 1; i > 0; i--) {
        this.SnakeBody[i][0] = this.SnakeBody[i - 1][0];
        this.SnakeBody[i][1] = this.SnakeBody[i - 1][1];

    }
    switch (this.direct) {
        case 'right':
            this.SnakeBody[0][0] += 1;
            break;
        case 'up':
            this.SnakeBody[0][1] -= 1;
            break;
        case 'left':
            this.SnakeBody[0][0] -= 1;
            break;
        case 'down':
            this.SnakeBody[0][1] += 1;
            break;
        default:
            break;
    }

    removeClass('snake');
    snake();
    //蛇吃到食物
    if (this.SnakeBody[0][0] == this.foodX && this.SnakeBody[0][1] == this.foodY) {

        //获取最后一个蛇身的位置
        var snakeEndX = this.SnakeBody[this.SnakeBody.length - 1][0];
        var snakeEndY = this.SnakeBody[this.SnakeBody.length - 1][1];
        switch (this.direct) {
            case 'right':
                this.SnakeBody.push([snakeEndX + 1, snakeEndY, 'body']);
                break;
            case 'up':
                this.SnakeBody.push([snakeEndX, snakeEndY - 1, 'body']);
                break;
            case 'left':
                this.SnakeBody.push([snakeEndX - 1, snakeEndY, 'body']);
                break;
            case 'down':
                this.SnakeBody.push([snakeEndX, snakeEndY + 1, 'body']);
                break;
            default:
                break;
        }

        this.score += 1;
        scoreBox.innerHTML = this.score;
        removeClass('food');
        food();
    }

    //判断边界
    //碰到左/右边界
    if (this.SnakeBody[0][0] < 0 || this.SnakeBody[0][0] >= this.mapW / 20) {

        // console.log("gg");
        relodGame();
    }
    //碰到上/下边界
    if (this.SnakeBody[0][1] < 0 || this.SnakeBody[0][1] >= this.mapH / 20) {
        // console.log("gg");
        relodGame();

    }
    //蛇头的坐标
    var snakeHX = this.SnakeBody[0][0];
    var snakeHY = this.SnakeBody[0][1];
    for (var i = 1; i < this.SnakeBody.length; i++) {
        if (snakeHX == SnakeBody[i][0] && snakeHY == SnakeBody[i][1]) {
            // console.log("gg");
            relodGame();

        }
    }

    
}
//游戏结束后 重置游戏
function relodGame() {
    removeClass('snake');
    removeClass('food');
    clearInterval(snakeMove);
    this.SnakeBody = [
        [3, 1, 'head'],
        [2, 1, 'body'],
        [1, 1, 'body']
    ];
    this.left = false;
    this.right = false;
    this.up = true;
    this.down = true;

    loser.style.display = 'block';
    loseScore.innerHTML = this.score;
    this.score = 0;
    scoreBox.innerHTML = this.score;
    startGameBool = true;
    startPaushBool = true;
   
}

function removeClass(className) {
    var ele = document.getElementsByClassName(className);
    while (ele.length > 0) {
        ele[0].parentNode.removeChild(ele[0]);
    }
}

function setDirect(code) {
    switch (code) {
        case 37:
            if (this.left) {
                this.direct = 'left';
                this.left = false;
                this.right = false;
                this.up = true;
                this.down = true;
            }
            break;
        case 38:
            if (this.up) {
                this.direct = 'up';
                this.left = true;
                this.right = true;
                this.up = false;
                this.down = false;
            }
            break;
        case 39:
            if (this.right) {
                this.direct = 'right';
                this.left = false;
                this.right = false;
                this.up = true;
                this.down = true;
            }
            break;
        case 40:
            if (this.down) {
                this.direct = 'down';
                this.left = true;
                this.right = true;
                this.up = false;
                this.down = false;
            }
            break;
        default:
            break;
    }
}

function bindEvent() {
    closeBtn.onclick = function () {
        loser.style.display = 'none';
        startPage.style.display = 'block';
        start.style.display = 'none';
        pause.style.display = 'none';
      
    }
    startBtn.onclick = function () {
        startPage.style.display = 'none';
        start.style.display = 'block';
        pause.style.display = 'block';
        //此处初始化 为了防止当再次开始游戏时的方向发送改变
        init();

        StartGame();
        document.onkeydown = function (e) {

            code = e.keyCode;
            setDirect(code);
        }


        snakeMove = setInterval(function () {
            move();
        }, speed);
    }
    start.onclick = function () {

        startAgain();
    }
    pause.onclick = function () {
        stop();
    }
}

function startAgain() {
    document.onkeydown = function (e) {
        var code = e.keyCode;
        setDirect(code);
    }
    snakeMove = setInterval(function () {
        move();
    }, speed);
}

function stop() {
    clearInterval(snakeMove);
    document.onkeydown = function (e) {
        e.returnValue = false;
        return false;
    };
}

猜你喜欢

转载自blog.csdn.net/G_072625/article/details/81949303
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022