本文实例为大家分享了JS实现简易贪吃蛇的具体代码，供大家参考，具体内容如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
|
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#body{
width: 900px;/*长宽最好是obj的倍数*/
height: 600px;
border-width: 10px;
border-style: solid;
border-color: blue;
line-height:600px;/*文本垂直居中*/
text-align: center;/*文本水平居中*/
position: relative;/*相对定位*/
left: 0px;
top: 0px;
}
#obj{
width: 30px;
height: 30px;
background-color: red;
position: absolute;/*绝对定位*/
left: 0px;
top: 0px;
z-index: 1;/*头部在上层显示*/
}
div{
text-align: center;
line-height:30px;
}
</style>
</head>
<body id='body'>
<!--内容-->
按awsd移动
<div id='obj'></div>
<select id='speed' onclick="setspeed(this)">
<option value="100">快速</option>
<option value="500">中速</option>
<option value="1000" selected>慢速</option>
</select>
| <button onclick="lenbodyadd()">身体+1</button>
| <button onclick="stopspeed()">暂停</button>
<div class="div"></div>
</body>
</html>
<script>
var val={key:"d"};//默认向右移动
var key = document.getElementById("body");
key.onkeydown =f; //注册keydown事件处理函数
var divnum=1;//身体每节编号
var lenbody=5;//默认身体长度
var speed=1000;//默认速度
var obj=document.getElementById('obj');
var myWidth=parseInt(getComputedStyle(obj,null).getPropertyValue('width'));
var myHeight=parseInt(getComputedStyle(obj,null).getPropertyValue('height'));
var clientH= document.body.clientHeight;//获取body高
var clientW= document.body.clientWidth;//获取body宽
var foodLeft=0;//食物x坐标
var foodTop=0;//食物y坐标
function f (va) {
var e = e || window.event; //标准化事件处理
let s = '';//val.type + " " + val.key; //获取键盘事件类型和按下的值
let key=val.key;
val=va;
var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));//获取精灵y坐标 parseInt(obj.style.top);
var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//获取精灵x坐标 parseInt(obj.style.left);
var movePx=myWidth;//每次移动的距离
var move=0;
if(key=='w'){
move=myTop-movePx;//每次移动10
if(move<0 || move>clientH){
return false;//不能超过边界
}
obj.style.top=move+'px';
s='上';
}
if(key=='s'){
move=myTop+movePx;
if(move<0 || move>clientH-myHeight){
return false;
}
obj.style.top=move+'px';
s='下';
}
if(key=='a'){
move=myLeft-movePx;
if(move<0 || move>clientW){
return false;
}
obj.style.left=move+'px';
s='左';
}
if(key=='d'){
move=myLeft+movePx;
if(move<0 || move>clientW-myWidth){
return false;
}
obj.style.left=move+'px';
s='右';
}
obj.innerText=s;//设置文本 & 清楚之前的元素
console.log(move+' top:'+myTop+' left:'+myLeft);
//移除之前的身体元素，使有头有尾
if(document.getElementsByClassName('div').length>=lenbody){
document.getElementsByClassName('div')[0].parentNode.removeChild(document.getElementsByClassName('div')[0]);
}
//div身体元素随后移动
let newMyMoveWidth=myLeft;
let newMyMoveHeight=myTop;
let div=document.createElement('div');
div.className ='div';
div.style.width = myWidth + 'px';
div.style.height = myHeight + 'px';
div.style.position = 'absolute';
div.style.left=newMyMoveWidth + 'px';
div.style.top=newMyMoveHeight + 'px';
div.style.backgroundColor='blue';
div.innerHTML=divnum;//设置文字|方便识别div顺序
obj.parentNode.appendChild(div);
console.log('newMyMoveWidth:'+newMyMoveWidth+' newMyMoveHeight:'+newMyMoveHeight);
divnum++;
ifeatfood(myLeft,myTop);
} /*f() end--*/
//生成食物
function setfood(){
foodLeft=parseInt(Math.random()*clientW);
foodTop=parseInt(Math.random()*clientH);
let div=document.createElement('div');
div.id ='food';
div.style.width = myWidth + 'px';
div.style.height = myHeight + 'px';
div.style.position = 'absolute';
div.style.left= foodLeft + 'px';
div.style.top= foodTop + 'px';
div.style.backgroundColor='pink';
div.innerHTML='吃';//设置文字|方便识别div顺序
document.body.appendChild(div);
}
setfood();
//判断吃到食物
function ifeatfood(myLeft,myTop){
//判断是否吃到食物
if(Math.abs(foodLeft-myLeft)<myWidth && Math.abs(foodTop-myTop)<myHeight){
lenbodyadd();//长度+1
//删除旧food，生成新food
document.getElementById('food').parentNode.removeChild(document.getElementById('food'));
setfood();
}
}
//吃到食物身体加1
function lenbodyadd(){
lenbody++;
}
//保持移动
var setinter=setInterval((function move(){
f(val);
}),speed);
//设置移动速度
function setspeed(obj){
speed=obj.options[obj.options.selectedIndex].value;
stopspeed();
setinter=setInterval((function move(){
f(val);
}),speed);
}
//停止移动
function stopspeed(){
clearInterval(setinter);
}
//窗口改变时跳转-防f12
window.onresize = ()=>{
console.log(window.innerWidth,window.innerHeight);
//window.location.href='https://www.baidu.com';
}
</script>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/sll9711/article/details/108147771