前言
最近接触的JavaScript的代码比较多，而且发现自己也越来越喜欢这门语言，闲来无事就从网上敲JavaScript的小小实例，用自己学到的语言给自己带来快乐！
内容
贪吃蛇游戏整体思路：游戏刚开始的设定初始蛇位置，通过键盘的上，下，左，右事件，控制蛇移动的方面；再设置食物，将两条蛇坐标靠近组合成一条蛇
一：放置画布，设定样式：
<!doctype html>
<html>
<style>
#canvas {
display: block;
margin: 100px auto 0;
border: 1px solid #d3d3d3;
}
</style>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>二：在画布随机放置一个”蛇”
<script>
//绘制贪吃蛇
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); //绘制了一个2d绘图空间，画笔
var r = [{
x: 10,
y: 9
}, {
x: 10,
y: 8
}]; //r数组代表贪吃蛇的坐标
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
var co = 40; //默认向下走
var e = null;
//贪吃蛇的绘制
for(var i = 0; i < r.length; i++) {
ctx.fillRect(r[i].x * 10, r[i].y * 10, 10, 10);
}
</script>三：通过键盘的上下移动，进行”蛇”的移动
(在这里进行科普一下，左上又下分别对应ascii码是37，38，39，40。事件移动有规则：当你按下向下的键盘，下一次就不能按向上的方向，移动方向连续的两次不能是相反的)
function onframe() {
//将数组中最后一个元素放到首部
r.unshift(r.pop());
switch(co) {
case 37: //向左
r[0].x = r[1].x - 1;
r[0].y = r[1].y;
break;
case 38:
r[0].x = r[1].x;
r[0].y = r[1].y - 1;
break;
case 39:
r[0].x = r[1].x + 1;
r[0].y = r[1].y;
break;
case 40:
r[0].x = r[1].x;
r[0].y = r[1].y + 1;
break;
}
ctx.clearRect(0, 0, 500, 500);
//贪吃蛇的绘制
for(var i = 0; i < r.length; i++) {
ctx.fillRect(r[i].x * 10, r[i].y * 10, 10, 10);
}
}
//加入键盘事件用键盘来控制蛇的前进方向
document.onkeyup = function(event) {
if(event.keyCode >= 37 && event.keyCode <= 40 && Math.abs(event.keyCode - co) != 2) {
co = event.keyCode;
}
}
setInterval(onframe, 100);四：随机设置”食物”，并且将”食物”吞并
var e=null;// 食物的坐标
if(e) {
//食物添加
if(co == 40 && r[0].x == e.x && r[0].y + 1 == e.y ||
co == 39 && r[0].x + 1 == e.x && r[0].y == e.y ||
co == 38 && r[0].x == e.x && r[0].y - 1 == e.y ||
co == 37 && r[0].x - 1 == e.x && r[0].y == e.y) {
r.unshift(e);//向前添加元素
e = null;
}
}
//绘制食物
if(e == null) {
//给坐标值
e = {
x: (Math.random() * 50 >>> 0),
y: (Math.random() * 50 >>> 0)
};
}
if(e) {
ctx.fillRect(e.x * 10, e.y * 10, 10, 10);
}五：最终显示的游戏界面：
总结
纯粹娱乐，代码上传到（这里写链接内容），可以自行下载，希望大家喜欢！