原生JS实现贪吃蛇项目

最新推荐文章于 2023-02-06 09:32:34 发布
最新推荐文章于 2023-02-06 09:32:34 发布
阅读量1.8k 收藏 6
点赞数 2
分类专栏： js 文章标签： 原生JS贪吃蛇 贪吃蛇 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ireallyyourfather/article/details/82802004
版权

原生JS实现贪吃蛇项目

  • HTML部分

  • CSS部分

  • JavaScript部分

  • 原理
    //点击开始游戏---->startPage消失---->游戏开始
    //随机出现食物,出现三节蛇开始运动
    //上下左右===>改变方向运动,
    //判断吃到食物,=>蛇+1
    //判断游戏结束    ==>弹出框
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
HTML代码:

<!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>贪吃蛇</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
     <div class="startPage" id="startPage">
        <div class="startBtn" id="startGameBtn">
           <!--  开始游戏按钮 -->
        </div>
    </div> 
    <div class="wrapper">
        <!-- 游戏界面 -->
        <div class="leftSide">
            <img src="start.jpg" id="startP">
        </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">
                <!-- x按钮 -->
            </div>
            <span class="loseScore" id="loseScore"></span>
        </div>
    </div>
    
    <script src="demo.js"></script>
</body>
</html>```

CSS部分:

*{
    margin: 0;
    padding: 0;
}
.startPage{
    width: 100%;
    z-index: 999;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
}
.startBtn{
    background-image: url('start.png');
    background-repeat: no-repeat;
    width: 170px;
    height: 200px;
    background-size: 110% 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.wrapper{
    width: 100%;
    height: 600px;
    background-image: url('beijing.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.leftSide{
    width: 20%;
    height: 600px;
    position: absolute;
    /* border-right: 1px solid black; */
}
.leftSide img{
    display: none;
    margin-left: 50px;
    margin-top: 50px;
    width: 80px;
    height: 80px;
}
.main{
    position: absolute;
    left: 20.5%;
    width: 60%;
    height: 90%; 
    /* border: 1px solid black; */
}
.header{
    width: 100%;
    height: 65px;
    text-align: center;
}
.score{
    line-height: 80px;
    color: #ddd;
    font-size: 30px;
    font-weight: bold;
}
.content{
    position: absolute;
    width: 97.5%;
    height: 87%;
    /* border: 1px solid blue; */
}
.loser{
    display: none;
    position: 100%;
    height: 600px;
    top: 0;
    left: 0;   
}
.con{
    background-image: url("defen.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 500px;
    height: 300px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: 20px;
}
.close{
    background-image: url('x.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    cursor: pointer;
}
.loseScore{
    display: block;
    height: 30px;
    width: 40px;
    position: absolute;
    top: 38%;
    left: 38%;
    color: black;
    font-size: 25px;
    font-weight: bolder;
}
.food{
    background-image: url('food.jpg');
    background-size: 100% 100%;
}
.head{
    background-image: url('she.jpg');
    background-size: 100% 100%;
}
.body{
    background-image: url('sheshen.jpg');
    background-size: 100% 100%;
}

``

JS部分:
var content = document.getElementById('content');//
var startPage = document.getElementById('startPage');//
var scoreBox = document.getElementById('score');//
var loser = document.getElementById('loser');//
var loseScore = document.getElementById('loseScore');
var close = document.getElementById('close');
var startP = document.getElementById('startP');//
var startGameBtn = document.getElementById('startGameBtn');
var startGmaeBool = true;
var startPaushBool = true;
var snakeMove;//蛇运动
var speed = 200; //蛇运动速度 

init();//存着初始属性
function init() {
    //地图       随着浏览器大小content内容跟着变
    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;//食物初始坐标
    //蛇
    // 位置x-1YxYx+1Y    
    this.snakeW = 20;
    this.snakeH = 20;
    this.snakeBody = [[5, 10, 'head'], [4, 10, 'body'], [3, 10, 'body']];//蛇身 
    //下一秒         [[6, 10, 'head'], [5, 10, 'body'], [4, 10, 'body']];

    //游戏属性
    this.direct = 'right';//默认是向右
    //当向右移动的时候   向左和向右不能改变
    this.left = false;
    this.right = false;
    this.up = true;
    this.down = true;

    //分数
    this.score = 0;
    // startGame();
}

function startGame() {
    startPage.style.display = 'none';
    startP.style.display = 'block';
    food();
    snake();
}

function food() {//产生food  
    var food = document.createElement('div');
    food.style.width = this.foodW + 'px';//宽
    food.style.height = this.foodH + 'px';//高
    //为了有xy坐标值 给它定位 可以通过left top值来控制位置
    food.style.position = 'absolute';
    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 * 20 + 'px';
    food.style.top = this.foodY * 20 + 'px';
    this.mapDiv.appendChild(food).setAttribute('class', 'food');
}
function snake() {
    for (var i = 0; i < this.snakeBody.length; i++) {//跟组蛇的数组的长度设置div
        var snake = document.createElement('div');//创建snake
        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';//left是根据里层数组的第0位
        snake.style.top = this.snakeBody[i][1] * 20 + 'px';
        snake.classList.add(this.snakeBody[i][2]);//为snake添加[i][2]的class的food和head
        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) / (this.foodW))) {//横向碰到左右
        // console.log('shibai');
        reloadGame();
    }
    if (this.snakeBody[0][1] < 0 || this.snakeBody[0][1] >= ((this.mapH) / (this.foodH))) {//碰到上下
        // console.log('shibai');
        reloadGame();
    }
    //蛇头碰到蛇身和蛇尾
    var snakeHX = this.snakeBody[0][0];//取出蛇头的x
    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('shibai');
            reloadGame();
        }
    }
}
function reloadGame() {//重新加载
    removeClass('snake');
    removeClass('food');
    clearInterval(snakeMove);
    this.snakeW = 20;
    this.snakeH = 20;
    this.snakeBody = [[5, 10, 'head'], [4, 10, 'body'], [3, 10, 'body']];//蛇身 
    //下一秒         [[6, 10, 'head'], [5, 10, 'body'], [4, 10, 'body']];

    //游戏属性
    this.direct = 'right';//默认是向右
    //当向右移动的时候   向左和向右不能改变
    this.left = false;
    this.right = false;
    this.up = true;
    this.down = true;

    //分数
    loser.style.display = 'block';
    loseScore.innerHTML = this.score;// 得分
    this.score = 0;
    this.scoreBox = this.score

    startGmaeBool = true;//回到初始化
    startPaushBool = true;
    startP.setAttribute('src', 'start.jpg');
    
}

function removeClass(calssName) {
    var ele = document.getElementsByClassName(calssName);
    while (ele.length > 0) {
        ele[0].parentNode.removeChild(ele[0]);//把原来的snake删掉 
    }
}

function setDerict(code) {//判断键盘按下去的时候返回的ASCII码的值是什么 来判断是上下左右哪一个
    switch (code) {
        case 37:
            if (this.left) {
                this.direct = 'left';
                this.right = false;
                this.left = false;
                this.up = true;
                this.down = true;
            }
            break;
        case 38:
            if (this.up) {
                this.direct = 'up';
                this.right = true;
                this.left = true;
                this.up = false;
                this.down = false;
            }
            break;
        case 39:
            if (this.right) {
                this.direct = 'right';
                this.right = false;
                this.left = false;
                this.up = true;
                this.down = true;
            }
            break;
        case 40:
            if (this.down) {
                this.direct = 'down';
                this.right = true;
                this.left = true;
                this.up = false;
                this.down = false;
            }
            break;
        default:
            break;
    }
}
bindEvent();
function bindEvent() {//
    //
    close.onclick = function () {
        loser.style.display = 'none';
    }
    startGameBtn.onclick = function () {
        startAndPaush();
        // console.log('aaa')
    }
    startP.onclick = function () {
        startAndPaush();
    }
}

function startAndPaush() {
    if (startPaushBool) {
        if (startGmaeBool) {
            startGame();
            startGmaeBool = false;
        }
        startP.setAttribute('src', 'stop.jpg');
        document.onkeydown = function (e) {
            var code = e.keyCode;
            setDerict(code);
        }
        snakeMove = setInterval(function () {//运动
            move();
        }, speed);
        startPaushBool = false;
    } else {
        startP.setAttribute('src', 'start.jpg');
        clearInterval(snakeMove);
        document.onkeydown = function (e) {
            e.returnValue = false;
            return false;
        };
        startPaushBool = true;
    }
}
Ireallyyourfather
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JavaScript写的贪吃蛇游戏（很简单，很详细）
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
js的原生项目
樊小勇的博客
04-19 3355
JS原生项目 知识点-思维导图 JS作用 实际项目里js的应用点 1.获取数据渲染页面 2.页面上数据的处理 3.页面跳转时数据的传输 可见，JS的真正作用是处理数据 下面是我根据导图，结合项目代码进行的一些总结 项目总结 基本知识点 一、面向对象编程方式 我们把要处理的页面当一个对象比如对影片列表处理的时候 var pian = { // 对影片页面处理，我们创建一个对应的对象pi...
原生JS经典小项目-DOM练习
05-18
原生JS经典小项目-DOM练习
js原生项目案例
最新发布
qq_72238093的博客
02-06 371
JS原生项目文档 一、需求分析 1.1针对目前越来越多中小型公司需要公司官网，我们推出了这款后台系统管理网站产品 1.2此产品主要面向于中小型公司，是一款可以实现公司产品及新闻展出的产品。 1.3主要的受众人群是中年人群体，主要目标为实现后台动态改变公司网站展示内容。 二、核心功能 2.1网站展出模块，轮播图展出产品，新闻模块发布公司新闻。支持模糊搜索 2.2后台管理系统，对首页展出模块的内容进行增删改查 2.3后台系统超级管理员对账号增删改查 三、实现技术 3.1bootstrap框架+jQuery
纯原生js实现贪吃蛇游戏
12-02
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>贪吃蛇游戏</...
原生js实现贪吃蛇游戏
01-18
原生JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 代码： [removed] var timer = null; var oMain = document.getElementById(main); function Map(atom,xnum,ynum){//地图,设置单位大小，及...
原生JS 实现贪吃蛇
11-11
在本项目中，我们将探讨如何使用原生JavaScript（JS）实现经典的“贪吃蛇”游戏。这个项目将涉及JavaScript的基础语法、DOM操作、事件监听、定时器应用以及基本的算法设计。下面，我们将深入讲解这些关键知识点。 1...
原生js实现贪吃蛇.zip
05-15
在本项目"原生js实现贪吃蛇.zip"中，我们探索了如何使用纯JavaScript语言来构建一个经典的贪吃蛇游戏。这个项目不仅展示了JavaScript的基本语法和操作，还揭示了编程思维和逻辑的重要应用。以下是关于这个项目的一些...
原生js扫雷游戏
02-24
基于原生js写的扫雷游戏，代码里面有详细注释，大家可以看看。
用html做贪吃蛇
02-06
贪吃蛇html版！目前虽然有些卡顿，但是挺好玩的，想想还是挺划算的，双击index.html即可开始贪吃蛇，加油！！！
js实现贪吃蛇
deasec的博客
03-28 5335
很久没有打过js了，所以我翻出以前用画布(Canvas)标签做的贪吃蛇来复习一下顺便讲解一下执行原理。 实现思路：主要用到canvas标签来作为动画，采用逐帧运动法：先画一张之后销毁上一张，擦除->重绘（循环） 需要利用定时器每隔一小段时间就擦除->重绘。运动产生的原理就是：每次运动过程中在前面加一个头然后判断是否吃到食物。如果没有吃到食物就删除尾部(这样就产生前进的效果)，吃到了就不用删除：这样就比原来长度长了一段。边界判定就是获取当前蛇头位置的x,y乘以像素值n 判断是否达到了边界，还有头
原生JS实现贪吃蛇项目，附源码下载！
sdfujichao的博客
05-06 3563
运行于谷歌浏览器。主要是利用了函数的封装思想，把每一个小功能分别封装在一个函数中，大大提高了代码的可扩展性！！提高了代码的可维护性！！！提高了代码的可阅读性！！！项目要求：1：有边界，碰到边界就game over。2：猎物没3秒增加一个，而且位置随机产生。3：吃一个猎物自身就增加一个元素。4：按上下左右控制移动方向，按空格决定暂停和前进。 实现思路：主要是一开始就把实现的功能封装在了一个先函数中
javaScript小项目------贪食蛇
dexing07的博客
08-31 7192
运用了纯js和css完成的小demo实现思路：1.创建场景 2.创建头部和果实部分（注意：头部是一个独立的部分） 3.创建上下左右的按键功能 4.创建移动的头部，以及定时器。（在按键触发的时候就启动定时器) 5.判断是否吃到水果（当吃到水果，即头部跟果实的位置一样的时候，刷新两者的位置） 6.吃到果实后，身体变大，特别要注意身体添加的方向 7.判断头部改变后，身体第一位置与第二位置的移动
原生JS实现todolist小项目
qq_46362763的博客
03-30 1549
本篇文章向大家介绍利用原生JS实现todolist的常见功能 主要功能： 将用户输入添加到所有任务 可以对todolist进行分类，用户勾选即将待办项分入已完成组 todolist的每一项可删除 将用户输入数据写入localStorage本地缓存，实现对输入数据的保存
js-实现贪吃蛇项目
weixin_40141473的博客
03-09 387
近来在学习JS进阶，便学习着做个网页版贪吃蛇项目。 index.html <!DOCTYPEtml <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="cs...
原生js小项目---拖拽小方块--- js菜单栏
翾的博客
12-08 2671
学习js到了这里就可以开始尝试做一些小的项目了拖拽小方块HTML部分省去 js拖拽方块, js菜单栏 function getStyle(elem, prop, fakeNode) { if(window.getComputedStyle){ return window.getComputedStyle(el
原生js贪吃蛇
weixin_30905981的博客
02-12 67
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 <style> 7 ...
C语言实现贪吃蛇项目：数据结构与MVC设计
2. 数据结构的应用：贪吃蛇项目的实现中，数据结构的选择至关重要。例如，蛇的动态增长使用单链表，因为链表能够方便地实现节点的插入和删除，模拟蛇身的移动。链表数据结构在此项目中的运用有助于提升编程思维和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值