贪吃蛇简化

最新推荐文章于 2020-07-27 18:06:40 发布
最新推荐文章于 2020-07-27 18:06:40 发布
阅读量276 收藏
点赞数
分类专栏： canvas 文章标签： canvas 碰撞
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivian_shuang/article/details/52159548
版权

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

canvas {

box-shadow: 2px 2px 10px deeppink;

}

</style>

</head>


<body>

<canvas id="canvas" width="600" height="600"></canvas>

<script type="text/javascript">

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");


var snake = {

x: -40,

y: 0,

w: 40,

h: 40,

headColor: "deeppink",

bodyColor:"palegreen",

top: false,

bottom: false,

left: false,

right: true,

bodys:[],

bool:true

}

snake.draw = function() {

ctx.beginPath();

ctx.fillStyle = this.headColor;

ctx.fillRect(this.x, this.y, this.w, this.h);

}

snake.move = function() {

if(this.left) {

this.x -= this.w;

} else if(this.right) {

this.x += this.w;

} else if(this.top) {

this.y -= this.h;

} else if(this.bottom) {

this.y += this.h;

}

snake.draw();

snake.drawBody();

snake.savePosition();

}

snake.savePosition = function(){

this.bodys.push({

x:this.x,

y:this.y,

w:this.w,

h:this.h

});

if (this.bodys.length > 4 && this.bool) {

// arr.shift()删除数组第一个元素

this.bodys.shift();

}else{

this.bool = true;

}

}

snake.drawBody = function(){

for (var i = 0; i < this.bodys.length; i++) {

ctx.beginPath();

ctx.fillStyle = this.bodyColor;

ctx.fillRect(this.bodys[i].x,this.bodys[i].y,this.bodys[i].w,this.bodys[i].h);

}

}

// snake.draw();

function rand(min,max){

return Math.floor(Math.random() * (max - min + 1) + min);

}

var food = {

x: 0,

y: 0,

w: 40,

h: 40,

color: "#3CFFFE"

}

food.draw = function(){

ctx.fillStyle = this.color;

ctx.fillRect(this.x,this.y,this.w,this.h);

}

food.setPosition = function(){

while (true){

var x = rand(0,(canvas.width - this.w) / this.w) * this.w;

var y = rand(0,(canvas.height - this.w) / this.w) * this.w;

// 遍历身体上的点，如果当前随机生成的点与蛇重合的话，跳出for循环，则当前的i不等于snake.bodys.length，进行下一次while循环

for (var i = 0; i < snake.bodys.length; i++) {

if (x == snake.bodys[i].x && y == snake.bodys[i].y) {

break;

}

}

// 之前的遍历如果没有找到重合的点，跳出white循环

if (i == snake.bodys.length) {

this.x = x;

this.y = y;

break;

}

}

}

food.setPosition();

food.draw();

function checkP(obj1,obj2){

if (Math.abs(obj1.x + obj1.w / 2 - (obj2.x + obj2.w / 2)) < obj1.w / 2 + obj2.w / 2 && Math.abs(obj1.y + obj1.h / 2 - (obj2.y + obj2.h / 2)) < obj1.h / 2 + obj2.h / 2) {

return true;

}else{

return false;

}

}

setInterval(function() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

food.draw();

snake.move();

if (checkP(food,snake)) {

food.setPosition();

food.draw();

snake.bool = false;

}

}, 500);

document.onkeydown = function(e) {

var ev = e || window.event;

switch(ev.keyCode) {

case 37:

// left

if(!snake.right) {

snake.left = true;

snake.right = false;

snake.top = false;

snake.bottom = false;

}

break;

case 38:

// top

if(!snake.bottom) {

snake.left = false;

snake.right = false;

snake.top = true;

snake.bottom = false;

}

break;

case 39:

// right

if(!snake.left) {

snake.left = false;

snake.right = true;

snake.top = false;

snake.bottom = false;

}

break;

case 40:

// bottom

if(!snake.top) {

snake.left = false;

snake.right = false;

snake.top = false;

snake.bottom = true;

}

break;

}

}

</script>

</body>


</html>

Vivian_shuang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
打飞机html + js + canvas
Vivian_shuang的博客
08-09 2670
loading.js文件 // 三个参数： // 1. 所有要加载的图片对象 // 2.加载进度函数 // 3.加载完成函数 function loading(imgsObj, handleObj) { // 遍历对象，得到对象中属性的个数，即有多少张图片 var count = 0; var currentIndex = 0; for(prop in imgsObj)
贪吃蛇html游戏代码
热门推荐
wjh091225的博客
03-23 1万+
贪吃蛇html游戏代码 拿来即用! 代码如下 <!DOCTYPE html> html> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> #map { width: 400px; height: 400px;...................
C语言贪吃蛇简化版
hellowgame的博客
10-04 349
C语言 贪吃蛇简化版 前一阵子做贪吃蛇，看了很多教程，有好多都是用指针的。我指针用的不熟练，就做了一个简单的，代码量很少，不过没什么bug，当然内容也很简单，只用了一些基础的结构体。我的贪吃蛇参考了很多博客，希望和我一样的初学者能从中得到一些收获吧。 /*以下为思路 1.初始化地图，蛇，食物 2，蛇的移动（头，身体，尾巴） 3.按键输入与接收 4.食物的再次产生，打印蛇 5.判断死亡 */ #in...
贪吃蛇简化版
weixin_48727085的博客
07-27 101
<!DOCTYPE HTML> <html lang = "en"> <head> <meta charset = "UTF-8"/> <style> div{ width:50px; height:30px; background-color: red; position:absolute; } </style> </head> <body> &
贪吃蛇游戏简化版
weixin_43960134的博客
12-06 307
贪吃蛇游戏简化版基本思路具体实现建立基本框架地图与蛇身的初始化键盘读入与方向确定食物生成判断是否撞墙蛇的移动结束游戏完整代码 最近使用 EasyX 图形库在写贪吃蛇，由于是第一次使用加之时间太紧，成品极为简陋，望各路大神轻喷。 基本思路 贪吃蛇问题作为计算机编程的热门问题，大部分人应该都有所接触。基本的思路其实就在于模块化蛇的各种执行步骤，还有就是注意边界情况的判断。由于在很多资料中都有详细说明，...
简化版贪吃蛇.zip
07-24
本人改进的一个贪吃蛇的源码，使用的是C语言编程，已经全部调通，可以在里面加入自己的功能，学习本项目能够让你在C语言编程技术上有一个提升，促进自己的学习积极性。提高自己的编程能力。
基于Java的贪吃蛇桌面游戏简化版与升级版设计源码
最新发布
04-11
本源码提供了一个基于Java编写的贪吃蛇桌面游戏，包括简化版和升级版。项目包含50个文件，其中包括24个JPG图片、4个Java类文件、4个Java源文件、3个WAV音频文件、2个Markdown文档、2个Classpath配置文件、2个Project...
C++控制台循环链表实现贪吃蛇
12-20
本文实例为大家分享了C++控制台循环链表实现贪吃蛇的具体代码，供大家参考，具体内容如下 -stdafx.h 为了简化程序定义一些宏和全局变量 #ifndef __STDAFX_H__ #define __STDAFX_H__ // ============上下左右=======...
C++ vector容器实现贪吃蛇小游戏
12-20
使用vector容器实现贪吃蛇简化了很多繁琐操作，且相比之前我的代码已经做到了尽量的简洁 技术环节： 编译环境：windows VS2019 需求： 控制贪吃蛇吃食物，吃到一个食物蛇身变长一节，得分增加，撞墙或撞自己则游戏...
VC一个简化的贪吃蛇程序（MFC）
09-10
这是个把网上的贪吃蛇简化的程序，把基于WIN32改为了基于MFC
canvas视频处理
Vivian_shuang的博客
08-09 2538
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> video src="videoviewdemo.mp4" autoplay="" id="video" loop="">你的浏览器不支持视频video> canvas id="canvas" width=
canvas图像叠加
Vivian_shuang的博客
08-09 1536
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> canvas id="canvas" width="500" height="500">canvas> script type="text/javascript"> var canvas = document.getElem
飞翔的小鸟
Vivian_shuang的博客
08-09 1397
DOCTYPE html> html> head>     title>Flappy Birdtitle>     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     script type="text/javascript">         // Edit by xingoo    
canvas碰撞检测4
Vivian_shuang的博客
08-09 650
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> *{ margin: 0; padding: 0; } style> head> body> canvas id="canvas" width="500" height="500">canva
canvas小例子-刮刮乐
Vivian_shuang的博客
08-08 603
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> *{ margin: 0; padding: 0; } img{ position: absolute; top: 0; left: 0; } canvas{ position: ab
滑杆控制缩放图片
Vivian_shuang的博客
08-09 552
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> canvas id="canvas" width="750" height="420">canvas>br> input type="range" name="" id="slider" min="0.5" max="3.
放大镜圆形
Vivian_shuang的博客
08-08 545
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> *{ margin: 0; padding: 0; } img{ position: absolute; top: 0; left: 0; width: 750px; } canvas
canvas八卦图1
Vivian_shuang的博客
08-08 478
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> canvas id="canvas" width="500" height="500">canvas> script type="text/javascript"> var canvas = document
贪吃蛇pygame资源包
07-24
### 回答1： 贪吃蛇（pygame）资源包是一个供开发者使用的Python库，用于创建和定制贪吃蛇游戏。该资源包提供了许多有用的函数和类，使开发贪吃蛇游戏变得更加简单和高效。 首先，pygame资源包提供了贪吃蛇游戏所需的基本功能，如创建游戏窗口、处理用户输入和渲染游戏元素等。开发者可以使用pygame资源包中的函数轻松地实现这些功能，而无需从头开始编写与游戏逻辑无关的底层代码。 其次，pygame资源包还提供了一些有助于贪吃蛇游戏设计和美化的功能。例如，开发者可以使用pygame资源包中的精灵类创建具有不同外观和动画效果的游戏元素，如贪吃蛇头部、身体和食物等。开发者还可以使用pygame资源包中的图像和音频加载功能，为游戏添加更多的视觉和听觉效果。 此外，pygame资源包还支持碰撞检测、计分系统和游戏状态管理等高级功能。开发者可以使用pygame资源包提供的功能轻松处理贪吃蛇与食物、边界或自身碰撞的情况，并实现分数计算和游戏胜负的判断。 最后，pygame资源包还有一个庞大的开源社区，提供了大量的示例代码、教程和资源，供开发者学习和参考。开发者可以从社区中获取帮助和支持，加速贪吃蛇游戏的开发过程。 总而言之，贪吃蛇（pygame）资源包是一个强大而且易于使用的工具，可以帮助开发者快速、高效地创建和定制贪吃蛇游戏。无论是初学者还是有经验的开发者，都可以从pygame资源包中受益，并开发出独一无二的贪吃蛇游戏作品。 ### 回答2： 贪吃蛇Pygame资源包是一个专门为贪吃蛇游戏开发者设计的资源包。Pygame是一个基于Python的游戏开发库，它提供了丰富的功能和工具，使开发者能够轻松创建自己的游戏。 贪吃蛇Pygame资源包包含了一系列用于贪吃蛇游戏开发的资源，如图形、声音和其他游戏元素。这些资源可以帮助开发者更快地搭建游戏界面，增强用户的游戏体验。 对于游戏开发者来说，使用贪吃蛇Pygame资源包有以下几个优势： 1. 节省开发时间：资源包提供了贪吃蛇游戏所需的各种素材，开发者不再需要从头开始设计和绘制这些素材，大大缩短了开发周期。 2. 提高游戏质量：资源包中的素材经过精心设计和制作，游戏开发者可以直接使用这些专业的素材，提高游戏的质量和效果。 3. 简化代码编写：资源包提供了一些已经封装好的函数和类，开发者可以直接调用这些函数和类来实现贪吃蛇游戏的核心逻辑，简化了代码编写的过程。 4. 提供灵活性：贪吃蛇Pygame资源包可以根据开发者的需求进行定制和扩展，开发者可以根据自己的想法和创意进行修改和优化。 总而言之，贪吃蛇Pygame资源包是一个非常有价值的工具，它可以帮助开发者更快地开发出高质量的贪吃蛇游戏，并且提供了一些方便的功能和工具，使开发过程更加简单和高效。无论是初学者还是有经验的开发者都可以受益于这个资源包。 ### 回答3： 贪吃蛇pygame资源包是一种用于开发贪吃蛇游戏的资源集合。Pygame是一个基于Python的开源游戏开发库，它提供了丰富的游戏开发功能和工具，方便开发人员快速搭建游戏框架。 贪吃蛇pygame资源包包含了所有需要的图像、声音和其他素材，使开发者可以轻松创建和设计各种元素，如蛇身、食物、背景等。这些资源包通常具有不同的图像尺寸和风格，以满足开发者的不同需求。开发者可以通过加载这些资源，将其应用到游戏中，提升贪吃蛇游戏的可视化效果。 此外，贪吃蛇pygame资源包还可能包含一些预设的游戏逻辑和功能代码，如蛇的移动、食物生成、碰撞检测等，这些代码可以作为开发者的参考，帮助他们更好地理解和实现贪吃蛇的核心机制。 通过使用贪吃蛇pygame资源包，开发者可以大大减少游戏开发的工作量，加快开发速度。同时，资源包的使用也使游戏的视觉效果更加丰富和精美，增强了游戏的吸引力。开发者可以根据自己的需求自由选择和组合资源，打造自己理想中的贪吃蛇游戏。 总之，贪吃蛇pygame资源包是一种提供贪吃蛇游戏开发所需素材和代码的资源集合，它可以帮助开发者简化开发过程，提升游戏质量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值