您的位置：首页 > Web前端 > JavaScript

JS实现简单的贪吃蛇小游戏

2017-04-10 12:35 891 查看

网页布局框架搭建:

<!Doctype html>
<html>
<head>
<title>贪吃蛇小游戏</title>
<meta http-equiv="content-Type" content="text/html;charset=gbk" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="progma" content="no-cache" />
<meta name="description" content="js实现的简单贪吃蛇游戏" />
<meta name="author" content="成兮" />

<style>
canvas{border:1px solid grey;}
</style>

<script>

</script>
</head>

<body>
<canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>

JS脚本代码详解

<script>
window.onload = function(){
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext('2d');
//设置蛇移动的频率
var snake_speed = 200;
var interval = window.setInterval(snake_leave,snake_speed);
//设置移动的方向0-3上下左右
var direction = 3;
//保存贪吃蛇的实际长度
var snakelen = 20;
//保存移动的路径,元素为{'x':x,'y':y}格式
var map = [];
//蛇身单元大小
var size = 8;
//食物坐标：(a*8,a*8)
var a = 0;
//贪吃蛇每次的蛇头坐标
var x = 8;
var y = 8;

//贪吃蛇移动函数
function snake_leave(){
//根据移动方向来移动
switch(direction){
case 0:y -= size;
break;
case 1:y += size;
break;
case 2:x -= size;
break;
case 3:x += size;
break;
}
//判断是否撞墙
if(x > 400 || y > 400 || x < 0 || y < 0){
alert("你撞墙死了");
window.clearInterval(interval);
}
//判断是否撞到自己
for(var i=0; i<map.length; i++){
var xx = parseInt(map[i].x);
var yy = parseInt(map[i].y);
if(xx == x && yy == y){
alert("你撞自己死了");
window.clearInterval(interval);
}
}
//每次移动一下，蛇身最后都要减去1
if(map.length > snakelen){
//把数组的第一个元素删除并返回,map中的数据为{key:value}形式
var foot = map.shift();
context.clearRect(foot['x'],foot['y'],size,size);
}
//判断是否吃到了食物
if(x == a*8 && y == a*8){
snakelen++;
snake_food();
}
//每次移动，进行蛇头的改变
map.push({'x':x,'y':y});
context.fillStyle = "#069";
context.strokeStyle = "#069";
context.fillRect(x,y,size,size);
};

//添加方向键键盘控制事件
document.onkeydown = function(event){
var code = event.keyCode;
switch(code){
case 37:if(direction != 3)  direction = 2;
break;
case 38:if(direction != 1)  direction = 0;
break;
case 39:if(direction != 2)  direction = 3;
break;
case 40:if(direction != 0)  direction = 1;
break;
}
};

//产生食物坐标的随机数来生成食物
function snake_food(){
a = Math.ceil(Math.random() * 50);
context.fillStyle = "#000";
context.strokeStyle = "#000";
context.fillRect(a*8,a*8,8,8);
};
snake_food();
};
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航