javascript小游戏贪吃蛇实现思路讲解(完整代码实现)

最新推荐文章于 2024-05-02 14:46:08 发布

难过的新手村

最新推荐文章于 2024-05-02 14:46:08 发布

阅读量1.4k

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_57259948/article/details/120476320

版权

效果流程

首先我们要操作的canvas

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
</head>

<body>
 <canvas id="canvas"></canvas>   <!-- 我们要操作的canvas -->
 <input type="button" value="开始游戏" /><!-- 开始游戏按钮 -->
<script>
//获取元素
var canvas = document.getElementById("canvas"); //找到我们要操作的canvas
var context = canvas.getContext("2d"); //规定在canvas上操作的环境为2d
var but = document.getElementsByTagName("input")[0]; //找到开始按钮
</script>

在初始化

canvas.width = 500; //定义canvas宽度
canvas.height = 500; //定义canvas高度
canvas.style.border = "5px solid #000"; //定义canvas边框
var times = 100; //默认时间200毫秒
var long = 10; //蛇身相对于步长的个数
var x = y =8;  //蛇的初始坐标
var direction = 3;  // 1 上  2 右  3 下 0  左
var size = 8;  //蛇每次移动的长度（步长）
var map  = []; //用来记录蛇每次移动的坐标 
var foodx = 0;  //食物的初始X轴坐标
var foody = 0;  //食物的初始y轴坐标
var onOff = true; 
var foodT = true;
var timer = null;

根据方向控制蛇的坐标变化，判断蛇的坐标是否超出canvas边界，判断蛇有没有碰到自己

  //根据方向控制蛇的坐标变化
    switch(direction){

        case 1: y = y - size; break; //上

最低0.47元/天解锁文章

难过的新手村

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
javascript小游戏贪吃蛇实现思路讲解(完整代码实现)

效果流程首先我们要操作的canvas <!doctype html><html><head><meta charset="utf-8"><title>贪吃蛇</title></head><body> <canvas id="canvas"></canvas>  <input type="button"
复制链接

扫一扫