h5制作贪吃蛇
html
规划一个游戏界面
<div class="mian">
<canvas id='huaban'></canvas>
</div>
css
html,
body {
padding: 0;
margin: 0;
}
body {
background: black;
}
.mian {
margin: auto;
width: 800px;
height: 500px;
margin-top: 30px;
background: rgba(255, 251, 251, 0.089);
}
js
var s_X = 0, s_Y = 0;//存储鼠标实时的位置
var c_w = window.innerWidth / 2 - 400, c_h = 30;//初始窗口的大小
var life = true;//蛇的生命
var body_arr = [],//身体继承存储数组
body_jc = [],
food_color = ['#1db0b8', '#de8100', '#3b200c', '#ff534d', '#edd0be'], //食物随机颜色存储的数组
_bg,//背景的对象
sk,//蛇的对象
speed = 1000 / 120,//定时器的速度
food_number = 1,//单位大小内食物的个数
zanti = 1,//暂停
time = 0;//整体的时间线
var food = [
[[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
[[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
[[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
[[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
[[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
[[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
[[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
[[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
[[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
[[], [], [], [], [], [], [], [], [], [], [], [], [], [],