如何使用原生js编写贪吃蛇

最新推荐文章于 2022-11-30 00:14:35 发布
最新推荐文章于 2022-11-30 00:14:35 发布
阅读量181 收藏
点赞数
分类专栏： 小游戏 javascript 文章标签： javascript html5 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panchuanpeng/article/details/113760906
版权

使用JavaScript编写贪吃蛇小游戏

话不多说，直接上代码。
点击试玩
Github

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gluttonous Snake</title>
    <style>
        .container{
            width:500px;
            height: 500px;
            margin:auto;
            margin-top:100px;
        }
        .app{
            width:100%;
            height: 100%;
            border: 1px solid black;
            position: relative;
        }
        .snake{
            height:auto;
            width:auto;
        }
        .snake-child{
            width:10px;
            height:10px;
            background-color: aquamarine;
            position: absolute;
        }
        .snake-child:first-child{
            background-color: red;
            z-index: 2;
        }
        .bottom{
            padding-top:5px;
            display: flex;
            justify-content: space-between;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="app"></div>
        <div class="bottom">
            <span>score: <i class="score-in">0</i></span>
            <button class="start">play</button>
            <select class="map-level">
                <option value="500">500*500</option>
                <option value="350">350*350</option>
                <option value="200">200*200</option>
            </select>
            <label>speed:
                <input class="speed" type="number" value="100">
            </label>
        </div>
    </div>
</body>
<script>
    // Peng Pan
    const $ = ( target ) => document.querySelector(target)
    const map = $('.app') // main map
    const snakeBody = document.createElement('div')
    const gameState = {
        runState:{
            status: 'pause',   // game status
            code: 'ArrowRight' // init direciton
        },
        food:[],            // food array
        timer:undefined,    // game timer
        timerSpeed:100,     // snake move speed
        height:500,         // map height
        width:500,          // map width
        score:0,            // game score
    }

    // 🐍body
    let snake_body = [
        {
            x: 40,
            y: 10,
            el: renderSnakeBody()
        },
        {
            x: 30,
            y: 10,
            el: renderSnakeBody()
        },
    ]

    // create snake body
    function renderSnakeBody(class_name) {
        let val = document.createElement('div')
        val.classList.add('snake-child')
        class_name&&val.classList.add(class_name)
        return val
    }

    // create snake
    function createSnake(){

        $('.snake') && map.removeChild($('.snake'))
        snakeBody.classList.add('snake')

        snake_body.forEach( (item,index) => {

            item.el.style.cssText = `
                left:${item.x}px;
                top:${item.y}px;
            `
            item.el.setAttribute('data-index',index)
            snakeBody.append(item.el)

        })
        map.append(snakeBody)
    }

    // eat food
    function growUp(x,y){
        const basicInfo = {
            x: x,
            y: y,
            el: renderSnakeBody() 
        }
        basicInfo.el.style.cssText=`
            top:${y}px;
            left:${x}px;
        `
        snake_body.push(basicInfo)
        snakeBody.append(basicInfo.el)
        $('.score-in').innerText = ++gameState.score

    }

    // create food
    function createFood() {
        if(gameState.food.length>0) {
            gameState.food[0].el.remove()
            gameState.food = []
        }
        const basicPositon = {
            x: Math.round(Math.random()*gameState.width) % (gameState.width / 10) * 10,
            y: Math.round(Math.random()*gameState.width) % (gameState.width / 10) * 10,
            el: renderSnakeBody()
        }
        basicPositon.el.style.cssText=`
            top:${basicPositon.y}px;
            left:${basicPositon.x}px;
        `
        gameState.food.push(basicPositon)
        map.append(basicPositon.el)
    }

    // Collision detection by food
    function collisionDetectionByFood(p1, p2){
        /* food */
        const p1x = p1.x
        const p1y = p1.y
        const p2x = p2.x
        const p2y = p2.y
        if(p1x === p2x && p1y === p2y){
            createFood()
            growUp(p2x,p2y)
        }
    }
    
    // map border and snake body
    function collisionDetection(p1){
        const p1x = p1.x
        const p1y = p1.y
        /* map */
        if(p1x < 0 || p1x > gameState.width - 10 || p1y < 0 || p1y > gameState.height - 10){
            restart()
        }
        let snakeHeartX = snake_body[0].x
        let snakeHeartY = snake_body[0].y
        snake_body.forEach( (item, index) => {

            if(index===0) return
            const {x, y} = item

            if(snakeHeartX === x && snakeHeartY === y){
                restart()
            }
        })
    }
    
    // restart the game
    function restart() {
        $('.snake').innerHTML = ''
        $('.start').innerText = 'play'
        gameState.runState.code = 'ArrowRight'
        gameState.runState.status = 'pause'
        clearInterval(gameState.timer)
        snake_body = [
            {
                x: 20,
                y: 10,
                el: renderSnakeBody()
            },{
                x:10,
                y:10,
                el: renderSnakeBody()
            }
        ]
        alert('GAME OVER!')
        createSnake()
        createFood()

    }

    // snake move ..
    function run(event) {
        let tempTwoPosition = JSON.parse(JSON.stringify(snake_body[0]))
        switch(event.code){
            case 'ArrowUp':
                snake_body[0].y -= 10
            break;
            case 'ArrowDown':
                snake_body[0].y += 10
            break;
            case 'ArrowRight':
                snake_body[0].x += 10
            break;
            case 'ArrowLeft':
                snake_body[0].x -= 10
            break;
        }

        snake_body[0].el.style.cssText = `
            left:${snake_body[0].x}px;
            top:${snake_body[0].y}px;
        `

        for(let i = snake_body.length - 1; i >= 0; i --){
            if(i !== 0&&i !== 1){
                snake_body[i].x = snake_body[i - 1].x
                snake_body[i].y = snake_body[i - 1].y
            }
            else if(i == 1){
                snake_body[i].x = tempTwoPosition.x
                snake_body[i].y = tempTwoPosition.y
            }
            snake_body[i].el.style.cssText = `
                left:${snake_body[i].x}px;
                top:${snake_body[i].y}px;
            `
            snake_body[i].el.setAttribute('data-index',i)
        }
        collisionDetection(snake_body[0])
        collisionDetectionByFood(snake_body[0],gameState.food[0])
    }
    
    // main bootstrap
    function bootstrap() {
        createSnake()
        createFood()
        document.onkeydown =  (event) => {
            switch(event.code){
                case 'ArrowUp':
                    if(snake_body[0].y > snake_body[1].y) return
                    gameState.runState.code = event.code
                break;
                case 'ArrowDown':
                    if(snake_body[0].y < snake_body[1].y) return
                    gameState.runState.code = event.code
                break;
                case 'ArrowRight':
                    if(snake_body[0].x < snake_body[1].x) return
                    gameState.runState.code = event.code
                break;
                case 'ArrowLeft':
                    if(snake_body[0].x > snake_body[1].x) return
                    gameState.runState.code = event.code
                break;
                case 'Space':
                    $('.start').click()
                break;
            }
        }
        // Click the play button 
        $('.start').onclick = function(){
            if(gameState.runState.status === 'pause'){
                gameState.runState.status = 'running'
                gameState.timer = setInterval(() => { run(gameState.runState) } ,gameState.timerSpeed)
                this.innerText = 'pause'
            }else{
                gameState.runState.status = 'pause'
                clearInterval(gameState.timer)
                this.innerText = 'play'
            }
        }
        // Switch map level
        $('.map-level').onchange = function(){
            gameState.width = gameState.height = this.value
            createFood()
            if(this.value == 200){
                $('.container').style.cssText = `
                    width:200px;
                    height:200px;
                `
            }else if(this.value == 350){
                $('.container').style.cssText = `
                    width:350px;
                    height:350px;
                `
            }else{
                $('.container').style.cssText = `
                    width:500px;
                    height:500px;
                `
            }
        }
        // set the move speed
        $('.speed').oninput = function(){
            gameState.timerSpeed = this.value
        }
    }

    bootstrap();
</script>
</html>
潘鹏i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯原生js实现贪吃蛇游戏
12-02
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>贪吃蛇游戏</...
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3086
JS 超详细 贪吃蛇 案例 速速围观
原生js贪吃蛇
m0_62371650的博客
07-27 216
原生js实现贪吃蛇小案例
【学习笔记64】原生JS实现贪吃蛇
yizhiyang
11-30 297
原生JS实现贪吃蛇
操作元素之修改样式属性
leechoy
06-12 619
<!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实现贪吃蛇
weixin_63489869的博客
06-23 3693
利用js实现贪吃蛇的相关功能
原生js实现贪吃蛇.zip
05-15
里面是自己学习原生JavaScript课程时，敲的贪吃蛇小游戏，仅供各位感兴趣的网友下载借阅，学习编程思维和编程逻辑。
原生js实现贪吃蛇小游戏
01-10
1. 设置需要使用的参数 2. 双重 for 循环设置网格对象，使用随机数设置食物。 3. 设置贪吃蛇对象，首先清空所有，然后根据保存的位置添加贪吃蛇 4. 设置键盘按下事件 5. 判断需要的几个按键，w，s，a，d（上，下，左...
原生js实现贪吃蛇游戏
01-18
原生JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 代码： [removed] var timer = null; var oMain = document.getElementById(main); function Map(atom,xnum,ynum){//地图,设置单位大小，及...
原生js实现贪吃蛇
yuki-li的博客
07-25 8454
写这个小例子时在学习构造函数创建对象，所以元素都是以构造函数形式创建的。 1.创建地图 function map(){ //相关属性 this.className='map'; //构造地图对象 this._map=null; this.createMap= function () {
原生JS 实现贪吃蛇
11-11
原生js 实现贪吃蛇。
原生js网页版贪吃蛇游戏代码
10-26
原生js网页版贪吃蛇游戏代码，JavaScript小游戏仅仅供学习和交流！！
原生js贪吃蛇小游戏代码
11-07
原生js贪吃蛇小游戏代码
原生js贪吃蛇源码
11-10
一个用js做的小项目仅供参考，分享资源使我快乐带着不用谢。
原生js写一个贪吃蛇小游戏(内含详细注释)
le__seul的博客
05-12 3366
很简单的贪吃蛇实现，游戏效果如下图
原生JS实现贪吃蛇（基础版本）
weixin_45642033的博客
10-31 125
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script&
原生JS实现一个简单的贪吃蛇小游戏
Bob_Yan623的博客
09-19 4967
js贪吃蛇 原生JS实现一个简单的贪吃蛇小游戏 利用javascript完成一个简单的贪吃蛇小游戏 相信在我们90后的童年中你们肯定在电视上或者在诺基亚手机上玩过一款叫贪吃蛇的小游戏，今天我就用js来完成一个简单的贪吃蛇小游戏。 首先在写代码之前我们得先知道贪吃蛇这个游戏运行的机制是什么: 贪吃蛇
原生js简单实现贪吃蛇
Mrlonely思考笔记
08-22 800
js写个简单的贪吃蛇案例,用于复习一下js的原型链呀还有闭包沙箱知识等. &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;标题&lt;/title&gt; &lt;style&gt;
JavaScript实现贪吃蛇小游戏
热门推荐
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
使用Java语言编写贪吃蛇游戏
最新发布
03-02
使用Java语言编写贪吃蛇游戏可以利用Java图形界面(GUI)和面向对象编程(OOP)的特性来实现。可以使用Java Swing或JavaFX等图形库来设计游戏界面和操作控件，同时利用面向对象编程的思想来设计游戏中的蛇、食物、墙壁等...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值