学JS不久，写一个简单的贪吃蛇练练手，各位大神轻点拍
演示地址：http://www.osctools.net/jsbin/fbzvslwe/1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS贪吃蛇</title>
<style>
.box {
position:absolute;
background:#C4E7FB;
border:1px solid #C4E7FB;
}
.snake {
position:absolute;
background:green;
border:1px solid white;
}
.food {
position:absolute;
background:yellow;
border:1px solid white;
}
#test {
position:relative;
}
</style>
</head>
<body>
<h1>JS贪吃蛇</h1>
地图行数：<input type="text" name="row" value="15" />
地图列数：<input type="text" name="col" value="30" />
难度：<select name="hard" onchange="speed = parseInt(this.value);">
<option value="1000">简单</option>
<option value="800">中等</option>
<option value="500">困难</option>
</select>
<input type="button" value="开始" onclick="starts()" /> <input type="button" value="暂停" onclick="pause(this)" /> <input type="button" value="重新开始" onclick="location.reload()" /> <span>您的分数：</span> <span id="score" style="color:red;">0</span> <span>分</span>
<div id="test">
</div>
<script>
var snake=new Array();//那条蛇
var rows//行数
var cols//列数
var boxwidth=25;//一个div的宽度
var boxheight=25;//一个div的高度
var map=new Array();//地图数组:
var prevdirection;//蛇上一步的前进方向
var direction=0;//蛇的前进方向
var speed=parseInt(document.getElementsByName('hard')[0].value);//初始速度
var score=document.getElementById('score');
var dt;//定时器
var snakehead;
var snakepointx=0;
var snakepointy=0;
var foodpointx=0;
var foodpointy=0;
var state=0;//状态码
function getbox(){//生成地图、蛇头、食物
map[snakepointx][snakepointy]=1;//1代表蛇头
map[foodpointx][foodpointy]=2;//2代表食物
for(var i=0; i<rows; i++){//生成地图
for(var j=0; j<cols; j++){
var div=document.createElement('div');
if(map[i][j] == 1){
snake[0]=i*cols+j;//将蛇头的位置写入蛇数组第一个元素
div.className="snake";
}else if(map[i][j] == 2){
div.className="food";
}else{
div.className="box";
}
div.id=i*cols+j;
div.style.width=boxwidth;
div.style.height=boxheight;
div.style.top=50+boxheight*i;
div.style.left=50+boxwidth*j;
document.getElementById('test').appendChild(div);
}
}
}
window.document.onkeydown=function(e){//获取键盘码
var ev=e || window.event;
prevdirection=direction;
direction = ev.keyCode;
if(direction > 40 || direction < 37){
direction = prevdirection;
}
if(prevdirection == 37 && direction == 39){//如果方向是左，则向右无效
direction = 37;
}
if(prevdirection == 38 && direction == 40){//如果方向是上，则向下无效
direction = 38;
}
if(prevdirection == 39 && direction == 37){//如果方向是右，则向左无效
direction = 39;
}
if(prevdirection == 40 && direction == 38){//如果方向是下，则向上无效
direction = 40;
}
}
function inarr(num, arr){//判断一个元素是否在数组中
for(var i=0, j=arr.length; i<j; i++){
if(num == arr[i]){
return true;
}
}
return false;
}
function move(){
var head = document.getElementById(snake[0]);//蛇头位置
var prevpoint = snake[0];//保存上一点坐标
var snakehead=snake[0];//下一点的位置
switch(direction){//根据方向，设置下一步蛇头的位置
case 37:
snakehead=snake[0]-1;
break;
case 38:
snakehead=snake[0]-cols;
break;
case 39:
snakehead=snake[0]+1;
break;
case 40:
snakehead=snake[0]+cols;
}
if((snakehead < 0 || snakehead > rows*cols) || (prevpoint - snakehead == 1 && prevpoint % cols == 0) || (snakehead - prevpoint == 1 && snakehead % cols == 0) || (prevpoint != snakehead && inarr(snakehead, snake))){//游戏结束的条件
clearInterval(dt);
alert('游戏结束！您的得分是：'+score.innerHTML);
return false;
}
if(snakehead == foodpointx*cols+foodpointy){//吃到食物了，增加蛇的长度并重新生成食物
snake[snake.length]=snake[snake.length-1];
speed = speed-snake.length*5 < 100 ? 100 : speed-snake.length*5 ;//速度
score.innerHTML = Math.round(snake.length*10+snake.length/speed*1000);//积分
clearInterval(dt);
dt=setInterval(move,speed);
var prevfoodx=foodpointx;//保存上一点的食物坐标，确保下一点生成的坐标不在原点上
var prevfoody=foodpointy;//保存上一点的食物坐标，确保下一点生成的坐标不在原点上
while(inarr(foodpointx*cols+foodpointy, snake) || (prevfoodx == foodpointx && prevfoody == foodpointy)){//保证下一个生成的食物不在蛇身上，和不出现在和上一个相同的位置
foodpointx=Math.floor(Math.random()*rows);
foodpointy=Math.floor(Math.random()*cols);
}
document.getElementById(foodpointx*cols+foodpointy).className="food";
}
var endsnake=snake.pop();//最后一个元素出栈
snake.unshift(snakehead);//将蛇头下一步的位置入队列
for(var i=0, j=snake.length; i<j; i++){
var nextdiv=document.getElementById(snake[i]);
nextdiv.className='snake';
}
if(endsnake != snake[0]){
document.getElementById(endsnake).className='box';
}
}
function starts(){
if(state != 0){
alert('已经开始了！');
return false;
}
state = 1;
rows=parseInt(document.getElementsByName('row')[0].value);//行数
cols=parseInt(document.getElementsByName('col')[0].value);//列数
for(var i=0; i<rows; i++){//生成地图数组
map[i]=new Array();
for(var j=0; j<cols; j++){
map[i][j]=0;
}
}
while(snakepointx == foodpointx && snakepointy == foodpointy){//确保蛇头和食物不出现在同一点上
snakepointx=Math.floor(Math.random()*rows);
snakepointy=Math.floor(Math.random()*cols);
foodpointx=Math.floor(Math.random()*rows);
foodpointy=Math.floor(Math.random()*cols);
}
getbox();
dt=setInterval(move,speed);
}
function pause(obj){
if(state == 0){
alert('还没开始暂停什么！');
return false;
}
if(state == 2){
state = 3;
dt=setInterval(move,speed);
obj.value="暂停";
}else{
state = 2;
clearInterval(dt);
obj.value="继续";
}
}
</script>
</body>
</html>
分享到：
相关推荐
在本项目中，我们将深入探讨如何使用原生JavaScript来实现一个经典的贪吃蛇游戏。JavaScript是一种广泛用于网页和网络应用的编程语言，以其灵活性和强大的功能而受到开发者的喜爱。贪吃蛇游戏作为一款历史悠久、简单...
通过以上这些技术的综合运用，我们能够创建一个完整的、功能完善的原生JavaScript贪吃蛇游戏。在实践过程中，不仅巩固了JavaScript的基本功，也提升了对游戏逻辑和用户交互的理解。对于想要提升JavaScript编程能力的...
【原生JS贪吃蛇源码】是一种使用JavaScript编程语言实现的经典小游戏——贪吃蛇。JavaScript，简称JS，是Web开发中的主要脚本语言，它用于处理网页的动态交互，如用户输入、页面动画以及与服务器的数据通信。在这个...
【原生JS贪吃蛇小游戏】是一个经典的编程实践项目，主要使用JavaScript这门客户端脚本语言来实现。JavaScript，简称JS，是Web开发中的核心技术之一，用于处理网页的交互逻辑和动态效果。在这个项目中，我们将深入...
原生js贪吃蛇小游戏代码.zip
在本主题中，我们将深入探讨如何使用原生JavaScript实现经典的贪吃蛇游戏。JavaScript作为Web开发中最常用的脚本语言，其灵活性和强大的功能使得开发者能够创建各种交互式应用，包括这款深受喜爱的游戏。 首先，...
【标题】"原生js贪吃蛇网页小游戏"是一个基于JavaScript实现的经典游戏——贪吃蛇。这款游戏使用纯JavaScript编程，不依赖任何库或框架，展示了JavaScript在创建交互式网页应用方面的强大能力。JavaScript是一种广泛...
使用原生JavaScript 写一个贪吃蛇小项目，帮你快速学习JavaScript相关的碰撞检测方法。
我们做贪吃蛇游戏的时候先讲下基本思路: **1、贪吃蛇的运动坐标需要存入一个数组，这个数组不仅是蛇 还是判断蛇蛋生成地点是否合理、设是否吃到蛇蛋和游戏结束的 2、蛇的运动需要定时器来不间断的执行 3、蛇头...
蛇的移动和食物的生成都是通过 JavaScript 代码实现的。玩家可以通过方向键控制蛇的移动方向。游戏循环通过 setInterval 函数实现，每隔一定时间更新一次游戏状态并重新绘制游戏画面。总共有五关，每关对应不同的...
在本项目中，我们将深入探讨如何使用原生JavaScript来实现一个经典的H5游戏——贪吃蛇。这个项目适合对JavaScript有一定基础，想要提升Web全栈技能的开发者。通过实际操作，我们可以了解到游戏开发的基本原理，以及...
原生贪吃蛇 贪吃蛇小游戏特效下载.zip
《原生JS贪吃蛇小游戏》是一款利用JavaScript编程语言，结合HTML5的Canvas画布技术实现的简单趣味游戏。在这款游戏中，玩家控制一条不断移动的蛇，通过吃食物来增长身体长度，同时避免触碰到自己的身体或者边界，...
总结来说，"原生js贪吃蛇游戏"项目涵盖了JavaScript基础、Canvas绘图、游戏逻辑设计和用户体验提升等多个方面，是学习和实践Web前端开发的好例子。通过实现这个游戏，开发者可以提升自己的编程技能，更好地理解...
原生JS网页贪吃蛇小游戏是一个使用纯JavaScript编写的经典娱乐项目，它展示了JavaScript在创建交互式网页应用方面的强大能力。这款小游戏的核心是利用面向对象编程（OOP）的思想，通过封装、继承和多态等概念来实现...
基于原生JS实现的贪吃蛇小游戏源码(浏览器直接运行).zip基于原生JS实现的贪吃蛇小游戏源码(浏览器直接运行).zip基于原生JS实现的贪吃蛇小游戏源码(浏览器直接运行).zip基于原生JS实现的贪吃蛇小游戏源码(浏览器直接...
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>贪吃蛇游戏</...
在本项目中，我们讨论的是一个使用原生JavaScript编写的网页版贪吃蛇游戏。这个小游戏是学习和交流JavaScript编程技巧的一个良好实例。下面将详细解释这个游戏的核心知识点，包括HTML结构、CSS样式以及JavaScript...
在本项目"原生js实现贪吃蛇.zip"中，我们探索了如何使用纯JavaScript语言来构建一个经典的贪吃蛇游戏。这个项目不仅展示了JavaScript的基本语法和操作，还揭示了编程思维和逻辑的重要应用。以下是关于这个项目的一些...