如何用原生js写出文字版贪食蛇（甚至连css也不用）？
如题，求完整代码，写在html中。先感谢了。
你题目的解答代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 贪吃蛇 </title>
<style>
#mapbox {
font-family: 宋体; font-size: 17px; line-height:100%;
height:360; width:430;
}
</style>
<script language="JavaScript">
/*
// 贪吃蛇 //
// OO+TextBox //
// 程序作者:海浪 //
*/
var map;
var gott;
function play()
{
clearInterval(gott);
map = new mapClass(25,20);
document.onkeydown = keydown;
gott = setInterval("map.snake.go()",150);
}
function keydown(e)
{
e = e||event;
switch (e.keyCode)
{
case 38: map.snake.refx(0); break;
case 39: map.snake.refx(1); break;
case 40: map.snake.refx(2); break;
case 37: map.snake.refx(3); break;
case 17: map.snake.stoporrun(); break;
}
}
function mapClass(x,y)
{
this.x = x;
this.y = y;
this.sq = "■";
this.sk = " ";
this.marr = [];
for(var iy=0; iy<this.y; iy++)
{
this.marr[iy] = [];
for(var ix=0; ix<this.x; ix++)
this.marr[iy][ix] = (ix==0||iy==0||ix==this.x-1||iy==this.y-1)?this.sq:this.sk;
}
this.snake = new snakeClass(this);
this.bean = new beanClass(this);
this.bean.newbean();
this.bean.addn();
}
mapClass.prototype.write = function()
{
var str = "";
for(var ii=0; ii<this.y; ii++)
str += this.marr[ii].join("")+"<br />";
document.getElementById("mapbox").innerHTML = str;
}
mapClass.prototype.rexy = function(x,y,s)
{
var str = s || this.sk;
this.marr[y][x] = str;
}
mapClass.prototype.jcxy = function(x,y,s)
{
var str = s || this.sk;
return this.marr[y][x] == str;
}
function snakeClass(po)
{
this.parent = po;
this.mt = "●";
this.boarr = [];
this.bolength = 4;
this.fang = 1;
this.fangtt = 1;
this.stop = false;
this.boarr[0] = this.addbody(3,5);
this.parent.rexy(this.boarr[0].x,this.boarr[0].y,this.mt);
}
snakeClass.prototype.go = function()
{
if(this.stop) return;
this.fang = this.fangtt;
var x = this.boarr[0].x + [0,1,0,-1][this.fang];
var y = this.boarr[0].y + [-1,0,1,0][this.fang];
var chi = this.parent.jcxy(x,y,this.parent.bean.mt);
if(!this.parent.jcxy(x,y) && !chi)
{
clearInterval(gott);
alert("Game Over!");
return;
}
if(chi)
{
this.bolength++;
this.parent.bean.addn();
this.parent.bean.newbean();
}
this.parent.rexy(x,y,this.mt);
this.boarr = [].concat(this.addbody(x,y),this.boarr);
if(this.boarr.length>this.bolength)
{
var tb = this.boarr.pop();
this.parent.rexy(tb.x,tb.y);
}
this.parent.write();
}
snakeClass.prototype.addbody = function(x,y)
{
return { x:x, y:y };
}
snakeClass.prototype.refx = function(n)
{
if(Math.abs(this.fang-n)!=2)
this.fangtt=n;
}
snakeClass.prototype.stoporrun = function()
{
this.stop = !this.stop;
}
function beanClass(po)
{
this.parent = po;
this.mt = "◎";
this.sne = -100;
}
beanClass.prototype.addn = function()
{
this.sne+=100;
document.getElementById("fan").innerHTML = this.sne;
}
beanClass.prototype.newbean = function()
{
var x = Math.floor(Math.random()*(this.parent.x-2))+1;
var y = Math.floor(Math.random()*(this.parent.y-2))+1;
if(this.parent.jcxy(x,y))
this.parent.rexy(x,y,this.mt);
else
this.newbean();
}
</script>
</head>
<body>
<center>
<h2>贪吃蛇</h2><hr>
<div id="mapbox"></div>
<input type="button" value="开始" onclick="play()"> 得分：<span id="fan"></span>
<hr>
程序作者:海浪
</center>
</body>
</html>
如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪食蛇.自修—1</title>
<style>
*{
padding: 0;
margin: 0;
background-color: khaki;
}
.plat{
width: 800px;
height: 400px;
margin: 40px auto;
}
.map{
width: 800px;
height: 400px;
background-color: grey;
position: relative;
}
.btn{
width: 400px;
font-size: 50px;
font-family: '楷体';
}
.btn1{
width: 400px;
font-size: 50px;
font-family: '楷体';
float: left;
}
</style>
</head>
<body>
<div class="plat">
<div class="map" id="map"></div>
<input type='button' id="btn" class="btn" value="开始游戏">
<input type='button' id="btn1" class="btn1" value="暂停游戏">
<script>
var map = document.getElementById('map');
function Snake() {
this.direction = 'right';
this.body = [
{x: 2, y: 0},
{x: 1, y: 0},
{x: 0, y: 0}
];
this.display = function () {
for (var i = 0; i < this.body.length; i++) {
if (this.body[i].x !=null) {
var s = document.createElement('div');
this.body[i].flag = s;
s.style.width = '10px';
s.style.height = '10px';
s.style.backgroundColor = 'white';
s.style.borderRadius = '50%';
s.style.position = 'absolute';
s.style.left = 10 * this.body[i].x + 'px';
s.style.top = 10 * this.body[i].y + 'px';
map.appendChild(s);
}
}
}
this.run = function () {
for (var i = this.body.length - 1; i > 0; i--) {
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
switch (this.direction) {
case 'right':
this.body[0].x += 1;
break;
case 'left':
this.body[0].x -= 1;
break;
case 'up':
this.body[0].y -= 1;
break;
case 'down':
this.body[0].y += 1;
break;
}
if (this.body[0].x<0 || this.body[0].x>79 ||this.body[0].y<0 || this.body[0].y>39) {
clearInterval(timer);
alert('傻啊,用头撞墙');
window.location.reload();
}
for (var i=4;i<this.body.length;i++){
if (this.body[0].x == this.body[i].x && this.body[0].y ==this.body[i].y) {
clearInterval(timer);
alert('人才,自己吃自己');
window.location.reload();
}
}
if (this.body[0].x == food.x && this.body[0].y == food.y ) {
this.body.push({x:null,y:null,flag:null});
map.removeChild(food.flag);
food.display();
}
for (var i = 0; i < this.body.length; i++) {
if (this.body[i].flag != null) {
map.removeChild(this.body[i].flag);
}
}
this.display();
}
}
function Food() {
this.display = function () {
var f = document.createElement('div');
this.flag = f;
f.style.width ='10px';
f.style.height = '10px';
f.style.backgroundColor = 'white';
f.style.borderRadius = '50%';
f.style.position = 'absolute';
this.x = Math.floor(Math.random()*80);
this.y= Math.floor(Math.random()*40)
f.style.left=this.x*10+'px';
f.style.top =this.y*10+'px';
map.appendChild(f);
}
}
document.onkeydown = function (e) {
var ev = e || window.event;
switch (ev.keyCode) {
case 38:
if (snake.direction != 'down') { // 不允许返回，向上的时候不能向下
snake.direction = "up";
}
break;
case 40:
if (snake.direction != "up") {
snake.direction = "down";
}
break;
case 37:
if (snake.direction != "right") {
snake.direction = "left";
}
break;
case 39:
if (snake.direction != "left") {
snake.direction = "right";
}
break;
}
}
var snake = new Snake();
var food =new Food();
var btn =document.getElementById('btn');
var btn1 =document.getElementById('btn1');
var timer;
snake.display();
food.display();
btn.onclick = function () {
timer = setInterval('snake.run()',100);
}
btn1.onclick = function () {
clearInterval(timer);
}
</script>
</div>
</body>
</html>