js实现贪吃蛇

最新推荐文章于 2024-05-23 22:21:26 发布
最新推荐文章于 2024-05-23 22:21:26 发布
阅读量189 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41634321/article/details/105644015
版权

运行截图：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇小游戏</title>

    <style>
        body {
            margin:0px;
            padding:0px;

        }

        #main {
           margin:100px;
        }

        .btn {
            width:100px;
            height:40px;
        }

        .gtitle {
            font-size:25px;
            font-weight: bold;

        }

        #gnum {
            color:red;
        }
    </style>
</head>

<body>

<div id="main">
    <h1>贪吃蛇</h1>
    <input class="btn" type="button" value="开始游戏" id="begin" />
    <input class="btn" type="button" value="暂停游戏" id="pause" />
    <span class="gtitle">第 <span id="gnum">1</span> 关</span>

    <script>
        var main = document.getElementById('main');
        var showcanvas = true;  //是否开启画布格子
        /**
         * 地图对象的构造方法
         * @param atom 原子大小宽和高是一样的 10
         * @param xnum 横向原子的数量
         * @param ynum 纵向原子的数量
         * @constructor
         */
        function Map(atom, xnum, ynum){
            this.atom = atom;  // 20x20
            this.xnum = xnum;  //
            this.ynum = ynum;

            this.canvas = null;

            //创建画布的方法
            this.create  = function(){
                this.canvas = document.createElement('div');
                this.canvas.style.cssText="position:relative;top:40px;border:1px solid darkred; background:#FAFAFA";
                this.canvas.style.width = this.atom * this.xnum + 'px'; //画布的宽
                this.canvas.style.height = this.atom * this.ynum + 'px'; //画布的高
                main.appendChild(this.canvas);

                if(showcanvas) {
                    for(var y=0; y<ynum; y++) {
                        for (var x = 0; x < xnum; x++) {
                            var a = document.createElement('div');
                            a.style.cssText = "border:1px solid yellow";
                            a.style.width = this.atom + 'px';
                            a.style.height = this.atom + 'px';
                            a.style.backgroundColor = "LightSkyBlue";
                            this.canvas.appendChild(a);
                            a.style.position = 'absolute';
                            a.style.left = x * this.atom + 'px';
                            a.style.top = y*this.atom+'px';
                        }
                    }
                }

            }

        }

        /**
         * 创建食物的构造方法
         * @param map  地图对象
         * @constructor
         */
        function Food(map){
            this.width = map.atom;
            this.height = map.atom;
            this.bgcolor= "rgb("+Math.floor(Math.random()*200)+", "+Math.floor(Math.random()*200)+", " + Math.floor(Math.random() * 200) +")";
            this.x = Math.floor(Math.random()*map.xnum);
            this.y = Math.floor(Math.random()*map.ynum);
            this.flag = document.createElement('div');
            this.flag.style.width = this.width + 'px';
            this.flag.style.height = this.height + 'px';
            this.flag.style.backgroundColor = this.bgcolor;
           // this.flag.style.borderRadius = '50%';
            this.flag.style.position = 'absolute';
            this.flag.style.left = this.x * this.width +'px';
            this.flag.style.top = this.y * this.height + 'px';

            map.canvas.appendChild(this.flag);
        }
        function Snake(map) {
            //设置宽，高
            this.width=map.atom;
            this.height = map.atom;
            //默认走的方向
            this.direction = 'right';

            this.body = [
                {x:2, y:0},  //蛇头， 第一点  0
                {x:1, y:0},  //蛇脖子, 第二点 1
                {x:0, y:0}  //蛇尾， 第三点   2
                //{x:null, y:null, flag:null} 3
            ];
            //显示蛇
            this.display = function(){
                for(var i=0; i<this.body.length; i++){
                    if(this.body[i].x !=null) { //当吃到食物时， x==null, 不能新建， 不然会在0,0处理新建一个
                        var s = document.createElement('div');
                        // 将节点保存到一个状态变量中， 以便以后删除使用
                        this.body[i].flag = s;

                        //设置蛇的样式
                        s.style.width = this.width + 'px';
                        s.style.height = this.height + 'px';
                        s.style.backgroundColor="rgb("+Math.floor(Math.random()*200)+", "+Math.floor(Math.random()*200)+", " + Math.floor(Math.random() * 200) +")";
                        //s.style.borderRadius = '50%';
                        //设置位置
                        s.style.position = 'absolute';
                        s.style.left = this.body[i].x * this.width + 'px';
                        s.style.top = this.body[i].y * this.height + 'px';
                        //添加到地图中
                        map.canvas.appendChild(s);
                    }

                }
            }
            //让蛇运动起来
            this.run = function() {

                for(var i=this.body.length-1; i>0; i--) {
                    this.body[i].x = this.body[i-1].x;
                    this.body[i].y = this.body[i-1].y;
                }
                //默认是right  left  up down
                // 根据方向处理蛇头
                switch(this.direction) {
                      case "left": this.body[0].x -=1; break;
                      case "right": this.body[0].x +=1;break;
                      case "up": this.body[0].y -=1; break;
                      case "down": this.body[0].y +=1; break;
                }

                //判断蛇头吃到食物， xy和食物的XY重合
                if(this.body[0].x ==food.x && this.body[0].y == food.y ){
                    //蛇加一节， 根据最后节点定
                    this.body.push({x:null, y:null, flag:null});

                    //判读一下设置级别
                    if(this.body.length > l.slength) {
                        l.set();
                    }

                    map.canvas.removeChild(food.flag);
                    food = new Food(map);

                }
                //判断是否出界， 蛇头
                if(this.body[0].x <0 || this.body[0].x > map.xnum-1 || this.body[0].y <0 || this.body[0].y > map.ynum -1) {
                    clearInterval(timer); //清除定时器

                    alert("怎么这么不小心撞墙了呢，摸摸头");

                    //重新开始游戏
                    restart(map, this)

                    return false;
                }

                //判读是否和自己重合
                for(var i=4; i<this.body.length; i++){
                    if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
                        clearInterval(timer); //清除定时器

                        alert("呀，怎么喜欢咬自己的肉肉");

                        //重新开始游戏
                        restart(map, this)

                        return false;
                    }

                }                

                for(var i=0; i<this.body.length; i++){
                    if(this.body[i].flag != null) {  //当吃到食物， flag是等null, 且不能删除
                        map.canvas.removeChild(this.body[i].flag)
                    }
                }

                this.display();
            }

        }
        //重新开始游戏
        function restart(map, snake) {
            for(var i=0; i<snake.body.length; i++) {
                map.canvas.removeChild(snake.body[i].flag);
            }

            snake.body = [
                {x:2, y:0},  //蛇头， 第一点  0
                {x:1, y:0},  //蛇脖子, 第二点 1
                {x:0, y:0}  //蛇尾， 第三点   2

            ];
            snake.direction = 'right';
            snake.display();
            map.canvas.removeChild(food.flag);
            food = new Food(map);

        }
        //设置级别对象
        function Level() {
            this.num = 1; //第几级别
            this.speed= 300; //毫秒， 每升一关， 数量减少20， 速度就加快了
            this.slength = 8; //每个关的长度判断

            this.set = function() {
                this.num++;
                if(this.speed <= 50) {
                    this.speed = 50;
                }else{
                    this.speed -=50;
                }
                this.slength += 10;  //这个可以自己定义
                this.display();
                start();  //重新开始， 速度加快
            }

            this.display = function() {
                document.getElementById('gnum').innerHTML = this.num;
            }
        }
        var l = new Level();
        l.display();

        //创建地图对象
        var map = new Map(20, 40, 20);
        map.create(); //显示画布

        //构造食物对象
        var food = new Food(map);

        //构造蛇对象
        var snake = new Snake(map);
        snake.display();

        // 组body加键盘事件， 上下左右
        window.onkeydown = function(e){
            var event = e || window.event;

           // console.log(event.keyCode);

           switch(event.keyCode) {
                case 38:
                    if(snake.direction != "down") {
                        snake.direction = "up";
                    }
                    break;
               case 40:
                   if(snake.direction != "up") {
                       snake.direction = "down";
                   }
                   break;
               case 37:
                   if(snake.direction != "right") {
                       snake.direction = "left";
                   }
                   break;
               case 39:
                   if(snake.direction != "left") {
                       snake.direction = "right";
                   }
                   break;
           }
        }

        var timer; //变量可以提升

        function start() {
            clearInterval(timer);
            timer = setInterval(function(){
                snake.run();
            },l.speed);
        }

        document.getElementById('begin').onclick=function(){
            start();
        }

        document.getElementById('pause').onclick=function() {
            clearInterval(timer);
        }
    </script>
</div>

</body>
</html>

 

qq_41634321
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3104
JS 超详细 贪吃蛇 案例 速速围观
利用JS实现贪吃蛇
weixin_63489869的博客
06-23 3710
利用js实现贪吃蛇的相关功能
JavaScript实现贪吃蛇小游戏
热门推荐
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
JS 实战 贪吃蛇游戏
最新发布
2301_80441013的博客
05-23 490
想要开始和暂停两个按钮居中，可以将盒子设置为弹性盒也可以使用其他方法【代码】
手把手教你完成第一个JS项目：用简单到极致的贪吃蛇游戏熟悉JS语法
Maynor的博客
07-04 1608
文章目录前言思路分析：第一关 Pixelbox.js的下载和使用第二关 孵一条小蛇-蛇的创建第三关 让小蛇动起来-移动蛇可以移动了，还很丝滑~ 前言 贪吃蛇被业内视为真正意义上的第一款手机游戏，玩法简单到极致，随着诺基亚手机的流行风靡一时！在本次课程中我们采用Pixelbox.js这个框架进行开发，其核心是数据模型及渲染。通过贪吃蛇的开发，我们将对JS的语法更加的熟悉，同时学习如何把一个需求给分解成具体的开发步骤，培养你做项目的思维。 我们先来看一下开发完后的效果： 是不是很有复古的气息！！！没做过的小伙
【前端｜JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏！
A_D_H_E_R_E的博客
08-20 4503
通过这个项目，你不仅可以学习如何使用 JavaScript 来实现一个小游戏，还可以熟练学习js操作dom、数据的常用方法、定时器setInterval、css样式、事件监听器以及实现需求的逻辑思维等等知识，对前面学习的一些理论知识进行了实践，相信你跟着一套教程下来会对前面学习到的知识有更深的理解。后续我们这个前端专栏还会讲述ES6、垃圾回收、js算法技巧、Vue入门实战、React实战、前端面试题。
原生js实现贪吃蛇游戏
01-18
原生JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 代码： [removed] var timer = null; var oMain = document.getElementById(main); function Map(atom,xnum,ynum){//地图,设置单位大小，及...
用JavaScript实现贪吃蛇游戏
10-14
总的来说，用JavaScript实现贪吃蛇游戏涉及HTML、CSS和JavaScript的结合应用，通过DOM操作动态更新游戏状态，以及利用JavaScript的面向对象编程来构建游戏的各个组件。这是一个很好的练习项目，可以帮助开发者提升对...
javascript实现贪吃蛇游戏（娱乐版）
10-14
【JavaScript实现贪吃蛇游戏详解】 在编程领域，贪吃蛇游戏是一个经典的实践项目，它可以帮助初学者理解基本的游戏逻辑和交互处理。本篇将详细讲解如何使用JavaScript语言实现一个娱乐版的贪吃蛇游戏。 首先，我们...
JavaScript实现贪吃蛇
07-31
JavaScript实现贪吃蛇
基于JavaScript实现贪吃蛇游戏
12-28
本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 1.结构 创建一个盒子box作为蛇的身体，当前盒子中只有一个子元素，代表此时蛇的长度为1. 在创建一个盒子food作为贪吃蛇的食物。...
【JS】原生js实现极简版贪吃蛇，附全部代码
小安驾到的博客
02-15 1321
原生js实现贪吃蛇小游戏，包括小蛇的移动、吃食物、检测是否撞到自己等功能
js实现贪吃蛇游戏
weixin_45791806的博客
09-12 465
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇游戏</title> <style> .game-container {
js实现贪吃蛇小游戏
m0_64344470的博客
04-08 215
【代码】js实现贪吃蛇小游戏。
js贪吃蛇（完整版）
whjwhja6的专栏
11-20 469
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 /*如果是.map下面就要用class=map*/ #container{  width:800px;  margin:auto;  margin_top:60px;  } #ma
用js实现贪吃蛇游戏
05-26
以下是一个简单的贪吃蛇游戏示例，使用纯 JavaScript 编写： ... ...<!... 贪吃蛇游戏 ...通过 JavaScript 实现了贪吃蛇的移动、吃到食物、撞到边界或自身等基本功能，并使用定时器实现了游戏的持续进行。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值