<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- <meta charset="UTF-8"> -->
<title></title>
<link charset="utf-8" href="style.css" rel="stylesheet" rev="stylesheet" type="text/css" />
<style type="text/css">
html,body
{
font:12px/1.5 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#box{
width:400px;
height:400px;
position:absolute;
left:100px;
top:100px;
border:1px solid #000;
overflow:hidden;
background:#000;
}
.snake{
width:8px;
height:8px;
border:1px solid #d2d2d2;
overflow:hidden;
position:absolute;
background:#fff;
}
.food{
position:absolute;
width:9px;
height:9px;
border:1px solid red;
background:red;
overflow:hidden;
display:inline-block;
}
#result{
position:absolute;
left:100px;
top:510px;
}
#operate{
position:absolute;
left:520px;
top:100px;
}
</style>
</head>
<body>
<div id="box">
</div>
<div id="result">级别：1</div>
<div id="operate">
级别选择
<select id="selectLevel">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" value="开始" id="start" />
</div>
<script>
function snake(){
this.wrap = document.getElementById('box'); //容器
this.ele = this.wrap.getElementsByTagName('div'); //初始化的snake
this.head = this.ele[this.ele.length-1] || null; //head
this.direction = 'right'; //方向
this.initNum = 3;
this.food = null;
this.over = false;
this.level = 1;
this.eatNum = 0;
this.result = document.getElementById('result');
this.t = null;
}
snake.prototype.init = function(){
this.wrap.innerHTML="";
for(var m = 0;m < this.initNum;m++){
var ss = this.creatEl();
ss.className="snake";
}
this.head = this.ele[this.ele.length-1];
var _this = this;
for(var i = 0,j = _this.ele.length;i < j;i++){
_this.ele[i].style.left=_this.ele[i].offsetWidth*i+"px";
_this.ele[i].style.top="0px";
}
_this.food = _this.createFood();
document.onkeydown = function(e){
var e = e|| window.event;
if(e.keyCode=='37'&&_this.direction!='left'&&_this.direction!='right'){
_this.direction='left';
}else if(e.keyCode=='38'&&_this.direction!='top'&&_this.direction!='bottom'){
_this.direction='top';
}else if(e.keyCode=='39'&&_this.direction!='left'&&_this.direction!='right'){
_this.direction='right';
}else if(e.keyCode=='40'&&_this.direction!='top'&&_this.direction!='bottom'){
_this.direction='bottom';
}
}
}
snake.prototype.run = function(){
this.checkRule();
this.eat();
if(this.over){
alert('game is over');
return false;
}
var el = this.ele;
for(var i = 0,j = el.length;i < j-1;i++){
el[i].style.left = el[i+1].style.left;
el[i].style.top = el[i+1].style.top;
}
var head = this.head;
switch(this.direction){
case 'left':head.style.left=parseInt(head.style.left)-head.offsetWidth+"px";break;
case 'right' :head.style.left=parseInt(head.style.left)+head.offsetWidth+"px";break;
case 'top' :head.style.top=parseInt(head.style.top)-head.offsetHeight+"px";break;
case 'bottom' :head.style.top=parseInt(head.style.top)+head.offsetHeight+"px";break;
}
}
snake.prototype.begin = function(){
clearInterval(this.t);
this.t = null;
if(this.over){
this.over = false;
this.food = null;
this.direction = 'right';
this.eatNum = 0;
this.init();
}
var _this = this;
_this.t = setInterval(function(){_this.run();},200/_this.level);
}
snake.prototype.createFood=function(){
var food = this.food || null;
if(!this.food){
food = document.createElement('span');
this.wrap.appendChild(food);
food.className="food";
}
food.style.left=Math.floor(Math.random()*Math.floor(this.wrap.offsetWidth/this.head.offsetWidth))*this.head.offsetWidth+"px";
food.style.top =Math.floor(Math.random()*Math.floor(this.wrap.offsetHeight/this.head.offsetHeight))*this.head.offsetHeight+"px";
var el = this.ele;
for(var i = 0,j = el.length;i < j-1;i++){
while(el[i].style.left == food.style.left && el[i].style.top == food.style.top){
food.style.left=Math.floor(Math.random()*Math.floor(this.wrap.offsetWidth/this.head.offsetWidth))*this.head.offsetWidth+"px";
food.style.top =Math.floor(Math.random()*Math.floor(this.wrap.offsetHeight/this.head.offsetHeight))*this.head.offsetHeight+"px";
}
}
return food;
}
snake.prototype.eat=function(){
if(this.food && this.head.style.left == this.food.style.left && this.head.style.top == this.food.style.top){
this.wrap.insertBefore(this.ele[0].cloneNode(true),this.ele[0]);
this.food = this.createFood();
this.eatNum++;
if(this.eatNum==this.level*5){
this.level++;
this.result.innerHTML='级别：'+this.level;
}
}
}
snake.prototype.checkRule=function(){
var head = this.head,
overRule = {
'hitLeft' : (this.direction == 'left' && parseInt(this.head.style.left) <= 0),
'hitRight' : (this.direction == 'right' && parseInt(this.head.style.left) >= this.wrap.offsetWidth - parseInt(getStyle(this.wrap,'border-left-width')) - parseInt(getStyle(this.wrap,'border-right-width')) - this.head.offsetWidth),
'hitTop' : (this.direction == 'top' && parseInt(this.head.style.top) <= 0),
'hitBottom' : (this.direction == 'bottom' && parseInt(this.head.style.top) >= this.wrap.offsetHeight - parseInt(getStyle(this.wrap,'border-top-width')) - parseInt(getStyle(this.wrap,'border-bottom-width')) - this.head.offsetHeight)
}
if(overRule['hitLeft'] || overRule['hitRight'] || overRule['hitTop'] || overRule['hitBottom']){
clearInterval(s.t);
s.t = null;
this.over = true;
return false;
}
var el = this.ele;
for(var i = 0,j = el.length;i < j-1;i++){
if(this.head.style.left == el[i].style.left && this.head.style.top == el[i].style.top){
clearInterval(s.t);
s.t = null;
this.over = true;
return false;
}
}
}
snake.prototype.creatEl=function(){
var el = document.createElement('div');
this.wrap.appendChild(el);
return el;
}
function getStyle(obj,pro){
if(obj.currentStyle){
return obj.currentStyle[pro];
}else{
var pro = pro.replace(/([A-Z])/g, "-$1").toLowerCase();
return window.getComputedStyle(obj,null).getPropertyValue(pro);
}
}
var s = new snake();
s.init();
document.getElementById('start').onclick=function(){
var selectLevel = document.getElementById('selectLevel');
s.level = selectLevel.options[selectLevel.selectedIndex].text;
s.begin();
}
document.getElementById('selectLevel').onchange=function(){
s.result.innerHTML='级别：'+this.options[this.selectedIndex].text;;
}
</script>
</body>
</html>
- 大小: 11 KB
分享到：
相关推荐
JavaScript 贪吃蛇及其源代码 这个贪吃蛇项目是一款单人游戏。这个游戏是一个非常流行和有趣的游戏。在这里，玩家必须控制有边界平面上的白色矩形框（称为蛇）。你只需要使用箭头键控制蛇，然后吃掉那些红点，让你的...
这款贪吃蛇游戏是一款单人游戏。玩家必须在有边框的平面上控制方形盒子（称为蛇）。与其他贪吃蛇游戏不同，这款贪吃蛇游戏的主要目标是逃离圆点球以求生存。当它向前移动以逃离圆点球时，它会留下一条痕迹。当蛇撞击...
这个贪吃蛇项目是一个单人游戏。这个游戏非常受欢迎，也很有趣。在这里，玩家必须控制有边框的平面上的白色矩形框（称为蛇）。你只需要使用箭头键控制蛇，然后吃掉那些红点，让你的蛇变大。 游戏制作 这款贪吃蛇游戏...
诺基亚贪吃蛇游戏是一款单人游戏。玩家必须在有边框的平面上控制蓝色矩形框（称为蛇）。这款游戏非常受欢迎且有趣。您只需按任意箭头键即可开始移动蛇，然后吃掉那些蓝点即可得分，让蛇变大，并加快蛇的移动速度。 ...
基本贪吃蛇游戏是一款单人游戏。玩家必须在有边框的平面上控制方形盒子（称为蛇）。这款游戏非常受欢迎且有趣。在这里，您知道自己要做什么。您只需按任意箭头键即可开始移动蛇，然后吃掉那些红点以获得分数并使蛇变...
简单的贪吃蛇游戏是一款单人游戏。在这里，玩家必须控制有边框的平面上的黑色矩形框（称为蛇）。这款游戏非常受欢迎且有趣。在这里，您知道自己要做什么。您只需按任意箭头键即可开始移动蛇，然后吃掉那些黄点以获得...
这个项目可能是用某种编程语言如Python、JavaScript或者C++实现的。常见的实现方式包括使用二维数组来表示游戏地图，利用循环和条件语句来处理蛇的移动和碰撞检测，以及事件监听来响应用户的输入。 **6. 可持续改进...
【标题】"C语言贪吃蛇游戏的双人对战版"揭示了这是一个基于C语言编程实现的项目，它扩展了传统的单人贪吃蛇游戏，加入了双人对战模式，使得游戏更具竞技性和趣味性。在编程领域，C语言是一种基础且广泛使用的语言，...
【标题】：“贪吃蛇.zip..._lan.zip”这个标题暗示了我们正在处理一个与“贪吃蛇”游戏相关的压缩文件，它可能是该经典游戏的一个网络版本或多人联机版。".zip"是常见的文件压缩格式，用于将多个文件或文件夹打包成...
《JS贪食蛇-双蛇抢食》是一个基于JavaScript实现的经典游戏，它融合了传统的单人贪食蛇游戏与创新的双人对战元素。在这个游戏中，两名玩家各自控制一条蛇，目标是通过吃食物来增长蛇身长度，同时避免触碰到自己的...
2. **多模式**：除了单人模式，游戏可能还提供了多人在线对战模式，玩家可以与其他玩家实时竞技，看谁能在有限的空间内生存更长时间。 3. **特殊道具与技能**：为了增加游戏趣味性，可能加入了特殊道具，如短暂的...
综合以上信息，我们可以推测这个项目是一个使用JavaScript编写的多人在线版贪吃蛇游戏。开发者利用Node.js搭建了服务器端，处理多玩家同步游戏状态，而前端可能使用HTML、CSS和JavaScript实现用户界面和交互。玩家...
多人蛇游戏是经典单人贪吃蛇游戏的升级版，它允许多个玩家同时在线进行游戏，增加了竞技和互动性，使得游戏体验更加丰富。 在JavaScript的世界里，创建这种实时交互的游戏涉及到以下几个关键知识点： 1. **...
4. **多模式游戏**：除了传统的单人模式，可能还设计了多人竞技模式，玩家之间可以互相干扰，使得游戏更加激烈。 5. **复杂地图**：地图可能不再只是简单的矩形，而是包含各种形状和结构，甚至有隐藏区域和通道，...