html 贪吃蛇代码
最近在搞自己的网站，维护的时候准备放个贪吃蛇上去，顶一下原有的页面。
这个贪吃蛇有一点毒。原来设定了100级；100级刚开局就挂了。后来改掉了选项菜单，修复了。
还有什么bug,欢迎点击侧边的QQ按钮联系我。
代码部分：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网站维护中</title>
<script language="javascript">
function snake(money,card){
this.x = money;
this.y = card;
}
function n97(){
var initX = 10;
var initY = 10;
var SIZE = 20;
this.nokia6700 = new Array();
this.nokia5230 = new Array();
this.k209 = 0;
this.targetX = 0;
this.targetY = 0;
this.manager = null;
this.setObserver = function(obs){
this.manager = obs;
}
this.init = function(){
this.nokia5230.length = 0;
this.nokia6700.length = 0;
for(i = 0;i <= SIZE + 1; i++ ){
this.nokia5230[i] = new Array();
}
for (i = 0; i <= SIZE + 1; i++) {
this.nokia5230[i][0] = 1;
this.nokia5230[SIZE + 1][i] = 1;
this.nokia5230[0][i] = 1;
this.nokia5230[i][SIZE + 1] = 1;
}
for (i = 5; i <= initX; i++) {
var point = new snake(i, initY);
this.addsnake(point);
}
this.k209 = 3;
this.productFood();
}
this.move = function(){
var head = this.getHead();
var point = new snake(head.x,head.y);
switch (this.k209) {
case 1:
point.x-- ;
break;
case 2:
point.y--;
break;
case 3:
point.x++;
break;
case 4:
point.y++;
break;
}
this.process(point);
}
this.turn = function(code){
var head = this.getHead();
var point = new snake(head.x,head.y);
switch(code - 36){
case 1:
if(this.k209 == 1 || this.k209 == 3)
return;
point.x--;
break;
case 2:
if(this.k209 == 2 || this.k209 == 4)
return;
point.y--;
break;
case 3:
if(this.k209 == 1 || this.k209 == 3)
return;
point.x++;
break;
case 4:
if(this.k209 == 2 || this.k209 == 4)
return;
point.y++;
break;
}
this.k209 = code - 36;
this.process(point);
}
this.process = function(point){
if (this.ifDie(point)) {
alert("你挂了！");
this.manager.stopGame();
return;
}
if (this.eatable(point)) {
this.manager.removesnake(point);
this.addsnake(point);
this.manager.addScore();
this.productFood();
}
else {
this.addsnake(point);
this.delTailsnake();
}
}
this.ifDie = function(point){
return this.nokia5230[point.x][point.y] == 1;
}
this.getHead = function(){
return this.nokia6700[0];
}
this.getTail = function(){
return this.nokia6700[this.nokia6700.length - 1];
}
this.eatable = function(head){
return (head.x == this.targetX && head.y == this.targetY);
}
this.addsnake = function(point){
this.nokia5230[point.x][point.y] = 1;
this.nokia6700.unshift(point);
this.manager.drawsnake(point);
}
this.delTailsnake = function(){
var point = this.nokia6700.pop();
this.nokia5230[point.x][point.y] = 0;
this.manager.removesnake(point);
}
this.productFood = function(){
do {
var x = Math.round(Math.random() * 100 % SIZE);
var y = Math.round(Math.random() * 100 % SIZE);
}
while (this.nokia5230[x][y] == 1)
this.targetX = x;
this.targetY = y;
this.manager.drawFood(x,y);
}
}
function Ga1900(canvasId){
var WIDTH = 20;
var canvas = document.getElementById(canvasId);
var RED = "#FF0000"
var WHITE = "#FFFFFF";
var BLACK = "#000000";
this.cxt = canvas.getContext("2d");
var e398 = new n97();
this.moveHandle = null;
this.gamePanel = document.getElementById("gamePanel");
this.scoreLabel = document.getElementById("score");
this.maxScoreLabel = document.getElementById("highestScore");
this.step = 0;
this.score = 0;
this.maxScore = 0;
if(localStorage.maxScore)
this.maxScore = localStorage.maxScore;
this.maxScoreLabel.innerHTML = this.maxScore;
e398.setObserver(this);
this.startGame = function(step){
this.clear();
e398.init();
this.score = 0;
this.scoreLabel.innerHTML = this.score;
this.gamePanel.onkeydown = onKeyDown;
this.gamePanel.onkeydown = onKeyDown;
this.step = parseInt(step);
this.moveHandle = setInterval(move, 500 - 50 * this.step);
}
var move = function(){
e398.move();
}
this.stopGame = function(){
this.pause();
document.getElementById("control").disabled = true;
localStorage.maxScore = this.maxScore;
}
this.pause = function(){
clearInterval(this.moveHandle);
this.gamePanel.onkeydown = null;
}
this.goon = function(){
this.gamePanel.onkeydown = onKeyDown;
this.moveHandle = setInterval(move, 500 - 50 * this.step);
}
this.addScore = function(){
this.score += this.step;
this.scoreLabel.innerHTML = this.score;
if(this.score > this.maxScore){
this.maxScore = this.score;
this.maxScoreLabel.innerHTML = this.score;
}
}
var onKeyDown = function(e){
if (e.which < 37 || e.which > 40)
return;
e398.turn(e.which);
}
this.removeFood = function(x,y){
this.cxt.fillStyle = WHITE;
this.cxt.fillRect((x - 1)*WIDTH, (y - 1)*WIDTH, WIDTH, WIDTH);
}
this.drawFood = function(x,y){
this.cxt.fillStyle = RED;
this.cxt.fillRect((x - 1)*WIDTH, (y - 1)*WIDTH, WIDTH, WIDTH);
}
this.drawsnake = function(point){
this.cxt.fillStyle = BLACK;
this.cxt.fillRect((point.x-1) * WIDTH, (point.y-1) * WIDTH, WIDTH, WIDTH);
}
this.removesnake = function(point){
this.cxt.fillStyle = WHITE;
this.cxt.fillRect((point.x-1) * WIDTH, (point.y-1) * WIDTH, WIDTH, WIDTH);
}
this.clear = function(){
this.cxt.fillStyle = WHITE;
this.cxt.fillRect(0,0,20*WIDTH,20*WIDTH);
}
}
</script>
</head>
<body>
<div align="center">
<h1>网站正在维护，先玩会贪吃蛇</h1>
<div style="width:550px;margin:0 auto;height:400px;">
<div id="gamePanel" tabindex="0" style="width:400px; float:left;clear:left">
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;" >
您的浏览器不支持canvas，请尝试更换浏览器，建议使用opera浏览本站，你会有更好的体验。
</canvas>
</div>
<div id="scoreboard" style="float:right;">
最高分
<div id="highestScore" style="color:red; font-weight:bold;">
0
</div>
<p></p>
得分
<div id="score" style="font-weight:bold;">
0
</div>
</div>
</div>
<p>
等级: <select id="speed">
<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>
<option>9</option>
</select>
<button id="start" onclick="startGame(this)">开始</button>
<button id="control" onclick="control(this)" disabled="true">暂停</button>
</p>
</div>
<script language="JavaScript">
var gameMrg = new Ga1900("myCanvas");
function startGame(startBtn){
var step = document.getElementById("speed").value;
gameMrg.startGame(step);
document.getElementById("gamePanel").focus();
pause = true;
var btn = document.getElementById("control");
btn.innerHTML = "暂停";
btn.disabled = false;
}
var pause = true;
function control(btn){
if (pause) {
gameMrg.pause();
btn.innerHTML = "继续";
}
else{
gameMrg.goon();
btn.innerHTML = "暂停";
document.getElementById("gamePanel").focus();
}
pause = !pause;
}
</script>
</body>
</html>
贪吃蛇
注意：浏览器必须支持canvas才行。
html 贪吃蛇代码的更多相关文章
- C++控制台贪吃蛇代码
游戏截图: 以下是3个代码文件: Snake_Class.h文件: #ifndef SNAKE #define SNAKE #include<windows.h> #include< ...
- 转载——C++控制台贪吃蛇代码
游戏截图: 以下是3个代码文件: Snake_Class.h文件: 1 #ifndef SNAKE 2 #define SNAKE 3 4 #include<windows.h> 5 #i ...
- 以前写的canvas 小游戏 贪吃蛇代码
效果如图,完成了贪吃蛇的基本的功能 代码地址 :https://github.com/my-new-git-hub/canvasSnake.git 预览地址:https://www.kzc275.to ...
- cocos2d-x学习笔记(贪吃蛇代码)
方向键控制蛇运动:上↑:右→:下↓:左←. 百度网盘链接:https://pan.baidu.com/s/1c1FSXaw 提取密码:u1kr
- 自己用canvas写的贪吃蛇代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 贪吃蛇的java代码分析（三）
代码剖析 在上一篇文章中,我们完成了贪吃蛇部分代码的构造.回头审视我们写的代码与思路,会发现我们遗漏了一个重要的地方,那就是:贪吃蛇的自身移动.想必大家都知道,贪吃蛇自身是会自己移动的,并且会跟随你的 ...
- JavaScript面向对象编程小游戏---贪吃蛇
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. 2 这个demo是采用了 ...
- python贪吃蛇
代码地址如下:http://www.demodashi.com/demo/13335.html 一.先展示python贪吃蛇效果 二.操作说明 按键 功能 UP 向上移动 DOWN 向下移动 LEFT ...
- JavaScript 小游戏 贪吃蛇
贪吃蛇 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...
随机推荐
- URL的转义和解析
在开始python编程之前我们先来看看一个关与url的知识 在url中会有一些特殊字符,如果你写过cgi程序,并且提交一个表单去调用你的cgi,你会很清楚的 像?name=aiqier&age ...
- 2018-8-10-win10-uwp-后台获取资源
title author date CreateTime categories win10 uwp 后台获取资源 lindexi 2018-08-10 19:17:19 +0800 2018-2-13 ...
- H3C HDLC协议使用限制
- H3C NAT Server
- H3C ACL包过滤的局限性
- javaScript 删除事件 弹出确认 取消对话框
javaScript 删除事件 弹出确认 取消对话框 1. <a href="javascript:if(confirm('确实要删除?'))location='http://www. ...
- InetlliJ IDEA的快捷键及各种配置
在IDEA中新建Maven工程,之后再新建一个Maven模块,此时在模块中的src/main/java中右键新建Java文件时,发现只能新建普通文件,不能新建Java类了,怎么回事,和eclipse的 ...
- P1084 骑士的工作
题目描述 你作为一个村的村长,保卫村庄是理所当然的了.今天,村庄里来了一只恶龙,他有n个头,恶龙到处杀人放火.你着急了.不过天无绝人之路,现在来了一个骑士团.里面有m位成员,每个人都可以砍掉一个大小不 ...
- 2019-10-18-WPF-高速书写-StylusPlugIn-原理
title author date CreateTime categories WPF 高速书写 StylusPlugIn 原理 lindexi 2019-10-18 21:23:46 +0800 2 ...
- multipart/form-data与application/octet-stream的区别、application/x-www-form-urlencoded
情景再现: 上传文件到.net(wcf)后台时,总是上传不成功,后台要求Content-Type是application/octet-stream,我使用multipart/form-data方式,c ...