利用Canvas+js编写贪吃蛇游戏

╰+哭是因爲堅強的太久メ 2022-06-09 01:52 182阅读 0赞

我的贪吃蛇游戏是采用Canva+js脚本实现的，有设置难度选择；其实难度就是根据蛇运动的speed(速度)不一样就行了。首先界面奉上：

![这里写图片描述][SouthEast]

创建canvas和难度选择标签

<canvas id="canvas" width="450" height="450"></canvas>
    <input type="button" value="简单" class="btn-start row" onclick="btnstart(150);">
    <input type="button" value="困难" class="btn-start clw" onclick="btnstart(70);">

附上js代码：

<script> //拿到画板 行内 var canvas = document.getElementById("canvas"); //获取画板权限 var ctx = canvas.getContext("2d"); var width=15; //初始化的蛇的长度 var snakeCount = 6; //定义一条蛇 var snake = []; var foodX = 0; var foodY = 0; var toGo=3; //定义分数 var score = 0; //定义难度 var diff = 0; //定义的一个画窗格方法 function drawRect(){ for(var i=0;i<30;i++){ ctx.beginPath();//开始路径 //起点 ctx.moveTo(i*15,0); //终点 ctx.lineTo(i*15,450); //横向 ctx.moveTo(0,i*15); //纵向 ctx.lineTo(450,i*15); ctx.closePath();//结束路径 //绘制线 ctx.stroke(); //ctx.strokeStyle="#000"; 定义线的颜色 } //画蛇 for(var i=0;i<snakeCount;i++){ ctx.fillStyle="#000"; if(i==snakeCount-1)ctx.fillStyle="red"; //绘制矩形 ctx.fillRect(snake[i].x,snake[i].y,15,15); } //绘制食物 矩形 ctx.fillStyle="#66ff99"; ctx.fillRect(foodX,foodY,15,15); ctx.fill(); } //定义蛇的坐标 function start(){ //遍历蛇的长度 for(var i=0;i<snakeCount;i++){ snake[i] = {x:i*15,y:0}; } addFood(); drawRect(); } //添加食物 function addFood(){ //随机坐标 math.floor 向下取整20.99999=20 foodX = Math.floor(Math.random()*30)*15; foodY = Math.floor(Math.random()*30)*15; for(var i=0;i<snakeCount-1;i++){ if(foodX==snake[i].x&&foodY==snake[i].y){ addFood(); } } } //蛇的移动方向 function move(){ switch(toGo){ case 1:snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y});break;//向左 case 2:snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15});break;//向上 case 3:snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});break;//向右 case 4:snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15});break;//向下 } //删除第一个元素 snake.shift(); //重新绘制 ctx.clearRect(0,0,450,450); isDead(); isEat(); drawRect(); } function keyDown(e){ switch(e.keyCode){ case 37:toGo=1;break; case 38:toGo=2;break; case 39:toGo=3;break; case 40:toGo=4;break; } } function btnstart(diff){ setInterval(move,diff); //监听键盘事件 document.onkeydown = function(e){ //浏览器的兼容性 var e = e||window.event; //console.log(e.keyCode);//获取键盘的键码值 keyDown(e); } } //定义游戏的规则 function isDead(){ //判断边界 if(snake[snakeCount-1].x>435||snake[snakeCount-1].y>435|| snake[snakeCount-1].x<0||snake[snakeCount-1].y<0){ alert("你已撞墙，游戏结束!分数是:"+score); window.location.reload(); } //判断自身 遍历蛇身上所有的坐标 判断是否与尾巴重叠 for(var i=0;i<snakeCount-1;i++){ if(snake[snakeCount-1].x==snake[i].x&&snake[snakeCount-1].y==snake[i].y){ alert("你咬住自己的尾巴，游戏结束！分数是:"+score); window.location.reload(); } } } //可以吃食物 function isEat(){ if(snake[snakeCount-1].x==foodX&&snake[snakeCount-1].y==foodY){ addFood(); snakeCount++; snake.unshift({x:-15,y:-15}); score+=50;//score = score+50; } } //当页面加载完成执行这个方法 window.onload = function(){ start(); } </script>

ps.想要源码的小伙伴 请私聊我！

[SouthEast]: /images/20220609/d2ff15d22e5b46ab9712223f4c55ab0c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 C语言编写一个贪吃蛇的游戏

以下是一个简单的贪吃蛇游戏的C语言代码示例： include <stdio.h> include <stdlib.h> include <conio.

分手后的思念是犯贱/ 2024年03月17日 16:53/ 0 赞/ 47 阅读

相关贪吃蛇游戏

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

谁借莪１个温暖的怀抱￠/ 2023年10月06日 09:11/ 0 赞/ 19 阅读

相关贪吃蛇小游戏

贪吃蛇游戏是一款比较经典的休闲游戏，文章包括项目的部分源码以及运行界面的一些图片，项目也参考学习了许多大佬的文章，会在文章最后面贴出参考文章，有什么问题也请大家指正。一、

谁借莪１个温暖的怀抱￠/ 2023年01月02日 08:28/ 0 赞/ 274 阅读

相关【经典游戏贪吃蛇】一个小时使用Java语言编写贪吃蛇小游戏.（狂神说版）

文章目录前言一、创建项目二、编写图片资源Data类 1.引入statics图片资源文件 2.编写程序主启动类三、

迷南。/ 2022年10月29日 04:28/ 0 赞/ 231 阅读

相关贪吃蛇系列开篇----设计智能贪吃蛇小游戏

问题描述：贪吃蛇这个游戏已经是大家都非常熟悉的经典游戏了，我用简短的话概述一下，就是用户使用上、下、左、右四个方向键控制贪吃蛇的运动方向，保证蛇在既不撞墙，又不撞到自己身体

朴灿烈づ我的快乐病毒、/ 2022年06月16日 11:42/ 0 赞/ 289 阅读

相关利用Canvas+js编写贪吃蛇游戏

我的贪吃蛇游戏是采用Canva+js脚本实现的，有设置难度选择；其实难度就是根据蛇运动的speed(速度)不一样就行了。首先界面奉上： ![这里写图片描述][SouthEas

╰+哭是因爲堅強的太久メ/ 2022年06月09日 01:52/ 0 赞/ 183 阅读

相关小游戏：贪吃蛇

功能描述： 1.蛇初始长度为5，随着吃食物变长，速度也变快 2.速度有上限，当速度达到上限，不再增速 3.可长按方向键加速 4.吃一个食物加一分三个文件：S

淡淡的烟草味﹌/ 2022年06月03日 03:44/ 0 赞/ 362 阅读

相关 js小游戏贪吃蛇

介绍一个由本人制作的贪吃蛇小游戏。这个游戏采用了前端BootStrap框架和jQuery框架，因此移动端和电脑端都能兼容。虽然界面比较简陋，但是基本功能比较齐全，如果有bug欢

蔚落/ 2022年05月27日 07:26/ 0 赞/ 310 阅读

相关贪吃蛇小游戏总论

引言：一个月前完成了贪吃蛇小游戏，作为一个用来练手的项目，自己的确成长了不少，打算就这个项目写点东西，后来工作太忙，再加上一些原因，一直到现在才有空写下来，贪吃蛇小游戏分为总论

比眉伴天荒/ 2022年04月10日 07:18/ 0 赞/ 1099 阅读

相关 Java 贪吃蛇游戏引言

贪吃蛇小游戏是一款十分经典的小游戏，适合用于新手的练习，花了近两个月的时间，终于可以运行出比较完善的贪吃蛇了，相比于CSDN中的大神，花个几天的时间就可以做出Java版本的贪吃

悠悠/ 2022年04月04日 05:28/ 0 赞/ 227 阅读