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> < ...
随机推荐
- P2002 消息扩散(缩点)
描述:https://www.luogu.com.cn/problem/P2002 有n个城市,中间有单向道路连接,消息会沿着道路扩散,现在给出n个城市及其之间的道路,问至少需要在几个城市发布消息才能 ...
- redux中间件的理解
redux的中间件就是用来处理reducer和actions之间应用,常用的中间件有redux-thunk,redux-sage.在redux中通过applyMiddleware方法使用中间件 使用例 ...
- 错误：Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use.
Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use. The ...
- 王颖奇 201771010129 《面向对象程序设计（java）》第二周学习总结
<面向对象程序设计(java)>第二周学习总结 王颖奇 201771010129 第一部分:实验目的与要求 ①理论部分目的与要求 (1)基本知识(2)数据类型(3)变量(4)运算符(5)类 ...
- 《C程序设计语言》 练习2-3
问题描述 < class="title-article"> 练习2-3 编写函数htoi(s),把由16进制数字组成的字符串(包含可选的前缀0X或0x)转换成与之等价的 ...
- Day_11【集合】扩展案例3_打印最高分的学员姓名、年龄、成绩，打印10个学生的总成绩和平均分，打印不及格的学员信息及数量
分析以下需求,并用代码实现 1.定义Student类 属性: 姓名:String name 年龄:int age 成绩:int score 行为: 空参构造方法 有参构造方法 set和get方法 to ...
- 三分钟快速搭建分布式高可用的Redis集群
这里的Redis集群指的是Redis Cluster,它是Redis在3.0版本正式推出的专用集群方案,有效地解决了Redis分布式方面的需求.当单机内存.并发.流量等遇到瓶颈的时候,可以采用这种Re ...
- Wpf 正常关闭程序 Gc 来不及回收？
最近在使用Udp开发客户端,发现很长时间GC都无法回收UdpClient,所以我决定强制标记Gc,非常奇怪的是,毫无作用,在Windows任务管理器中,也看不见程序的身影.简单来说,gc是系统为你独立 ...
- 变分深度嵌入(Variational Deep Embedding, VaDE)
变分深度嵌入(Variational Deep Embedding, VaDE) 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 这篇博文主要是对论文“ ...
- Offset等一些类似属性的使用
1.offset系列 // offset 系列 var father = document.querySelector('.father'); var son = document.querySele ...