使用JavaScript实现简单的小游戏-贪吃蛇
最近初学JavaScript，在这里分享贪吃蛇小游戏的实现过程，
希望能看到的前辈们能指出这个程序的不足之处。
##大致思路
- 首先要解决的问题
- 随着蛇头的前进，尾巴也要前进。
- 用键盘控制蛇的运动方向。
- 初始化食物的时候不能初始化到蛇的身体上。
- 蛇吃食物的时候身体会变长。
- 蛇头碰到“墙”，或者自己的身体游戏结束
- 不影响游戏的实现但是有关于游戏体验的设计
- 界面的美观。
- 分数的设置。
- 等级的设置（随着分数的增加，蛇前进的速度的增加）。
- 暂停与继续的快捷键。
##符号$说明
function $(id){ //在文件base.js中
return document.getElementById(id);
}
##代码
<!DOCTYPE html>
<html>
<head>
<title>Snake</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css" >
body{background-color: #eee; font-family: 手札体-简;}
#page{width: 960px; height: 560px; margin: 30px auto; background-color: #fdf5e6;box-shadow: 3px 3px 3px rgba(0,0,0,0.2),10px 10px 20px rgba(0,0,0,0.2); border-radius: 5px;}
#page div{float: left;}
#left{width: 710px; height: 560px; }
table{margin: 20px 100px;background-color: #9cc;}
td{background-color: #cff;}
#right{width: 205px; height: 560px;}
#right div{float: none;}
#score{width: 200px; height: 190px;;background-color: #ffffe0; border-radius: 10px;box-shadow: 3px 3px 3px rgba(0,0,0,0.2),5px 5px 10px rgba(0,0,0,0.2);margin-top: 20px;}
#rank{width: 200px; height: 190px; margin-top: 10px;background-color: #ffffe0;border-radius: 10px;box-shadow: 3px 3px 3px rgba(0,0,0,0.2),5px 5px 10px rgba(0,0,0,0.2);}
#right .tag{height:30px; width: 200px ;font-size: 40px;color: #9cf;font-weight: bolder; }
#score_num{height: 130px; width: 200px; text-align: center;color: #9cf; font-size: 100px;}
#rank_num{height: 130px; width: 200px; text-align: center;color: #9cf; font-size: 100px;}
#notice{width: 200px;color: #9cf; margin-top: 5px;box-shadow: 3px 3px 3px rgba(0,0,0,0.2),5px 5px 10px rgba(0,0,0,0.2);background-color: #ffffe0; border-radius: 5px;margin-top: 90px;}
</style>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript">
//全局变量
var max_scope = 30;//贪吃蛇的移动范围
var unit = 13;//每一个单元格的大小
var speed = 300;//贪吃蛇移动速度
var direction = 'left';//贪吃蛇移动方向
var snake_body = null;
var interval = null;//计时器
var food = null;
var score = 0;//分数（每吃一次，分数加一）
var rank = 1;//随着分数的增加，等级逐渐增加，速度逐渐增加
//初始化游戏，使用表格做贪吃蛇移动的范围
function initGame(){
snake_body = new Array();
for(i = 0 ; i < max_scope; i++)
{
var row = document.createElement("tr");
for( j = 0 ; j < max_scope; j++)
{
var cell = document.createElement("td");
cell.id = i + "-" + j;
cell.width = unit;
cell.height = unit;
row.appendChild(cell);
}
$("tbody").appendChild(row);
}
initSnake();
snakeInterval();
initFood();
}
//贪吃蛇身体初始化（随机生成）
function initSnake(){
var x = parseInt(Math.random()*(max_scope-2));
var y = parseInt(Math.random()*(max_scope-2));
var now_position = x + "-" + y;
snake_body.push(now_position);
setCellState(now_position);
}
// 贪吃蛇身体染色
function setCellState(id){
$(id).style.background = "#000";
}
// 食物染色
function setFootState(id){
$(id).style.background = "#b10000";
}
// 贪吃蛇尾巴离开位置染色
function setCellStateBack(id){
$(id).style.background = "";
}
// 获取贪吃蛇坐标
function getSnakePos(i){
switch(i){
case 'x':
return snake_body[0].split('-')[0];
case 'y':
return snake_body[0].split('-')[1];
}
}
// 计时器
function snakeInterval(){
interval = window.setInterval('snakeMove()',speed);
}
// 初始化计时器
function resetSnakeInterval(){
window.clearInterval(interval);
interval = window.setInterval('snakeMove()',speed);
}
// 设置蛇的移动与移动过程中发生的事件
function snakeMove(){
foodx = food.split('-')[0];
foody = food.split('-')[1];
switch(direction){
case 'left':
_x = getSnakePos('x');
_y = parseInt(getSnakePos('y')) -1;
break;
case 'right':
_x = getSnakePos('x');
_y = parseInt(getSnakePos('y')) +1;
break;
case 'up':
_x = parseInt(getSnakePos('x')) -1;
_y = getSnakePos('y');
break;
case 'down':
_x = parseInt(getSnakePos('x')) +1;
_y = getSnakePos('y');
break;
default:
_x = getSnakePos('x');
_y = parseInt(getSnakePos('y')) -1;
break;
}
//撞到墙游戏结束
if (_x < 0 || _x >= max_scope|| _y < 0 || _y >= max_scope){
alert("Game Over! Stupid!");
window.clearInterval(interval);
}
//撞到自己游戏结束
else if (eatItself(_x, _y))
{
alert("Game Over! Stupid!");
window.clearInterval(interval);
}
//蛇吃到食物与吃到食物以后加一分，并设置相应的等级
else if (foodx == _x && foody == _y)
{
snake_body.unshift(foodx + '-' + foody);
setCellState(snake_body[0]);
initFood();
score+=1;
$('score_num').innerText = score;
if (score == 3) {
speed = 250;
resetSnakeInterval();
rank = 2;
}
if (score == 6) {
speed = 200;
resetSnakeInterval();
rank = 3;
}
if (score == 10) {
speed = 150;
resetSnakeInterval();
rank = 4;
}
if (score == 20) {
speed = 100;
resetSnakeInterval();
rank = 5;
}
if (score == 30) {
speed = 70;
resetSnakeInterval();
rank = 6;
}
//将等级写到层中
$('rank_num').innerText = rank;
}
//普通的移动
else {
snake_body.unshift(_x + '-' + _y);
setCellState(snake_body[0]);
setCellStateBack(snake_body.pop());
}
}
// 判断贪吃蛇头碰到身体的函数
function eatItself( x,y){
var nowpos = x + '-' + y;
for (i = 1 ; i < snake_body.length; i++){
if (nowpos == snake_body[i])
return true;
}
}
// 设置蛇的移动方向以及键盘控制暂停与继续
function setDirction(){
// alert(event.keyCode);
if (event.keyCode == 81) window.clearInterval(interval);
if (event.keyCode == 82) interval = window.setInterval('snakeMove()',speed);
switch (event.keyCode){
case 37:
if (direction != "right")
direction = "left";
break;
case 38:
if (direction != "down")
direction = "up";
break;
case 39:
if (direction != "left")
direction = "right";
break;
case 40:
if (direction != "up")
direction = "down";
break;
}
}
// 初始化食物
function initFood(){
var temp = new Array();
for (i = 0 ; i < max_scope ; i++){
for (j = 0 ; j < max_scope; j++){
temp.push(i + '-' + j);
}
}
var addFoodString = temp.join(',')+',';
for(k = 0 ; k <snake_body.length; k++){
addFoodString = addFoodString.replace(snake_body[k]+',',"")
}
var food_array = addFoodString.split(',');
food = food_array[parseInt(Math.random()*(food_array.length - 1))]
setFootState(food);
// $('display').innerText = addFoodString;
}
// function pause(){
// if (event.keyCode == 81)
// window.clearInterval(interval);
// }
</script>
</head>
<body onload="initGame()" onkeydown="setDirction()" >
<div id = "page">
<div id = "left">
<table>
<tbody id = "tbody">
</tbody>
</table>
</div>
<div id = "right">
<div id = "score">
<div class = "tag">Score</div>
<div id = "score_num">0</div>
</div>
<div id = "rank">
<div class = "tag">Rank</div>
<div id = "rank_num">1</div>
</div>
<div id = "notice">NOTICE：按'Q'暂停，'E'继续</div>
</div>
</div>
<!-- <div id = "display"> </div> -->
</body>
</html>
以下是效果图：
使用JavaScript实现简单的小游戏-贪吃蛇的更多相关文章
- JavaScript面向对象编程小游戏---贪吃蛇
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. 2 这个demo是采用了 ...
- 手把手教学h5小游戏 - 贪吃蛇
简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yan ...
- 第一个windows 小游戏 贪吃蛇
最近用dx尝试做了一个小的贪吃蛇游戏,代码放到github上面:https://github.com/nightwolf-chen/MyFreakout 说一下自己实现的过程: 首先,我把蛇这个抽象成 ...
- JavaScript 小游戏 贪吃蛇
贪吃蛇 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...
- Java经典小游戏——贪吃蛇简单实现（附源码）
一.使用知识 Jframe GUI 双向链表 线程 二.使用工具 IntelliJ IDEA jdk 1.8 三.开发过程 3.1素材准备 首先在开发之前应该准备一些素材,已备用,我主要找了一个图片以 ...
- 用Canvas制作小游戏——贪吃蛇
今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...
- Win32小游戏--贪吃蛇
近日里学习了关于win32编程的相关知识,利用这些知识制作了一款贪吃蛇小游戏,具体细节还是分模块来叙述 前期准备:在网上找到一些贪吃蛇的游戏素材图片,以及具体的逻辑框图 在正式写功能之前,先把一系列环 ...
- Java_GUI小游戏--贪吃蛇
贪吃蛇游戏:是一条蛇在封闭围墙里,围墙里随机出现一个食物,通过按键盘四个光标键控制蛇向上下左右四个方向移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或 ...
- 用Python实现童年小游戏贪吃蛇
贪吃蛇作为一款经典小游戏,早在 1976 年就面世了,我最早接触它还是在家长的诺基亚手机中.
随机推荐
- 基于C++ Qt实现的红色警戒3修改器
前言 这部修改器制作有一段时间了,但是一直没出教程.今天利用周末空闲写篇教程,给后来者指路的同时也加深自己对游戏修改器的理解,大佬就随便看看吧 浏览了一下网络,形形色色的单机游戏修改器教程,但是基本只 ...
- SQLServer之视图篇
1 视图介绍 视图是从一个或者几个基本表(或视图)导出的表.它与基本表不同,是一个虚表.数据库中只存放视图的定义,而不存在视图对应的数据,这些数据仍然存放在原来的基本表中.所以一旦基 ...
- Net 使用UEditor笔记
WebForm使用Ueditor获取编辑器的值有两种方法:1.通过前台js 获取 function test() { alert(UE.getEditor('控件Id').getContent()); ...
- 微信小程序看上去很美
目前不少关于 微信小程序 的文章主要集中在两各方面:一是开发技术细节:二是怎么靠此赚钱. -- “微信小程序”所处的环境 -- 2016年初,美国号召全民学编程,包括监狱服刑人员.同样,在中国要想掌握 ...
- ADO.NET获取数据（DataSet）同时获取表的架构
普通的ADO.NET获取DataSet的写法如下: using System.Configuration; using System.Data; using System.Data.SqlClient ...
- Sql Server 与 MySql 在使用 update inner join 时的区别
Sql Server -- 不使用别名 UPDATE tb_User SET tb_User.pass = '' FROM tb_User usr INNER JOIN tb_Address addr ...
- 非常可乐（杭电hdu1495）bfs
非常可乐 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- 查找具有特定属性的元素 (XPath-LINQ to XML)
XElement doc = XElement.Parse( @"<Root> <Child1>1</Child1> <Child2 Select= ...
- 前端面试(原生js篇) - DOM
根据我的面试经历,一般小公司的面试环节,比较关心框架的熟练程度,以及独立开发组件的能力 但大厂通常有五轮以上的面试,而且对 js 基础语法很是看重 于是我总结了一些关于 js 基础的面试对话,有的当时 ...
- BZOJ2956: 模积和(数论分块)
题意 题目链接 Sol 啊啊这题好恶心啊,推的时候一堆细节qwq \(a \% i = a - \frac{a}{i} * i\) 把所有的都展开,直接分块.关键是那个\(i \not= j\)的地方 ...