JS贪吃蛇

最新推荐文章于 2022-11-16 19:54:45 发布
最新推荐文章于 2022-11-16 19:54:45 发布
阅读量140 收藏
点赞数 
<!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>Document</title>
    <link rel="stylesheet" href="tcs.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="" class="startPaush" id="startPaush">
        </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="tcs.js"></script>
</body>

</html>

*{
    margin:0;
    padding:0;
    list-style:none;
}
.startPage{
    width:100%;
    z-index:999;
    height:800px;
    position:absolute;
    top:0;
    left:0;
}
.startBtn{
    position:absolute;
    height:170px;
    width:200px;
    background-image: url('img/startGame.png');
    background-size:100% 100%;
    cursor: pointer;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
}
.wrapper{
    height:800px;
    width:100%;
    position:relative;
    background-image:url('img/bg.jpg');
    background-size: 100% 100%;    
}
.left-side{
    position: absolute;
    width:24%;
    height:800px;
}
.left-side img{
    margin-left:50px;
    margin-top:50px;
    display:none;
}
.main{
    position:absolute;
    left:25%;
    display: inline-block;
    width:50%;
    height:90%;
}
.header{
    width:100%;
    height:80px;
    text-align:center;
}
.score{
    line-height:40px;
    color:#ddd;
    font-size:20px;
    font-weight:bolder;
}
.score span{
    display:inline-block;
    height:80px;
    width:30px;
    line-height:80px;
    
}

.content{
    position:absolute;
    width:79.5%;
    height:36.5%;
    left:10%;
    /* top:244px; */
    top:34%;
    /* border:1px solid black;  */
}
.loser{
    display:none;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}

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

.close{
    position:absolute;
    top:0;
    right:0;
    height:40px;
    width:40px;
    background-image: url('img/closeBtn.png');
    background-size:100% 100%;
    cursor: pointer;
}
.loserScore{
    display:block;
    height:30px;
    width:60px;
    position:absolute;
    top:42%;
    left:40%;
    color:#222;
    font-size:30px;
    font-weight:bolder;
}

.food{
    background-image: url('img/lyt.jpg');
    background-size:100% 100%;
}
.head{
    background-image: url('img/cfx.png');
    background-size:100% 100%;
}
.body{
    background-image: url('img/cyx.jpg');
    background-size:100% 100%;
}


var snakeMove;
var startGameBool = true;
var startPauseBool = true;
var speed = 200;
var scoreBox = document.getElementById('score');
var content = document.getElementById('content');
var lose = document.getElementById('loser');
var loserScore = document.getElementById('loserScore');
var startPaush = document.getElementById('startPaush');
var closeBtn = document.getElementById('close');
var startBtn = document.getElementById('startBtn');
var startPage = document.getElementById('startPage');

init();
function init() {
    //地图属性
    this.mapW = parseInt(window.getComputedStyle(content).width);
    this.mapH = parseInt(window.getComputedStyle(content).height);
    this.mapDiv = content;
    //食物属性
    this.foodW = 20;
    this.foodH = 20;
    this.foodX = 0;
    this.foodY = 0;
    this.foodColor = '#00F';
    //蛇属性
    this.snake;
    this.snakeW = 20;
    this.snakeH = 20;
    this.snakeBody = [[3, 0, 'head'], [2, 0, 'body'], [1, 0, 'body']];
    //游戏属性
    this.direct = 'right';
    this.left = false;
    this.right = false;
    this.up = true;
    this.down = true;

    //分数
    this.score = 0;
    scoreBox.innerHTML = this.score;
    bindEvent();
}
function startGame() {
    startPage.style.display = 'none';
    startPaush.style.display = 'block';
    food();
    snake();
}

function food() {
    var food = document.createElement('div');
    food.style.width = this.foodW + 'px';
    food.style.height = this.foodH + 'px';
    food.style.borderRadius = '50%';
    this.foodX = Math.floor(Math.random() * (this.mapW / this.foodW));
    this.foodY = Math.floor(Math.random() * (this.mapH / this.foodH));
    
    food.style.left = this.foodX * this.foodW + 'px';
    food.style.top = this.foodY * this.foodH + 'px';

    food.style.position = 'absolute';
    this.mapDiv.appendChild(food).setAttribute('class', '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.borderRadius = '50%';
        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();
    // 如果蛇头和食物x y同时相等 代表吃到食物
    if (this.snakeBody[0][0] == this.foodX && this.snakeBody[0][1] == this.foodY) {
        var snakeTailX = this.snakeBody[this.snakeBody.length - 1][0];
        var snakeTailY = this.snakeBody[this.snakeBody.length - 1][1];
        switch (this.direct) {
            case 'right':
                this.snakeBody.push([snakeTailX + 1, snakeTailY, 'body']);

                break;
            case 'up':
                this.snakeBody.push([snakeTailX, snakeTailY - 1, 'body']);
                break;
            case 'left':
                this.snakeBody.push([snakeTailX - 1, snakeTailY, 'body']);
                break;
            case 'down':
                this.snakeBody.push([snakeTailX, snakeTailY + 1, 'body']);
                break;
            default:
                break;
        }
        this.score += 1;
        scoreBox.innerHTML = this.score;
        removeClass('food');
        food();

    }
    // 判断撞到边界
    if (this.snakeBody[0][1] < 0 || this.snakeBody[0][1] >= this.mapH / this.snakeH) {
        this.reloadGame();
    }
    if (this.snakeBody[0][0] < 0 || this.snakeBody[0][0] >= this.mapW / this.snakeW) {
        this.reloadGame();
    }
    var snakeHeaderX = this.snakeBody[0][0];

    var snakeHeaderY = this.snakeBody[0][1];
    for (var i = 1; i < this.snakeBody.length; i++) {
        var snakeBodyX = this.snakeBody[i][0];
        var snakeBodyY = this.snakeBody[i][1];
        if (snakeHeaderX == snakeBodyX && snakeHeaderY == snakeBodyY) {
            this.reloadGame();
        }
    }
}

function setDerict(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 reloadGame() {
    removeClass('snake');
    removeClass('food');
    clearInterval(snakeMove);
    startPaush.setAttribute('src', './img/start.png');
    this.snakeBody = [[3, 2, 'head'], [2, 2, 'body'], [1, 2, 'body']];
    this.direct = 'right';
    this.left = false;
    this.right = false;
    this.up = true;
    this.down = true;
    startPauseBool = true;
    startGameBool = true;
    lose.style.display = 'block';
    loserScore.innerHTML = this.score;
    this.score = 0;
    scoreBox.innerHTML = this.score;
}

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

function bindEvent() {
    startBtn.onclick = function(){
        startAndPauseGame();        
    }
    startPaush.onclick = function () {
        startAndPauseGame();
    }
    closeBtn.onclick = function () {
        lose.style.display = 'none';
    }
}

//开始和暂停游戏 逻辑封装
function startAndPauseGame() {
    if (startPauseBool) {
        if (startGameBool) {
            startGame();
            startGameBool = false;
        }
        startPaush.setAttribute('src', './img/pause.png');
        snakeMove = setInterval(function () {
            move();
        }, speed);
        document.onkeydown = function (e) {
            var code = e.keyCode;
            setDerict(code);
        };
        startPauseBool = false;
    } else {
        //暂停
        startPaush.setAttribute('src', './img/start.png');
        clearInterval(snakeMove);
        document.onkeydown = function (e) {
            e.returnValue = false;
            return false;
        };
        startPauseBool = true;
    }
}
aCc1DeNt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript贪吃蛇
原地起飞
11-24 5476
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
JS贪吃蛇游戏代码
12-01
【JS贪吃蛇游戏代码】是一款基于JavaScript编写的网页小游戏，它将经典的贪吃蛇玩法移植到了浏览器环境中，为用户提供了丰富的游戏体验。这款游戏代码结构清晰，适合学习和研究JavaScript编程，尤其是对于游戏开发感...
JavaScript贪吃蛇游戏源码
一个程序员的复习笔记
10-09 7533
蛇对象 属性：方向、一组蛇节（div，div，div）、地图、食物 方法：生成蛇，增加蛇头，计算新蛇头的位置，蛇移动 食物对象 属性：横向位置、纵向位置、div元素、地图 方法：随机位置 游戏对象 属性：蛇，食物 方法：开始 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...
javaScript贪吃蛇
平安喜乐
11-16 4052
javaScript写的贪吃蛇，有注解和图片。
js贪吃蛇学习心得
qq_44710456的博客
08-25 1609
视频学做js贪吃蛇的收获 前言：暑假一个人呆在寝室里面无聊，就在网上找了一段js代码学做贪吃蛇的视频，跟着敲完之后想对这次制作过程进行一次总结。 大体布局：背景图（留有运动空间），开始按钮，蛇头图片，蛇身图片，食物图片，计分图片。 运行原理大致概括：背景图片布满整个网页；开始按钮则位于最顶层（点击之后则自动消失且执行游戏开始的代码）；利用函数绘制蛇（包括头和身体），初始为向右运动，利用定时器函数刷...
javascript 贪吃蛇 源码
lsswear的专栏
11-23 320
js贪吃蛇基本原型：https://www.jb51.net/article/154869.htm 修改内容 可变速、成绩、障碍、多食物 流程解释： 创建三个类 snake、foods、barrier。snake 创建蛇身，管理蛇的运行。foods包含一个食物的分数和食物的显示。barrier创建障碍物。蛇运行时超出边界、碰到障碍物、碰到蛇身时游戏结束重置页面。蛇碰到食物时蛇身加长，可变速度，根据一个食物的分数加成绩。页面先显示障碍物，显示时需判断每条线起始位置和方向不重复。再显示食物和蛇身，蛇身可以
Js贪吃蛇
qq_41043296的博客
03-08 1664
JS贪吃蛇 Js原生贪吃蛇：canvas HTML <canvas id="can"></canvas> #can{ background: #000000; height: 400px; width: 850px; } JS //公共板块 var blockSize = 10; //地图的高宽 var mapW = 300; var mapH = 150; //历史食物var var historyfood = new Array(); //食物数组
Js 贪吃蛇
忘川
08-22 264
<!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .backDiv { text-align: center; ...
JavaScript实现贪吃蛇
Sunblogy的博客
09-26 1264
用js实现一个贪吃蛇游戏， 要求： 1. 不能撞墙 2. 不能撞自己 3. 每吃一个食物就会加一分 4. 相撞后就结束游戏
js贪吃蛇
shi_jia233的博客
05-18 154
效果展示 1打开Visual Studio Code然后CTRL+n新建然后把文件设置成HTML然后！获取html内容 2先做一个框架来包裹开始按钮和键盘移动得div和随机刷新的食物然后在框架外面做一个分数 3给框架，按钮，食物和蛇属性 4写js样式开始按钮被按下获取蛇，食物和分数，显示蛇和食物隐藏按钮然后食物刷新到25倍数的随机位置,提前声明间隔定时器，然后做防暴力点击 5判断键盘w,a,s,d键和↑↓←→是否被按下 ...
javascript贪吃蛇
01-22
瞎写的，很多功能没实现，比如暂停开始，本来想整合到一起
JavaScript贪吃蛇小游戏.zip
04-19
JavaScript贪吃蛇小游戏是一款基于网页的互动娱乐项目，利用JavaScript编程语言实现。JavaScript是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，它允许在浏览器端执行代码，为用户提供动态交互的体验...
js 贪吃蛇完美版
09-06
总之，【JS贪吃蛇完美版】不仅展现了JavaScript的动态特性，还涵盖了基础编程、游戏逻辑、用户交互等多个方面的技术。对于想要学习JavaScript或游戏开发的人来说，这是一个很好的实践项目。通过分析和重构这个游戏的...
javascript贪吃蛇游戏设计与实现
10-14
在本文中，我们将深入探讨如何...通过以上步骤，我们可以构建一个基本的JavaScript贪吃蛇游戏，提供丰富的用户体验和挑战性。对于想要进一步优化游戏的开发者，还可以考虑增加游戏难度、添加音效、实现多人对战等功能。
主板诊断卡简要说明书.doc
07-17
说明书
出入库表-进销存明细表-Excel模板
07-17
【作品名称】：出入库表-进销存明细表-Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
ActivePerl-5.8.8.819-MSWin32-x64-267479.msi
07-17
ActivePerl-5.8.8.819-MSWin32-x64-267479.msi X64 编译MTK功能机必要的组件，网上已经绝版了
torchaudio-0.10.1+cu113-cp38-cp38-win_amd64.whl
最新发布
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值