javascript的贪吃蛇游戏

最新推荐文章于 2024-01-10 14:23:59 发布
最新推荐文章于 2024-01-10 14:23:59 发布
阅读量162 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xihuanbaikaishui/article/details/73775687
版权
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8"/>
 <title>贪吃蛇</title>
 </head>
 
<body>
     <canvas id="canvas" width="1000" height="700"></canvas>
     <div>
         <input id="switch" type="button" value="开始" οnclick="clickSwitch()"></input><br/>
         <input id="content" type="text" value="0"></input>
     </div>
 </body>
 
<script type="text/javascript">
     const WIDTH = 1000;
     const HEIGHT = 700;
     const SNACK_WIDTH = 20;
     const SNACK_HEIGHT = 20;
     //移动时间间隔
     const TIME_MOVE = 300;
     //食物刷新时间
     const TIME_FOOD = 5000;
     //食物总量
     const TOTAL_FOOD = 200; 
    //石头刷新时间
     const TIME_STONE = 8000;
     //石头总量
     const TOTAL_STONE = 300; 
    
     var switchStatus = 0;
     var changeMove = "right";
     var currentMove = "right";
     //所有被用的位置
     var points = new Array();
     var snacks = new Array();
     var foods = new Array();
     var stones = new Array();
     var moveing = false;
     var timeMoveId, timeFoodId, timeStoneId;
     
     window.onload = function () {
         createGround();
     };
     
     //捕获按的哪个键
     function keyDown(event) {
         if (event.keyCode == "87") {
             //按下W键
             changeMove = "up";
         } else if (event.keyCode == "68") {
             //按下D键
             changeMove = "right";
         } else if (event.keyCode == "83") {
             //按下S键
             changeMove = "down";
         } else if (event.keyCode == "65") {
             //按下A键
             changeMove = "left";
         }
     }
 
    function handlePoints(x, y, type) {
         if (0 == type) {
             points.push(x+y*WIDTH);
         } else {
             var index = points.indexOf(x+y*WIDTH);
             if (index != -1) {
                 points.splice(index, 1);
             }
         }
     }
     
     //贪吃蛇
     function snack(x, y) {
         this.x = x;
         this.y = y;
     }
     
     //食物
     function food(x, y) {
         this.x = x;
         this.y = y;
     }
     
     //石头
     function stone(x, y) {
         this.x = x;
         this.y = y;
     }
     
     //开关操作
     function clickSwitch() {
         if (switchStatus == 0 || switchStatus == 2) {
             document.getElementById("switch").value = "暂停";
             if (switchStatus == 0) {
                 //开始
                 play();
             }
             switchStatus = 1;
         } else if (switchStatus == 1) {
             document.getElementById("switch").value = "继续";
             switchStatus = 2;
         }
     }
     
     //碰撞判定并操作
     function judge(x, y) {
         /*** 判断是否撞上边界  ***/
         if (x < 0 || x >= WIDTH || y < 0 || y >= HEIGHT) {
             end();
             return;
         } 
        
         var i;
         /*** 判断是否撞上自己  ***/
         for (i = 1; i < snacks.length; i++) {
             if (snacks[0].x == snacks[i].x && snacks[0].y == snacks[i].y) {
                 end();
                 return;
             }
         }
         
         /*** 判断是否撞上石头  ***/
         for (i = 0; i < stones.length; i++) {
             if (snacks[0].x == stones[i].x && snacks[0].y == stones[i].y) {
                 end();
                 return;
             }
         }
         
         /*** 判断是否撞上食物  ***/
          var flag = false;
         for (i = 0; i < foods.length; i++) {
             if (x == foods[i].x && y == foods[i].y) {
                 flag = true;
                 foods.splice(i, 1);
             }
         } 
        var newSnack = new snack(x, y);
         snacks.unshift(newSnack);
         if (!flag) {
             var p = snacks.pop();
             handlePoints(p.x, p.y, 1);
         }
         document.getElementById("content").value = "x:"+snacks[0].x+" y:"+snacks[0].y+" length:"+snacks.length;
         
         refresh();
     }
     
     //移动贪吃蛇
     function move() {
         if(moveing == false && switchStatus == 1) {
             moveing = true;
             if ((currentMove != "right" && changeMove == "left") || (currentMove == "left" && changeMove == "right")) {
                 currentMove = "left";
                 judge(snacks[0].x-SNACK_WIDTH, snacks[0].y);
             } else if ((currentMove != "down" && changeMove == "up") || (currentMove == "up" && changeMove == "down")) {
                 currentMove = "up";
                 judge(snacks[0].x, snacks[0].y-SNACK_HEIGHT);
             } else if ((currentMove != "left" && changeMove == "right")  || (currentMove == "right" && changeMove == "left")) {
                 currentMove = "right";
                 judge(snacks[0].x+SNACK_WIDTH, snacks[0].y);
             } else if ((currentMove != "up" && changeMove == "down") || (currentMove == "down" && changeMove == "up")){
                 currentMove = "down";
                 judge(snacks[0].x, snacks[0].y+SNACK_HEIGHT);
             } 
            changMove = currentMove;
         }
         moveing = false;
     }
     
     //创建地图
     function createGround() {
         var canvas = document.getElementById("canvas");
         var draw = canvas.getContext('2d');
         //清除原图形
         draw.clearRect(0, 0, WIDTH, HEIGHT);
         draw.strokeStyle = "red";
         draw.strokeRect(0, 0, WIDTH, HEIGHT);
     }
     
     //创建食物 
    function createFood() {
         if (foods.length < TOTAL_FOOD) {
             var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;
             var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;
             if (points.indexOf(x+y*WIDTH) == -1) {
                 var newFood = new food(x, y);
                 //alert(newFood.x + "****" + newFood.y);
                 var canvas = document.getElementById("canvas");
                 var draw = canvas.getContext('2d');
                 draw.fillStyle = "green";
                 draw.fillRect(x, y, SNACK_WIDTH, SNACK_HEIGHT);
                 foods.push(newFood);
                 handlePoints(x, y, 0);
             }
         }
     }
     
     //创建石头
     function createStone() {
         if (stones.length < TOTAL_STONE) {
             var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;
             var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;
             if (points.indexOf(x+y*WIDTH) == -1) {
                 var newStone = new stone(x, y);
                 var canvas = document.getElementById("canvas");
                 var draw = canvas.getContext('2d');
                 draw.fillStyle = "#663300";
                 draw.beginPath();   
                 draw.arc(x+SNACK_WIDTH*0.5, y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     
                 draw.closePath();                        
                 draw.fill();
                 stones.push(newStone);
                 handlePoints(x, y, 0);
             }
         }
     }
     
     //刷新场景
     function refresh() {
         var canvas = document.getElementById("canvas");
         var draw = canvas.getContext('2d');
         //清除原图形
         draw.clearRect(1, 1, WIDTH-2, HEIGHT-2);
         
         /*** 边界  ***/
         draw.strokeStyle = "red";
         draw.strokeRect(0, 0, WIDTH, HEIGHT);
         
         var i;
         /*** 食物   ***/
         draw.fillStyle = "green";
         for (i = 0; i < foods.length; i++) {
             draw.fillRect(foods[i].x, foods[i].y, SNACK_WIDTH, SNACK_HEIGHT);
         }
         
         /*** 石头  ***/
         draw.fillStyle = "#663300";
         for (i = 0; i < stones.length; i++) {
             draw.beginPath();   
             draw.arc(stones[i].x+SNACK_WIDTH*0.5, stones[i].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     
             draw.closePath();                        
             draw.fill();
         }
         
         /***  贪吃蛇    ***/
         draw.fillStyle = "blue";                   
         draw.beginPath();   
         //圆心x坐标|圆心y坐标|半径|始|PI为圆周率，Math.PI*2为画圆|true为时针方向：逆时针，0为顺时针
         draw.arc(snacks[0].x+SNACK_WIDTH*0.5, snacks[0].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     
         draw.closePath();                        
         draw.fill(); 
        for (i = 1; i < snacks.length; i++) {
             draw.fillRect(snacks[i].x, snacks[i].y, SNACK_WIDTH, SNACK_HEIGHT);
         }
     }
 
    //游戏开始
     function play() {
         createGround();
         
         for (var i = 2; i > 0; i--) {
             var newSnack = new snack(SNACK_WIDTH*i, SNACK_HEIGHT);
             snacks.push(newSnack);
             handlePoints(newSnack.x, newSnack.y, 0);
         }
         refresh();
         
         document.onkeydown = keyDown;
         timeMoveId = setInterval(move, TIME_MOVE); 
        timeFoodId = setInterval(createFood, TIME_FOOD); 
        timeStoneId = setInterval(createStone, TIME_STONE); 
    }
     
     //游戏结束
     function end() {
         clearInterval(timeMoveId);  
         clearInterval(timeFoodId);  
         clearInterval(timeStoneId);  
         switchStatus = 0;
         changeMove = "right";
         currentMove = "right";
         points.length = 0;
         snacks.length = 0;
         foods.length = 0;
         stones.length = 0;
         moveing = false;
         document.getElementById("switch").value = "开始";
         document.getElementById("content").value = "游戏结束";
         alert("游戏结束");
     }
     
 </script>
 
</html>
喜欢白开水
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML小游戏4 —— 简易版英雄联盟（附完整源码）
前端好玩的小案例、游戏、工具
10-31 6万+
本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个本节示例将会实现如下所示的简易版英雄联盟小游戏。效果：源码也可在文末进行获取。
html小游戏--纯页面html小游戏贪吃蛇（基础版）
nanZhaiXiaoLang的博客
02-24 1万+
直接复制到一个页面就行了 代码如下： <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta charset="UTF-8"> <meta name="keywords" content="贪吃蛇"> <meta name="Description" content="这是一个初学者用来学习的小游戏"> <style type="text/cs
HTML实现简单的贪吃蛇小游戏（附完整源码）
热门推荐
m0_56417836的博客
07-04 2万+
项目简介： 贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！项目核心技术： html5的canvas技术+js技术操作步骤： 游戏玩家通过操作键盘的方向键（上下左右键）来控制小蛇的方向，使小蛇吃到红色的食物，然后促使小蛇长大。并且，如果得到的分数在不断上涨，游戏的难度也会不断的上升（小蛇的移动速度会越来越快）。如果小蛇头部撞到墙壁或蛇自身体，就会判定游戏失败。......
HTML（8）基于HTML5的贪吃蛇游戏的设计与实现
最新发布
qq_52187093的博客
01-10 1499
基于HTML5的贪吃蛇游戏的设计与实现
HTML5小游戏代码大全
m0_72655835的博客
07-10 2万+
由于长度原因我将以资源方式上传，本文为例子.1.2048 2.暴打神经猫
【JavaScript】贪吃蛇小游戏
SEVLT
05-26 537
效果预览：https://sevlt.github.io/Snake/index.html Html 代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> .
JavaScript 游戏系列（一）： 贪吃蛇
Amecai的学习博客
01-26 297
JavaScript 游戏系列目录 文章目录JavaScript 游戏系列目录一、实例截图二、游戏分析三、HTML 与 CSS 文件1、入口文件2、样式文件四、游戏逻辑的实现1、创建类 一、实例截图 默认界面 游戏界面 二、游戏分析 首先，从截图里我们能够看到，游戏存在着 地图，蛇，食物 。 由此我们可以划分三个类 蛇类，食物类 与 游戏类。 每个类包含如下功能： Snake 类 ： 移动 改变移动方向 验证是否撞到自身 长大（吃到食物） Food 类 ： 定义食物位置 Game 类 ：
Javascript贪吃蛇游戏源码
10-31
JavaScript贪吃蛇游戏是一款经典的基于Web的休闲游戏，利用JavaScript编程语言实现。在这个游戏中，玩家控制一条蛇在网格中移动，通过吃掉食物来增长蛇的长度，同时避开蛇身，因为碰到自身或边界会导致游戏结束。...
JavaScript贪吃蛇游戏
02-28
JavaScript贪吃蛇游戏是一种经典的基于浏览器的互动娱乐项目，它利用了JavaScript这门脚本语言的强大功能来实现。JavaScript，简称为JS，是Web开发中不可或缺的一部分，主要用于处理网页的动态内容，用户交互，以及...
javascript开发贪吃蛇游戏
01-17
将上述逻辑整合到一起，一个完整的JavaScript贪吃蛇游戏大致如下： ```javascript // 初始化 // ... document.addEventListener('keydown', (event) => { // ... }); function gameLoop() { // ... ...
70多款html5小游戏代码案例
07-23
页面代码、图片及音频资源都有。 大部分都是直接双击可以运行的，有部分小游戏需要修改下源码。
91个HTML小游戏源码集合
12-14
该压缩包内一共包含91个html小游戏，旨在供想要开发小游戏的新手参考学习！觉得好的话记得帮转，让更多地人下载哦~
javascript贪吃蛇游戏设计与实现
10-14
在本文中，我们将深入探讨如何...通过以上步骤，我们可以构建一个基本的JavaScript贪吃蛇游戏，提供丰富的用户体验和挑战性。对于想要进一步优化游戏的开发者，还可以考虑增加游戏难度、添加音效、实现多人对战等功能。
snake:一个简单的 Javascript 贪吃蛇游戏
07-02
【snake:一个简单的 Javascript 贪吃蛇游戏】 贪吃蛇游戏是一款经典的计算机游戏，源自早期的电子游戏，现在可以通过各种编程语言实现，包括 JavaScript。在这个案例中，我们讨论的是一个使用 Great Code Club 提供...
用html，js和layui写一个简单的点击打怪小游戏
weixin_53607413的博客
12-28 1078
一个简单的打怪小游戏，点击开始游戏后，出现攻击按钮，击败怪物后可以选择继续下一关和结束游戏。继续下一个怪兽的血量会增加5点，攻击按钮会随机变色。
共226款Html5小游戏源码分享
蒙双眼看世界
08-22 1万+
【代码】共226款Html5小游戏源码分享。
【基于HTML技术的趣味“2048”小游戏】（效果+源代码）| 前端面试：使用JavaScript实现一个简单的表单验证功能。
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
08-16 1597
一款基于HTML技术的“趣味2048”小游戏！
HTML做一个贪吃蛇小游戏
ZTLJQ的博客
06-06 9970
☄️爬虫JS逆向系列专栏 -☄️python系列专栏 -
HTML5 游戏开发实战 ｜ 贪吃蛇
不断学习，不断进步，提高自己
06-29 7115
在该游戏中，玩家操纵一条贪吃的蛇在长方形场地里行走，贪吃蛇按玩家所按的方向键折行，蛇头吃到食物(豆)后，分数加10分，蛇身会变长，如果贪吃蛇碰上墙壁或者自身的话，游戏就结束了(当然也可能是减去一条生命)。贪吃蛇游戏的运行界面如上图所示。
javascript贪吃蛇游戏
08-15
贪吃蛇游戏是一种利用Javascript编写的经典游戏。在游戏中，玩家扮演一条蛇，通过键盘控制蛇的移动方向，目标是不断吃食物并使蛇的身体变长。游戏使用了常见的HTML和CSS元素来创建游戏界面，并利用Javascript控制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值