JavaScript 贪吃蛇
自己用js写的贪吃蛇小游戏
一、制作游戏界面
1 定义游戏中需要的变量
var rowNum = 25;
var colNum = 25;
var arr = [];
var snakeArry =[];
var speedTime = 100;
var moveTimer = null;
var X = 2;
var Y = 0;
var score = 0;
var dec = 'right';
2 定义两个变量控制界面的布局
将建好的小方块放入arr数组中
function makePenal(){
for(i=0; i<rowNum; i++){
var rowDiv = document.createElement('div');
wrap.appendChild(rowDiv);
var arrArry = [];
for(j=0; j<colNum; j++){
var colDiv = document.createElement('div');
colDiv.className = 'col';
rowDiv.appendChild(colDiv);
arrArry.push(colDiv);
}
arr.push(arrArry);
}
}
3 初始化蛇身
将arr数组中的前三个放入snakeArray数组中 完成蛇身初始化
function snakeBody(){
for(i=0; i<3; i++){
arr[0][i].className = 'col col1';
snakeArry.push(arr[0][i]);
}
}
二、蛇身开始移动
1 添加计时器
添加计时器 通过改变 蛇头方向 改变蛇移动的方向
moveTimer = setInterval(function(){
switch(dec){
case 'right':
X ++;
break;
case 'left':
X --;
break;
case 'up':
Y --;
break;
case 'down':
Y ++;
break;
}
2 键盘事件
键盘监听事件 根据键盘输入的键值 改变蛇移动的方向 当蛇在移动时 按下相反方向的键时 不执行当前操作 还有添加一个开关 当蛇身完全移动一个方格后才可以执行操作 否则不执行
var aa = true;
document.onkeydown = function(){
var ev = window.event || event;
if(!aa){
return;
}
if(ev.keyCode == 37 && dec == 'right'){
return;
}
if(ev.keyCode == 38 && dec == 'down'){
return;
}
if(ev.keyCode == 39 && dec == 'left'){
return;
}
if(ev.keyCode == 40 && dec == 'up'){
return;
}
switch (ev.keyCode){
case 37:
dec = 'left';
break;
case 38:
dec = 'up';
break;
case 39:
dec = 'right';
break;
case 40:
dec = 'down';
break;
}
aa = false;
setTimeout(function(){
aa = true;
},speedTime);
}
3 生成食物
先产生两个随机数 foodX foodY 来确定食物在界面上的位置 确定后改变它的样式 特别注意食物的位置不能够和蛇身重复
function rand(max){
var ran = Math.floor(Math.random() * max);
return ran;
}
function snakeFood(){
foodX = rand(colNum);
foodY = rand(rowNum);
if(arr[foodY][foodX].className == 'col col1'){
snakeFood();
}else{
arr[foodY][foodX].className = 'col food';
}
}
三、蛇吃食物
1 蛇碰到四面墙壁
当蛇头碰到界面边界是 结束游戏 注意 要清空计时器
if(X < 0 || X >= colNum || Y<0 || Y >= rowNum){
clearInterval(moveTimer);
alert('game over');
return;
}
2 蛇头碰到蛇身
在蛇移动过程中 蛇头是不能碰到自己身体的 否则结束游戏 并清空计时器
for(i=0; i<snakeArry.length; i++){
if(snakeArry[i] ==arr[Y][X]){
clearInterval(moveTimer);
alert('game over');
return;
}
}
3 蛇碰到食物
当蛇吃到食物后 积分器 加 1 , 当前位置的方格样式给变为蛇身的样式 并放入到蛇身的数组中,当蛇移动是没有食物时, 将它当前的方格加入蛇身 ,并删除数组中的第0个元素(即蛇尾)
if(X == foodX && Y == foodY){
arr[foodY][foodX].className = 'col col1';
snakeArry.push(arr[foodY][foodX]);
score ++;
scoreDiv.innerHTML = "得分: " + score;
snakeFood();
}else{
snakeArry[0].className = 'col';
snakeArry.shift();
arr[Y][X].className = 'col col1';
snakeArry.push(arr[Y][X]);
}
},speedTime);
}
效果图:
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style type="text/css">
.wrap{border: 1px solid black; margin: auto; font-size: 0;}
.scoring {width: 100%; border-bottom: 1px solid black; font-size: 2rem; text-align: right;}
.scoring div{padding: 10px; }
.col {width: 30px; height: 30px; display: inline-block; border: 1px solid blanchedalmond; background: wheat;}
.col1 {background: black;}
.food {background: brown;}
</style>
</head>
<body>
<div class="wrap">
<div class="scoring">
<div>得分: 0</div>
</div>
</div>
</body>
<script type="text/javascript">
var rowNum = 25;
var colNum = 25;
var arr = [];
var snakeArry =[];
var speedTime = 100;
var moveTimer = null;
var X = 2;
var Y = 0;
var score = 0;
var dec = 'right';
var wrap = document.querySelector('.wrap');
wrap.style.width = colNum * (30 + 2) + 'px';
var scoreDiv = document.querySelector('.scoring div');
function makePenal(){
for(i=0; i<rowNum; i++){
var rowDiv = document.createElement('div');
wrap.appendChild(rowDiv);
var arrArry = [];
for(j=0; j<colNum; j++){
var colDiv = document.createElement('div');
colDiv.className = 'col';
rowDiv.appendChild(colDiv);
arrArry.push(colDiv);
}
arr.push(arrArry);
}
}
makePenal();
function snakeBody(){
for(i=0; i<3; i++){
arr[0][i].className = 'col col1';
snakeArry.push(arr[0][i]);
}
}
snakeBody();
function snakeMove(){
moveTimer = setInterval(function(){
switch(dec){
case 'right':
X ++;
break;
case 'left':
X --;
break;
case 'up':
Y --;
break;
case 'down':
Y ++;
break;
}
if(X < 0 || X >= colNum || Y<0 || Y >= rowNum){
clearInterval(moveTimer);
alert('game over');
return;
}
for(i=0; i<snakeArry.length; i++){
if(snakeArry[i] ==arr[Y][X]){
clearInterval(moveTimer);
alert('game over');
return;
}
}
if(X == foodX && Y == foodY){
arr[foodY][foodX].className = 'col col1';
snakeArry.push(arr[foodY][foodX]);
score ++;
scoreDiv.innerHTML = "得分: " + score;
snakeFood();
}else{
snakeArry[0].className = 'col';
snakeArry.shift();
arr[Y][X].className = 'col col1';
snakeArry.push(arr[Y][X]);
}
},speedTime);
}
snakeMove();
var aa = true;
document.onkeydown = function(){
var ev = window.event || event;
if(!aa){
return;
}
if(ev.keyCode == 37 && dec == 'right'){
return;
}
if(ev.keyCode == 38 && dec == 'down'){
return;
}
if(ev.keyCode == 39 && dec == 'left'){
return;
}
if(ev.keyCode == 40 && dec == 'up'){
return;
}
switch (ev.keyCode){
case 37:
dec = 'left';
break;
case 38:
dec = 'up';
break;
case 39:
dec = 'right';
break;
case 40:
dec = 'down';
break;
}
aa = false;
setTimeout(function(){
aa = true;
},speedTime);
}
function rand(max){
var ran = Math.floor(Math.random() * max);
return ran;
}
function snakeFood(){
foodX = rand(colNum);
foodY = rand(rowNum);
if(arr[foodY][foodX].className == 'col col1'){
snakeFood();
}else{
arr[foodY][foodX].className = 'col food';
}
}
snakeFood();
</script>
</html>