前端实例 -- JS实现贪吃蛇小游戏

最新推荐文章于 2024-05-07 09:50:14 发布
最新推荐文章于 2024-05-07 09:50:14 发布
阅读量4k 收藏 18
点赞数 2
分类专栏： 前端 文章标签： javascript css css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43742385/article/details/109291412
版权
  1. 使用语言 HTML+CSS+JavaScript
  2. 使用工具 visual studio code
  3. GitHub项目地址：贪吃蛇
  4. 项目运行截图：
    贪吃蛇
  5. 项目功能分析：主要使用数组来存储蛇的位置，地图和蛇都是一个二维数组，对于有蛇的地方，地图的CSS就会发生改变，同时添加了添加了一个音乐播放按钮，通过CSS动画实现旋转。
  6. 项目代码：（项目代码有详细的注释）
    snake.html
<!--
 * @Author: CSU_XZY
 * @Date: 2020-10-13 22:06:51
 * @LastEditors: CSU_XZY
 * @LastEditTime: 2020-10-18 17:08:54
 * @FilePath: \第二天\贪吃蛇\snake.html
 * @Description: just to play
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eatSnake</title>
<head>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
			border: 0px;
		}
		body{
			background: #444;
		}
		table{
			border-collapse:collapse;
			overflow: hidden;
			border:1px solid #ddd;
			margin:10px auto 10px auto;
		}
		td{
			display: table-cell;
			width:20px;
			height:20px;
			background: #fff;
			border:1px #eeeeee solid;
		}
		.snake{
			background: #3388ee;
		}
		.notsnake{
			background: #fff;
		}
		.food{
			background: #33aa33;
		}
		.snake_head{
			background: #dd4444;
		}
		.notice{
			width:450px;
			text-align: center;
			margin:50px auto;
			color:#fff;
			font-size: 14px;
		}
	</style>
</head>
<body>
<p class="notice">提示：空格键控制开始/ 暂停，方向键控制蛇的移动方向，F5刷新</p>
<script type="text/javascript" src="snake.js"></script>
</body>
</html>

snake.js

/*
 * @Author: CSU_XZY
 * @Date: 2020-10-17 12:38:26
 * @LastEditors: CSU_XZY
 * @LastEditTime: 2020-10-18 22:40:24
 * @FilePath: \第二天\snake\snake.js
 * @Description: just to play
 */
window.onload = function(){
    var snake = function(width,height,snakeId,speed){
        this.width = width || 10;
        this.height = height || 10;
        this.snakeId = snakeId || "snake";
        this.goX = 0;
        this.goY = 0;
        this.speed = this.oldSpeed = speed || 10;
        this.Grid = []; //存放td的二维数组
        this.snakeGrid = []; //存放蛇的数组
        this.foodGrid = [];
        this.snakeTimer = null;
        this.derectkey = 39;
        this.stop = true;
        this.init();
        document.getElementById("myAudio").play();
        box.style.animationPlayState = 'running'
    }

    snake.prototype = {
        //创建二维数组
        multiArray : function(m , n)
        {
            var array = new Array(m);   //长
            for(let i = 0; i < m; i++)
            {
                array[i] = new Array(n);  //宽
            }
            return array;
        },
        //函数修正this
        bind : function(fn,context)
        {
            return function(){
				return fn.apply(context,arguments);
			}
        },
        //移动的主函数
        move:function(){
			var _this = this;
			if(_this.snakeTimer){clearInterval(_this.snakeTimer);}
			_this.snakeTimer = setInterval(_this.bind(_this.main,_this),Math.floor(3000/this.speed));
        },
        //重来
        reset()
        {
            this.goX = 0;
            this.goY = 0;
            this.speed = this.oldSpeed;
            this.derectkey = 39;
            this.stop = true;
            this.init();
        },
        //确定键盘事件
        keyDown : function(e)
        {  
            var e = e || window.event;
            var keycode = e?e.keyCode:0;
            if(keycode == 116 )
            window.location.reload();
            if(keycode == 32)
            {
                if(this.stop)
                {
                    this.move();
                    this.stop = false;
                }
                else{
                    if(this.snakeTimer)
                    clearInterval(this.snakeTimer);
                    this.stop = true;
                }
            }
            if(keycode>=37 && keycode <= 40)
                {
                    if(!this.stop)
                    this.derectkey = keycode;
                }
            return false;
        },
        //创建地图
        creatMap : function()
        {
            var table = document.createElement("table");
            var tbody = document.createElement("tbody");
            for(let i = 0; i < this.width; i++)
            {
                var tr = document.createElement("tr");
                for(let j = 0; j < this.height; j++)
                {
                    var td = document.createElement("td");
                    this.Grid[i][j] = tr.appendChild(td);
                }
                tbody.appendChild(tr);
            }
            table.appendChild(tbody);
            table.id = this.snakeId;
            document.body.appendChild(table);
        },
        //产生随机点
        randomPoint : function(initX,initY,endX,endY)
        {
            var p = []; //用来存放产生的随机点的数组
            var initX = initX || 0;
            var initY = initY || 0;
            var endX = endX || this.width;
            var endY = endY || this.height;
            p[0] = Math.floor(Math.random()*(endX - initX)) + Math.floor(initX);
            p[1] = Math.floor(Math.random()*(endY - initY)) + Math.floor(initY)
            return p;
        },
        //初始化食物的位置
        initFood : function()
        {
            this.foodGrid = this.randomPoint();

            if(this.isInSnake(this.foodGrid))
            {
                this.initFood();
                return false;
            }
            this.Grid[this.foodGrid[0]][this.foodGrid[1]].className = "food";
        },
        //判断点是否在蛇身上
        isInSnake : function(point,pos)
        {
            var snakeGrid = this.snakeGrid;
            if(point instanceof Array)
            {
                let n = snakeGrid.length;
                for(let i = pos || 0; i < n; i++)
                {
                    if(point[0] == snakeGrid[i][0] && point[1] == snakeGrid[i][1])
                    return true;
                }
            }
            return false;
        },
        //给蛇涂颜色
        paintSnake : function(){
            var snakeGrid = this.snakeGrid;
            for(let i = 0; i < snakeGrid.length; i++)
            {
                this.Grid[snakeGrid[i][0]][snakeGrid[i][1]].className = "snake_body";
            }
        },
        //初始化蛇的位置
        initSnake : function()
        {
            this.snakeGrid = [];

            this.snakeGrid.push([1,3]);
            this.snakeGrid.push([1,2]);
            this.snakeGrid.push([1,1]);

            this.paintSnake();

            this.Grid[this.snakeGrid[0][0]][this.snakeGrid[0][1]].className = "snake_head";
            this.Grid[this.snakeGrid[this.snakeGrid.length-1][0]][this.snakeGrid[this.snakeGrid.length-1][1]].className = "snake_tail";
        },
        //判断蛇是否撞墙
        isInWall : function(point){
            if(point instanceof Array){
                if(point[0] < 0 || point[0] > this.width1 - 1 || point[1] < 0 || point[1] > this.height - 1)
                return true;
            }  
            return false;
        },
        //初始化条件
        
        //控制函数运行的主函数
        main : function(){
            var snakeGrid = this.snakeGrid;
            var temp = snakeGrid[snakeGrid.length-1],
                isEnd = false;
                headX = snakeGrid[0][0];
                headY = snakeGrid[0][1];
                msg = "";
            switch(this.derectkey)
            {
                case 37:
					if(this.goY!=1){this.goY=-1;this.goX=0} 	//防止控制蛇往相反反方向走
					break;
				case 38:
					if(this.goX!=1){this.goX=-1;this.goY=0}
					break;
				case 39:
					if(this.goY!=-1){this.goY=1;this.goX=0}
					break;
				case 40:
					if(this.goX!=-1){this.goX=1;this.goY=0}
            }
            headX += this.goX;
            headY += this.goY;

            if(headX == this.foodGrid[0] && headY == this.foodGrid[1])
            {
                this.snakeGrid.unshift(this.foodGrid);
                this.initFood();
                if(this.snakeGrid.length>4){		//控制蛇加速
					if(this.snakeGrid.length==5){
						this.speed += 5;
					}
					else if(this.snakeGrid.length==10){
						this.speed += 3;
					}
					else if(this.snakeGrid.length==20){
						this.speed += 3;
					}
					else if(this.snakeGrid.length==30){
						this.speed += 3;
					}
					this.move();
				}
            }
            else
            {
                for(var i=this.snakeGrid.length-1;i>0;i--){
					this.snakeGrid[i] = this.snakeGrid[i-1] ;
				}
                this.snakeGrid[0] = [headX,headY];	
                if(this.isInSnake(this.snakeGrid[0],1)){
					isEnd=true;
					msg = "哈皮，吃到自己啦！！";
				}
				//判断是否撞墙
				else if(this.isInWall(this.snakeGrid[0])){
					isEnd =true;
					msg = "撒比伟哥，撞墙了！！";
                }
                if(isEnd)
                {
                    if(this.snakeTimer)
                    clearInterval(this.snakeTimer);
                    var score;
                    let len = this.snakeGrid.length;
                    if(len <= 5)
                    score = len-3;
                    else if(len>5 && len<=10)
                    {
                        score = 2 + 2*(len-5)
                    }
                    else if(len>10 && len <= 20)
                    score = 12 + 3*(len-10);
                    else
                    score = 27 + 5*(len - 15);
                    if(confirm(msg+"你的分数是："+score+"！ 是否重新开始？")){
						this.reset();
					}
					return false;
                }
                this.Grid[temp[0]][temp[1]].className = "notSnake";
            }
            this.paintSnake();
            this.Grid[headX][headY].className = "snake_head";
            this.Grid[this.snakeGrid[this.snakeGrid.length-1][0]][this.snakeGrid[this.snakeGrid.length-1][1]].className = "snake_tail";
        },
        init : function(){
            var _this = this;
            snake_id = document.getElementById(_this.snakeId)||0 ;
			if(snake_id){
				document.body.removeChild(snake_id);
			}
            _this.Grid = _this.multiArray(_this.width,_this.height);
            _this.creatMap();
            _this.initSnake();
            _this.initFood();
            document.onkeydown = _this.bind(_this.keyDown,_this);
        }
    }
    new snake(20,20,"snake",10);
}
中南滴水哥
关注
  • 2
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML+js实现贪吃蛇小游戏（内含完整代码）
m0_67402564的博客
03-08 1843
案例分析 看图拆解游戏 首先我们根据图片上的内容把这个游戏拆解成几个部分去单独看： 最外面的大盒子包裹着内容加边框限制蛇的活动范围，整个范围可以看成由许多小方格排列构成的，例如这样子的：； 两个按钮，一个控制开始游戏，一个控制游戏中途的暂停继续功能； 盒子里面有可以移动的蛇，最开始状态的蛇分为蛇头、蛇身、蛇尾三个部分，蛇只能走直线，通过上下左右的功能键去控制蛇的走向； 还有一个随机产生在限制区域内的食物； 这个游戏是当点击开始游戏按钮才显示蛇和食物的，所以最开始我们不在结构里面书写，后面通过js构造函
JavaScript面向对象编程小游戏---贪吃蛇代码实例
10-17
主要介绍了JavaScript贪吃蛇的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用JavaScript写的贪吃蛇游戏（很简单，很详细）
Bejpse的博客
03-02 3417
效果 编写外部框架 <!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; l
2024年最全Web前端---HTML+CSS+JS实现的贪吃蛇游戏，大厂架构师经验分享
最新发布
2401_84620288的博客
05-07 651
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】96道前端面试题：常用算法面试题：内容主要包括HTML，CSS，JavaScript，浏览器，性能优化//存一个蛇尾的信息。
【前端｜JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏！
A_D_H_E_R_E的博客
08-20 4583
通过这个项目，你不仅可以学习如何使用 JavaScript 来实现一个小游戏，还可以熟练学习js操作dom、数据的常用方法、定时器setInterval、css样式、事件监听器以及实现需求的逻辑思维等等知识，对前面学习的一些理论知识进行了实践，相信你跟着一套教程下来会对前面学习到的知识有更深的理解。后续我们这个前端专栏还会讲述ES6、垃圾回收、js算法技巧、Vue入门实战、React实战、前端面试题。
用js代码实现贪吃蛇小游戏
guai_guai_guai的博客
05-02 1505
js已经学了大部分了，现在就利用我所学的js知识试试做贪吃蛇小游戏吧以下部分相关图片以及思路笔记均出自渡一陈老师的视频首先制作简单的静态页面，添加贪吃蛇移动的背景和相关图片，比如开始游戏等等将各个功能均封装在函数中，利用主函数调用分函数会使结构更清晰。
Web前端---HTML+CSS+JS实现的贪吃蛇游戏
chengyang_java的博客
10-28 1万+
目录 游戏设计步骤： 代码目录： 主要代码实现： 源码获取 效果演示：文末获取免费源码 游戏设计步骤： 1.首先是蛇的运动。蛇每往前走一步。就是增加一个头部点，去掉原来的尾巴点。中间的所有点都是不动的。 用程序化来表达就是，整条贪吃蛇可以是一个类似这样[[1,2],[1,3]]的带位置信息的数组，每移动一步，往数组推入一个新的坐标点，并移除第一个坐标点。 2.获取下一个点的坐标。我们的蛇理论上可以往上下左右四个方向移动。可以根据现在蛇头的坐标和方向计算出合适的x,y坐标...
web前端项目-贪吃蛇小游戏【附源码】
qiao_yue的博客
01-18 1078
【贪吃蛇】是一款经典的小游戏，采用HTML、CSS和JavaScript技术进行开发，玩家通过控制一条蛇在地图上移动，蛇的目的是吃掉地图上的食物，并且让自己变得更长。游戏的核心玩法是控制蛇的移动方向和长度，同时避免蛇头碰到自己的身体或者游戏边界
TypeScript实现小游戏---贪吃蛇(超详细)
前端小白在前进的博客
08-16 1928
typescript系列到这篇文章正式进入尾声了，我们通过以上学习ts的知识，想要熟悉的掌握必须要写一个小demo综合运用所学的知识，这个项目的目的就是综合ts所学知识，实现面向对象的实际开发！项目地址 ： https://gitee.com/liuze_quan/ts-greedy-snake。...
JavaScript制作贪吃蛇小游戏
m0_60264901的博客
01-04 7249
揭秘贪吃蛇小游戏代码
微信小程序实例--贪吃蛇
03-29
前阵子公司的app刚上架,这段时间比较空闲, 就稍微研究了一下微信小程序...(本人iOS开发, 对h5,js语法也是略懂略懂---会前端的同学搞微信小程序应该是轻轻松松) . 毕竟微信小程序的主要构成为(wxml+wxss+js+json) ...
原生JS网页贪吃蛇小游戏.zip
05-27
原生JS网页贪吃蛇小游戏是一个典型的Web前端项目，它融合了HTML、CSS和JavaScript三大核心技术，是学习和实践前端开发的优秀实例。通过这个项目，开发者可以提升对JavaScript OOP的理解，同时掌握游戏开发的基本流程...
JavaScript面向对象编程小游戏—贪吃蛇代码实例
11-26
用JavaScript 语言编写的游戏小程序–贪吃蛇. ​ 代码注释详细,逻辑清晰 . 非常适合新手前端开发者, 锻炼JavaScript语言的面向对象的编程思想.  该小Demo已上传GitHub,欢迎下载! 觉得好的话,随手给个star, 您的...
贪吃蛇HTML小游戏 SnakeHTMLgames.rar
01-19
贪吃蛇HTML小游戏是一款基于HTML技术开发的在线益智类游戏，它继承了经典贪吃蛇的游戏机制，玩家需要控制一条不断增长的蛇在有限的空间内吃食物，同时避免撞到自身或边界，以获得更高的分数。这个游戏是前端开发的一...
js实现贪吃蛇小游戏
m0_64344470的博客
04-08 217
【代码】js实现贪吃蛇小游戏。
v-model的实现原理
热门推荐
qq_43742385的博客
03-09 2万+
v-model的实现原理 基础用法 v-model 本质上不过是语法糖，可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScri
whistle使用指南
qq_43742385的博客
07-29 1万+
whistle使用指南一、whistle 简介二、安装、启动、配置2.1 安装 Node.js2.2 安装 whistle2.3 启动 whistle2.4 配置代理 （推荐）2.5 抓取 HTTPS 请求（可选）2.5.2 信任 whistle 证书2.5.3 验证抓取 HTTPS 请求三、修改请求实例演示3.1 修改请求3.1.1 修改请求方法3.1.2 修改请求头3.1.3 修改请求体3.2 修改响应3.2.1 修改响应状态码3.2.2 修改响应头部3.2.3 修改响应体四、总结 一、whistle
NPM详解
qq_43742385的博客
07-02 7506
NPM详解介绍命令执行多个脚本pre & post错误静默消息日志等级从文件中引用路径访问环境变量传递参数命名规则前缀 在拿到一个项目之后，如何看入口文件，如何运行项目，我们都会找到 package.json 中的 script 。 甚至在做项目做久之后，我们会自己写一些脚本来给开发提效，但你知道 NPM 脚本能做什么吗？ 你知道如何传递一个参数给脚本？ 你知道如何执行某个脚本文件么？ 在这篇文章中，我将分享我如何充分利用 NPM 脚本。 介绍 NPM 脚本是 package.json 中定义的一组
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值