HTML5+CSS+JS 贪吃蛇demo
我写博客的主要目的就是温习所学的知识，自己以前写的游戏当然不能放过！
这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的，由于那个时候初学网页前端，所以这款游戏是纯原生Java Script写的，没有使用JQuery。
重新看了一遍自己写的代码，大一的我真的太年轻了，一个注释都没有写，幸好这款游戏的逻辑不难，还能看得懂，补了一些注释，对一些细节加深了理解。（以后要逼着自己写注释才行呀！）
从大一寒假写C语言的俄罗斯方块开始，我就下定决心学一门编程语言，就用这门编程语言写一个游戏，这个目标也基本上实现了，陆陆续续写了C++推箱子、Python飞机大战，最近正在写Java打砖块，以后会慢慢跟大家分享的。
废话不多说，上代码！
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>贪吃蛇</title>
<script type="text/javascript">
var size = 20; //网格大小
var rows = 30; //网格行数
var cols = 40; //网格列数
var c;
var snake = []; //保存贪吃蛇的位置信息
var snake_len = 4; //贪吃蛇的长度
var foodx; //食物x坐标
var foody; //食物y坐标
var mark; //分数
var go = 3; //贪吃蛇爬行方向，左：1；上：2；右：3；下：4
var pause = true; //是否暂停
var interval; //游戏循环 function draw() {
c.clearRect(0, 0, size * cols, size * rows); c.strokeStyle = "black";
for (var i = 1; i <= rows; i++) {
c.beginPath();
c.moveTo(0, i * size);
c.lineTo(size * cols, i * size);
c.closePath();
c.stroke();
} //画横线
for (var i = 1; i <= cols; i++) {
c.beginPath();
c.moveTo(i * size, 0);
c.lineTo(i * size, size * rows);
c.closePath();
c.stroke();
} //画竖线 c.strokeStyle = "white";
c.fillStyle = "green";
for (var i = 0; i < snake_len; i++) {
c.beginPath();
c.fillRect(snake[i].x, snake[i].y, size, size);
c.moveTo(snake[i].x, snake[i].y);
c.lineTo(snake[i].x + size, snake[i].y);
c.lineTo(snake[i].x + size, snake[i].y + size);
c.lineTo(snake[i].x, snake[i].y + size);
c.closePath();
c.stroke();
} //画贪吃蛇 c.fillStyle = "yellow";
c.beginPath();
c.fillRect(foodx, foody, size, size);
c.moveTo(foodx, foody);
c.lineTo(foodx + size, foody);
c.lineTo(foodx + size, foody + size);
c.lineTo(foodx, foody + size);
c.closePath();
c.stroke(); //画食物
} function addfood() {
foodx = Math.floor(Math.random() * (cols - 1)) * size;
foody = Math.floor(Math.random() * (rows - 1)) * size;
while (foodx == 0) {
foodx = Math.floor(Math.random() * (cols - 1)) * size;
}
while (foody == 0) {
foody = Math.floor(Math.random() * (rows - 1)) * size;
}
} //设置食物位置，保证不为第一行(列)、最后一行(列) function start() {
for (var i = 0; i < snake_len; i++) {
snake[i] = {
x: i * size,
y: 0
}
} //设置贪吃蛇出现的位置
addfood();
draw();
mark.innerHTML = 0;
} function addsnake() {
snake_len++;
snake.unshift({
x: size * cols,
y: size * rows
}); //添加新方块至网格外，会在下个游戏循环添加至贪吃蛇
} function IsEat() {
if (snake[snake_len - 1].x == foodx && snake[snake_len - 1].y == foody) {
mark.innerHTML = (parseInt(mark.innerHTML) + 1).toString();
addfood();
addsnake();
}
} function IsDie() {
if (snake[snake_len - 1].x == -1 * size || snake[snake_len - 1].y == -1 * size ||
snake[snake_len - 1].x == cols * size || snake[snake_len - 1].y == rows * size) {
clearInterval(interval);
alert("Game Over!没有玩过瘾，那就刷新页面再来一次。");
} //贪吃蛇爬行到网格外 for (var i = 0; i < snake_len - 1; i++) {
if (snake[i].x == snake[snake_len - 1].x && snake[i].y == snake[snake_len - 1].y) {
clearInterval(interval);
alert("Game Over!没有玩过瘾，那就刷新页面再来一次。");
}
} //贪吃蛇缠绕
} function move() {
switch (go) {
case 1:
snake.push({
x: snake[snake_len - 1].x - size,
y: snake[snake_len - 1].y
});
break;
case 2:
snake.push({
x: snake[snake_len - 1].x,
y: snake[snake_len - 1].y - size
});
break;
case 3:
snake.push({
x: snake[snake_len - 1].x + size,
y: snake[snake_len - 1].y
});
break;
case 4:
snake.push({
x: snake[snake_len - 1].x,
y: snake[snake_len - 1].y + size
});
}
snake.shift();
IsEat();
IsDie();
draw();
} //游戏循环 function keydown(keyCode) {
switch (keyCode) {
case 37:
if (go != 1 && go != 3)
go = 1;
break;
case 38:
if (go != 2 && go != 4)
go = 2;
break;
case 39:
if (go != 3 && go != 1)
go = 3;
break;
case 40:
if (go != 4 && go != 2)
go = 4;
break;
case 32:
if (pause) {
interval = setInterval(move, 130); //开始游戏循环
pause = false;
document.getElementById('pause').innerHTML = "Pause"; } else {
clearInterval(interval);
pause = true;
document.getElementById('pause').innerHTML = "Satrt";
}
break;
}
} //键盘操作 window.onload = function () {
c = document.getElementById('canvas').getContext('2d');
mark = document.getElementById('score');
start();
document.onkeydown = function (event) {
var event = event || window.event;
keydown(event.keyCode);
}
}
</script> <style>
#page {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 1000px;
height: 600px;
} #yard {
width: 800px;
border: 1px solid gray;
box-shadow: 0 0 10px #000;
float: right;
} #mark {
font-weight: 800;
} #score {
color: #f00;
} button {
width: 50px;
} p {
margin-left: 40px;
}
</style>
</head> <body>
<div id="page">
<div id="yard">
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<div id="help">
<div id="mark">Mark:<span id="score"></span></div>
<div id="helper">
<table>
<tr>
<td></td>
<td>
<button onclick="keydown(38)">Up</button>
</td>
<td></td>
</tr>
<tr>
<td>
<button onclick="keydown(37)">Left</button>
</td>
<td>
<button onclick="keydown(32)" id="pause">Satrt</button>
</td>
<td>
<button onclick="keydown(39)">Right</button>
</td>
</tr>
<tr>
<td></td>
<td>
<button onclick="keydown(40)">Down</button>
</td>
<td></td>
</tr>
</table>
<p>空格键暂停</p>
</div>
</div>
</div>
</body> </html>
效果图：
试玩：http://static.pzijigame.com/Game/snake.html（PC端才能玩哦！！！）
有感兴趣的朋友可以直接私聊我（1527985747@qq.com），我们可以一起讨论，一起进步！！！
HTML5+CSS+JS 贪吃蛇demo的更多相关文章
- JavaScript与html5写的贪吃蛇完整代码
JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...
- JS贪吃蛇游戏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- WebGL实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- [原创]html5游戏_贪吃蛇
代码随便写写,尚有许多不足,PC与手机端皆可运行 手机端滑屏操作,PC端方向键操作 疑问: 生成食物,与判断是否可以移动方面 有两种实现方式, 1.使用js内存,数组循环判断 2.使用dom的quer ...
- js贪吃蛇-简单版
分享个用原生js写的贪吃蛇,最近在学java,按照当年写的 js的思路,转换成java,换汤不换药 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- JS贪吃蛇小游戏
效果图展示: 具体实现代码如下: (1)html部分 !DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- 原生Js贪吃蛇游戏实战开发笔记
前言 本课程是通过JavaScript结合WebAPI DOM实现的一版网页游戏---贪吃蛇的开发全过程,采用面向以象的思想设计开发.通过这个小游戏的开发, 不仅可以掌握JS的语法的应用,还可以学会D ...
- html+css+JavaScript贪吃蛇
写文记录一下最近新完成的贪吃蛇游戏案例,用到了html.css和JavaScript,难度不高,适合刚入坑的同学练习,欢迎大家交流. 下面贴源码: <!DOCTYPE html> < ...
随机推荐
- jQuery如何使用键盘事件，按住空格键完成进度条效果，并终止键盘事件
jQuery使用键盘事件 keyup:键盘抬起时 keydown:键盘按下时 keypress:键盘按住时 运行下列代码,可以看效果 $(document).keyup(function () { c ...
- D. Kefa and Dishes(状压)
永久打开的传送门 \(这次总算没有写砸........\) \(设f[i][j]为上一次吃的i物品状态为j的最大收益\) \(那么我们就暴力枚举所有状态i,然后在当前状态找出一个没吃的食物j,再去找一 ...
- 布局问题杂(html和css)
\(一.删除线可以用一对strike标签括起来\) <p><strike>删除线可以用一对strike标签括起来</strike></p> \(\col ...
- [hdu5534]DP
题目原意:给一棵n个点的树添加边,给定度函数f(d)为一个点的度的函数,求所有点的度函数的和 思路: 函数只与点的度有关,而与点无关,n个点的树有n-1条边,共产生2(n-1)个度,每个点至少有1个度 ...
- 动手实现--AC自动机
Trie树: 把若干个单词按前缀合并就得到一棵树,这棵树称为Trie树.Trie树是有根树,每条边表示一个字符,每个节点表示一个从根到当前节点的唯一路径上的字符依次连接得到的字符串.由于空串是任何串的 ...
- JQ选择器-选择符合条件的元素,获取对应关系元素
如果你想寻找id以“sub_”开头的元素,你可以使用: $("*[id^='sub_']") 如果你想寻找id以“trim”结尾的元素,你可以使用: $("*[id$=' ...
- python--字典基本操作
字典 格式 key :value # string list dict# 1.取数据方便# 2.速度快, 定义一个空字典: d = dict() 或者 d = { } infos = {'n ...
- Docker 集成 Jenkins Gitlab 实现 CI/CD
首先介绍下环境部分,文章中共涉及到三台服务器,分别用 Gitlab,Jenkins,Deploy 三个名称代替,部署在内网环境,同时因为政策原因,服务器无法直接连通外网.下载 Jenkins 插件时需 ...
- 我找到了Dubbo源码的BUG，同事纷纷说我有点东西
点赞再看,养成习惯,微信搜索[三太子敖丙]关注这个互联网苟且偷生的工具人. 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试完整考点.资料以及我的 ...
- 自定义spring-boot-starter
需求背景: Springboot是Spring旗下优秀的子项目之一,其核心理念之一:约定优于配置.通过自动化的配置极大的提升了我们的开发效率,目前已集成诸多组件的starter起步依赖,帮助我们更加快 ...