JS实现简易版贪吃蛇小游戏（纯js代码）

最新推荐文章于 2024-08-12 03:46:42 发布
最新推荐文章于 2024-08-12 03:46:42 发布
阅读量1.3w 收藏 39
点赞数 6
分类专栏： js代码练习 文章标签： html js 贪吃蛇 初学者
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leadyang/article/details/80639278
版权
本文通过JavaScript代码实现了一个简易版的贪吃蛇小游戏。游戏包括地图绘制、食物生成和小蛇移动等功能。玩家可以通过键盘控制小蛇移动，当小蛇吃到食物时会增长，但如果撞到地图边界或自身，则游戏结束。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>新建网页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>

    <script type="text/javascript">
        //① 绘制地图
        function Map() {
            //私有成员(不会随便发生变化)
            var w = 800;
            var h = 400;

            //成员方法，绘制地图
            this.showmap = function () {
                //创建div、设置css样式、追加给body
                var tu = document.createElement('div');

                tu.style.width = w + "px";
                tu.style.height = h + "px";
                tu.style.backgroundImage = "url(./12.jpg)";

                document.body.appendChild(tu);
            }
        }

        //② 绘制食物
        function Food() {
            var len = 20;
            //把食物(权值)坐标声明为公开的，以便在外部访问
            this.xFood = 0;
            this.yFood = 0;
            this.piece = null; //页面上唯一的食物对象
            //绘制
            this.showfood = function () {
                //创建div、设置css样式、追加给body
                if (this.piece === null) {
                    this.piece = document.createElement('div');
最低0.47元/天 解锁文章
Leadyang
关注
专栏目录
前端技术搭建贪吃蛇小游戏（内含源码）
官方推荐
05-29 6万+
利用前端基础HTML、CSS、JS来搭建简易版本贪吃蛇小游戏，内附源码，直接拷贝即可运行，没有前端基础的小伙伴也可以通过文章中的讲解搭建出来！
贪吃蛇源码js
08-23
纯js贪吃蛇游戏
用js代码实现贪吃蛇小游戏
guai_guai_guai的博客
05-02 1921
js已经学了大部分了，现在就利用我所学的js知识试试做贪吃蛇小游戏吧以下部分相关图片以及思路笔记均出自渡一陈老师的视频首先制作简单的静态页面，添加贪吃蛇移动的背景和相关图片，比如开始游戏等等将各个功能均封装在函数中，利用主函数调用分函数会使结构更清晰。
使用javascript写的游戏大全
最新发布
weixin_34534456的博客
08-12 876
使用JavaScript编写的游戏大全 JavaScript作为一种强大的编程语言，不仅用于网页开发，也为游戏开发提供了丰富的可能性。随着HTML5和Canvas的引入，开发者能够在浏览器中实现各种类型的游戏，从简单的休闲游戏到复杂的多人在线游戏。本文将介绍几种使用JavaScript编写的游戏，并提供相关代码示例。 1....
JavaScript贪吃蛇游戏源码
一个程序员的复习笔记
10-09 7617
蛇对象 属性：方向、一组蛇节（div，div，div）、地图、食物 方法：生成蛇，增加蛇头，计算新蛇头的位置，蛇移动 食物对象 属性：横向位置、纵向位置、div元素、地图 方法：随机位置 游戏对象 属性：蛇，食物 方法：开始 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...
js实现贪吃蛇游戏-超简单
02-27
大二实习期间用js写的一个贪吃蛇游戏，对有些js和css/html的学习者有很大帮助。
JavaScript实现贪吃蛇小游戏
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
js实现贪吃蛇游戏（简易版）
10-14
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的贪吃蛇游戏。首先，我们要了解贪吃蛇游戏的基本机制：玩家控制一条由多个方块组成的蛇，通过吃食物来增长，同时避免撞到自身或墙壁。游戏的目标是尽可能长...
JS实现简易贪吃蛇游戏
11-19
【JS实现简易贪吃蛇游戏】 在网页游戏中，贪吃蛇是一款经典的像素风格小游戏，玩家通过控制蛇的移动来吞噬食物，每吞噬一个食物，蛇的长度就会增加。这篇文章将介绍如何使用JavaScript来实现一个简单的贪吃蛇游戏。 ...
HTML 小游戏：简易版贪吃蛇
01-02
HTML 小游戏：简易版贪吃蛇是一款基于纯HTML、CSS和JavaScript实现的经典游戏，无需任何额外环境配置，用户可以直接在浏览器中运行。这款游戏利用了Web技术的力量，为玩家提供了在网页上重温经典游戏的体验。 HTML...
JS简易贪吃蛇
weixin_44264878的博客
05-30 284
分析 1.食物对象 自定义构造函数 在原型对象上初始化食物 把食物暴露给window 2.蛇对象 小蛇构造函数 在原型对象上初始化小蛇 添加方法–移动小蛇 判断小蛇是否吃到食物 封装删除小蛇的函数 3.游戏对象 游戏的构造函数 初始化游戏 添加方法使小蛇自动跑起来 设置按键. 来改变小蛇移动的方向 具体实现 //食物对象 ((function () { //1.自定义构造函数 ...
JS贪吃蛇游戏代码
12-01
JS贪吃蛇游戏代码是一款很好玩的网页游戏代码。游戏难度分为初级、中级、高级、超高级、变态，选择难度开始游戏，游戏过程中可以随时调整难度级别。
JS实现贪吃蛇游戏
11-27
通过JS实现贪吃蛇功能 1、登录功能，程序运行时必须输入一个名称 2、蛇吃到实物可变长，碰到自己或着墙壁死亡，显示分数 3、游戏过程中动态显示分数变化 4、将数据存入本地文件score.txt（需要ActiveX插件，IE浏览器支持，只保存最高分数）
JS简单实现实现贪吃蛇
05-27
使用JavaScript简单实现贪吃蛇,基于JS的面向对象技术
原生js贪吃蛇源码
11-10
一个用js做的小项目仅供参考，分享资源使我快乐带着不用谢。
纯js写的小游戏，打开就可以玩，类似于是男人就坚持20秒
03-02
纯javascript写的小游戏， 打开浏览器就可以玩， 类似于是男人就坚持20秒。
js 简易的贪吃蛇小游戏
isfor_you的博客
12-07 604
贪吃蛇小游戏 1.明确要实现的功能 开始游戏、分数统计、蛇移动定时器、食物随机出现 规则： 蛇头不能碰到身体和地图边框，否则游戏结束 蛇头碰到食物时蛇身增加一格，并且食物重新出现 2.分部实现功能 1.利用原生js画出地图，食物 //画地图 function Map(){ this.width=750; this.height=390; this.position='absolute'; this.top=0; this.color='#ddd'; this._map=null; this
用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实现简易贪吃蛇
sll9711的博客
08-21 177
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #body{ width: 90vw; height: 90vh; border-width: 10px; .
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值