JS实现贪吃蛇小游戏

最新推荐文章于 2024-05-02 14:46:08 发布
最新推荐文章于 2024-05-02 14:46:08 发布
阅读量534 收藏 1
点赞数
分类专栏： web前端 文章标签： 贪吃蛇 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21003657/article/details/73431342
版权

最近一个月在看机器学习方向的书籍，推理的头大了，抽了点空，写了个小游戏玩玩

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body,h2
		{
			margin: 0px;
			padding: 0px;
		}
		#page
		{
			width: 810px;
			height: 620px;
			margin: 20px auto;
			text-align: center;
		}
		#mark
		{
			font-weight: 800;
		}
		#mark_con
		{ 
			color: red; 
		}
	</style>
</head>
<body>
	<div id="page">
		<h2>贪吃蛇游戏</h2>
        <div id="gameBox">
        	<canvas id="canvas" height="500px" width="800px" style="border:1px solid #66ff00;background: #9a968b"></canvas>
        </div>
        <div id="help">
            <div id="mark">得分：<span id="mark_con"></span></div>
        </div>
    </div>
    <script type="text/javascript">

    	var canvas=document.getElementById("canvas");	//获取到canvas对象
  		var ctx=canvas.getContext('2d');	//建立二维画布
  		var oMark = document.getElementById('mark_con');//分数显示框
    	var blocksize=20;//格子大小
    	var rows=canvas.height/blocksize; //行数
    	var cols=canvas.width/blocksize;//列数
    	var snakes=[] //用于存储蛇的位置
    	var foodX=20*blocksize;	//食物横坐标
    	var foodY=13*blocksize;	//食物的纵坐标
    	var initsnack=4;	//初始化蛇的长度
    	var direction=-1;//蛇初始方向为右边
    	var speed=1; //贪吃蛇移动的速率
    	function draw(){
    		//防止蛇移动的时候，画板上的数据没有清空
    		ctx.clearRect(0,0,blocksize * cols, blocksize * rows);
    		//画出横线
            for(var i=1;i<=rows;i++)
            {
            	ctx.beginPath();
            	ctx.moveTo(0,i*blocksize);
            	ctx.lineTo(cols*blocksize,i*blocksize);
            	ctx.strokeStyle="white";
            	ctx.closePath();
            	ctx.stroke();
            }
            //画出竖线
            for(var i=1;i<=cols;i++)
            {
            	ctx.beginPath();
            	ctx.moveTo(i*blocksize,0);
            	ctx.lineTo(i*blocksize,rows*blocksize);
            	ctx.strokeStyle="white";
            	ctx.closePath();
            	ctx.stroke();
            }
            //画蛇
            drawsnakes();
            //画出食物
            drawFood();
    	}
    	function drawsnakes(){
    		for(var i=0;i<snakes.length;i++)
            {
            	ctx.beginPath();
            	
            	ctx.moveTo(snakes[i].x,snakes[i].y);
            	ctx.lineTo(snakes[i].x+blocksize,snakes[i].y);
            	ctx.lineTo(snakes[i].x+blocksize,snakes[i].y+blocksize);
            	ctx.lineTo(snakes[i].x,snakes[i].y+blocksize);
            	if(i==0)
            	{
            		//蛇尾
            		ctx.fillStyle="#806464";
            		ctx.lineTo(snakes[i].x,snakes[i].y);
            	}
            	else if (i==snakes.length-1) {
            		//蛇头
            		ctx.fillStyle="#a24e33";
            	}
            	else
            	{
            		//蛇身体
            		ctx.fillStyle="#806464";
            	}
            	ctx.fillRect(snakes[i].x,snakes[i].y,blocksize,blocksize);
            	ctx.strokeStyle="gray";
            	ctx.stroke();
            	ctx.closePath();
            }
    	}
    	function drawFood(){
    		ctx.beginPath();
            ctx.fillStyle = "green";
            ctx.fillRect(foodX, foodY, blocksize, blocksize);
            ctx.moveTo(foodX, foodY);
            ctx.lineTo(foodX + blocksize, foodY);
            ctx.lineTo(foodX + blocksize, foodY + blocksize);
            ctx.lineTo(foodX, foodY + blocksize);
            ctx.lineTo(foodX, foodY);
            ctx.closePath();
            ctx.strokeStyle = "gray";
            ctx.stroke();
    	}
    	//随机产生一个食物
    	function addFood(){
        	foodX = Math.floor(Math.random() * (cols - 1)) * blocksize;
			foodY = Math.floor(Math.random() * (rows - 1)) * blocksize;
            //防止食物随机出现在蛇身上
            var temp=1;
       		for(var i=0;i<snakes.length;i++)
          	{
            	if(snakes[i].x==foodX&&snakes[i].y==foodY)
            	{
             		temp=0;
            		break;
          		}
         	}
      		if(temp==0)
        		addFood();
        }
    	function Cell(x,y){
    		this.x=x;
    		this.y=y;
    	}
    	//初始化
    	function init(){
    		for( var i = 0; i < initsnack; i++){
                snakes[i]=new Cell((i+1)*blocksize,60);
            }
            addFood();
            oMark.innerHTML = 0;
    	}
    	//1 左 -1 右 2 上 -2 下
    	function keydown(keyCode)
    	{
    		switch(keyCode)
    		{
    			case 37:
    				if(direction!=-1)	
    					direction=1;
    				break;
    			case 38:
    				if(direction!=-2)
    					direction=2;
    				break;
    			case 39:
    				if(direction!=1)
    					direction=-1;
    				break;
    			case 40:
    				if(direction!=2)
    					direction=-2;
    				break;
    		}
    		move();
    	}
    	//1 左 -1 右 2 上 -2 下
    	function move(){
    		var head=snakes[snakes.length-1];
    		switch(direction){
    			case 1://左
    				snakes.push(new Cell(head.x-blocksize,head.y));break;
    			case -1://右
    				snakes.push(new Cell(head.x+blocksize,head.y));break;
    			case 2:// 上
    				snakes.push(new Cell(head.x,head.y-blocksize));break;
    			case -2: //下
    				snakes.push(new Cell(head.x,head.y+blocksize));break;
    		}
            snakes.shift();
            IsEatFood();
            IsDie();
          	//console.log(snakes)
            draw();
    	}
    	//判断是否吃到了食物，即蛇头与食物坐标是否一致,若一致，则蛇长加一，重新生成新的食物,分数加1
    	function IsEatFood(){
    		var head=snakes[snakes.length-1];
    		if(head.x==foodX&&head.y==foodY)
    		{
    			oMark.innerHTML = (parseInt(oMark.innerHTML) + 1).toString();
    			addSnakes();
    			addFood();
    		}
    	}
    	function addSnakes(){
    		snakes.unshift(new Cell(blocksize*cols,blocksize * rows));

    	}
    	//判断是否死亡，要么蛇头超出边界，要么蛇头撞到蛇身体
    	function IsDie()
    	{
    		var head=snakes[snakes.length-1];
    		if(head.x==-blocksize||head.x==blocksize*cols||head.y==-blocksize||head.y==blocksize*rows)
    		{
    			alert("撞墙了,游戏结束！分数为:"+oMark.innerHTML);
    			clearInterval(interval);
    			window.location.reload();
    		}
    		else
    		{
    			var temp=1;
    			for (var i=0; i <snakes.length-2; i++) {
    				if (head.x==snakes[i].x&&head.y==snakes[i].y)
    				{
    					temp=0;
    					break;
    				}
    			}
    			if(temp==0)
    			{
    				alert("撞到身体了,游戏结束！分数为:"+oMark.innerHTML);
    				clearInterval(interval);
    				window.location.reload();
    			}
    		}

    	}	
    	// 启动函数
        window.onload = function(){
            
            init();
            draw();
        	interval = setInterval(move,200);
            document.onkeydown = function(event){
                var event = event || window.event;
                keydown(event.keyCode);
            }
        }
    </script>
</body>
</html>
运行的效果图如下


贪吃蛇小游戏，主要在于需要考虑清逻辑，多种可能性，实现还是不难的。


hzn11
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+js实现贪吃蛇小游戏（内含完整代码）
2301_79055083的博客
05-05 969
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JavaScript实现贪吃蛇小游戏
热门推荐
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
js实现贪吃蛇小游戏
m0_64344470的博客
04-08 217
【代码】js实现贪吃蛇小游戏。
用JS实现贪吃蛇小游戏
A-Select °
04-13 333
效果： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>贪吃蛇</title> <style> .map{ width: 800px; height:...
用js代码实现贪吃蛇小游戏
guai_guai_guai的博客
05-02 1514
js已经学了大部分了，现在就利用我所学的js知识试试做贪吃蛇小游戏吧以下部分相关图片以及思路笔记均出自渡一陈老师的视频首先制作简单的静态页面，添加贪吃蛇移动的背景和相关图片，比如开始游戏等等将各个功能均封装在函数中，利用主函数调用分函数会使结构更清晰。
JS贪吃蛇小游戏实现
超级小胖子的博客
11-14 1021
JS贪吃蛇小游戏实现，暂停游戏，继续游戏，分数统计，数据配置化。
javascript实现贪吃蛇小游戏
依古比古的博客
06-18 265
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <script> var map; //地图类对象 var snake; //蛇类对象 var food; //食物类对象 var timer; //定时器对象 var sum=0; //分数 //地图类 functi
JS 实现贪吃蛇小游戏（带注释）
weixin_46249441的博客
12-10 3777
这里只是实现了贪吃蛇游戏的基础功能，没有修饰蛇、食物、背景，食物随机出现，蛇吃掉食物身体增长一节，蛇不能撞墙不能撞到自己，同时食物不会随机出现在蛇身上。总之比较基础和粗糙。
html+js实现贪吃蛇小游戏
qq_45142260的博客
04-06 2864
使用原生js+html实现贪吃蛇小游戏,功能：蛇移动，蛇死亡（撞墙，咬到自己），蛇吃到食物成长，暂停，开始，重新开始。
js实现贪吃蛇小游戏（加墙）
11-19
总之，JavaScript实现贪吃蛇小游戏涉及到HTML页面构建、CSS样式设计、JavaScript核心逻辑编写以及用户交互处理等多个方面，这不仅锻炼了开发者的基础技能，也为增加游戏趣味性和挑战性提供了可能。
原生JS实现贪吃蛇小游戏
12-28
本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下 思路：在页面上添加一个地图，以提供边界，在地图中随机出现食物，给蛇身设置一个初始长度，用键盘方向键控制蛇的走向，当蛇触碰到...
新闻阅读器.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
Windows Server 2008R2 sp1 升级 Service Pack 1
08-04
windows Server 2008 R2 Standard 升级 Service Pack 1 《Windows Server 2008 R2 SP1与IE11及依赖包详解》 Windows Server 2008 R2 SP1（Service Pack 1）是微软公司针对其服务器操作系统Windows Server 2008 R2的一个重要更新，旨在增强系统性能、提升安全性，并修复了大量已知问题。SP1的引入，不仅包含了自Windows Server 2008 R2发布以来的所有累积更新，还提供了对新技术的支持，例如Hyper-V 3.0虚拟化技术，提高了云计算和数据中心的管理效率。 IE11（Internet Explorer 11）是微软推出的最后一个版本的传统IE浏览器，对于Windows Server 2008 R2 SP1来说，这是一个重要的升级。IE11带来了更快的网页加载速度、更好的标准支持以及增强的安全特性。它支持HTML5、CSS3等现代Web技术，提供了更好的用户体验，并且增强了对企业级应用的兼容性。
基于python的crazy管理系统 (5).zip
最新发布
08-04
安装包
ThinkPHP高仿蓝奏云网盘系统源码/对接易支付系统程序
08-04
基于ThinkPHP开发的高仿蓝奏云网盘系统源码，对接易支付系统，此网盘可以做网赚网盘，有VIP功能支持对接易支付，后台自行配置。 搭建教程： 1、修改数据库config/database.php 2、导入打包的数据库文件 3、设置为pcblic运行目录 4、设置伪静态规则为 thinkphp 5、上面全部设置好了就可以后台登入地址：域名/admin.php
文艺小清新工作总结未来规划工作汇报PPT模板.pptx
08-04
【作品名称】：述职报告，工作计划，工作总结，计划书，商务计划，转正报告 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
JavaScript实现贪吃蛇教程
通过实现这些功能，我们可以创建一个基本的JavaScript贪吃蛇游戏。这个过程涉及到JavaScript的变量、条件语句、循环、数组操作、事件监听等核心概念。通过实践这样的项目，开发者不仅可以提升JavaScript编程技能，还...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值